valentin_le_moign/ou_atterrir_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

menu modes presque ok

Browse Source
This commit is contained in:
Valentin
2023-03-27 13:37:00 +02:00
parent 9c11794aaf
commit 6e4dca0d5a
5 changed files with 153 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
background.js
+56 -2
View File
@@ -28,12 +28,14 @@ grained('#grain-bg', {
let pageAmount = 0;
let currentPage = 1, prevPage;
let currentProfondeur = "atlas";
document.querySelectorAll('.mode').forEach(function(node, index) {
pageAmount++;
node.addEventListener('click', function() {
document.querySelectorAll('.active').forEach(function(el) {
el.classList.remove('active');
el.classList.remove('active');
if (currentProfondeur == "carte") { el.classList.add('collapsed'); }
});
node.classList.toggle('active');
prevPage = currentPage;
@@ -123,4 +125,56 @@ radial-gradient(circle at 93% 95%,
radial-gradient(circle at 73% 10%,
hsl(${couleurs.appoint.h} ${couleurs.appoint.s}% ${couleurs.appoint.l}%) 0%,
rgba(255, 255, 255, 0) 100%)
`;
`;
// menu
function toggleProfondeur(el) {
if (el.classList.contains("selected")) {
return;
} else {
for (let sibling of el.parentNode.children) {
sibling.classList.remove('selected');
}
}
el.classList.add("selected");
if(el.innerHTML == "L'atlas") {
currentProfondeur = "atlas";
document.querySelectorAll('.mode').forEach(function(node) {
if(node.classList.contains("collapsed")) {
node.classList.remove("collapsed");
}
});
} else {
currentProfondeur = "carte";
document.querySelectorAll('.mode').forEach(function(node) {
if(!node.classList.contains("active")) {
node.classList.add("collapsed");
}
});
}
}
// toggle changement de couleur de fond (faire une fonction propr)
// et variable globale du mode dans lequel on est
// loop avec les flèches
function toggleMode(direction) {
let modes = [];
let currentIndex;
document.querySelectorAll('.mode').forEach(function(node, index) {
modes.push(node);
if (node.classList.contains("active")) {
currentIndex = index;
node.classList.remove("active");
if (currentProfondeur == "carte") {
node.classList.add("collapsed");
}
}
});
if (direction == "next") {
modes[currentIndex + 1].classList.add('active');
} else if (direction == "prev") {
modes[currentIndex - 1].classList.add('active');
}
}
index.html
+22 -10
View File
@@ -32,38 +32,50 @@
<div id="buttons_container">
<div class="niveau_profondeur">
<p class="selected">L'atlas</p>
<p>Les cartes</p>
<p class="selected" onclick="toggleProfondeur(this)">L'atlas</p>
<p onclick="toggleProfondeur(this)">Les cartes</p>
</div>
<div class="arrow">
<div class="arrow" onclick="toggleMode('prev')">
<svg data-src="assets/pictos/arrow_back.svg" data-cache="disabled"></svg>
</div>
<!-- svg pictos loadés avec svgloader pour pouvoir les manipuler avec css -->
<div class="mode active">
<svg data-src="assets/pictos/terrain-de-vie.svg" data-cache="disabled"></svg>
<p>Terrain de vie</p>
<div class="mode_container">
<p>Terrain de vie</p>
</div>
</div>
<div class="mode">
<svg data-src="assets/pictos/proximite.svg" data-cache="disabled"></svg>
<p>Proximité</p>
<div class="mode_container">
<p>Proximité</p>
</div>
</div>
<div class="mode">
<svg data-src="assets/pictos/superposition.svg" data-cache="disabled"></svg>
<p>Superposition</p>
<div class="mode_container">
<p>Superposition</p>
</div>
</div>
<div class="mode">
<svg data-src="assets/pictos/puissance-d-agir.svg" data-cache="disabled"></svg>
<p>Puissance d'agir</p>
<div class="mode_container">
<p>Puissance d'agir</p>
</div>
</div>
<div class="mode">
<svg data-src="assets/pictos/action-2.svg" data-cache="disabled"></svg>
<p>Action</p>
<div class="mode_container">
<p>Action</p>
</div>
</div>
<div class="mode">
<svg data-src="assets/pictos/doleance.svg" data-cache="disabled"></svg>
<p>Doléancer</p>
<div class="mode_container">
<p>Doléancer</p>
</div>
</div>
<div class="arrow">
<div class="arrow" onclick="toggleMode('next')">
<svg data-src="assets/pictos/arrow_forward.svg" data-cache="disabled"></svg>
</div>
styles.css
+36 -9
View File
@@ -148,24 +148,21 @@ body {
#buttons_container .mode {
display: flex;
align-items: center;
justify-content: center;
justify-content: space-around;
background-color: white;
margin: 0;
margin-right: 14px;
padding: 7px 15px;
padding-left: 10px;
padding: 10px 12px;
border-radius: 50px;
cursor: pointer;
border: solid 0.8px rgb(110, 110, 110);
color: rgba(0, 0, 0, 0.5);
transition: border 0.1s ease-out, color 0.1s ease-out;
transition: border 0.1s ease-out, color 0.1s ease-out, padding 0.2s ease-out;
font-weight: 300;
font-size: 1rem;
}
#buttons_container .mode svg {
width: 28px;
height: auto;
margin-right: 10px;
height: 28px;
}
#buttons_container .mode svg .thick {
transition: stroke-width 0.2s ease-out, fill 0.2s ease-out, stroke 0.2s ease-out;
@@ -180,11 +177,22 @@ body {
#buttons_container .mode svg .circle-fill {
fill: rgb(110, 110, 110);
}
#buttons_container .mode p {
#buttons_container .mode .mode_container {
overflow: hidden;
width: auto;
transition: max-width 0.4s ease-out, margin-left 0.4s ease-out, margin-right 0.4s ease-out;
max-width: 0px;
margin-left: 10px;
margin-right: 5px;
max-width: 200px;
}
#buttons_container .mode .mode_container p {
white-space: nowrap;
height: fit-content;
margin-bottom: 3px;
}
#buttons_container .mode.active {
padding: 10px 12px !important;
font-weight: 400;
border: solid 1.2px rgb(0, 0, 0);
color: rgb(0, 0, 0);
@@ -200,7 +208,13 @@ body {
#buttons_container .mode.active svg .circle-fill {
fill: rgb(0, 0, 0);
}
#buttons_container .mode.active .mode_container {
max-width: 200px !important;
margin-left: 10px !important;
margin-right: 5px !important;
}
#buttons_container .mode:hover {
padding: 10px 12px !important;
color: rgb(50, 50, 50);
border-color: rgb(50, 50, 50);
}
@@ -210,6 +224,19 @@ body {
#buttons_container .mode:hover svg .circle-fill {
fill: rgb(50, 50, 50);
}
#buttons_container .mode:hover .mode_container {
max-width: 200px !important;
margin-left: 10px !important;
margin-right: 5px !important;
}
#buttons_container .mode.collapsed {
padding: 10px 7px;
}
#buttons_container .mode.collapsed .mode_container {
max-width: 0px;
margin-left: 0px;
margin-right: 0px;
}
#global_nav {
position: fixed;
@@ -221,7 +248,7 @@ body {
#global_nav h1 {
font-family: "Ortica";
font-size: 1.7em;
margin-bottom: 10px;
margin-bottom: 17px;
margin-left: 5px;
}
#global_nav #menu {
styles.css.map
+1 -1
View File
@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAOA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAMJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAMJ;EACI,SA7Ca;EA8Cb;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AACA;EACI;;AAIR;EACI;AACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;;;AAMR;EACI;EACA;EACA;;;AAGJ;EACI;;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA,QA/Ha;EAgIb;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGR;EACI;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI,MA7JI;;AA+JR;EACI,MA/JC;;AAkKT;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AACA;EACI;EACA;EACA,QA9LA;;AAgMJ;EACI;EACA;EACA,QAnMA;;AAqMJ;EACE,MAtME;;AAyMR;EACI;EACA;;AAGR;EACI;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACE;;AAGN;EACI,OA9NK;EA+NL,cA/NK;;AAgOL;EACI,QAjOC;;AAmOL;EACI,MApOC;;;AAyOb;EACI;EACA;EACA;EACA,QAlPa;EAmPb;;AACA;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OAtQA;EAuQA;;AAEJ;EACI,OAzQH;;AA2QD;EACI;;AAEJ;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA,MAvRJ;EAwRI;;AAEJ;EACI,MA1RP;;AA8RL;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAGR;EACI","file":"styles.css"}
{"version":3,"sourceRoot":"","sources":["styles.scss"],"names":[],"mappings":";AAOA;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAMJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAMJ;EACI,SA7Ca;EA8Cb;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AACA;EACI;;AAIR;EACI;AACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;;;AAMR;EACI;EACA;EACA;;;AAGJ;EACI;;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA,QA/Ha;EAgIb;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAGR;EACI;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI,MA7JI;;AA+JR;EACI,MA/JC;;AAkKT;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;AACA;EACI;EACA;EACA,QA3LA;;AA6LJ;EACI;EACA;EACA,QAhMA;;AAkMJ;EACE,MAnME;;AAsMR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;;AAIZ;EACI;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACE;;AAEF;EACI;EACA;EACA;;AAGR;EACI;EACA,OA5OK;EA6OL,cA7OK;;AA8OL;EACI,QA/OC;;AAiPL;EACI,MAlPC;;AAoPL;EACI;EACA;EACA;;AAGR;EACI;;AACA;EACI;EACA;EACA;;;AAKZ;EACI;EACA;EACA;EACA,QA7Qa;EA8Qb;;AACA;EACI;EACA;EACA;EACA;;AAEJ;EACI;;AACA;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OAjSA;EAkSA;;AAEJ;EACI,OApSH;;AAsSD;EACI;;AAEJ;EACI;EACA;EACA;;AACA;EACI;EACA;EACA;EACA,MAlTJ;EAmTI;;AAEJ;EACI,MArTP;;AAyTL;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAGR;EACI","file":"styles.css"}
styles.scss
+38 -11
View File
@@ -172,23 +172,20 @@ body {
.mode {
display: flex;
align-items: center;
justify-content: center;
justify-content: space-around;
background-color: white;
margin: 0;
margin-right: 14px;
padding: 7px 15px;
padding-left: 10px;
padding: 10px 12px;
border-radius: 50px;
cursor: pointer;
border: solid 0.8px $grey_inactive;
color: rgba(0, 0, 0, 0.5);
transition: border 0.1s ease-out, color 0.1s ease-out;
transition: border 0.1s ease-out, color 0.1s ease-out, padding 0.2s ease-out;
font-weight: 300;
font-size: 1rem;
svg {
width: 28px;
height: auto;
margin-right: 10px;
height: 28px;
.thick {
transition: stroke-width 0.2s ease-out, fill 0.2s ease-out, stroke 0.2s ease-out;
stroke-width: 0.8;
@@ -203,12 +200,23 @@ body {
fill: $grey_inactive;
}
}
p {
height: fit-content;
margin-bottom: 3px;
.mode_container {
overflow: hidden;
width: auto;
transition: max-width 0.4s ease-out, margin-left 0.4s ease-out, margin-right 0.4s ease-out;
max-width: 0px;
margin-left: 10px;
margin-right: 5px;
max-width: 200px;
p {
white-space: nowrap;
height: fit-content;
margin-bottom: 3px;
}
}
}
.mode.active {
padding: 10px 12px !important;
font-weight: 400;
border: solid $buttons_border_width rgba(0, 0, 0, 1);
color: rgba(0, 0, 0, 1);
@@ -223,8 +231,14 @@ body {
svg .circle-fill {
fill: rgba(0, 0, 0, 1);
}
.mode_container {
max-width: 200px !important;
margin-left: 10px !important;
margin-right: 5px !important;
}
}
.mode:hover {
padding: 10px 12px !important;
color: $grey_hover;
border-color: $grey_hover;
svg .thick, svg .thin {
@@ -233,6 +247,19 @@ body {
svg .circle-fill {
fill: $grey_hover;
}
.mode_container {
max-width: 200px !important;
margin-left: 10px !important;
margin-right: 5px !important;
}
}
.mode.collapsed {
padding: 10px 7px;
.mode_container {
max-width: 0px;
margin-left: 0px;
margin-right: 0px;
}
}
}
@@ -245,7 +272,7 @@ body {
h1 {
font-family: 'Ortica';
font-size: 1.7em;
margin-bottom: 10px;
margin-bottom: 17px;
margin-left: 5px;
}
#menu {