fix(layout): improve layout for smaller screens

- Shrink side panel
- Collapse category nav and add tooltip to folder icon
- Hide date and modification date columns in document list
- Properly organize all SCSS files
- Automatically hide side panel when no document is selected

addon/components/category-nav.hbs

@@ -1,12 +1,12 @@
-<nav class="uk-background-muted uk-border-right">
+<nav class="uk-background-muted uk-border-right side-nav">
   <div class="uk-padding-small uk-width-1 uk-text-bold uk-border-bottom">
     <div class="uk-text-center" data-test-nav-title>
       <span class="category-header">
         {{t "alexandria.category-nav.categories"}}
       </span>
     </div>
   </div>
-  <ul class="uk-nav uk-width-medium uk-margin-top">
+  <ul class="uk-nav uk-width-medium uk-margin-top category-nav">
     <CategoryNav::Category
       @category={{
         hash name=(t "alexandria.category-nav.all-files") color="#e3e3e3"

addon/components/category-nav/category.hbs

@@ -21,6 +21,7 @@
             @fixedWidth={{true}}
             data-test-icon
             {{set-style color=@category.color}}
+            {{uk-tooltip @category.name}}
           />
         {{else}}
           <FaIcon
@@ -29,6 +30,7 @@
             @fixedWidth={{true}}
             data-test-icon
             {{set-style color=@category.color}}
+            {{uk-tooltip @category.name}}
           />
         {{/if}}
       </div>

addon/components/documents-side-panel.hbs

@@ -1,6 +1,6 @@
 <div
   class="uk-background-muted uk-border-left uk-width-large uk-flex document-details
-    {{unless this.sidePanel.open 'closed'}}"
+    {{if (or (not @selectedDocuments.length) (not this.sidePanel.open)) 'closed'}}"
   data-test-document-side-panel
   ...attributes
 >

addon/components/single-document-details.hbs

@@ -253,7 +253,7 @@
         {{~t "alexandria.document-details.version-history"~}}
       </a>
       <div class="uk-accordion-content">
-        <ul class="uk-list uk-list-divider">
+        <ul class="uk-list uk-list-divider version-history">
           {{#each (filter-by "variant" "original" @document.files) as |file|}}
             <li data-test-file class="uk-flex">
               <span class="uk-margin-right">

app/styles/_responsive.scss

@@ -0,0 +1,53 @@
+.alexandria-container {
+  container: alexandria / inline-size;
+}
+
+@container alexandria (max-width: 1200px) {
+  .document-details {
+    width: 300px !important;
+
+    > div {
+      min-width: 300px !important;
+    }
+  }
+}
+
+@container alexandria (max-width: 1100px) {
+  .side-nav > div:first-child {
+    font-size: 0;
+  }
+
+  .category-nav {
+    width: 60px;
+  }
+
+  .category-nav__category div > div > :not(:first-child) {
+    display: none;
+  }
+
+  .category-nav__category
+    > ul
+    > .category-nav__category
+    div
+    > div
+    > div:first-child {
+    margin-left: 0 !important;
+  }
+
+  table.document-list > thead > tr > th:nth-child(4),
+  table.document-list > thead > tr > th:nth-child(5),
+  table.document-list > tbody > tr > td:nth-child(4),
+  table.document-list > tbody > tr > td:nth-child(5) {
+    display: none;
+  }
+
+  ul.version-history > li {
+    > span:nth-child(1) {
+      flex: 1;
+    }
+
+    > span:nth-child(2) {
+      display: none;
+    }
+  }
+}

app/styles/components/category-nav/_category.scss → app/styles/components/_category-nav.scss

@@ -2,6 +2,10 @@
   background: $background-default-background;
 }
 
+.category-header {
+  line-height: 40px;
+}
+
 .uk-nav .category-nav__category {
   &--dragover {
     outline: 1px solid $alert-primary-color;

app/styles/components/_document-details.scss

@@ -1,3 +1,7 @@
+.cursor-pointer {
+  cursor: pointer;
+}
+
 .document-details {
   transition: width $animation-duration;
 

app/styles/components/_document-list.scss

@@ -11,3 +11,18 @@
 .list-marks svg {
   min-width: 1.25em;
 }
+
+.no-select {
+  -webkit-touch-callout: none; /* iOS Safari */ /* Safari */ /* Konqueror HTML */ /* Old versions of Firefox */ /* Internet Explorer/Edge */
+  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
+}
+
+.document-list {
+  tr {
+    cursor: pointer;
+  }
+
+  tr.document-list-item--selected {
+    background: #ffd;
+  }
+}

app/styles/components/_tags.scss

@@ -0,0 +1,40 @@
+.tag {
+  padding: 0.2em 0.6em;
+  margin: 0.2em;
+  border-radius: 10px;
+  display: inline-flex;
+  color: $global-color;
+  border: 1px solid $global-muted-color;
+  background-color: white;
+  align-items: center;
+  cursor: pointer;
+
+  svg {
+    margin: 0.2rem;
+    height: $global-small-font-size;
+  }
+
+  &--active {
+    color: white;
+    border-color: $global-primary-background;
+    background-color: $global-primary-background;
+  }
+
+  &:hover {
+    text-decoration: none;
+    color: $global-color;
+    box-shadow: $tag-hover-shadow;
+  }
+
+  &--active:hover {
+    color: white;
+  }
+
+  .uk-close {
+    margin-left: 5px;
+
+    > svg {
+      width: 0.75rem;
+    }
+  }
+}

app/styles/ember-alexandria.scss

@@ -1,82 +1,21 @@
+// 3rd party
 @import "ember-uikit/variables-theme";
-@import "custom-uikit-rules";
 @import "ember-uikit";
-@import "skeleton-loading";
 @import "flatpickr/dist/flatpickr";
 @import "flatpickr/dist/themes/airbnb";
 
+// custom variables
 $tag-hover-shadow: 0 2px 8px rgba(0 0 0 / 20%);
 
-// Components
-@import "components/category-nav/category";
+// customization
+@import "custom-uikit-rules";
+@import "responsive";
+
+// components
+@import "components/category-nav";
 @import "components/document-card";
-@import "components/drop";
 @import "components/document-details";
 @import "components/document-grid";
 @import "components/document-list";
-
-// * DOCUMENT LIST VIEW
-.cursor-pointer {
-  cursor: pointer;
-}
-
-.document-list tr {
-  cursor: pointer;
-}
-
-.uk-table tbody tr.document-list-item--selected {
-  background: #ffd;
-}
-
-// * DOCUMENT GRID VIEW
-.no-select {
-  -webkit-touch-callout: none; /* iOS Safari */ /* Safari */ /* Konqueror HTML */ /* Old versions of Firefox */ /* Internet Explorer/Edge */
-  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
-}
-
-// * DOCUMENT DETAIL PANEL
-.category-header {
-  line-height: 40px;
-}
-
-// tag-manager, tag-filter
-.tag {
-  padding: 0.2em 0.6em;
-  margin: 0.2em;
-  border-radius: 10px;
-  display: inline-flex;
-  color: $global-color;
-  border: 1px solid $global-muted-color;
-  background-color: white;
-  align-items: center;
-  cursor: pointer;
-
-  svg {
-    margin: 0.2rem;
-    height: $global-small-font-size;
-  }
-
-  &--active {
-    color: white;
-    border-color: $global-primary-background;
-    background-color: $global-primary-background;
-  }
-
-  &:hover {
-    text-decoration: none;
-    color: $global-color;
-    box-shadow: $tag-hover-shadow;
-  }
-
-  &--active:hover {
-    color: white;
-  }
-
-  .uk-close {
-    margin-left: 5px;
-
-    > svg {
-      width: 0.75rem;
-    }
-  }
-}
+@import "components/drop";
+@import "components/skeleton";