Refactor view

parent 8454c4f5
Pipeline #1471 passed with stage
in 44 seconds
......@@ -147,7 +147,7 @@ a {
cursor: pointer;
}
.colorpicker input[type="radio"][id$="white"] + label > span {
.colorpicker input[type="radio"][value="#fff"] + label > span {
padding: 1em;
border: 2px solid #dde5f1;
}
......
......@@ -36,54 +36,17 @@ html(lang="fr")
h2.title-big
=_('Choisissez la couleur de fond')
.colorpicker
input(type="radio" name="bg-color" value="#f54358" checked)#bg-red
label(for="bg-red")
span(style="background-color: #f54358")
input(type="radio" name="bg-color" value="#ee0088" checked)#bg-pink
label(for="bg-pink")
span(style="background-color: #ee0088")
input(type="radio" name="bg-color" value="#ff9146" checked)#bg-orange
label(for="bg-orange")
span(style="background-color: #ff9146")
input(type="radio" name="bg-color" value="#ffd201" checked)#bg-yellow
label(for="bg-yellow")
span(style="background-color: #ffd201")
input(type="radio" name="bg-color" value="#39d0b7" checked)#bg-teal
label(for="bg-teal")
span(style="background-color: #39d0b7")
input(type="radio" name="bg-color" value="#2f5189" checked)#bg-blue
label(for="bg-blue")
span(style="background-color: #2f5189")
input(type="radio" name="bg-color" value="#000" checked)#bg-black
label(for="bg-black")
span(style="background-color: #000")
each color, i in ["#f54358", "#ee0088", "#ff9146", "#ffd201", "#39d0b7", "#2f5189", "#000"]
input(type="radio" name="bg-color" value=color id="bg-" + i checked=(i === 0))
label(for="bg-" + i)
span(style="background-color: " + color)
h2.title-big
=_('Choisissez la couleur du texte')
.colorpicker
input(type="radio" name="fg-color" value="#f54358" checked)#fg-red
label(for="fg-red")
span(style="background-color: #f54358")
input(type="radio" name="fg-color" value="#ee0088" checked)#fg-pink
label(for="fg-pink")
span(style="background-color: #ee0088")
input(type="radio" name="fg-color" value="#ff9146" checked)#fg-orange
label(for="fg-orange")
span(style="background-color: #ff9146")
input(type="radio" name="fg-color" value="#ffd201" checked)#fg-yellow
label(for="fg-yellow")
span(style="background-color: #ffd201")
input(type="radio" name="fg-color" value="#39d0b7" checked)#fg-teal
label(for="fg-teal")
span(style="background-color: #39d0b7")
input(type="radio" name="fg-color" value="#2f5189" checked)#fg-blue
label(for="fg-blue")
span(style="background-color: #2f5189")
input(type="radio" name="fg-color" value="#000" checked)#fg-black
label(for="fg-black")
span(style="background-color: #000")
input(type="radio" name="fg-color" value="#fff" checked)#fg-white
label(for="fg-white")
span(style="background-color: #fff")
each color, i in ["#f54358", "#ee0088", "#ff9146", "#ffd201", "#39d0b7", "#2f5189", "#000", "#fff"]
input(type="radio" name="fg-color" value=color id="fg-" + i checked=(i === 3))
label(for="fg-" + i)
span(style="background-color: " + color)
.navButtons
a(href="#step2").blue-button
=_('ÉTAPE SUIVANTE')
......@@ -154,78 +117,9 @@ html(lang="fr")
h2
=_('Choisissez votre icône')
.iconpicker
input(type="radio" name="icon" value="1" checked)#radio-icon-1
label(for="radio-icon-1" style="background-position: 0 0")
input(type="radio" name="icon" value="2")#radio-icon-2
label(for="radio-icon-2" style="background-position: 33% 0")
input(type="radio" name="icon" value="3")#radio-icon-3
label(for="radio-icon-3" style="background-position: 67% 0")
input(type="radio" name="icon" value="4")#radio-icon-4
label(for="radio-icon-4" style="background-position: 100% 0")
input(type="radio" name="icon" value="5")#radio-icon-5
label(for="radio-icon-5" style="background-position: 0 12.5%")
input(type="radio" name="icon" value="6")#radio-icon-6
label(for="radio-icon-6" style="background-position: 33% 12.5%")
input(type="radio" name="icon" value="7")#radio-icon-7
label(for="radio-icon-7" style="background-position: 67% 12.5%")
input(type="radio" name="icon" value="8")#radio-icon-8
label(for="radio-icon-8" style="background-position: 100% 12.5%")
input(type="radio" name="icon" value="9")#radio-icon-9
label(for="radio-icon-9" style="background-position: 0 24%")
input(type="radio" name="icon" value="10")#radio-icon-10
label(for="radio-icon-10" style="background-position: 33% 24%")
input(type="radio" name="icon" value="11")#radio-icon-11
label(for="radio-icon-11" style="background-position: 67% 24%")
input(type="radio" name="icon" value="12")#radio-icon-12
label(for="radio-icon-12" style="background-position: 100% 24%")
input(type="radio" name="icon" value="13")#radio-icon-13
label(for="radio-icon-13" style="background-position: 0 37.5%")
input(type="radio" name="icon" value="14")#radio-icon-14
label(for="radio-icon-14" style="background-position: 33% 37.5%")
input(type="radio" name="icon" value="15")#radio-icon-15
label(for="radio-icon-15" style="background-position: 67% 37.5%")
input(type="radio" name="icon" value="16")#radio-icon-16
label(for="radio-icon-16" style="background-position: 100% 37.5%")
input(type="radio" name="icon" value="17")#radio-icon-17
label(for="radio-icon-17" style="background-position: 0 50%")
input(type="radio" name="icon" value="18")#radio-icon-18
label(for="radio-icon-18" style="background-position: 33% 50%")
input(type="radio" name="icon" value="19")#radio-icon-19
label(for="radio-icon-19" style="background-position: 67% 50%")
input(type="radio" name="icon" value="20")#radio-icon-20
label(for="radio-icon-20" style="background-position: 100% 50%")
input(type="radio" name="icon" value="21")#radio-icon-21
label(for="radio-icon-21" style="background-position: 0 61%")
input(type="radio" name="icon" value="22")#radio-icon-22
label(for="radio-icon-22" style="background-position: 33% 61%")
input(type="radio" name="icon" value="23")#radio-icon-23
label(for="radio-icon-23" style="background-position: 67% 61%")
input(type="radio" name="icon" value="24")#radio-icon-24
label(for="radio-icon-24" style="background-position: 100% 61%")
input(type="radio" name="icon" value="25")#radio-icon-25
label(for="radio-icon-25" style="background-position: 0 73%")
input(type="radio" name="icon" value="26")#radio-icon-26
label(for="radio-icon-26" style="background-position: 33% 73%")
input(type="radio" name="icon" value="27")#radio-icon-27
label(for="radio-icon-27" style="background-position: 67% 73%")
input(type="radio" name="icon" value="28")#radio-icon-28
label(for="radio-icon-28" style="background-position: 100% 73%")
input(type="radio" name="icon" value="29")#radio-icon-29
label(for="radio-icon-29" style="background-position: 0 87.5%")
input(type="radio" name="icon" value="30")#radio-icon-30
label(for="radio-icon-30" style="background-position: 33% 87.5%")
input(type="radio" name="icon" value="31")#radio-icon-31
label(for="radio-icon-31" style="background-position: 67% 87.5%")
input(type="radio" name="icon" value="32")#radio-icon-32
label(for="radio-icon-32" style="background-position: 100% 87.5%")
input(type="radio" name="icon" value="33")#radio-icon-33
label(for="radio-icon-33" style="background-position: -1% 100%")
input(type="radio" name="icon" value="34")#radio-icon-34
label(for="radio-icon-34" style="background-position: 32% 100%")
input(type="radio" name="icon" value="35")#radio-icon-35
label(for="radio-icon-35" style="background-position: 67% 100%")
input(type="radio" name="icon" value="36")#radio-icon-36
label(for="radio-icon-36" style="background-position: 100% 100%")
each offset, i in [0, 0, 0, 0, 12.5, 12.5, 12.5, 12.5, 24, 24, 24, 24, 37.5, 37.5, 37.5, 37.5, 50, 50, 50, 50, 61, 61, 61, 61, 73, 73, 73, 73, 87.5, 87.5, 87.5, 87.5, 100, 100, 100, 100]
input(type="radio" id="radio-icon-" + (i + 1) name="icon" value=(i + 1) checked=(i === 0))
label(for="radio-icon-" + (i + 1) style="background-position: " + i % 4 * 33.3 + "% " + offset + "%")
.navButtons
a(href="#step3").white-button
| ‹
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment