From 20dd80f27d28bb800fff380730608a62931712af Mon Sep 17 00:00:00 2001
From: Henrique Dias <hacdias@gmail.com>
Date: Mon, 10 Jul 2017 14:02:21 +0100
Subject: [PATCH] breadcrumbs

Former-commit-id: 556acb1ac0d096aa33bf46f3e0dca675068786e1 [formerly 3833d6cb8ce0899a5481d31ad10908018cc0eaff] [formerly 9e0113c0015a86e16e17b01da1987d2e78e4b69f [formerly 0f4f172a1bb6f6a5efc941b5b55d0565b89ead7e]]
Former-commit-id: 2e705bf3f132891868db6bdd8e345038fb908bff [formerly fdac82955e78d63979b067fd6412503fd25e21a7]
Former-commit-id: c1eb0b82f599512fff8a5b8dd686ace303cc49b9
---
 assets/src/components/Files.vue | 18 ++++++++++++++++++
 assets/src/css/base.css         |  9 +++++----
 assets/src/css/listing.css      |  4 ++--
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/assets/src/components/Files.vue b/assets/src/components/Files.vue
index 9b2f8a9f..c5d72c07 100644
--- a/assets/src/components/Files.vue
+++ b/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)
diff --git a/assets/src/css/base.css b/assets/src/css/base.css
index dddcdaf2..5aa1da46 100644
--- a/assets/src/css/base.css
+++ b/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
 }
diff --git a/assets/src/css/listing.css b/assets/src/css/listing.css
index c9feffe2..d13e3b65 100644
--- a/assets/src/css/listing.css
+++ b/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;