Refactors the header component to collapse to columns on mobile / tab…

…let. Updates the showcase to be mainly responsive esp. the header.
AgnosticUI · Sep 27, 2020 · 3a691ae · 3a691ae
1 parent 2bf174b
commit 3a691ae
Show file tree

Hide file tree

Showing 10 changed files with 147 additions and 64 deletions.
diff --git a/agnosticui-css/header.css b/agnosticui-css/header.css
@@ -14,9 +14,9 @@
 .header,
 .header-skin {
   --agnosticui-default-header-font-family: -apple-system, BlinkMacSystemFont,
-  "Segoe UI", "Open Sans", "Ubuntu", "Fira Sans", Helvetica, "Droid Sans",
-  "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-  "Segoe UI Symbol";
+    "Segoe UI", "Open Sans", "Ubuntu", "Fira Sans", Helvetica, "Droid Sans",
+    "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol";
   --agnosticui-default-header-box-shadow-hor: 0px;
   --agnosticui-default-header-box-shadow-ver: 1px;
   --agnosticui-default-header-box-shadow-blur: 5px;
@@ -78,6 +78,7 @@
 
 .header .header-content {
   display: flex;
+  flex-direction: column;
   justify-content: space-around;
   align-items: center;
   flex-wrap: wrap;
@@ -100,22 +101,24 @@
  */
 
 .header-sticky {
-  position: sticky;
+  position: relative;
   top: 0;
   z-index: 10;
 }
 
-@media (min-width: 599px) {
+@media (min-width: 960px) {
+  .header-sticky {
+    position: sticky;
+  }
+
+  .header .header-content {
+    flex-direction: row;
+    justify-content: space-between;
+  }
   .header {
     height: var(
       --agnosticui-header-height,
       var(--agnosticui-default-header-height)
     );
   }
-}
-
-@media (min-width: 960px) {
-  .header .header-content {
-    justify-content: space-between;
-  }
 }
diff --git a/agnosticui-css/headernav.css b/agnosticui-css/headernav.css
@@ -11,15 +11,28 @@
 .header-nav ul {
   margin: 0;
   padding: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .header-nav li {
   display: inline-block;
 }
 
 .header-nav li:not(:last-child) {
-  margin-right: var(
-    --agnosticui-header-nav-spacing,
-    var(--agnosticui-default-header-nav-spacing)
-  );
+  margin-right: initial;
+}
+
+@media (min-width: 960px) {
+  .header-nav ul {
+    flex-direction: row;
+  }
+
+  .header-nav li:not(:last-child) {
+    margin-right: var(
+      --agnosticui-header-nav-spacing,
+      var(--agnosticui-default-header-nav-spacing)
+    );
+  }
 }
diff --git a/agnosticui-react/src/stories/header.css b/agnosticui-react/src/stories/header.css
@@ -14,9 +14,9 @@
 .header,
 .header-skin {
   --agnosticui-default-header-font-family: -apple-system, BlinkMacSystemFont,
-  "Segoe UI", "Open Sans", "Ubuntu", "Fira Sans", Helvetica, "Droid Sans",
-  "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-  "Segoe UI Symbol";
+    "Segoe UI", "Open Sans", "Ubuntu", "Fira Sans", Helvetica, "Droid Sans",
+    "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol";
   --agnosticui-default-header-box-shadow-hor: 0px;
   --agnosticui-default-header-box-shadow-ver: 1px;
   --agnosticui-default-header-box-shadow-blur: 5px;
@@ -78,6 +78,7 @@
 
 .header .header-content {
   display: flex;
+  flex-direction: column;
   justify-content: space-around;
   align-items: center;
   flex-wrap: wrap;
@@ -100,22 +101,24 @@
  */
 
 .header-sticky {
-  position: sticky;
+  position: relative;
   top: 0;
   z-index: 10;
 }
 
-@media (min-width: 599px) {
+@media (min-width: 960px) {
+  .header-sticky {
+    position: sticky;
+  }
+
+  .header .header-content {
+    flex-direction: row;
+    justify-content: space-between;
+  }
   .header {
     height: var(
       --agnosticui-header-height,
       var(--agnosticui-default-header-height)
     );
   }
-}
-
-@media (min-width: 960px) {
-  .header .header-content {
-    justify-content: space-between;
-  }
 }
diff --git a/agnosticui-react/src/stories/headernav.css b/agnosticui-react/src/stories/headernav.css
@@ -11,15 +11,28 @@
 .header-nav ul {
   margin: 0;
   padding: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .header-nav li {
   display: inline-block;
 }
 
 .header-nav li:not(:last-child) {
-  margin-right: var(
-    --agnosticui-header-nav-spacing,
-    var(--agnosticui-default-header-nav-spacing)
-  );
+  margin-right: initial;
+}
+
+@media (min-width: 960px) {
+  .header-nav ul {
+    flex-direction: row;
+  }
+
+  .header-nav li:not(:last-child) {
+    margin-right: var(
+      --agnosticui-header-nav-spacing,
+      var(--agnosticui-default-header-nav-spacing)
+    );
+  }
 }
diff --git a/agnosticui-svelte/src/stories/Header.svelte b/agnosticui-svelte/src/stories/Header.svelte
@@ -30,9 +30,9 @@
 .header,
 .header-skin {
   --agnosticui-default-header-font-family: -apple-system, BlinkMacSystemFont,
-  "Segoe UI", "Open Sans", "Ubuntu", "Fira Sans", Helvetica, "Droid Sans",
-  "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-  "Segoe UI Symbol";
+    "Segoe UI", "Open Sans", "Ubuntu", "Fira Sans", Helvetica, "Droid Sans",
+    "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol";
   --agnosticui-default-header-box-shadow-hor: 0px;
   --agnosticui-default-header-box-shadow-ver: 1px;
   --agnosticui-default-header-box-shadow-blur: 5px;
@@ -94,6 +94,7 @@
 
 .header .header-content {
   display: flex;
+  flex-direction: column;
   justify-content: space-around;
   align-items: center;
   flex-wrap: wrap;
@@ -116,25 +117,27 @@
  */
 
 .header-sticky {
-  position: sticky;
+  position: relative;
   top: 0;
   z-index: 10;
 }
 
-@media (min-width: 599px) {
+@media (min-width: 960px) {
+  .header-sticky {
+    position: sticky;
+  }
+
+  .header .header-content {
+    flex-direction: row;
+    justify-content: space-between;
+  }
   .header {
     height: var(
       --agnosticui-header-height,
       var(--agnosticui-default-header-height)
     );
   }
 }
-
-@media (min-width: 960px) {
-  .header .header-content {
-    justify-content: space-between;
-  }
-}
 </style>
 
 <div class={klasses}>

diff --git a/agnosticui-svelte/src/stories/HeaderNav.svelte b/agnosticui-svelte/src/stories/HeaderNav.svelte
@@ -19,17 +19,30 @@
 .header-nav :global(ul) {
   margin: 0;
   padding: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .header-nav :global(li) {
   display: inline-block;
 }
 
 .header-nav :global(li:not(:last-child)) {
-  margin-right: var(
-    --agnosticui-header-nav-spacing,
-    var(--agnosticui-default-header-nav-spacing)
-  );
+  margin-right: initial;
+}
+
+@media (min-width: 960px) {
+  .header-nav ul {
+    flex-direction: row;
+  }
+
+  .header-nav li:not(:last-child) {
+    margin-right: var(
+      --agnosticui-header-nav-spacing,
+      var(--agnosticui-default-header-nav-spacing)
+    );
+  }
 }
 </style>
 

diff --git a/agnosticui-vue/src/stories/Header.vue b/agnosticui-vue/src/stories/Header.vue
@@ -15,9 +15,9 @@
 .header,
 .header-skin {
   --agnosticui-default-header-font-family: -apple-system, BlinkMacSystemFont,
-  "Segoe UI", "Open Sans", "Ubuntu", "Fira Sans", Helvetica, "Droid Sans",
-  "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-  "Segoe UI Symbol";
+    "Segoe UI", "Open Sans", "Ubuntu", "Fira Sans", Helvetica, "Droid Sans",
+    "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol";
   --agnosticui-default-header-box-shadow-hor: 0px;
   --agnosticui-default-header-box-shadow-ver: 1px;
   --agnosticui-default-header-box-shadow-blur: 5px;
@@ -79,6 +79,7 @@
 
 .header .header-content {
   display: flex;
+  flex-direction: column;
   justify-content: space-around;
   align-items: center;
   flex-wrap: wrap;
@@ -101,25 +102,27 @@
  */
 
 .header-sticky {
-  position: sticky;
+  position: relative;
   top: 0;
   z-index: 10;
 }
 
-@media (min-width: 599px) {
+@media (min-width: 960px) {
+  .header-sticky {
+    position: sticky;
+  }
+
+  .header .header-content {
+    flex-direction: row;
+    justify-content: space-between;
+  }
   .header {
     height: var(
       --agnosticui-header-height,
       var(--agnosticui-default-header-height)
     );
   }
 }
-
-@media (min-width: 960px) {
-  .header .header-content {
-    justify-content: space-between;
-  }
-}
 </style>
 <template>
   <div :class="classes">

diff --git a/agnosticui-vue/src/stories/HeaderNav.vue b/agnosticui-vue/src/stories/HeaderNav.vue
@@ -12,17 +12,30 @@
 .header-nav ul {
   margin: 0;
   padding: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .header-nav li {
   display: inline-block;
 }
 
 .header-nav li:not(:last-child) {
-  margin-right: var(
-    --agnosticui-header-nav-spacing,
-    var(--agnosticui-default-header-nav-spacing)
-  );
+  margin-right: initial;
+}
+
+@media (min-width: 960px) {
+  .header-nav ul {
+    flex-direction: row;
+  }
+
+  .header-nav li:not(:last-child) {
+    margin-right: var(
+      --agnosticui-header-nav-spacing,
+      var(--agnosticui-default-header-nav-spacing)
+    );
+  }
 }
 </style>
 <template>

diff --git a/showcase/public/index.html b/showcase/public/index.html
@@ -24,6 +24,9 @@
       --agnosticui-header-box-shadow-spread: 0;
       --agnosticui-header-box-shadow-blur: 1px;
 
+      /* Customizes the mobile header height */
+      --agnosticui-header-mobile-height: 250px;
+
       --agnosticui-gray-light-warm: #fff7f7;
       --agnosticui-gray-warm: #e2c0c0;
       --agnosticui-gray-mid-dark: #bbbbbb;