libsoc/site-libsoc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update

Browse Source
This commit is contained in:
a-ill
2023-07-12 21:25:28 +03:00
parent 47c4eab6f7
commit 1a116602bc
35 changed files with 407 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
Server/app/svelte/src/join-us-component.svelte
View File

@@ -7,6 +7,7 @@
import { addMarkersGroups } from '/js/groups.js'
import { addMarkersCoops } from '/js/coops.js'
import { addMarkersCommunities } from '/js/communities.js'
import { addMarkersParties } from '/js/parties.js'
import { loadLocaleContent } from "/js/libraries/serverTools.js"
// Import components
@@ -19,10 +20,12 @@
let contentGroups = writable({})
let contentCommunities = writable({})
let contentCoops = writable({})
let contentParties = writable({})
loadLocaleContent(contentGroups,"groups-component")
loadLocaleContent(contentCommunities,"communities-component")
loadLocaleContent(contentCoops,"cooperatives-component")
loadLocaleContent(contentParties,"parties-component")
let locale = loadLocaleContent(content,"join-us-component",loaded)
@@ -31,6 +34,7 @@
addMarkersGroups(map,$contentGroups)
addMarkersCommunities(map,$contentCommunities)
addMarkersCoops(map,$contentCoops)
addMarkersParties(map,$contentParties)
}
onMount(() => {
@@ -63,8 +67,9 @@
<p>{$content.findOur}</p>
<ol id="entities-list">
<li><a href={"/" + locale + "/groups"}>{$content.group}</a>,</li>
<li><a href={"/" + locale + "/communes"}>{$content.commune}</a> {$content.or}</li>
<li><a href={"/" + locale + "/cooperatives"}>{$content.cooperative}</a></li>
<li><a href={"/" + locale + "/communes"}>{$content.commune}</a></li>
<li><a href={"/" + locale + "/cooperatives"}>{$content.cooperative}</a> {$content.or}</li>
<li><a href={"/" + locale + "/parties"}>{$content.party}</a></li>
</ol>
<p>{$content.nearYou}</p>
</div>
@@ -103,6 +108,9 @@
#entities-list li:nth-of-type(3):before {
background-image: url(https://www.libsoc.org/img/common/markers/marker-blue.png);
}
#entities-list li:nth-of-type(4):before {
background-image: url(https://www.libsoc.org/img/common/markers/marker-gold.png);
}
#entities-list li::marker {
display: inline-block;

19
Server/app/svelte/src/landing-component.svelte
View File

@@ -17,10 +17,10 @@
function changeWidth(locale) {
if (locale=="ru") {
gridWidth = "1.2fr 1.05fr 1fr"
gridWidth = "1fr 1fr"
}
else {
gridWidth = "1.2fr 1.1fr 1fr"
gridWidth = "1fr 1fr"
}
}
@@ -59,6 +59,11 @@
<img id="coops-img" src="/img/common/coops.svg" alt="coops">
<p>{$content.cooperativesText}</p>
</div>
<div>
<h2>{$content.partiesTitle}</h2>
<img id="parties-img" src="/img/common/parties.svg" alt="coops">
<p>{$content.partiesText}</p>
</div>
</div>
</div>
</div>
@@ -72,7 +77,7 @@
text-align: center;
}
#groups-img, #communes-img, #coops-img {
#groups-img, #communes-img, #coops-img, #parties-img {
position: absolute;
left: 50%;
transform: translate(-50%);
@@ -81,6 +86,11 @@
height: 8rem;
}
#coops-img {
margin-top: 0.5rem;
height: 7.5rem;
}
#text-container {
max-width: calc(100vw - 4rem);
margin: auto;
@@ -93,7 +103,7 @@
#container {
margin: auto;
max-width: 1000px;
max-width: 800px;
margin-top: 2rem;
margin-bottom: 5rem;
}
@@ -109,6 +119,7 @@
#container-grid {
display: grid;
grid-template-columns: var(--grid-width);
grid-template-rows: var(--grid-width);
grid-gap: 4rem;
margin-top: 2rem;
}

1
Server/app/svelte/src/navbar/navbar-component.svelte
View File

@@ -76,6 +76,7 @@
<li><a href={"/"+locale+"/groups"}>{$content.groups}</a></li>
<li><a href={"/"+locale+"/communes"}>{$content.communes}</a></li>
<li><a href={"/"+locale+"/cooperatives"}>{$content.cooperatives}</a></li>
<li><a href={"/"+locale+"/parties"}>{$content.parties}</a></li>
<li><a href={"/"+locale+"/partners"}>{$content.partners}</a></li>
<li id="locales">
<button on:click={showLocales}>

172
Server/app/svelte/src/parties-component.svelte Normal file
View File

@@ -0,0 +1,172 @@
<svelte:options tag="parties-component" />
<script>
// Import statements
import { onMount } from 'svelte'
import { writable } from 'svelte/store';
import { parties, addMarkersParties } from '/js/parties.js'
import { loadLocaleContent } from "/js/libraries/serverTools.js"
// Import components
import "/js/components/map-component.js"
// Main code
let loaded
let content = writable({})
let locale = loadLocaleContent(content,"parties-component",loaded)
function mapCallbackParties(createMap,content) {
let map = createMap([22, 0],2)
addMarkersParties(map,content)
}
onMount(() => {
})
</script>
{#key loaded}
{#if Object.keys($content).length!=0}
<div id="container">
<!--<img src="img/crowd.png" id="crowd" alt="crowd">-->
<div id="text-container">
<h1>{$content.heading}</h1>
<img id="party-img" src="/img/common/parties.svg" alt="party">
<p>{$content.p1}</p>
<h3>{$content.subheading1}</h3>
<map-component id="map" callback={(createMap) => mapCallbackParties(createMap,$content)}></map-component>
{#each parties as party}
<div class="location-info">
<div class="img-general-info">
<picture>
<source srcset={"/img/parties/"+party.logo+".webp"}>
<source srcset={"/img/parties/"+party.logo+".jpg"}>
<img class="party-logo" alt="logo">
</picture>
<div>
<p><b>{$content.name}: </b>{party.name}</p>
<p><b>{$content.location}: </b>{$content[party.location[0]]}</p>
<p><b>{$content.members}: </b>{party.members}</p>
<p><b>{$content.link}: </b><a href={party.link} target=;_blank; rel=noreferrer>{party.link}</a></p>
</div>
</div>
<p><b>{$content.description}: </b>{$content[party.description]}</p>
</div>
{/each}
</div>
</div>
{/if}
{/key}
<style>
@import '/css/common.css';
#party-img {
position: absolute;
width: 11.5rem;
left: 50%;
transform: translate(-50%);
z-index: 0;
opacity: 0.2;
}
#text-container>:nth-child(3) {
margin-top: 8rem;
}
h4 {
margin-bottom: 2rem;
}
.location-info {
position: relative;
margin-bottom: 2rem;
}
.location-info p {
margin-bottom: 0;
}
.img-general-info {
display: flex;
align-content: center;
width: 100%;
gap: 1.5rem;
align-items: center;
margin-bottom: 1rem;
}
.img-general-info>:nth-child(2) {
flex:none;
}
.party-logo {
position: relative;
right: 0;
max-height: 7rem;
max-width: 100%;
border-radius: 1rem;
}
a {
color: #DD1C1A;
}
#map {
--height: 30rem;
--width: 100%;
--margin-bottom: 3rem;
}
#text-container {
max-width: calc(100vw - 4rem);
margin: auto;
}
h1 {
margin-bottom: 1rem;
font-size: 2.2rem;
text-align: center;
}
h3 {
margin-bottom: 1rem;
}
#container {
margin: auto;
max-width: 800px;
margin-top: 1rem;
margin-bottom: 4rem;
}
#container>div>p {
margin-bottom: 1rem;
}
#container p {
text-align: justify;
}
@media only screen and (max-width: 500px) {
.img-general-info {
display: flex;
flex-direction: column;
align-content: left;
width: 100%;
gap: 1rem;
align-items: left;
margin-bottom: 0rem;
}
.img-general-info>:nth-child(1) {
width: max-content;
}
.img-general-info>:nth-child(2) {
width: 100%;
}
}
</style>