breadcrumbs

assets/src/components/Files.vue

@@ -88,6 +88,15 @@ export default {
       }
 
       breadcrumbs.shift()
+
+      if (breadcrumbs.length > 3) {
+        while (breadcrumbs.length !== 4) {
+          breadcrumbs.shift()
+        }
+
+        breadcrumbs[0].name = '...'
+      }
+
       return breadcrumbs
     }
   },
@@ -107,6 +116,15 @@ export default {
   },
   mounted () {
     window.addEventListener('keydown', this.keyEvent)
+    window.addEventListener('scroll', event => {
+      let top = 112 - window.scrollY
+
+      if (top < 64) {
+        top = 64
+      }
+
+      document.querySelector('#listing.list .item.header').style.top = top + 'px'
+    })
   },
   beforeDestroy () {
     window.removeEventListener('keydown', this.keyEvent)

assets/src/css/base.css

@@ -117,6 +117,11 @@ main {
   width: calc(100% - 19em);
 }
 
+#breadcrumbs {
+  height: 3em;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
 #breadcrumbs span,
 #breadcrumbs {
   display: flex;
@@ -124,10 +129,6 @@ main {
   color: #6f6f6f;
 }
 
-#breadcrumbs .chevron {
-
-}
-
 #breadcrumbs a {
   color: inherit
 }

assets/src/css/listing.css

@@ -24,7 +24,7 @@
   display: flex;
   flex-wrap: nowrap;
   color: #6f6f6f;
-  transition: .1s ease all;
+  transition: .1s ease background, .1s ease opacity;
   align-items: center;
   cursor: pointer;
 }
@@ -161,7 +161,7 @@
   background: #f8f8f8;
   position: fixed;
   width: calc(100% - 19em);
-  top: 4em;
+  top: 7em;
   right: 1em;
   z-index: 999;
   padding: .85em;