From 6c9922a87fb72b958b78014c45b6cd1efafdd30e Mon Sep 17 00:00:00 2001
From: hellekin <hellekin@cepheide.org>
Date: Thu, 12 Nov 2020 23:39:13 +0100
Subject: Add Stimulus Map and Taxonomy (WIP)

This commit add StimulusJS interaction for the map
and taxonomy, as well as styling.

It provides preliminary work to hook up live data on the map
from the taxonomy.
---
 app/assets/stylesheets/taxonomies.scss | 79 ++++++++++++++++++----------------
 1 file changed, 43 insertions(+), 36 deletions(-)

(limited to 'app/assets/stylesheets/taxonomies.scss')

diff --git a/app/assets/stylesheets/taxonomies.scss b/app/assets/stylesheets/taxonomies.scss
index 446fd20..4e227da 100644
--- a/app/assets/stylesheets/taxonomies.scss
+++ b/app/assets/stylesheets/taxonomies.scss
@@ -4,39 +4,45 @@
  * SPDX-License-Identifier: LAL-1.3
  */
 
-body>aside {
-    width: auto;
-
-    span[data-target="taxonomy.filter"] {
-        z-index: 990;
-        background: var(--icon-menu-on) top left/32px no-repeat;
-        width: 32px;
-        height: 32px;
-        position: absolute;
-        top: 6.1rem;
-        left: 10px;
-
-        &.off {
-            background-image: var(--icon-menu-off);
-        }
-        &.on {
-            background-image: var(--icon-menu-on);
-        }
-    }
+[data-controller="taxonomy"] {
+    height: 100%;
+    overflow: hidden auto;
+    scrollbar-color: var(--incommon-clear85) var(--incommon-blue);
+    scrollbar-width: thin;
 
     nav {
-        z-index: 900;
-        position: fixed;
-        top: 5.5rem;
+        position: relative;
         bottom: 0;
         margin: 0;
         padding: 0;
-        background-color: var(--incommon-blue);
-        display: block;
-        border-top-right-radius: 1rem;
-        width: 20rem;
         height: calc(100% - 7.5rem);
-        padding-top: 48px;
+        padding-top: 32px;
+        max-width: 35rem;
+        width: 89vw;
+
+        display: none;
+    }
+    &.on {
+        nav {
+            display: block;
+        }
+    }
+}
+
+button[data-action="taxonomy#toggle"] {
+    position: absolute;
+    left: 0.7rem;
+    display: block;
+    cursor: pointer;
+    padding: 16px;
+    color: transparent;
+    background: transparent var(--icon-menu-off) top left/32px no-repeat;
+    border: none;
+    text-align: center;
+    z-index: 1002;
+
+    &.on {
+        background-image: var(--icon-menu-on);
     }
 }
 
@@ -49,21 +55,22 @@ body>aside {
 
         li {
             padding: 0.5rem 1rem;
+            font-weight: normal;
+            text-align: left;
+            z-index: 1001;
         }
 
         ol {
             display: none;
         }
-        ol.active {
-            font-weight: bold;
+    }
+    .active {
+        font-weight: bold;
+        ol {
+            display: block;
+        }
+        li.active {
             text-align: right;
-            li {
-                display: initial;
-                &.active {
-                    font-weight: bold;
-                    text-align: right;
-                }
-            }
         }
     }
 
-- 
cgit v1.2.3