Liness/framadate-responsive
5
0
Fork 0
forked from tykayn/funky-framadate-front
Code Pull Requests Activity

fix(#16): amélioration de l'affichage de la page dates

Browse Source
This commit is contained in:
newick 2018-11-20 10:48:59 +01:00
parent d48879c8f6
commit d4ad832004
2 changed files with 73 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
public/dates.html
View File

@ -13,6 +13,9 @@
<link crossorigin="anonymous" rel="stylesheet" href="https://rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap-reboot.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
@ -27,13 +30,24 @@
</section>
<section>
<h1>Mes dates</h1><p>(au format JJ / MM / AAAA)</p>
<h1>Mes dates <span>(au format JJ / MM / AAAA)</span></h1>
<ul>
<li><label>Date<input type="date" name="date-1"><button>delete</button></li>
<li><label>Date<input type="date" format="" name="date-2"><button>delete</button></li>
</ul>
<button>Ajouter une plage de date</button>
<li>
<i class="far fa-calendar-alt"></i>
<label>Date</label>
<input type="date" name="date-1">
<button class="btn-no-style"><i class="fas fa-trash-alt"></i></button>
</li>
<li class="item-disabled">
<i class="far fa-calendar-alt"></i>
<label>Date</label>
<input type="date" name="date-2" disabled>
<button class="btn-no-style"><i class="fas fa-trash-alt"></i></button>
</li>
</ul>
<button>Ajouter une plage de date</button>
</section>
<nav>

54
public/style.css
View File

@ -12,6 +12,11 @@ h1 {
font-size: 20px;
}
h1 span {
font-size: 60%;
font-weight: 400;
}
/* Formulaires */
.btn,
button,
@ -27,11 +32,37 @@ button,
background-color: white;
}
.btn-no-style {
display: inline-block;
width: auto;
margin: 0;
padding: 0;
border: 0;
color: inherit;
}
section button {
width: 100%;
color: #4a4a4a;
border-color: #4a4a4a;
}
label,
input {
display: inline;
}
/* Listes */
ul {
padding-left: 0;
list-style-type: none;
}
li + li {
margin-top: 20px;
}
/* Apparence */
section:not(:last-of-type) {
margin-bottom: 30px;
@ -43,6 +74,17 @@ input[type="text"], input[type="email"] {
line-height:60%;
}
input[type="date"] {
width: 50%;
padding: 5px;
border: 1px solid #9b9b9b;
border-radius: 4px;
}
input[type="date"]:disabled {
opacity: 0.7;
}
.toggle-field {
color: blue;
cursor: pointer;
@ -67,3 +109,15 @@ input[type="text"], input[type="email"] {
position: absolute;
z-index: 10;
}
i {
color: #9b9b9b;
}
.item-disabled {
opacity: 0.7;
}
section + nav {
margin-top: 100px;
}