Implement compact view.

Shinmera · Jun 5, 2019 · 840b4a0 · 840b4a0
1 parent 6c525d8
commit 840b4a0
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 15 deletions.
diff --git a/index.html b/index.html
diff --git a/style.css b/style.css
diff --git a/style.lass b/style.lass
@@ -1,31 +1,41 @@
 (html
  :font-family sans-serif
- (body
-  :margin 1em auto
-  :max-width 1024px))
+ (body :margin 0
+       :overflow-y scroll))
 (a :text-decoration none)
 (a[href] :color (hex 0088EE))
+((:and a :hover) :text-decoration underline)
 (main
- ("#hide-unmaintained" :display none)
- ("#hide-unmaintained:checked+header label[for=hide-unmaintained]"
+ :margin 1em auto
+ :max-width 1024px
+ (>input[type=checkbox] :display none)
+ ("#hide-unmaintained:checked~header label[for=hide-unmaintained]"
   (.fa-eye :display block)
   (.fa-eye-slash :display none))
  ((:or "#hide-unmaintained:checked~.libraries .support.unmaintained"
        "#hide-unmaintained:checked~header .support.unmaintained")
   :display none)
+ ("#hide-descriptions:checked~header label[for=hide-descriptions]"
+  (.fa-bars :display none)
+  (.fa-th-list :display block))
+ ((:or "#hide-descriptions:checked~.libraries .description"
+       "#hide-descriptions:checked~.libraries .notes")
+  :display none)
  (nav
   :display flex
   :align-items center
   (input.filter
-   :width 100%
+   :flex-grow 1
    :font-size 2em
    :padding 0.2em)
-  (label[for=hide-unmaintained]
+  (label
    :user-select none
    :font-size 2em
    :margin 0 0.2em
    (.fa-eye :display none)
-   (.fa-eye-slash :display block)))
+   (.fa-eye-slash :display block)
+   (.fa-bars :display block)
+   (.fa-th-list :display none)))
  ((:or ul.libraries ul.support-listing)
   :list-style none
   :margin 0 :padding 0)

diff --git a/template.ctml b/template.ctml
@@ -9,12 +9,17 @@
   <body>
     <main>
       <input type="checkbox" id="hide-unmaintained" checked />
+      <input type="checkbox" id="hide-descriptions" />
       <header>
         <nav>
           <input type="text" class="filter" placeholder="Find..." autofocus />
           <label for="hide-unmaintained">
-            <i class="fas fa-eye" title="Show unmaintained implementations"></i>
-            <i class="fas fa-eye-slash" title="Hide unmaintained implementations"></i>
+            <i class="fas fa-fw fa-eye" title="Show unmaintained implementations"></i>
+            <i class="fas fa-fw fa-eye-slash" title="Hide unmaintained implementations"></i>
+          </label>
+          <label for="hide-descriptions">
+            <i class="fas fa-fw fa-bars" title="Show hide library details"></i>
+            <i class="fas fa-fw fa-th-list" title="Show library details"></i>
           </label>
         </nav>
         <ul class="support-listing header" iterate="implementations">
@@ -48,10 +53,10 @@
           </article>
         </li>
       </ul>
+      <footer>
+        Made by <a href="https://shinmera.com">Nicolas Hafner</a> and <a href="https://github.com/shinmera/portability">contributors</a>.
+      </footer>
     </main>
-    <footer>
-      Made by <a href="https://shinmera.com">Nicolas Hafner</a> and <a href="https://github.com/shinmera/portability">contributors</a>.
-    </footer>
     <script type="text/javascript" src="search.js"></script>
   </body>
 </html>