Skip to content

GitLab

Verified Commit 2fb40b38 authored by Thibaut Broggi's avatar Thibaut Broggi
Browse files

Simplify colorpickers code and make them responsive

parent ed9731a2
Hide whitespace changes
Inline Side-by-side
static/style.css
View file @ 2fb40b38
...@@ -64,17 +64,17 @@ a { ...@@ -64,17 +64,17 @@ a {
} }
div#inputs { div#inputs {
width: 30vw;
height: 100%;
background-color: white; background-color: white;
} }
.colorpicker input[type="radio"] { .colorpicker {
display: none; display: flex;
flex-direction: row;
flex-wrap: wrap;
} }
.colorpicker > div > div { .colorpicker input[type="radio"] {
margin-bottom: 1em; display: none;
} }
.colorpicker input[type="radio"] + label { .colorpicker input[type="radio"] + label {
......
views/index.ejs
View file @ 2fb40b38
...@@ -29,104 +29,70 @@ ...@@ -29,104 +29,70 @@
</div> </div>
<div id="step1"> <div id="step1">
<h2>Choisissez la couleur de fond</h2> <h2>Choisissez la couleur de fond</h2>
<div class="colorpicker container"> <div class="colorpicker">
<div class="row"> <input type="radio" name="bg-color" value="#f54358" id="bg-red" checked/>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3"> <label for="bg-red">
<input type="radio" name="bg-color" value="#f54358" id="bg-red" checked/> <span style="background-color: #f54358"></span>
<label for="bg-red"> </label>
<span style="background-color: #f54358"></span> <input type="radio" name="bg-color" value="#ee0088" id="bg-pink" />
</label> <label for="bg-pink">
</div> <span style="background-color: #ee0088"></span>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3"> </label>
<input type="radio" name="bg-color" value="#ee0088" id="bg-pink" /> <input type="radio" name="bg-color" value="#ff9146" id="bg-orange" />
<label for="bg-pink"> <label for="bg-orange">
<span style="background-color: #ee0088"></span> <span style="background-color: #ff9146"></span>
</label> </label>
</div> <input type="radio" name="bg-color" value="#ffd201" id="bg-yellow" />
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3"> <label for="bg-yellow">
<input type="radio" name="bg-color" value="#ff9146" id="bg-orange" /> <span style="background-color: #ffd201"></span>
<label for="bg-orange"> </label>
<span style="background-color: #ff9146"></span> <input type="radio" name="bg-color" value="#39d0b7" id="bg-teal" />
</label> <label for="bg-teal">
</div> <span style="background-color: #39d0b7"></span>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3"> </label>
<input type="radio" name="bg-color" value="#ffd201" id="bg-yellow" /> <input type="radio" name="bg-color" value="#2f5189" id="bg-blue" />
<label for="bg-yellow"> <label for="bg-blue">
<span style="background-color: #ffd201"></span> <span style="background-color: #2f5189"></span>
</label> </label>
</div> <input type="radio" name="bg-color" value="#000" id="bg-black" />
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3"> <label for="bg-black">
<input type="radio" name="bg-color" value="#39d0b7" id="bg-teal" /> <span style="background-color: #000"></span>
<label for="bg-teal"> </label>
<span style="background-color: #39d0b7"></span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="bg-color" value="#2f5189" id="bg-blue" />
<label for="bg-blue">
<span style="background-color: #2f5189"></span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="bg-color" value="#000" id="bg-black" />
<label for="bg-black">
<span style="background-color: #000"></span>
</label>
</div>
</div>
</div> </div>
<h2>Choisissez la couleur du texte</h2> <h2>Choisissez la couleur du texte</h2>
<div class="colorpicker container"> <div class="colorpicker">
<div class="row"> <input type="radio" name="fg-color" value="#f54358" id="fg-red" />
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3"> <label for="fg-red">
<input type="radio" name="fg-color" value="#f54358" id="fg-red" /> <span style="background-color: #f54358"></span>
<label for="fg-red"> </label>
<span style="background-color: #f54358"></span> <input type="radio" name="fg-color" value="#ee0088" id="fg-pink" />
</label> <label for="fg-pink">
</div> <span style="background-color: #ee0088"></span>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3"> </label>
<input type="radio" name="fg-color" value="#ee0088" id="fg-pink" /> <input type="radio" name="fg-color" value="#ff9146" id="fg-orange" />
<label for="fg-pink"> <label for="fg-orange">
<span style="background-color: #ee0088"></span> <span style="background-color: #ff9146"></span>
</label> </label>
</div> <input type="radio" name="fg-color" value="#ffd201" id="fg-yellow" checked/>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3"> <label for="fg-yellow">
<input type="radio" name="fg-color" value="#ff9146" id="fg-orange" /> <span style="background-color: #ffd201"></span>
<label for="fg-orange"> </label>
<span style="background-color: #ff9146"></span> <input type="radio" name="fg-color" value="#39d0b7" id="fg-teal" />
</label> <label for="fg-teal">
</div> <span style="background-color: #39d0b7"></span>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3"> </label>
<input type="radio" name="fg-color" value="#ffd201" id="fg-yellow" checked/> <input type="radio" name="fg-color" value="#2f5189" id="fg-blue" />
<label for="fg-yellow"> <label for="fg-blue">
<span style="background-color: #ffd201"></span> <span style="background-color: #2f5189"></span>
</label> </label>
</div> <input type="radio" name="fg-color" value="#000" id="fg-black" />
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3"> <label for="fg-black">
<input type="radio" name="fg-color" value="#39d0b7" id="fg-teal" /> <span style="background-color: #000"></span>
<label for="fg-teal"> </label>
<span style="background-color: #39d0b7"></span> <input type="radio" name="fg-color" value="#fff" id="fg-white" />
</label> <label for="fg-white">
</div> <span style="background-color: #fff"></span>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3"> </label>
<input type="radio" name="fg-color" value="#2f5189" id="fg-blue" />
<label for="fg-blue">
<span style="background-color: #2f5189"></span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="fg-color" value="#000" id="fg-black" />
<label for="fg-black">
<span style="background-color: #000"></span>
</label>
</div>
<div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<input type="radio" name="fg-color" value="#fff" id="fg-white" />
<label for="fg-white">
<span style="background-color: #fff"></span>
</label>
</div>
</div>
</div> </div>
<div class="navButtons"> <div class="navButtons">
<a href="#step2" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a> <a href="#step2" class="nextButton">ÉTAPE SUIVANTE &rsaquo;</a>
......
Supports Markdown
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