keb/ginou
1
0
Fork 0
Code Issues 6 Pull Requests Releases Activity

Mobile setup for "explorer" page on configurer

Browse Source
This commit is contained in:
Théo Marchal
2021-01-30 13:39:18 +01:00
parent 093d451f16
commit b838e78ec4
4 changed files with 524 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
styles/main.css
View File

@ -340,15 +340,15 @@ article.explorer h2 {
cursor:pointer;
}
article.explorer h2 span::before {
content: "▼︎";
display: inline-block;
position: absolute;
article.explorer h2::after {
content:"▼︎";
display:inline-block;
position:absolute;
transition:transform .2s ease;
transform:rotate(-90deg);
}
article.explorer h2.active span::before {
article.explorer h2.active::after {
transform:rotate(0);
}
@ -361,11 +361,11 @@ article.explorer form h3, article.explorer form span {
}
article.explorer form .container {
max-width:80vw;
/*max-width:80vw;*/
margin:auto;
display:flex;
align-self:flex-start;
justify-content:space-evenly;
justify-content:space-around;
flex-wrap:wrap;
}
@ -375,7 +375,12 @@ article.explorer form {
article.explorer form select {
display:block;
margin-right:1rem;
margin-right:0.75rem;
}
/* does not seem to work */
article.explorer form .box {
margin:1rem;
}
article.explorer input[type = submit] {
@ -393,6 +398,40 @@ article.explorer input[type = submit] {
color:white;
}
@media only screen and (max-width:600px) {
article.explorer form .container {
display:block;
}
article.explorer form .container .box span {
display:block;
margin-left:1rem;
font-size:1.05rem;
}
article.explorer form .container h3 {
cursor:pointer;
}
article.explorer form .container h3::after{
content:"▼︎";
display:inline-block;
position:absolute;
transition:transform .2s ease;
transform:rotate(-90deg);
}
article.explorer form .container .box.active h3::after {
transform:rotate(0);
}
}
@media only screen and (max-width:1200px) {
article.explorer form .container {
justify-content:left;
}
}
article.explorer p.no-result {
text-align:center;
font-size:1.2rem;
@ -407,7 +446,7 @@ article.explorer table {
width:100%;
margin-top:1rem;
margin-bottom:1rem;
overflow-x:auto;
overflow-x:scroll;
}
article.explorer table tr:first-child th:first-child {
@ -440,7 +479,7 @@ article.explorer td, article.explorer th {
article.explorer th {
border-top:1px solid #bbb;
background:#dddddd;
background:#ddd;
position:sticky;
top:0;
}