Render tabs as accordions on small screens

4 files changed, 138 insertions, 71 deletions

diff --git a/content/assets/stylesheets/_landing.scss b/content/assets/stylesheets/_landing.scss
index a2505530..38c09a79 100644
--- a/content/assets/stylesheets/_landing.scss
+++ b/content/assets/stylesheets/_landing.scss
@@ -9,6 +9,9 @@
   }
 
   // Tabs
+  .gl-tabs {
+    border-bottom: 0;
+  }
   .gl-tabs-nav {
     justify-content: space-between;
     align-items: flex-start;
@@ -27,6 +30,39 @@
     }
   }
 
+  // Accordions
+  .gl-accordion-item {
+    margin-bottom: 0.55rem;
+  }
+  .gl-accordion-item-header {
+    border-bottom: 1px solid $theme-indigo-100;
+    padding-bottom: 0.55rem;
+
+    // Chevrons
+    button {
+      justify-content: left;
+      width: 100%;
+      .gl-button-text {
+        color: $theme-indigo-900;
+        font-size: 1.125rem;
+      }
+    }
+    svg.gl-button-icon {
+      fill: $theme-indigo-500;
+      position: relative;
+      left: 95%;
+      transform: rotate(90deg);
+      height: 20px;
+      width: 20px;
+    }
+    button.not-collapsed {
+      svg.gl-button-icon {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  // Cards
   .card {
     box-shadow: 0 0.5rem 1.5rem -0.75rem $landing-gl-blue-1000;
     border-radius: 0.25rem;
@@ -55,12 +91,17 @@
     }
   }
 
+  /**
+   * PAGE SECTIONS
+   */
   .search-hero {
     background-color: $purple-900;
 
-    background-image: url("/assets/images/search-hero-bg.svg");
-    background-repeat: no-repeat;
-    background-position: 95% -1rem;
+    @media (min-width: $bp-md) {
+      background-image: url("/assets/images/search-hero-bg.svg");
+      background-repeat: no-repeat;
+      background-position: 95% -1rem;
+    }
 
     h1 {
       font-weight: 600;
@@ -94,9 +135,7 @@
     .search-form,
     .gs-wrapper,
     .gs-results {
-      @media (max-width: $bp-md) {
-        width: $search-md-width;
-      }
+      width: 90vw;
       @media (min-width: $bp-md) {
         width: 46rem;
       }
@@ -121,6 +160,7 @@
   .site-sections {
     background: url("/assets/images/gradient.svg");
     background-position-y: bottom;
+    background-repeat: none;
 
     h3,
     a,
@@ -131,14 +171,27 @@
     // Article grid
     .site-section-inner {
       display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      grid-gap: 1.88rem 2rem;
+      grid-template-columns: repeat(2, 1fr);
+      grid-gap: 1rem;
+
+      @media screen and (min-width: 990px) {
+        grid-template-columns: repeat(3, 1fr);
+        grid-gap: 1.88rem 2rem;
+      }
+
+      @media screen and (min-width: 990px) {
+        h3 {
+          font-weight: 600;
+        }
+      }
     }
 
     .secondary-sections {
-      border-top: 1px solid $theme-indigo-100;
-      h3 {
-        font-weight: 600;
+      @media screen and (min-width: 990px) {
+        border-top: 1px solid $theme-indigo-100;
+        h3 {
+          font-weight: 600;
+        }
       }
       ul {
         grid-gap: 0.25rem 0.75rem;
diff --git a/content/frontend/default/components/tabs_section.vue b/content/frontend/default/components/tabs_section.vue
index 41a8f839..9a6f5cd4 100644
--- a/content/frontend/default/components/tabs_section.vue
+++ b/content/frontend/default/components/tabs_section.vue
@@ -1,11 +1,27 @@
 <script>
-import { GlIcon, GlTabs, GlTab, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+import {
+  GlAccordion,
+  GlAccordionItem,
+  GlIcon,
+  GlTabs,
+  GlTab,
+  GlSafeHtmlDirective as SafeHtml,
+} from '@gitlab/ui';
+
+/**
+ * If the screen size is above or equal to this width,
+ * this component renders as Tabs.
+ * For smaller screens, it renders as Accordions.
+ */
+const TABS_BREAKPOINT = 990;
 
 export default {
   components: {
     GlTabs,
     GlTab,
     GlIcon,
+    GlAccordion,
+    GlAccordionItem,
   },
   directives: {
     SafeHtml,
@@ -25,6 +41,7 @@ export default {
       // Allows GitLab SVGs to render through v-safe-html
       // https://gitlab.com/groups/gitlab-org/-/epics/4273#svgs
       safe_html_config: { ADD_TAGS: ['use'] },
+      isWideScreen: window.innerWidth >= TABS_BREAKPOINT,
     };
   },
   computed: {
@@ -34,21 +51,49 @@ export default {
       return this.tabTitles.filter(Boolean).length === this.tabContents.filter(Boolean).length;
     },
   },
+  mounted() {
+    window.addEventListener('resize', this.handleResize);
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize);
+  },
+  methods: {
+    handleResize() {
+      this.isWideScreen = window.innerWidth >= TABS_BREAKPOINT;
+    },
+  },
 };
 </script>
 
 <template>
-  <gl-tabs v-if="hasValidContent" :sync-active-tab-with-query-params="true">
-    <gl-tab
-      v-for="(title, key) in tabTitles"
-      :key="key"
-      v-safe-html:[safe_html_config]="tabContents[key]"
-      :query-param-value="title.titleText"
+  <div>
+    <gl-tabs
+      v-if="hasValidContent && isWideScreen"
+      :sync-active-tab-with-query-params="true"
+      class="gl-border-b"
     >
-      <template #title>
-        <gl-icon v-if="title.icon" :name="title.icon" class="gl-mr-2" />
-        <span>{{ title.titleText }}</span>
-      </template>
-    </gl-tab>
-  </gl-tabs>
+      <gl-tab
+        v-for="(title, key) in tabTitles"
+        :key="key"
+        v-safe-html:[safe_html_config]="tabContents[key]"
+        :query-param-value="title.titleText"
+      >
+        <template #title>
+          <gl-icon v-if="title.icon" :name="title.icon" class="gl-mr-2" />
+          <span>{{ title.titleText }}</span>
+        </template>
+      </gl-tab>
+    </gl-tabs>
+
+    <gl-accordion v-else :auto-collapse="false" :header-level="2" class="gl-my-5">
+      <gl-accordion-item
+        v-for="(title, key) in tabTitles"
+        :key="key"
+        :title="title.titleText"
+        :class="title.icon"
+      >
+        <div v-safe-html:[safe_html_config]="tabContents[key]"></div>
+      </gl-accordion-item>
+    </gl-accordion>
+  </div>
 </template>
diff --git a/content/frontend/landing/featured_sections.js b/content/frontend/landing/featured_sections.js
index ea1e8ae9..85a07b4d 100644
--- a/content/frontend/landing/featured_sections.js
+++ b/content/frontend/landing/featured_sections.js
@@ -1,13 +1,10 @@
 /* global Vue */
 import TabsSection from '../default/components/tabs_section.vue';
 
-let width = window.innerWidth;
-const breakpoint = 768;
-
 /**
- * Display featured sections as tabs.
+ * Display featured sections as responsive tabs.
  */
-const homepageTabs = () => {
+document.addEventListener('DOMContentLoaded', () => {
   const tabsetSelector = '.js-tabs';
 
   document.querySelectorAll(tabsetSelector).forEach((tabset) => {
@@ -35,34 +32,4 @@ const homepageTabs = () => {
         },
       }))();
   });
-};
-
-/**
- * Display featured sections as accordions.
- */
-const homepageAccordions = () => {
-  // @todo
-  // console.log('Accordions!');
-};
-
-/**
- * Render either featured sections as tabs or accordions.
- */
-const renderFeaturedSections = () => {
-  if (width < breakpoint) {
-    homepageAccordions();
-  } else {
-    homepageTabs();
-  }
-};
-
-const handleResize = () => {
-  width = window.innerWidth;
-  renderFeaturedSections();
-};
-
-document.addEventListener('DOMContentLoaded', () => {
-  renderFeaturedSections();
-
-  window.addEventListener('resize', handleResize);
 });
diff --git a/content/index.erb b/content/index.erb
index ce447576..1b312cb9 100644
--- a/content/index.erb
+++ b/content/index.erb
@@ -3,9 +3,9 @@ title: GitLab Documentation
 ---
 
 <!-- Search hero -->
-<section class="search-hero gl-pt-8 gl-pb-6">
+<section class="search-hero gl-pt-6">
   <div class="container">
-    <h1 class="gl-text-white gl-heading-scale-800">Find GitLab answers fast.</h1>
+    <h1 class="gl-text-white gl-heading-scale-700 gl-mb-1">Find GitLab answers fast.</h1>
     <% if @config[:search_backend] == "google" %>
       <div class="js-google-search-form gl-spinner-container">
         <span aria-label="Loading" class="gl-vertical-align-text-bottom! gl-spinner gl-spinner-dark gl-spinner-md"></span>
@@ -16,10 +16,10 @@ title: GitLab Documentation
       </div>
     <% end %>
 
-    <ul class="quick-links gl-pl-0 gl-mt-6 gl-mb-8 gl-display-inline-flex gl-list-style-none">
+    <ul class="quick-links gl-pl-0 gl-mt-6 gl-md-mb-8 gl-list-style-none">
       <% @items['/_data/landing.yaml'][:quickLinks].each do |link| %>
-        <li class="gl-mr-4">
-          <a href="<%= link[:url] %>" class="gl-pb-3 gl-text-white">
+        <li class="gl-mr-4 gl-mb-5 gl-display-inline-block">
+          <a href="<%= link[:url] %>" class="gl-md-pb-3 gl-text-white gl-display-inline-block gl-white-space-nowrap">
             <%= link[:title] %>
           </a>
         </li>
@@ -29,7 +29,7 @@ title: GitLab Documentation
 </section>
 
 <!-- Site sections -->
-<section class="site-sections gl-pt-8">
+<section class="site-sections gl-pt-5 gl-md-pt-8">
     <div class="container">
 
       <div class="featured-sections js-tabs">
@@ -39,12 +39,14 @@ title: GitLab Documentation
               <% if tab[:refs] %>
                 <% tab[:refs].each do |ref| %>
                   <% item = @items.find { |i| i.identifier == ref } %>
-                  <article>
-                    <h3 class="gl-font-base">
-                      <a href="<%= item.path %>"><%= item[:title] %></a><%= icon('chevron-right', "18", "gl-ml-3!") %>
-                    </h3>
-                    <p class="gl-font-sm gl-text-gray-700 gl-line-height-20 gl-mb-0"><%= item[:description] %></p>
-                  </article>
+                  <% if item %>
+                    <article>
+                      <h3 class="gl-font-base gl-font-weight-normal">
+                        <a href="<%= item.path %>"><%= item[:title] %></a><%= icon('chevron-right', "18", "gl-display-none gl-md-display-inline gl-ml-3!") %>
+                      </h3>
+                      <p class="gl-display-none gl-md-display-block gl-font-sm gl-text-gray-700 gl-line-height-20 gl-mb-0"><%= item[:description] %></p>
+                    </article>
+                  <% end %>
                 <% end %>
               <% end %>
             </div>