Fix: various styling fixes (#212)

* fix: ellipsis on overflowing list items * fix: fixed login page logo styling * fix: added overflow hidden to content header title and subtitle * fix: fixed scrolling * chore: fixed lint issues Co-authored-by: Wouter Janssens <wouter@digita.ai>
netwerk-digitaal-erfgoed · May 20, 2021 · 58746ae · 58746ae
1 parent 3d84952
commit 58746ae
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 15 deletions.
diff --git a/packages/nde-erfgoed-components/lib/header/content-header.component.ts b/packages/nde-erfgoed-components/lib/header/content-header.component.ts
@@ -26,7 +26,7 @@ export class ContentHeaderComponent extends LitElement {
         <slot name="icon"></slot>
       </div>
 
-      <div class="content">      
+      <div class="content">
         <slot name="title"></slot>
         <slot name="subtitle"></slot>
       </div>
@@ -84,12 +84,14 @@ export class ContentHeaderComponent extends LitElement {
           margin: 0 var(--gap-normal);
         }
         .header .content slot[name="title"]::slotted(*) {
+          overflow: hidden;
           font-weight: var(--font-weight-bold);
           font-size: var(--font-size-normal);
           height: var(--gap-normal);
           line-height: var(--gap-normal);
         }
         .header .content slot[name="subtitle"]::slotted(*) {
+          overflow: hidden;
           margin-top: var(--gap-tiny);
           font-size: var(--font-size-small);
           height: var(--gap-normal);

diff --git a/packages/nde-erfgoed-components/lib/sidebar/sidebar-list-item.component.ts b/packages/nde-erfgoed-components/lib/sidebar/sidebar-list-item.component.ts
@@ -70,13 +70,20 @@ export class SidebarListItemComponent extends RxLitElement {
         display: flex;
       }
 
+      .item slot[name="title"]::slotted(*) {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
       .item.selected slot[name="title"]::slotted(*), .item:hover:not(.title) slot[name="title"]::slotted(*) {
         color: var(--colors-foreground-inverse);
       }
 
       .item.title slot[name="title"]::slotted(*) {
         font-weight: var( --font-weight-bold);
       }
+
       .item.title {
         cursor: default;
       }

diff --git a/packages/nde-erfgoed-components/lib/sidebar/sidebar-list.component.ts b/packages/nde-erfgoed-components/lib/sidebar/sidebar-list.component.ts
@@ -37,6 +37,7 @@ export class SidebarListComponent extends RxLitElement {
   render() {
 
     return html`
+    <slot name="title" @click="${this.select}"></slot>
     <div class="list">
       <slot name="item" @click="${this.select}"></slot>
     </div>
@@ -51,7 +52,28 @@ export class SidebarListComponent extends RxLitElement {
 
     return [
       unsafeCSS(Theme),
-      css``,
+      css`
+      *::-webkit-scrollbar-thumb {
+        background-color: var(--colors-foreground-light);
+        border: 3px solid var(--colors-foreground-normal);
+      }
+      *::-webkit-scrollbar-track {
+        background: var(--colors-foreground-normal);
+      }
+      :host {
+        scrollbar-color: var(--colors-foreground-light) var(--colors-foreground-normal);
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+        height: 0px;
+      }
+      .list {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+      }
+      `,
     ];
 
   }

diff --git a/packages/nde-erfgoed-components/lib/sidebar/sidebar.component.ts b/packages/nde-erfgoed-components/lib/sidebar/sidebar.component.ts
@@ -45,13 +45,16 @@ export class SidebarComponent extends RxLitElement {
       css`
         :host {
           width: var(--size-sidebar);
-          display: flex;
-          flex-direction: column;
         }
         .sidebar {
           flex: 1 0;
         }
-        .sidebar.primary {
+        .sidebar.primary slot {
+          height: 100%;
+          max-height: inherit;
+          display: flex;
+          flex-direction: column;
+          gap: var(--gap-normal);
           background-color: var(--colors-primary-dark);
           color: var(--colors-foreground-inverse);
         }

diff --git a/packages/nde-erfgoed-manage/lib/app-root.component.ts b/packages/nde-erfgoed-manage/lib/app-root.component.ts
@@ -156,7 +156,7 @@ export class AppRootComponent extends RxLitElement {
         <div slot="actions"><button class="no-padding" @click="${() => this.actor.send(AppEvents.LOGGING_OUT)}">${unsafeSVG(Logout)}</button></div>
       </nde-content-header>
       <nde-sidebar-list>
-        <nde-sidebar-list-item slot="item" isTitle inverse>
+        <nde-sidebar-list-item slot="title" isTitle inverse>
           <div slot="title">${this.translator?.translate('nde.navigation.collections.title')}</div>
           <div slot="actions" @click="${() => this.actor.send(AppEvents.CLICKED_CREATE_COLLECTION)}">${ unsafeSVG(Plus) }</div>
         </nde-sidebar-list-item>
@@ -182,6 +182,8 @@ export class AppRootComponent extends RxLitElement {
           background-color: var(--colors-background-normal);
           display: flex;
           flex-direction: row;
+          overflow: hidden;
+          max-height: 100%;
         }
 
         :host > * {
@@ -193,19 +195,12 @@ export class AppRootComponent extends RxLitElement {
         }
 
         nde-sidebar {
+          max-height: inherit;
+          height: 100%;
           display: flex;
           flex-direction: column;
         }
 
-        nde-sidebar > * {
-          margin-bottom: var(--gap-normal);
-          display: block;
-        }
-
-        nde-sidebar > *:last-child {
-          margin-bottom: 0px;
-        }
-
         nde-content-header div[slot="icon"] svg {
           fill: var(--colors-foreground-inverse);
         }

diff --git a/packages/nde-erfgoed-manage/lib/features/authenticate/authenticate-root.component.ts b/packages/nde-erfgoed-manage/lib/features/authenticate/authenticate-root.component.ts
@@ -220,6 +220,7 @@ export class AuthenticateRootComponent extends RxLitElement {
           max-width: 50px;
           width: 50px;
           fill: var(--colors-foreground-inverse);
+          stroke: none !important;
         }
         
         .title-container h1 {

diff --git a/packages/nde-erfgoed-manage/lib/features/collection/collection-root.component.ts b/packages/nde-erfgoed-manage/lib/features/collection/collection-root.component.ts
@@ -213,14 +213,24 @@ export class CollectionRootComponent extends RxLitElement {
     return [
       unsafeCSS(Theme),
       css`
+        *::-webkit-scrollbar-thumb {
+          background-color: var(--colors-foreground-light);
+          border: 3px solid var(--colors-background-normal);
+        }
+        *::-webkit-scrollbar-track {
+          background: var(--colors-background-normal);
+        }
         :host {
+          scrollbar-color: var(--colors-foreground-light) var(--colors-background-normal);
           display: flex;
           flex-direction: column;
           height: 100%;
         }
         .content {
+          margin-top: 1px;
           padding: var(--gap-large);
           height: 100%;
+          overflow-y: auto;
         }
         .grid {
           display: grid;

diff --git a/packages/nde-erfgoed-theme/lib/common/measures.css b/packages/nde-erfgoed-theme/lib/common/measures.css
@@ -18,3 +18,24 @@
    */
   --size-sidebar: 300px;
 }
+
+/* Works on Firefox */
+* {
+  scrollbar-width: var(--gap-tiny);
+  scrollbar-color: var(--colors-foreground-light) var(--colors-foreground-inverse);
+}
+
+/* Works on Chrome, Edge, and Safari */
+*::-webkit-scrollbar {
+  width: 12px;
+}
+
+*::-webkit-scrollbar-track {
+  background: var(--colors-foreground-inverse);
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: var(--colors-foreground-light);
+  border-radius: 20px;
+  border: 3px solid var(--colors-foreground-inverse);
+}