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-14 22:27:11 +03:00
parent d498ddb77f
commit 0355030b4f
46 changed files with 244 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Server/app/svelte/src/communes-component.svelte
View File

@@ -32,7 +32,7 @@
<div id="container">
<!--<img src="img/crowd.png" id="crowd" alt="crowd">-->
<div id="text-container">
<h1>{$content.heading}</h1>
<h1>{$content.communes}</h1>
<img id="commune-img" src="/img/common/commune.svg" alt="commune">
<p>{$content.p1}</p>
<h3>{$content.subheading1}</h3>

14
Server/app/svelte/src/components/map-component.svelte
View File

@@ -8,6 +8,7 @@
// Export statements
export let callback = null
export let colors = null
// Main code
let mapContainer
@@ -21,14 +22,20 @@
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
minNativeZoom: 2,
minZoom: 2,
maxNativeZoom: 16,
maxZoom: 16,
maxNativeZoom: 14,
maxZoom: 14,
}).addTo(map);
return map
}
onMount(() => {
callback(createMap)
if (colors!=null) {
let els = mapContainer.getElementsByClassName("leaflet-control-layers-overlays")[0].children
for (let i=0;i<els.length;i++) {
els[i].children[0].children[0].style.accentColor = colors[i]
}
}
})
</script>
@@ -41,7 +48,8 @@
#map {
height: var(--height);
width: var(--width,100%);
margin-bottom: var(--margin-bottom,0)
margin-top: var(--margin-top,0);
margin-bottom: var(--margin-bottom,0);
}
</style>

4
Server/app/svelte/src/cooperatives-component.svelte
View File

@@ -31,7 +31,7 @@
{#if $loaded==2}
<div id="container">
<div id="text-container">
<h1>{$content.heading}</h1>
<h1>{$content.cooperatives}</h1>
<img id="coops-img" src="/img/common/coops.svg" alt="coops">
<p>{$content.p1}</p>
<h3>{$content.subheading1}</h3>
@@ -113,7 +113,7 @@
.location-info {
position: relative;
margin-bottom: 1rem;
margin-bottom: 2rem;
}
.location-info p {

2
Server/app/svelte/src/footer/footer-component.svelte
View File

@@ -37,7 +37,7 @@
</g>
</svg>
</button>
<p id="footer-copyright">Licensed under a Creative Commons <a href="https://creativecommons.org/licenses/by/4.0/legalcode " target="_blank" rel=noreferrer >CC BY 4.0 license.</a></p>
<p id="footer-copyright">Licensed under a Creative Commons <a href="https://creativecommons.org/licenses/by/4.0/legalcode " target="_blank" rel=noreferrer >CC BY 4.0 license</a></p>
</div>
</footer>
{/if}

2
Server/app/svelte/src/groups-component.svelte
View File

@@ -32,7 +32,7 @@
<div id="container">
<!--<img src="img/crowd.png" id="crowd" alt="crowd">-->
<div id="text-container">
<h1>{$content.heading}</h1>
<h1>{$content.groups}</h1>
<img id="groups-img" src="/img/common/groups.svg" alt="groups">
<p>{$content.p1}</p>
<h3>{$content.subheading1}</h3>

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

@@ -4,10 +4,10 @@
// Import statements
import { onMount } from 'svelte'
import { writable } from 'svelte/store';
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 { addMarkersGroups, groupsMarkersLayer } from '/js/groups.js'
import { addMarkersCoops, coopsMarkersLayer } from '/js/coops.js'
import { addMarkersCommunes, communesMarkersLayer } from '/js/communes.js'
import { addMarkersParties, partiesMarkersLayer } from '/js/parties.js'
import { loadLocaleContent } from "/js/libraries/serverTools.js"
// Import components
@@ -18,7 +18,7 @@
let content = writable({})
loadLocaleContent(content,"groups-component",loaded)
loadLocaleContent(content,"communities-component",loaded)
loadLocaleContent(content,"communes-component",loaded)
loadLocaleContent(content,"cooperatives-component",loaded)
loadLocaleContent(content,"parties-component",loaded)
loadLocaleContent(content,"countries",loaded)
@@ -27,9 +27,17 @@
function mapCallback(createMap,content) {
let map = createMap([22, 0],2)
addMarkersGroups(map,content)
addMarkersCommunities(map,content)
addMarkersCommunes(map,content)
addMarkersCoops(map,content)
addMarkersParties(map,content)
let overlayMaps = {
"Groups": groupsMarkersLayer,
"Communes": communesMarkersLayer,
"Coops": coopsMarkersLayer,
"Parties": partiesMarkersLayer,
}
L.control.layers(null, overlayMaps).addTo(map)
}
onMount(() => {

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

@@ -3,11 +3,15 @@
<script>
// Import statements
import { onMount } from 'svelte'
import { loadLocaleContent } from "/js/libraries/serverTools.js"
import { writable } from 'svelte/store';
import { addMarkersGroups, groupsMarkersLayer } from '/js/groups.js'
import { addMarkersCoops, coopsMarkersLayer } from '/js/coops.js'
import { addMarkersCommunes, communesMarkersLayer } from '/js/communes.js'
import { addMarkersParties, partiesMarkersLayer } from '/js/parties.js'
import { loadLocaleContent } from "/js/libraries/serverTools.js"
// Import components
import "/js/components/map-component.js"
// Main code
let grid
@@ -24,17 +28,37 @@
}
}
loadLocaleContent(content,"groups-component",loaded)
loadLocaleContent(content,"communes-component",loaded)
loadLocaleContent(content,"cooperatives-component",loaded)
loadLocaleContent(content,"parties-component",loaded)
loadLocaleContent(content,"countries",loaded)
let locale = loadLocaleContent(content,"landing-component",loaded,changeWidth)
changeWidth(locale)
function mapCallback(createMap,content) {
let map = createMap([22, 0],2)
addMarkersGroups(map,content)
addMarkersCommunes(map,content)
addMarkersCoops(map,content)
addMarkersParties(map,content)
let overlayMaps = {}
overlayMaps[content.groups] = groupsMarkersLayer
overlayMaps[content.communes] = communesMarkersLayer
overlayMaps[content.cooperatives] = coopsMarkersLayer
overlayMaps[content.parties] = partiesMarkersLayer
L.control.layers(null, overlayMaps).addTo(map)
}
onMount(() => {
})
</script>
{#key $loaded}
{#if $loaded==2}
{#if $loaded==6}
<div id="container">
<picture>
<source srcset="/img/crowd.webp">
@@ -46,26 +70,33 @@
<p>{$content.top}</p>
<div bind:this={grid} id="container-grid" style="--grid-width: {gridWidth}">
<div>
<h2>{$content.groupsTitle}</h2>
<a href={"/" + locale + "/groups"}><h2>{$content.groupsTitle}</h2></a>
<img id="groups-img" src="/img/common/groups.svg" alt="groups">
<p>{$content.groupsText}</p>
</div>
<div>
<h2>{$content.communesTitle}</h2>
<a href={"/" + locale + "/communes"}><h2>{$content.communesTitle}</h2></a>
<img id="communes-img" src="/img/common/commune.svg" alt="communes">
<p>{$content.communesText}</p>
</div>
<div>
<h2>{$content.cooperativesTitle}</h2>
<a href={"/" + locale + "/coops"}><h2>{$content.cooperativesTitle}</h2></a>
<img id="coops-img" src="/img/common/coops.svg" alt="coops">
<p>{$content.cooperativesText}</p>
</div>
<div>
<h2>{$content.partiesTitle}</h2>
<a href={"/" + locale + "/parties"}><h2>{$content.partiesTitle}</h2></a>
<img id="parties-img" src="/img/common/parties.svg" alt="coops">
<p>{$content.partiesText}</p>
</div>
</div>
<h1>{$content.findUs}</h1>
<map-component id="map" callback={(createMap) => mapCallback(createMap,$content)} colors={["#23AC20","#CA2437","#217BC9","#FFD326"]}></map-component>
<h1>{$content.whatNow}</h1>
<div id="action-container">
<a class="link-button" href={"/" + locale + "/join-us"}>{$content.joinUs}</a>
<a class="link-button" href="https://discord.gg/xAPZmyr8B6" target="_blank" rel=noreferrer >{$content.talkWithUs}</a>
</div>
</div>
</div>
{/if}
@@ -74,7 +105,38 @@
<style>
@import '/css/common.css';
#container-grid > div > h2 {
#action-container {
display: flex;
justify-content: space-between;
margin: auto;
margin-top: 2rem;
max-width: 34rem;
}
.link-button {
display: inline-block;
font-size: 1.6rem;
font-family: var(--sans-serif,sans-serif);
width: 14rem;
line-height: 4rem;
background: #cb1816;
color: white;
text-align: center;
}
#map {
--margin-top: 1rem;
--height: 30rem;
--width: 100%;
--margin-bottom: 3rem;
}
h1 {
font-size: 2rem;
text-align: center;
}
#container-grid > div > a > h2 {
text-align: center;
}
@@ -124,6 +186,7 @@
grid-gap: 4rem;
row-gap: 3rem;
margin-top: 2rem;
margin-bottom: 3rem;
}
#container-grid > div {
@@ -138,10 +201,21 @@
@media only screen and (max-width: 1060px) {
#container-grid {
display: grid;
grid-template-columns: 1fr;
grid-gap: 2rem;
display: flex;
flex-direction: column;
gap: 2rem;
}
#action-container {
flex-direction: column;
align-items: center;
gap: 2.5rem;
}
#container-grid >:nth-child(2) {
height: calc(100% - 2rem);
}
}
</style>

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

@@ -13,6 +13,7 @@
let localesDropdown
let loaded = writable(0)
let content = writable({})
let logoText
let locale = loadLocaleContent(content,"navbar-component",loaded)
@@ -50,6 +51,31 @@
location.href = loc
}
function fixHeading() {
if (locale=="ru") {
let func = () => {
if (logoText==undefined) {
setTimeout(func,100)
}
else {
if (window.innerWidth < 400 && logoText.style.lineHeight!="100%") {
logoText.style.lineHeight = "120%"
logoText.style.top = "1rem"
logoText.style.width = "16rem"
}
else if (window.innerWidth > 400 && logoText.style.lineHeight!="400%") {
logoText.style.lineHeight = "400%"
logoText.style.top = "0rem"
logoText.style.width = "auto"
}
}
}
func()
addEventListener("resize", func)
}
}
onMount(() => {
})
@@ -59,6 +85,7 @@
<!-- Navigation bar -->
{#key loaded}
{#if Object.keys($content).length!=0}
{fixHeading()}
<header bind:this={navbar} id="navbar">
<!-- Hamburger icon -->
<input bind:this={hambInput} type="checkbox" id="side-menu" on:click={changeNavbar}>
@@ -66,7 +93,7 @@
<!-- Logo -->
<a id=logo-container href={"/" + locale + "/"}>
<img src="/img/common/flag.png" id="navbar-logo" alt="logo">
<span id="navbar-logo-text">{$content.orgName}</span>
<span bind:this={logoText} id="navbar-logo-text" >{@html $content.orgName}</span>
</a>
<!-- Menu -->
<nav id="nav">
@@ -139,11 +166,9 @@
#navbar-logo-text {
position: relative;
width: auto;
word-wrap: normal;
height: 100%;
line-height: 400%;
white-space: nowrap;
text-align: center;
font-size: 1.4rem;
color: #292222;
font-family: var(--sans-serif, sans-serif);

2
Server/app/svelte/src/parties-component.svelte
View File

@@ -32,7 +32,7 @@
<div id="container">
<!--<img src="img/crowd.png" id="crowd" alt="crowd">-->
<div id="text-container">
<h1>{$content.heading}</h1>
<h1>{$content.parties}</h1>
<img id="party-img" src="/img/common/parties.svg" alt="party">
<p>{$content.p1}</p>
<h3>{$content.subheading1}</h3>