First implementation of dynamic requests with dummy data

Not yet tested for mobile.
2021-01-24 15:43:02 +01:00
parent 25135304f9
commit 69b18017b0
16 changed files with 1095 additions and 129 deletions
--- a/styles/main.css
+++ b/styles/main.css
@ -320,6 +320,158 @@ article.painting .container .metadata span.content {
 }


+/* Explorer */
+
+article.explorer p {
+    width:55vw;
+    margin:auto;
+    margin-bottom:2rem;
+}
+
+article.explorer h2 {
+    margin:0;
+    cursor:pointer;
+}
+
+article.explorer h2 span::before {
+    content: "▼︎";
+    display: inline-block;
+    position: absolute;
+    transition:transform .2s ease;
+    transform:rotate(-90deg);
+}
+
+article.explorer h2.active span::before {
+    transform:rotate(0);
+}
+
+article.explorer h3 {
+    margin-bottom:0.3rem;
+}
+
+article.explorer form h3, article.explorer form span {
+    display:block;
+}
+
+article.explorer form .container {
+    max-width:80vw;
+    margin:auto;
+    display:flex;
+    align-self:flex-start;
+    justify-content:space-evenly;
+    flex-wrap:nowrap;
+}
+
+article.explorer form {
+    margin-bottom:1rem;
+}
+
+article.explorer form select {
+    display:block;
+    margin-right:1rem;
+}
+
+article.explorer input[type = submit] {
+    display:block;
+    margin:auto;
+    text-align:center;
+    border: none;
+    padding:0.8rem;
+    border-radius:5%;
+    background:#2589BD;
+    text-decoration:none;
+    font-size:1.1rem;
+    cursor:pointer;
+    color:white;
+}
+
+article.explorer p.no-result {
+    text-align:center;
+    font-size:1.2rem;
+    display:none;
+}
+
+article.explorer table {
+    display:none;
+    border-collapse:separate;
+    border-spacing:0;
+    width:100%;
+    margin-top:1rem;
+    margin-bottom:1rem;
+}
+
+article.explorer table tr:first-child th:first-child {
+    border-top-left-radius:6px;
+}
+
+article.explorer table tr:first-child th:last-child {
+    border-top-right-radius:6px;
+}
+
+article.explorer table tr:last-child td:first-child {
+    border-bottom-left-radius:6px;
+}
+
+article.explorer table tr:last-child td:last-child {
+    border-bottom-right-radius:6px;
+}
+
+article.explorer table tr th:first-child,
+article.explorer table tr td:first-child {
+    border-left:1px solid #bbb;
+}
+
+article.explorer td, article.explorer th {
+    border-right:1px solid #bbb;
+    border-bottom:1px solid #bbb;
+    text-align:left;
+    padding:8px;
+}
+
+article.explorer th {
+    border-top:1px solid #bbb;
+    background:#dddddd;
+    position:sticky;
+    top:0;
+}
+
+article.explorer tr td:first-child {
+    width:1%;
+    white-space:nowrap;
+}
+
+article.explorer tr td:nth-child(2) {
+    width:25%;
+    white-space:nowrap;
+}
+
+article.explorer tr td:last-child {
+    font-size:1.5rem;
+    text-align:center;
+    padding:0;
+    width:1%;
+    white-space:nowrap;
+}
+
+article.explorer tr td.help {
+    font-size:1.5rem;
+    text-align:center;
+    padding:0;
+    width:1%;
+    white-space:nowrap;
+}
+
+article.explorer tr:nth-child(2n+3) {
+    background-color:#dddddd;
+}
+
+article.explorer table .photo {
+    width:1%;
+    white-space:nowrap;
+    text-align:center;
+}
+
+
 /* Divers */

 article #stats {
@ -361,7 +513,8 @@ article #stats #stat {
        margin:auto;
        margin-top:3rem;
    }
-}  
+}
+

 /* Informations */