Reworked navbar
This commit is contained in:
a-ill
parent
8722087141
commit
f9b5baae85
|
|
@ -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,7 +2,7 @@
|
||||||
"orgName": "Либертарные социалисты",
|
"orgName": "Либертарные социалисты",
|
||||||
"manifesto": "Манифест",
|
"manifesto": "Манифест",
|
||||||
"joinUs": "Присоединяйся",
|
"joinUs": "Присоединяйся",
|
||||||
"aboutUs": "О нас",
|
"initiatives": "Инициативы",
|
||||||
"groups": "Группы",
|
"groups": "Группы",
|
||||||
"communes": "Коммуны",
|
"communes": "Коммуны",
|
||||||
"cooperatives": "Кооперативы",
|
"cooperatives": "Кооперативы",
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
initiativesDropdown.style.display = "none"
|
||||||
localesDropdown.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>
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -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,7 +2,7 @@
|
||||||
"orgName": "Либертарные социалисты",
|
"orgName": "Либертарные социалисты",
|
||||||
"manifesto": "Манифест",
|
"manifesto": "Манифест",
|
||||||
"joinUs": "Присоединяйся",
|
"joinUs": "Присоединяйся",
|
||||||
"aboutUs": "О нас",
|
"initiatives": "Инициативы",
|
||||||
"groups": "Группы",
|
"groups": "Группы",
|
||||||
"communes": "Коммуны",
|
"communes": "Коммуны",
|
||||||
"cooperatives": "Кооперативы",
|
"cooperatives": "Кооперативы",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue