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

Reworked navbar

This commit is contained in:
a-ill 2023-07-28 21:20:07 +03:00
parent 4725d8513b
commit 033e4f5a41
6 changed files with 57 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Server/app/svelte/public/locales/en/navbar-component.json
View File

@ -2,7 +2,7 @@
"orgName": "Libertarian socialists", "orgName": "Libertarian socialists",
"manifesto": "Manifesto", "manifesto": "Manifesto",
"joinUs": "Join us", "joinUs": "Join us",
"aboutUs": "About us", "initiatives": "Initiatives",
"groups": "Groups", "groups": "Groups",
"communes": "Communes", "communes": "Communes",
"cooperatives": "Cooperatives", "cooperatives": "Cooperatives",

2
Server/app/svelte/public/locales/ru/navbar-component.json
View File

@ -2,7 +2,7 @@
"orgName": "Либертарные социалисты", "orgName": "Либертарные социалисты",
"manifesto": "Манифест", "manifesto": "Манифест",
"joinUs": "Присоединяйся", "joinUs": "Присоединяйся",
"aboutUs": "О нас", "initiatives": "Инициативы",
"groups": "Группы", "groups": "Группы",
"communes": "Коммуны", "communes": "Коммуны",
"cooperatives": "Кооперативы", "cooperatives": "Кооперативы",

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

@ -10,7 +10,8 @@
// Main code // Main code
let hambInput let hambInput
let navbar let navbar
let localesDropdown; let localesDropdown
let initiativesDropdown
let loaded = writable(0) let loaded = writable(0)
let content = writable({}) let content = writable({})
let logoText let logoText
@ -33,12 +34,15 @@
} }
} }
function showLocales() { function showDropdown(dropdown) {
if (localesDropdown.style.display=="block") { let state = dropdown.style.display
localesDropdown.style.display = "none" initiativesDropdown.style.display = "none"
localesDropdown.style.display = "none"
if (state=="block") {
dropdown.style.display = "none"
} }
else { else {
localesDropdown.style.display = "block" dropdown.style.display = "block"
} }
} }
@ -75,9 +79,15 @@
} }
} }
function hide(dropdown) {
let callback = () => {
dropdown.style.display = "none"
}
setTimeout(callback,100)
}
onMount(() => { onMount(() => {
fixHeading()
}) })
</script> </script>
@ -85,7 +95,6 @@
<!-- Navigation bar --> <!-- Navigation bar -->
{#key loaded} {#key loaded}
{#if Object.keys($content).length!=0} {#if Object.keys($content).length!=0}
{fixHeading()}{console.log($content)}
<header bind:this={navbar} id="navbar"> <header bind:this={navbar} id="navbar">
<!-- Hamburger icon --> <!-- Hamburger icon -->
<input bind:this={hambInput} type="checkbox" id="side-menu" on:click={changeNavbar}> <input bind:this={hambInput} type="checkbox" id="side-menu" on:click={changeNavbar}>
@ -98,29 +107,22 @@
<!-- Menu --> <!-- Menu -->
<nav id="nav"> <nav id="nav">
<ul id="menu"> <ul id="menu">
<li><a href={"/"+locale+"/manifesto"}>{$content.manifesto}</a></li>
<li><a href={"/"+locale+"/join-us"}>{$content.joinUs}</a></li> <li><a href={"/"+locale+"/join-us"}>{$content.joinUs}</a></li>
<li><a href={"/"+locale+"/manifesto"}>{$content.manifesto}</a></li>
<!-- Options dropdown --> <!-- Options dropdown -->
<!-- A list of links pointing to different pages of the website. Implemented as a div opened on :hover--> <!-- A list of links pointing to different pages of the website. Implemented as a div opened on :hover-->
<li id="options-container"> <li id="options-container">
<button id="options-button">{$content.aboutUs}</button> <button on:click={() => showDropdown(initiativesDropdown)} on:focusout={() => hide(initiativesDropdown)} class="options-button">{$content.initiatives}</button>
<div id="options-dropdown"> <div bind:this={initiativesDropdown} class="options-dropdown">
<ul id="options-list"> <a href={"/"+locale+"/groups"}>{$content.groups}</a>
<li><a href={"/"+locale+"/groups"}>{$content.groups}</a></li> <a href={"/"+locale+"/communes"}>{$content.communes}</a>
<li><a href={"/"+locale+"/communes"}>{$content.communes}</a></li> <a href={"/"+locale+"/cooperatives"}>{$content.cooperatives}</a>
<a href={"/"+locale+"/parties"}>{$content.parties}</a>
<li><a href={"/"+locale+"/cooperatives"}>{$content.cooperatives}</a></li> <a href={"/"+locale+"/partners"}>{$content.partners}</a>
<li><a href={"/"+locale+"/parties"}>{$content.parties}</a></li>
<li><a href={"/"+locale+"/partners"}>{$content.partners}</a></li>
</ul>
</div> </div>
</li> </li>
<li id="locales"> <li id="locales">
<button on:click={showLocales}> <button on:click={() => showDropdown(localesDropdown)} on:focusout={() => hide(localesDropdown)}>
<picture> <picture>
<source srcset="/img/common/globe.webp"> <source srcset="/img/common/globe.webp">
<source srcset="/img/common/globe.png"> <source srcset="/img/common/globe.png">
@ -128,7 +130,7 @@
</picture> </picture>
</button> </button>
</li> </li>
<div bind:this={localesDropdown} id="locales-dropdown"> <div bind:this={localesDropdown} class="options-dropdown">
{#each Object.entries(locales) as [loc,name]} {#each Object.entries(locales) as [loc,name]}
<button on:click={() => changeLocale(loc)}>{name}</button> <button on:click={() => changeLocale(loc)}>{name}</button>
{/each} {/each}
@ -152,8 +154,8 @@
width: min(100%,116rem); width: min(100%,116rem);
z-index: 1000000000; z-index: 1000000000;
height: 5.26rem; height: 5.26rem;
padding-left: 4rem; padding-left: 0rem;
padding-right: 4rem; padding-right: 0rem;
} }
#navbar * { #navbar * {
@ -202,7 +204,7 @@
overflow: hidden; overflow: hidden;
z-index: 0; z-index: 0;
} }
#menu a, #options-button { #menu > li > a, .options-button {
display: block; display: block;
padding: 1.2rem; padding: 1.2rem;
padding-top: 1rem; padding-top: 1rem;
@ -210,11 +212,8 @@
color: black; color: black;
font-size: 1.4rem; font-size: 1.4rem;
} }
#menu a:hover {
background-color: rgb(220, 220, 220);
}
#menu a:active{ #menu > li > a:active{
background-color: #f7aec0; background-color: #f7aec0;
} }
@ -301,37 +300,36 @@
/* Options */ /* Options */
#options-dropdown { .options-dropdown {
position: absolute; position: absolute;
display: none; display: none;
top: 5.6rem;
right: 1.8rem;
border: #404040 solid 0.1rem; border: #404040 solid 0.1rem;
/*padding: 0.5rem;*/
background-color: white; background-color: white;
overflow: auto; z-index: 10;
width: 35%;
} }
#options-list > li a { .options-dropdown button, .options-dropdown a {
padding: 1rem; display: block;
font-size: 1.1rem; font-family: var(--sans-serif,sans-serif);
} font-size: 1.2rem;
#options-list > li:hover {
background-color: rgb(187 53 52 / 96%);
width: 100%; width: 100%;
padding: 1rem;
text-align: left;
} }
#options-list > li:hover > a{ .options-dropdown button:hover, .options-dropdown a:hover {
background-color: rgb(187 53 52 / 96%);
color: white; color: white;
} }
#options-container:hover #options-dropdown { .options-button {
display: block; width: 100%;
text-align: left;
} }
/* Localization */
/*Localization*/
#locales { #locales {
position: relative; position: relative;
@ -354,35 +352,15 @@
margin-left: 1.2rem; margin-left: 1.2rem;
} }
#locales-dropdown { /*
position: absolute; #options-dropdown>:first-child {
display: none;
top: 5.6rem;
right: 1.8rem;
border: #404040 solid 0.1rem;
padding: 1.4rem;
background-color: white;
}
#locales-dropdown button {
display: block;
font-family: var(--sans-serif,sans-serif);
font-size: 1.3rem;
width: 100%;
}
#locales-dropdown button:hover {
color: rgb(127, 127, 127);
}
#locales-dropdown>:first-child {
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
} }
#locales-dropdown>:nth-child(2) { #options-dropdown>:nth-child(2) {
padding-top: 0.5rem; padding-top: 0.5rem;
} }
*/
/* Responsiveness */ /* Responsiveness */
@media only screen and (min-width: 1400px) { @media only screen and (min-width: 1400px) {
@ -414,12 +392,11 @@
float: left; float: left;
} }
#menu a:hover, #options-button:hover { #menu > li > a:hover, .options-button:hover, #navbar-logo-text:hover {
background-color: transparent;
color: rgb(127, 127, 127); color: rgb(127, 127, 127);
} }
#menu a { #menu > li > a, .options-button {
padding: 0.9rem; padding: 0.9rem;
padding-top: 1.9rem; padding-top: 1.9rem;
padding-bottom: 1.9rem; padding-bottom: 1.9rem;
@ -437,10 +414,6 @@
#locales-img { #locales-img {
top: 0.9rem; top: 0.9rem;
} }
#locales-dropdown {
top: 5,7rem;
}
} }
</style> </style>

2
Server/public/js/components/navbar-component.js
View File

File diff suppressed because one or more lines are too long

2
Server/public/locales/en/navbar-component.json
View File

@ -2,7 +2,7 @@
"orgName": "Libertarian socialists", "orgName": "Libertarian socialists",
"manifesto": "Manifesto", "manifesto": "Manifesto",
"joinUs": "Join us", "joinUs": "Join us",
"aboutUs": "About us", "initiatives": "Initiatives",
"groups": "Groups", "groups": "Groups",
"communes": "Communes", "communes": "Communes",
"cooperatives": "Cooperatives", "cooperatives": "Cooperatives",

2
Server/public/locales/ru/navbar-component.json
View File

@ -2,7 +2,7 @@
"orgName": "Либертарные социалисты", "orgName": "Либертарные социалисты",
"manifesto": "Манифест", "manifesto": "Манифест",
"joinUs": "Присоединяйся", "joinUs": "Присоединяйся",
"aboutUs": "О нас", "initiatives": "Инициативы",
"groups": "Группы", "groups": "Группы",
"communes": "Коммуны", "communes": "Коммуны",
"cooperatives": "Кооперативы", "cooperatives": "Кооперативы",