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

menus responsive (de sm desktop à large desktop)

Browse Source
This commit is contained in:
Valentin
2023-03-28 14:57:57 +02:00
parent 40c1d8402e
commit b250d9d0cb
6 changed files with 358 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/pictos/action-3.svg
+108
View File
@@ -0,0 +1,108 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="35px"
height="35px"
viewBox="0 0 35 35"
xmlns="http://www.w3.org/2000/svg">
<g id="picto">
<circle
class="circle-fill"
fill="black"
cx="17.5"
cy="17.5"
r="2.5" />
<line
class="thin"
x1="17.5"
y1="11"
x2="17.5"
y2="24" />
<line
class="thin"
x1="17.5"
y1="11"
x2="17.5"
y2="24"
transform="rotate(45, 17.5, 17.5)" />
<line
class="thin"
x1="17.5"
y1="11"
x2="17.5"
y2="24"
transform="rotate(90, 17.5, 17.5)" />
<line
class="thin"
x1="17.5"
y1="11"
x2="17.5"
y2="24"
transform="rotate(135, 17.5, 17.5)" />
<line
class="thick"
x1="15"
y1="17.5"
x2="20"
y2="17.5"
transform-origin="center"
transform="translate(-15 0)" />
<line
class="thick"
x1="15"
y1="17.5"
x2="20"
y2="17.5"
transform-origin="center"
transform="rotate(45) translate(-15 0)" />
<line
class="thick"
x1="15"
y1="17.5"
x2="20"
y2="17.5"
transform-origin="center"
transform="rotate(90) translate(-15 0)" />
<line
class="thick"
x1="15"
y1="17.5"
x2="20"
y2="17.5"
transform-origin="center"
transform="rotate(135) translate(-15 0)" />
<line
class="thick"
x1="15"
y1="17.5"
x2="20"
y2="17.5"
transform-origin="center"
transform="rotate(180) translate(-15 0)" />
<line
class="thick"
x1="15"
y1="17.5"
x2="20"
y2="17.5"
transform-origin="center"
transform="rotate(225) translate(-15 0)" />
<line
class="thick"
x1="15"
y1="17.5"
x2="20"
y2="17.5"
transform-origin="center"
transform="rotate(270) translate(-15 0)" />
<line
class="thick"
x1="15"
y1="17.5"
x2="20"
y2="17.5"
transform-origin="center"
transform="rotate(315) translate(-15 0)" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

assets/pictos/action-4.svg
+102
View File
@@ -0,0 +1,102 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="35px"
height="35px"
viewBox="0 0 35 35"
xmlns="http://www.w3.org/2000/svg">
<g id="picto">
<line
class="thin"
x1="17.5"
y1="10"
x2="17.5"
y2="25" />
<line
class="thin"
x1="17.5"
y1="10"
x2="17.5"
y2="25"
transform="rotate(45, 17.5, 17.5)" />
<line
class="thin"
x1="17.5"
y1="10"
x2="17.5"
y2="25"
transform="rotate(90, 17.5, 17.5)" />
<line
class="thin"
x1="17.5"
y1="10"
x2="17.5"
y2="25"
transform="rotate(135, 17.5, 17.5)" />
<circle
class="circle-fill"
fill="black"
cx="17.5"
cy="17.5"
r="2.5"
transform-origin="center"
transform="translate(-15 0)" />
<circle
class="circle-fill"
fill="black"
cx="17.5"
cy="17.5"
r="2.5"
transform-origin="center"
transform="rotate(45) translate(-15 0)" />
<circle
class="circle-fill"
fill="black"
cx="17.5"
cy="17.5"
r="2.5"
transform-origin="center"
transform="rotate(90) translate(-15 0)" />
<circle
class="circle-fill"
fill="black"
cx="17.5"
cy="17.5"
r="2.5"
transform-origin="center"
transform="rotate(135) translate(-15 0)" />
<circle
class="circle-fill"
fill="black"
cx="17.5"
cy="17.5"
r="2.5"
transform-origin="center"
transform="rotate(180) translate(-15 0)" />
<circle
class="circle-fill"
fill="black"
cx="17.5"
cy="17.5"
r="2.5"
transform-origin="center"
transform="rotate(225) translate(-15 0)" />
<circle
class="circle-fill"
fill="black"
cx="17.5"
cy="17.5"
r="2.5"
transform-origin="center"
transform="rotate(270) translate(-15 0)" />
<circle
class="circle-fill"
fill="black"
cx="17.5"
cy="17.5"
r="2.5"
transform-origin="center"
transform="rotate(315) translate(-15 0)" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

assets/pictos/action-5.svg
+81
View File
@@ -0,0 +1,81 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="35px"
height="35px"
viewBox="0 0 35 35"
xmlns="http://www.w3.org/2000/svg">
<g id="picto">
<circle
class="circle-fill"
fill="black"
cx="17.5"
cy="17.5"
r="2.5" />
<line
class="thick"
x1="15"
y1="17.5"
x2="20"
y2="17.5"
transform-origin="center"
transform="translate(-15 0)" />
<line
class="thick"
x1="15"
y1="17.5"
x2="20"
y2="17.5"
transform-origin="center"
transform="rotate(45) translate(-15 0)" />
<line
class="thick"
x1="15"
y1="17.5"
x2="20"
y2="17.5"
transform-origin="center"
transform="rotate(90) translate(-15 0)" />
<line
class="thick"
x1="15"
y1="17.5"
x2="20"
y2="17.5"
transform-origin="center"
transform="rotate(135) translate(-15 0)" />
<line
class="thick"
x1="15"
y1="17.5"
x2="20"
y2="17.5"
transform-origin="center"
transform="rotate(180) translate(-15 0)" />
<line
class="thick"
x1="15"
y1="17.5"
x2="20"
y2="17.5"
transform-origin="center"
transform="rotate(225) translate(-15 0)" />
<line
class="thick"
x1="15"
y1="17.5"
x2="20"
y2="17.5"
transform-origin="center"
transform="rotate(270) translate(-15 0)" />
<line
class="thick"
x1="15"
y1="17.5"
x2="20"
y2="17.5"
transform-origin="center"
transform="rotate(315) translate(-15 0)" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

assets/pictos/action-6.svg
+64
View File
@@ -0,0 +1,64 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="35px"
height="35px"
viewBox="0 0 35 35"
xmlns="http://www.w3.org/2000/svg">
<g id="picto">
<circle
class="circle-fill"
fill="black"
cx="17.5"
cy="17.5"
r="3.5" />
<circle
class="circle-fill"
fill="black"
cx="17.5"
cy="17.5"
r="2"
transform-origin="center"
transform="translate(0 -12)" />
<circle
class="circle-fill"
fill="black"
cx="17.5"
cy="17.5"
r="2"
transform-origin="center"
transform="translate(0 12)" />
<circle
class="circle-fill"
fill="black"
cx="17.5"
cy="17.5"
r="2"
transform-origin="center"
transform="translate(-12 0)" />
<circle
class="circle-fill"
fill="black"
cx="17.5"
cy="17.5"
r="2"
transform-origin="center"
transform="translate(12 0)" />
<line
class="thin"
x1="3"
y1="17.5"
x2="32"
y2="17.5"
transform-origin="center"
transform="rotate(45)" />
<line
class="thin"
x1="3"
y1="17.5"
x2="32"
y2="17.5"
transform-origin="center"
transform="rotate(135)" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

background.js
+2 -1
View File
@@ -33,6 +33,7 @@ document.querySelectorAll('.mode').forEach(function(node, index) {
// pb si on clique plusieurs fois d'affilé, revient pas sur les bonnes couleurs
// le passage entre toutes les couleurs quand le diffAmount est élevé n'est pas bien
// -> préférer ajouter un rectangle de la bonne couleur et lui augmenter l'opacité
// -> ou peut-être changer le fond en css ?
function changeColors(diffAmount) {
let originColor = colors.bg.h,
@@ -110,7 +111,7 @@ function toggleMode(direction) {
}
// DEUXIEME TEST DE COULEURS
// COULEURS DE FOND
// basé sur https://codepen.io/ThreePixDroid/pen/MWeomWp
// ajouter un grain fixe : cf
index.html
+1 -1
View File
@@ -61,7 +61,7 @@
</div>
</div>
<div class="mode">
<svg data-src="assets/pictos/action-2.svg" data-cache="disabled"></svg>
<svg data-src="assets/pictos/action-6.svg" data-cache="disabled"></svg>
<div class="mode_container">
<p>Action</p>
</div>