breadcrumbs

Former-commit-id: 556acb1ac0d096aa33bf46f3e0dca675068786e1 [formerly 3833d6cb8ce0899a5481d31ad10908018cc0eaff] [formerly 9e0113c0015a86e16e17b01da1987d2e78e4b69f [formerly 0f4f172a1b]]
Former-commit-id: 2e705bf3f132891868db6bdd8e345038fb908bff [formerly fdac82955e78d63979b067fd6412503fd25e21a7]
Former-commit-id: c1eb0b82f599512fff8a5b8dd686ace303cc49b9

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;