Added ability to toggle the list view (vercel#276)

barinali · leo · commit a5255c8acb2b · 2017-10-16T10:56:59.000+02:00
diff --git a/assets/styles.css b/assets/styles.css
@@ -10,6 +10,25 @@ main {
   max-width: 920px;
 }
 
+header {
+  display: flex;
+  justify-content: space-between;
+}
+
+#toggle {
+  display: none;
+  cursor: pointer;
+}
+
+#toggle:before {
+  display: inline-block;
+  content: url("data:image/svg+xml; utf8, <svg height='24px' version='1.1' viewBox='0 0 24 24' width='24px' xmlns='http://www.w3.org/2000/svg'><g fill='none' fill-rule='evenodd' stroke='none' stroke-width='1'><g transform='translate(-431.000000, -479.000000)'><g transform='translate(215.000000, 119.000000)'/><path d='M432,480 L432,486 L438,486 L438,480 L432,480 Z M440,480 L440,486 L446,486 L446,480 L440,480 Z M448,480 L448,486 L454,486 L454,480 L448,480 Z M449,481 L449,485 L453,485 L453,481 L449,481 Z M441,481 L441,485 L445,485 L445,481 L441,481 Z M433,481 L433,485 L437,485 L437,481 L433,481 Z M432,488 L432,494 L438,494 L438,488 L432,488 Z M440,488 L440,494 L446,494 L446,488 L440,488 Z M448,488 L448,494 L454,494 L454,488 L448,488 Z M449,489 L449,493 L453,493 L453,489 L449,489 Z M441,489 L441,493 L445,493 L445,489 L441,489 Z M433,489 L433,493 L437,493 L437,489 L433,489 Z M432,496 L432,502 L438,502 L438,496 L432,496 Z M440,496 L440,502 L446,502 L446,496 L440,496 Z M448,496 L448,502 L454,502 L454,496 L448,496 Z M449,497 L449,501 L453,501 L453,497 L449,497 Z M441,497 L441,501 L445,501 L445,497 L441,497 Z M433,497 L433,501 L437,501 L437,497 L433,497 Z' fill='#000000'/></g></g></svg>");
+}
+
+#toggle.single-column:before {
+  content: url("data:image/svg+xml; utf8, <svg height='24px' viewBox='0 0 24 24' width='24px' xmlns='http://www.w3.org/2000/svg'><g fill='none' fill-rule='evenodd' id='miu' stroke='none' stroke-width='1'><g transform='translate(-359.000000, -479.000000)'><g transform='translate(215.000000, 119.000000)'/><path d='M360.577138,485 C360.258394,485 360,485.221932 360,485.5 C360,485.776142 360.262396,486 360.577138,486 L381.422862,486 C381.741606,486 382,485.778068 382,485.5 C382,485.223858 381.737604,485 381.422862,485 L360.577138,485 L360.577138,485 Z M360.577138,490 C360.258394,490 360,490.221932 360,490.5 C360,490.776142 360.262396,491 360.577138,491 L381.422862,491 C381.741606,491 382,490.778068 382,490.5 C382,490.223858 381.737604,490 381.422862,490 L360.577138,490 L360.577138,490 Z M360.577138,495 C360.258394,495 360,495.221932 360,495.5 C360,495.776142 360.262396,496 360.577138,496 L381.422862,496 C381.741606,496 382,495.778068 382,495.5 C382,495.223858 381.737604,495 381.422862,495 L360.577138,495 L360.577138,495 Z' fill='#000000'/></g></g></svg>");
+}
+
 a {
   color: #1A00F2;
   text-decoration: none;
@@ -47,6 +66,10 @@ ul {
   padding: 20px 0 0 0;
 }
 
+ul.single-column {
+  flex-direction: column;
+}
+
 ul li {
   list-style: none;
   padding: 10px 0;
@@ -94,6 +117,10 @@ ul a[class='']::before {
 }
 
 @media (min-width: 768px) {
+  #toggle {
+    display: inline-block;
+  }
+
   ul {
     display: flex;
     flex-wrap: wrap;
@@ -103,6 +130,10 @@ ul a[class='']::before {
     width: 230px;
     padding-right: 20px;
   }
+
+  ul.single-column li {
+    width: auto;
+  }
 }
 
 @media (min-width: 992px) {
diff --git a/views/index.hbs b/views/index.hbs
@@ -11,15 +11,19 @@
 
   <body>
     <main>
-      <h1>
-        <i>Index of&nbsp;</i>
+      <header>
+        <h1>
+          <i>Index of&nbsp;</i>
 
-        {{#each paths}}
-          <a href="/{{url}}">{{name}}</a>
-        {{/each}}
-      </h1>
+          {{#each paths}}
+            <a href="/{{url}}">{{name}}</a>
+          {{/each}}
+        </h1>
+
+        <a class="single-column" id="toggle" title="click to toggle the view"></a>
+      </header>
 
-      <ul>
+      <ul id="files">
         {{#each files}}
           <li>
             <a href="/{{relative}}" title="{{title}}" class="{{ext}}">{{base}}</a>
@@ -28,5 +32,14 @@
         {{/each}}
       </ul>
     </main>
+
+    <script type="text/javascript">
+      (function() {
+        toggle.addEventListener('click', function() {
+          files.classList.toggle('single-column');
+          toggle.classList.toggle('single-column');
+        });
+      })();
+    </script>
   </body>
 </html>
