Added shadow to scrollable categories nav bar, made it 95% of the win…

…dow height and added back Algolia variables I accidentally removed on the last push, search is working again
elrumo · Jun 13, 2021 · 3020967 · 3020967 · vercel · Jun 13, 2021
1 parent 18f8c70
commit 3020967
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 8 deletions.
diff --git a/website/macos-big-sur-icons/src/components/Hero.vue b/website/macos-big-sur-icons/src/components/Hero.vue
@@ -9,9 +9,6 @@
 
 
         <div class="ad-hero mobile-hidden">
-          <!-- <p class="coral-Body--XS">
-            Sponsored by
-          </p> -->
           <NativeAd :adId="'iconbar-js-hero'" :key="$route.fullPath + 'ad'"/>
         </div>
 

diff --git a/website/macos-big-sur-icons/src/components/Home.vue b/website/macos-big-sur-icons/src/components/Home.vue
@@ -183,6 +183,7 @@
 
         <!-- Categories List -->
         <nav v-if="!isMobile" id="categoriesWrapper-desktop" class="mobile-hidden categories-sidenav coral-card" is="coral-sidenav">
+
           <button
             is="coral-sidenav-item"
             :icon="icons.AllIcons"
@@ -206,6 +207,8 @@
           >
             {{category.name}}
           </button>
+
+          <div class="gradient-categories-navbar" />
         </nav>
 
         <!-- Icon list-->

diff --git a/website/macos-big-sur-icons/src/components/app.less b/website/macos-big-sur-icons/src/components/app.less
@@ -454,7 +454,23 @@ coral-buttongroup button{
     overflow-y: scroll !important;
     width: calc(100% - 20px);
     height: fit-content;
-    max-height: calc(100vh - 200px);
+    max-height: calc(96vh - 200px);
+}
+
+.gradient-categories-navbar{
+    height: 20px;
+    width: 100%;
+    margin-top: -10px;
+    position: sticky;
+    bottom: -10px;
+}
+
+.coral--dark .gradient-categories-navbar{
+    background: linear-gradient(360deg, var(--coral-dark-card) 0%, transparent 100%);
+}
+
+.coral--light .gradient-categories-navbar{
+    background: linear-gradient(360deg, var(--coral-light-card) 0%, transparent 100%);
 }
 
 .categories-wrapper{
@@ -548,11 +564,20 @@ coral-buttongroup button{
     transform: translateY(0px);
 }
 
+.coral--dark .scrolled-shadow{
+    box-shadow: 0px 5px 50px 0px rgba(0,0,0,0.3) !important;
+}
+
+.coral--light .scrolled-shadow{
+    box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.15) !important;
+}
+
 .header-wrapper{
     display: grid;
     height: fit-content;
     height: -moz-fit-content;
-    padding: 30px 30px 15px 30px;
+    padding: 30px 0px 15px 0px;
+    // padding: 30px 30px 15px 30px;
     grid-template-columns: auto auto;
     justify-content: space-between;
     align-content: start;
@@ -1041,7 +1066,6 @@ coral-buttongroup button{
     position: relative;
     display: grid;
     grid-template-columns: 1fr;
-    // grid-template-columns: 1.2fr 1fr;
     max-width: 1300px;
     padding: 30px 0px 15px 0px;
     margin: 10px 0px 30px 0px;

diff --git a/website/macos-big-sur-icons/src/store/store.js b/website/macos-big-sur-icons/src/store/store.js
@@ -14,8 +14,8 @@ var IconsBase = Parse.Object.extend("Icons2");
 
 let algolia = {
   // TODO: remove credentials
-  // appid: process.env.VUE_APP_ALGOLIA_APPID,
-  // apikey: process.env.VUE_APP_ALGOLIA_KEY
+  appid: process.env.VUE_APP_ALGOLIA_APPID,
+  apikey: process.env.VUE_APP_ALGOLIA_KEY
 }
 
 const client = algoliasearch(algolia.appid, algolia.apikey);