From fd2a7c8bf70956fc61fc844779cbeee87b2bf1ec Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Wed, 6 Nov 2019 10:33:07 +0100
Subject: [PATCH] Improve responsive

---
 src/components/ContentSelection.vue | 67 +++++++++++++++++++----------
 src/scss/main.scss                  |  3 +-
 src/views/Instances.vue             |  4 +-
 3 files changed, 49 insertions(+), 25 deletions(-)

diff --git a/src/components/ContentSelection.vue b/src/components/ContentSelection.vue
index 8706d0b..6dda320 100644
--- a/src/components/ContentSelection.vue
+++ b/src/components/ContentSelection.vue
@@ -2,6 +2,16 @@
   <div id="content-selection">
 
     <div class="left">
+      <div class="title title-small-screens">
+        <div class="icon">
+          <icon-video v-if="type === 'video'"></icon-video>
+          <icon-channel v-if="type === 'channel'"></icon-channel>
+          <icon-instance v-if="type === 'instance'"></icon-instance>
+        </div>
+
+        {{ title }}
+      </div>
+
       <img :src="buildImgUrl('content-selection-thumbnails/' + thumbnailName)" alt="thumbnail"/>
 
       <a target="_blank" rel="noopener noreferrer" :href="url" class="jpt-button jpt-button-medium">
@@ -29,7 +39,7 @@
     </div>
 
     <div class="right">
-      <div class="title">
+      <div class="title title-normal-screens">
         <div class="icon">
           <icon-video v-if="type === 'video'"></icon-video>
           <icon-channel v-if="type === 'channel'"></icon-channel>
@@ -57,14 +67,21 @@
   #content-selection {
     display: flex;
 
-    @media screen and (max-width: $small-screen) {
-      flex-direction: column;
+    .title-small-screens {
+      display: none;
+    }
 
-      .left {
-        align-items: center !important;
-        display: flex !important;
-        flex-direction: column !important;
-        margin-bottom: 20px !important;
+    .title {
+      font-size: 24px;
+      font-weight: $font-semibold;
+      display: flex;
+      align-items: center;
+      font-family: 'Proza Libre', sans-serif;
+
+      .icon {
+        margin-right: 10px;
+        position: relative;
+        top: -2px;
       }
     }
 
@@ -100,20 +117,6 @@
     .right {
       min-height: 170px;
 
-      .title {
-        font-size: 24px;
-        font-weight: $font-semibold;
-        display: flex;
-        align-items: center;
-        font-family: 'Proza Libre', sans-serif;
-
-        .icon {
-          margin-right: 10px;
-          position: relative;
-          top: -2px;
-        }
-      }
-
       .description {
         font-size: 16px;
       }
@@ -131,6 +134,26 @@
         }
       }
     }
+
+    @media screen and (max-width: $small-screen) {
+      flex-direction: column;
+
+      .title-small-screens {
+        display: inherit;
+        margin-bottom: 5px;
+      }
+
+      .title-normal-screens {
+        display: none;
+      }
+
+      .left {
+        align-items: center;
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 20px;
+      }
+    }
   }
 </style>
 
diff --git a/src/scss/main.scss b/src/scss/main.scss
index 128ace7..0778ce5 100644
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@@ -191,7 +191,8 @@ p > a {
     font-size: 25px;
 
     .brand-title {
-      height: 30px;
+      height: 26px;
+      margin-left: 5px;
     }
   }
 }
diff --git a/src/views/Instances.vue b/src/views/Instances.vue
index eb8d444..86c15fd 100644
--- a/src/views/Instances.vue
+++ b/src/views/Instances.vue
@@ -17,7 +17,7 @@
 
       <div class="block-with-image step-1">
         <div>
-          <img :src="buildImgUrl('peertube-federation-multiplicity.png')" alt="Multiple instances illustration">
+          <img :src="buildImgUrl('peertube-federation-multiplicity.jpg')" alt="Multiple instances illustration">
         </div>
 
         <div>
@@ -40,7 +40,7 @@
         </div>
 
         <div>
-          <img :src="buildImgUrl('peertube-upload.png')" alt="PeerTube upload illustration">
+          <img :src="buildImgUrl('peertube-upload.jpg')" alt="PeerTube upload illustration">
         </div>
       </div>