Design review updates

kirbydesign · Nov 29, 2024 · 7a16c62 · 7a16c62
1 parent cb3c5de
commit 7a16c62
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 38 deletions.
diff --git a/apps/cookbook/src/app/home/home.component.scss b/apps/cookbook/src/app/home/home.component.scss
@@ -29,7 +29,8 @@ $desktop-gutter: minmax(utils.size('m'), 1fr);
       '. header header .'
       '. sidebar main .'
       'footer footer footer footer';
-    gap: utils.size('xl');
+    column-gap: utils.size('xl');
+    row-gap: utils.size('m');
   }
 }
 

diff --git a/apps/cookbook/src/app/page/header/header.component.scss b/apps/cookbook/src/app/page/header/header.component.scss
@@ -25,11 +25,12 @@ $small-rect-delay: $medium-rect-delay + 200ms;
 header {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
+  align-items: center;
   width: 100%;
   padding: var(--kirby-spacing-xxs);
 
   @include utils.media('>=large') {
-    padding-block-start: var(--kirby-spacing-m);
+    padding-block: var(--kirby-spacing-m) 0;
     align-items: start;
 
     .menu-button {
@@ -46,7 +47,7 @@ header {
   @include utils.media('>=large') {
     width: $logo-size-desktop;
     height: $logo-size-desktop;
-    margin-inline-start: var(--kirby-spacing-l);
+    margin-inline-start: var(--kirby-spacing-m);
     justify-self: start;
   }
 
@@ -73,6 +74,10 @@ header {
     animation: enter-pop utils.get-transition-duration('short') ease-in-out $small-rect-delay
       forwards;
   }
+
+  svg {
+    height: 100%;
+  }
 }
 
 @keyframes enter {

diff --git a/apps/cookbook/src/app/page/side-nav/side-nav.component.html b/apps/cookbook/src/app/page/side-nav/side-nav.component.html
@@ -13,12 +13,13 @@ <h2 class="kirby-text-normal">Resources</h2>
             [routerLink]="item.path"
             *ngIf="item.path; else externalUrl"
             routerLinkActive="is-selected"
+            class="list-item-link"
             #resourceLink
           >
             {{ item.name }}
           </a>
           <ng-template #externalUrl>
-            <a #externalUrl #resourceLink [href]="item.externalUrl" target="_blank">
+            <a [href]="item.externalUrl" class="list-item-link" target="_blank" #resourceLink>
               <span class="kirby-external-icon">{{ item.name }}</span>
             </a>
           </ng-template>
@@ -32,7 +33,10 @@ <h2 class="kirby-text-normal">Resources</h2>
     (keydown.ArrowUp)="onLinksArrowUpDown($event, 'components')"
     (keydown.ArrowDown)="onLinksArrowUpDown($event, 'components')"
   >
-    <h2 class="kirby-text-normal">Components</h2>
+    <div class="components-heading-container">
+      <h2 class="kirby-text-normal">Components</h2>
+      <a routerLink="component-overview">All</a>
+    </div>
     <hr />
     <div class="filter">
       <kirby-form-field>
@@ -56,17 +60,20 @@ <h2 class="kirby-text-normal">Components</h2>
         <kirby-icon name="close"></kirby-icon>
       </button>
     </div>
-    <ng-container *ngFor="let item of filteredShowcaseRoutes; let isLast = last">
-      <a
-        *ngFor="let link of item"
-        [routerLink]="link.path"
-        routerLinkActive="is-selected"
-        (click)="closeMenu()"
-        #componentLink
-      >
-        {{ link.name }}
-      </a>
-      <hr *ngIf="!isLast" />
-    </ng-container>
+    <ul>
+      <li *ngFor="let item of filteredShowcaseRoutes; let isLast = last">
+        <a
+          *ngFor="let link of item"
+          [routerLink]="link.path"
+          routerLinkActive="is-selected"
+          (click)="closeMenu()"
+          class="list-item-link"
+          #componentLink
+        >
+          {{ link.name }}
+        </a>
+        <hr *ngIf="!isLast" />
+      </li>
+    </ul>
   </kirby-card>
 </section>
diff --git a/apps/cookbook/src/app/page/side-nav/side-nav.component.scss b/apps/cookbook/src/app/page/side-nav/side-nav.component.scss
@@ -39,16 +39,14 @@ $logo-size-mobile: var(--kirby-spacing-xl);
   }
 }
 
-nav {
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    line-height: normal;
-
-    li {
-      margin-block-start: 0;
-    }
+ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  line-height: normal;
+
+  li {
+    margin-block-start: 0;
   }
 }
 
@@ -57,17 +55,20 @@ kirby-card:not(:last-child) {
 }
 
 a {
-  @include opt-out.link;
+  &.list-item-link {
+    text-decoration: none;
+  }
 
-  text-decoration: none;
+  position: relative;
   display: block;
   padding: $link-padding-block $link-padding-inline;
-  margin-block: var(--kirby-spacing-xxs);
   border-radius: $link-border-radius;
+  line-height: 1.5rem;
 
   &:hover,
   &:focus {
     color: utils.get-text-color('semi-dark');
+    z-index: utils.z('default');
   }
 
   &.is-selected {
@@ -110,13 +111,15 @@ h2 {
   }
 }
 
+.components-heading-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
 hr {
   border: solid 1px utils.get-color('light');
   border-bottom: none;
   margin-block: $divider-spacing;
   margin-inline: $divider-inset;
-
-  &:last-child {
-    border-color: transparent;
-  }
 }
diff --git a/apps/cookbook/src/app/page/side-nav/side-nav.component.ts b/apps/cookbook/src/app/page/side-nav/side-nav.component.ts
@@ -53,10 +53,6 @@ export class SideNavComponent implements OnInit, AfterViewInit {
 
   navigationItems: SideNavLink[] = [
     { name: 'Introduction', path: '/home/intro' },
-    {
-      name: 'Components',
-      path: '/home/component-overview',
-    },
     { name: 'Guides', path: '/home/guides' },
     {
       name: 'Accessibility',