From 3135d95f5dde1652627075675701bf6e8003312e Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Fri, 21 Dec 2018 23:45:34 +0000
Subject: [PATCH] Responsiveness

---
 src/components/EnvironmentCards.vue |  2 +-
 src/components/Environments.vue     | 56 ++++++++++++++---------------
 src/components/QuickHelp.vue        | 40 +++++++++++++--------
 src/components/ToggleHelp.vue       | 10 +++---
 4 files changed, 60 insertions(+), 48 deletions(-)

diff --git a/src/components/EnvironmentCards.vue b/src/components/EnvironmentCards.vue
index 99ac42d..a4f5695 100644
--- a/src/components/EnvironmentCards.vue
+++ b/src/components/EnvironmentCards.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="mb-6">
     <div class="flex flex-wrap -mx-4 -mb-6">
-      <div v-for="environment in environments" class="w-1/3 px-4 mb-6">
+      <div v-for="environment in environments" class="w-full md:w-1/2 xl:w-1/3 px-4 mb-6">
         <div class="border border-grey rounded overflow-hidden">
            <div class="bg-white">
             <div class="border-t-4 border-teal p-4">
diff --git a/src/components/Environments.vue b/src/components/Environments.vue
index e910643..9af9612 100644
--- a/src/components/Environments.vue
+++ b/src/components/Environments.vue
@@ -1,19 +1,19 @@
 <template>
   <div>
     <div class="bg-white">
-      <div class="mx-1 px-4 flex items-center leading-none">
-        <div class="mr-24">
+      <div class="mx-1 px-4 flex items-center leading-none justify-between">
+        <div class="flex-none md:mr-24">
           <a href="#0"><img src="img/logo.png" alt="" class="h-10"></a>
         </div>
 
         <div class="flex flex-col flex-1">
-          <nav class="border-t-2 border-transparent">
-            <a href="#0" class="inline-block text-sm border-b-4 border-blue-dark mx-2 px-4 py-5 text-blue-dark uppercase no-underline hover:underline focus:underline">Develop</a>
-            <a href="#0" class="inline-block text-sm border-b-4 border-transparent mx-2 px-4 py-5 text-blue-dark uppercase no-underline hover:underline focus:underline">Manage</a>
+          <nav class="border-t-2 border-transparent flex justify-end md:justify-start">
+            <a href="#0" class="inline-block text-xs sm:text-sm border-b-4 border-blue-dark mx-2 px-4 py-4 md:py-5 text-blue-dark uppercase no-underline hover:underline focus:underline">Develop</a>
+            <a href="#0" class="inline-block text-xs sm:text-sm border-b-4 border-transparent mx-2 px-4 py-4 md:py-5 text-blue-dark uppercase no-underline hover:underline focus:underline">Manage</a>
           </nav>
         </div>
 
-        <div class="flex items-center">
+        <div class="hidden md:flex md:items-center">
           <div><a class="text-sm text-blue-dark no-underline hover:underline uppercase" href="#0">Help</a></div>
           <div class="ml-6"><button type="button">
             <span class="hidden">Menu</span>
@@ -30,8 +30,8 @@
       </div>
     </div>
 
-    <div class="px-4 py-5 border-b-2 border-grey flex justify-between">
-      <div>
+    <div class="px-4 py-5 border-b-2 border-grey flex justify-between items-center">
+      <div class="w-full md:w-auto flex flex-col">
         <div class="text-xs mb-3">
           <ol class="list-reset flex">
             <li class="mr-6"><a href="#0" class="text-blue-dark no-underline hover:underline">Applications</a></li>
@@ -39,13 +39,13 @@
           </ol>
         </div>
 
-        <div class="flex items-center">
+        <div class="flex flex-1 items-center justify-between md:justify-start">
           <div class="text-2xl font-hairline mr-2">{{ name }}</div>
           <svg class="h-6 w-6 text-blue-dark fill-current" role="presentation"><use xlink:href="icons.symbol.svg#actions__down-arrow"></use></svg>
         </div>
       </div>
 
-      <div>
+      <div class="hidden md:block">
         <ul class="list-reset flex">
           <li>
             <button type="button" class="text-xs text-blue-dark no-underline hover:underline flex flex-col items-center justify-center">
@@ -72,7 +72,7 @@
     </div>
 
     <div class="flex flex-row-reverse h-full">
-      <div class="flex-1 p-12">
+      <div class="flex-1 p-4 lg:p-12">
         <div class="mb-6">
           <div class="flex items-start justify-between">
             <div class="flex items-baseline">
@@ -85,7 +85,7 @@
               </div>
             </div>
 
-            <div class="w-1/5">
+            <div class="w-full lg:w-1/5">
               <form action="#">
                 <input type="text" placeholder="Filter environments" class="w-full py-2 px-3 border border-grey-darker rounded">
               </form>
@@ -105,30 +105,30 @@
         <task-log></task-log>
       </div>
 
-      <div class="w-64 bg-grey-darkest text-white antialiased">
+      <div class="w-auto lg:w-64 bg-grey-darkest text-white antialiased">
         <div>
           <ul class="list-reset">
-            <li>
-              <a href="#0" class="flex items-center text-white no-underline hover:underline focus:underline border-l-6 border-blue px-4 py-5 hover:bg-grey-darker">
-                <svg class="h-6 w-6 text-white fill-current mr-4" role="presentation"><use xlink:href="icons.symbol.svg#alpha__grid"></use></svg>
-                Environments
+            <li class="border-r-6 border-grey-darker">
+              <a href="#0" class="flex items-center text-white no-underline hover:underline focus:underline border-l-6 border-blue px-4 py-5 bg-grey-darker">
+                <svg class="h-6 w-6 text-white fill-current" role="presentation"><use xlink:href="icons.symbol.svg#alpha__grid"></use></svg>
+                <span class="hidden lg:block lg:ml-4">Environments</span>
               </a>
             </li>
-            <li>
+            <li class="border-r-6 border-grey-darkest hover:border-grey-darker">
               <div class="flex items-center text-grey no-underline hover:underline focus:underline border-l-6 border-transparent px-4 py-5 cursor-not-allowed hover:bg-grey-darker">
-                <svg class="h-6 w-6 text-grey fill-current mr-4" role="presentation"><use xlink:href="icons.symbol.svg#locations__keys"></use></svg>
-                Product Keys
+                <svg class="h-6 w-6 text-grey fill-current" role="presentation"><use xlink:href="icons.symbol.svg#locations__keys"></use></svg>
+                <span class="hidden lg:block lg:ml-4">Product Keys</span>
+              </div>
+            </li class="border-r-6 border-grey-darkest hover:border-grey-darker">
+              <div class="flex items-center text-grey no-underline hover:underline focus:underline border-l-6 border-transparent px-4 py-5 cursor-not-allowed hover:bg-grey-darker">
+                <svg class="h-6 w-6 text-grey fill-current" role="presentation"><use xlink:href="icons.symbol.svg#alpha__security"></use></svg>
+                <span class="hidden lg:block lg:ml-4">Security</span>
               </div>
             </li>
-              <div class="flex items-center text-grey no-underline hover:underline focus:underline border-l-6 border-transparent px-4 py-5 cursor-not-allowed hover:bg-grey-darker">
-                <svg class="h-6 w-6 text-grey fill-current mr-4" role="presentation"><use xlink:href="icons.symbol.svg#alpha__security"></use></svg>
-                Security
-              </div>
-            </li>
-            <li>
+            <li class="border-r-6 border-grey-darkest hover:border-grey-darker">
               <a href="#0" class="flex items-center text-white no-underline hover:underline focus:underline border-l-6 border-transparent px-4 py-5 hover:bg-grey-darker">
-                <svg class="h-6 w-6 text-white fill-current mr-4" role="presentation"><use xlink:href="icons.symbol.svg#actions__search"></use></svg>
-                Acquia Search
+                <svg class="h-6 w-6 text-white fill-current" role="presentation"><use xlink:href="icons.symbol.svg#actions__search"></use></svg>
+                <span class="hidden lg:block lg:ml-4">Acquia Search</span>
               </a>
             </li>
           </ul>
diff --git a/src/components/QuickHelp.vue b/src/components/QuickHelp.vue
index 59d56cc..29de332 100644
--- a/src/components/QuickHelp.vue
+++ b/src/components/QuickHelp.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="bg-white border-t-10 border-purple mb-6" :class="[hidden ? 'hidden' : 'flex']">
-    <div class="flex-none py-3 pl-3 pr-8 border-r border-grey-lighter">
+  <div class="bg-white border-t-10 border-purple mb-6" :class="[hidden ? 'hidden' : 'block lg:flex']">
+    <div class="flex-none py-3 pl-3 pr-8 border-b lg:border-r border-grey-lighter">
       <div class="flex items-center">
         <svg class="h-6 w-6 mr-1 text-purple fill-current" role="presentation"><use xlink:href="icons.symbol.svg#actions__info"></use></svg>
         Quick help
@@ -8,20 +8,30 @@
     </div>
 
     <div class="p-4">
-      <div class="flex mb-6">
-        <button
-          v-for="(item, i) in items"
-          type="button"
-          class="hover:underline focus:underline mr-6 focus:outline-none"
-          :class="[ i === selected ? 'text-grey-darkest' : 'text-blue-dark' ]"
-          @click="selected = i"
-        >{{ item.subject }}</button>
+      <div class="block lg:hidden leading-normal -mb-5">
+        <div v-for="item in items">
+          <p class="text-sm mb-3 font-bold">{{ item.subject }}</p>
+          <p class="text-sm mb-5">{{ item.text }}</p>
+        </div>
       </div>
-      <div class="leading-normal">
-        <p class="text-sm text-grey-darker">
-          {{ items[selected].text }}
-          <a href="#0" class="text-blue-dark no-underline hover:underline focus:underline">Learn more</a>
-        </p>
+
+      <div class="hidden lg:block">
+        <div class="w-full lg:w-auto lg:flex mb-6">
+          <button
+            v-for="(item, i) in items"
+            type="button"
+            class="hover:underline focus:underline mr-6 focus:outline-none"
+            :class="[ i === selected ? 'text-grey-darkest' : 'text-blue-dark' ]"
+            @click="selected = i"
+          >{{ item.subject }}</button>
+        </div>
+
+        <div class="leading-normal">
+          <p class="text-sm text-grey-darker">
+            {{ items[selected].text }}
+            <a href="#0" class="text-blue-dark no-underline hover:underline focus:underline">Learn more</a>
+          </p>
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/components/ToggleHelp.vue b/src/components/ToggleHelp.vue
index 362b140..b5d4b40 100644
--- a/src/components/ToggleHelp.vue
+++ b/src/components/ToggleHelp.vue
@@ -1,8 +1,10 @@
 <template>
-  <button type="button" class="text-blue text-sm font-hairline flex items-center hover:underline focus:underline focus:outline-none" @click="$emit('toggle')">
-    <svg class="h-5 w-5 mr-1 text-blue-dark fill-current" role="presentation"><use xlink:href="icons.symbol.svg#actions__info"></use></svg>
-    {{ hidden ? 'Show quick help' : 'Hide quick help' }}
-  </button>
+  <div class="hidden lg:block">
+    <button type="button" class="text-blue text-sm font-hairline flex items-center hover:underline focus:underline focus:outline-none" @click="$emit('toggle')">
+      <svg class="h-5 w-5 mr-1 text-blue-dark fill-current" role="presentation"><use xlink:href="icons.symbol.svg#actions__info"></use></svg>
+      {{ hidden ? 'Show quick help' : 'Hide quick help' }}
+    </button>
+  </div>
 </template>
 
 <script>