From 7e4a00705793cae9c94af9fd0999aa9f1c071931 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Mon, 23 Sep 2019 15:29:42 +0200
Subject: [PATCH] Responsive header

---
 src/App.vue                         | 16 -----
 src/components/ContentSelection.vue | 52 ++++++++--------
 src/components/Header.vue           | 95 +++++++++++++++--------------
 src/scss/main.scss                  | 18 +++++-
 src/views/Home.vue                  | 10 +++
 5 files changed, 103 insertions(+), 88 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3cec95b..f05598c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,22 +6,6 @@
   </div>
 </template>
 
-<style lang="scss" scoped>
-  @import './scss/_variables.scss';
-
-  .container {
-    padding-top: 0;
-    margin-top: 0;
-    width: 1024px;
-
-    @media screen and (max-width: $responsive-screen) {
-      width: 100%;
-      max-width: unset;
-      padding: 0;
-    }
-  }
-</style>
-
 <script>
   import HeaderComponent from './components/Header.vue'
 
diff --git a/src/components/ContentSelection.vue b/src/components/ContentSelection.vue
index 2867c11..4ecf9fb 100644
--- a/src/components/ContentSelection.vue
+++ b/src/components/ContentSelection.vue
@@ -5,20 +5,26 @@
       <img :src="thumbnailUrl" alt="thumbnail"/>
 
       <button class="jpt-button jpt-button-medium">
-        <span class="span-wrapper" v-if="type === 'video'">
-          <icon-video></icon-video>
-          Watch the video
-        </span>
+        <template v-if="type === 'video'">
+          <div class="icon">
+            <icon-video></icon-video>
+          </div>
+          <div>Watch the video</div>
+        </template>
 
-        <span class="span-wrapper" v-if="type === 'channel'">
-          <icon-channel></icon-channel>
-          Discover the channel
-        </span>
+        <template v-if="type === 'channel'">
+          <div class="icon">
+            <icon-channel></icon-channel>
+          </div>
+          <div>Discover the channel</div>
+        </template>
 
-        <span class="span-wrapper" v-if="type === 'instance'">
-          <icon-instance></icon-instance>
-          Go on the instance
-        </span>
+        <template v-if="type === 'instance'">
+          <div class="icon">
+            <icon-instance></icon-instance>
+          </div>
+          <div>Go on the instance</div>
+        </template>
       </button>
     </div>
 
@@ -74,24 +80,20 @@
     }
 
     button {
+      display: flex;
+      flex-direction: row !important;
       margin-top: 30px;
       width: 250px;
       height: 35px;
 
-      .span-wrapper {
-        display: block;
-        width: 100%;
-        position: relative;
-      }
+      .icon {
+        margin-right: 10px;
 
-      svg {
-        width: 20px;
-        height: 20px;
-        position: absolute;
-        left: 24px;
-        top: 0;
-        bottom: 0;
-        margin: auto;
+        svg {
+          vertical-align: sub;
+          width: 20px;
+          height: 20px;
+        }
       }
     }
   }
diff --git a/src/components/Header.vue b/src/components/Header.vue
index b6378fc..2b315b3 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,8 +1,8 @@
 <template>
   <header id="main-header">
 
-    <nav class="navbar navbar-expand-lg">
-      <router-link to="/" class="navbar-brand">
+    <b-navbar toggleable="lg">
+      <b-navbar-brand to="/">
         <img alt="PeerTube" :src="buildImgUrl('brand-small.png')">
 
         <div class="support">
@@ -10,47 +10,40 @@
 
           <img alt="Framasoft text logo" :src="buildImgUrl('framasoft-logo-text-small.png')">
         </div>
-      </router-link>
+      </b-navbar-brand>
 
-      <button class="navbar-toggler collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
-        <span class="sr-only">Toggle navigation</span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-      </button>
+      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
 
-      <div id="navbar" class="collapse navbar-collapse">
-        <ul class="navbar-nav ml-auto">
-          <li class="nav-item">
-            <router-link class="nav-link" to="/" exact>Home</router-link>
-          </li>
+      <b-collapse id="nav-collapse" is-nav>
+        <b-navbar-nav class="ml-auto">
+          <b-nav-item to="/" exact>
+            <translate>Home</translate>
+          </b-nav-item>
 
-          <li class="nav-item ">
-            <router-link class="nav-link create-account" to="/instances">Create an account</router-link>
-          </li>
+          <b-nav-item class="create-account" to="/instances">
+            <translate>Create an account</translate>
+           </b-nav-item>
 
-          <li class="nav-item">
-            <router-link class="nav-link" to="/news">News</router-link>
-          </li>
+          <b-nav-item to="/news">
+            <translate>News</translate>
+          </b-nav-item>
 
-          <li class="nav-item">
-            <router-link class="nav-link" to="/help">Help</router-link>
-          </li>
+          <b-nav-item to="/help">
+            <translate>Help</translate>
+          </b-nav-item>
 
-          <li class="nav-item">
-            <a class="nav-link" href="https://docs.joinpeertube.org/#/contribute-getting-started" target="_blank" rel="noopener noreferrer">Contribute</a>
-          </li>
+          <b-nav-item href="https://docs.joinpeertube.org/#/contribute-getting-started" target="_blank" rel="noopener noreferrer">
+            <translate>Contribute</translate>
+          </b-nav-item>
 
-          <li class="nav-item">
-            <a class="nav-link" href="https://github.com/Chocobozzz/PeerTube" target="_blank" rel="noopener noreferrer">Git</a>
-          </li>
+          <b-nav-item href="https://github.com/Chocobozzz/PeerTube" target="_blank" rel="noopener noreferrer">
+            <translate>Git</translate>
+          </b-nav-item>
 
-          <div class="pull-right">
-            <I18n/>
-          </div>
-        </ul>
-      </div>
-    </nav>
+          <I18n/>
+        </b-navbar-nav>
+      </b-collapse>
+    </b-navbar>
   </header>
 </template>
 
@@ -62,6 +55,15 @@
     margin-bottom: 30px;
   }
 
+  .navbar-collapse.collapse.show {
+    background-color: #fff;
+
+    .nav-item {
+      margin-right: 0;
+      margin-top: 5px;
+    }
+  }
+
   .navbar-brand {
     @include disable-default-a-behaviour;
 
@@ -90,13 +92,13 @@
   }
 
   .nav-link {
+    color: #000 !important;
     padding: 0 !important;
-    color: #000;
     font-family: 'Proza Libre', sans-serif;
+  }
 
-    &.create-account {
-      font-weight: $font-semibold;
-    }
+  .create-account {
+    font-weight: $font-semibold;
   }
 
   .router-link-active:not(.navbar-brand) {
@@ -106,16 +108,17 @@
 
 <script>
   import I18n from './I18n.vue'
+  import { BCollapse, BNavbar, BNavbarNav, BNavbarBrand, BNavItem, BNavbarToggle } from 'bootstrap-vue'
 
   export default {
     components: {
-      I18n
-    },
-
-    methods: {
-      getPath (path) {
-        return process.env.BASE_URL + path
-      }
+      I18n,
+      BCollapse,
+      BNavbar,
+      BNavbarBrand,
+      BNavItem,
+      BNavbarNav,
+      BNavbarToggle
     }
   }
 </script>
diff --git a/src/scss/main.scss b/src/scss/main.scss
index e7d62fc..d581a0b 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -54,6 +54,21 @@ body {
   background-color: #ffad5c;
 }
 
+.container {
+  padding-top: 0;
+  margin-top: 0;
+  width: 1024px;
+
+  @media screen and (max-width: $responsive-screen) {
+    width: 100%;
+    max-width: unset;
+  }
+
+  @media screen and (max-width: $small-screen) {
+    padding: 0;
+  }
+}
+
 main {
   padding: 0 70px;
   background-color: #fff;
@@ -106,7 +121,8 @@ main {
   }
 
   @media screen and (max-width: $small-screen) {
-    min-width: auto !important;
+    width: 100% !important;
+    min-width: unset !important;
     padding: 0 5px !important;
   }
 }
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 31a3fb3..dae1c6b 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -335,6 +335,12 @@
         }
       }
     }
+
+    @media screen and (max-width: $small-screen) {
+      .jpt-button {
+        width: 100%;
+      }
+    }
   }
 
   .jpt-button-legend {
@@ -383,6 +389,10 @@
       font-size: 16px;
       margin: 50px auto;
       width: 500px;
+
+      @media screen and (max-width: $small-screen) {
+        width: 100%;
+      }
     }
   }