Update client dependencies

[github/Chocobozzz/PeerTube.git] / client / src / app / app.component.scss

diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index ca0030922f77565a88a04521a44565fbb2edc952..7259006e5a1ae2571e9379284bcbbb4e28121617 100644 (file)
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -20,23 +20,27 @@
   }
 
   .top-left-block {
+    z-index: 100;
     background-color: #fff;
     border-right: 1px solid $header-border-color;
+    height: $header-height;
     line-height: $header-height;
     margin-top: 0;
     margin-bottom: 0;
     display: flex;
     position: fixed;
+    padding: 0;
 
     &.border-bottom {
       border-bottom: 1px solid $header-border-color;
     }
 
     .hamburger-block {
-      margin-right: 20px;
+      margin-right: 15px;
       margin-left: 15px;
 
       .glyphicon {
+        cursor: pointer;
         position: relative;
         top: 4px;
       }
@@ -47,12 +51,12 @@
       a {
         color: inherit !important;
         display: block;
-        background: url(/client/assets/logo.png) no-repeat;
+        background: url('../assets/logo.png') no-repeat;
         background-size: contain;
         background-position: center;
-        width: 180px;
         height: 100%;
         margin: auto;
+        width: 135px;
 
         &:hover {
           color: inherit !important;
@@ -60,6 +64,63 @@
         }
       }
     }
+
+    @media screen and (max-width: 500px) {
+      #peertube-title {
+        display: none;
+      }
+
+      .hamburger-block {
+        width: 100%;
+        text-align: center;
+      }
+    }
+
+    @media screen and (min-width: 500px) and (max-width: 600px) {
+      #peertube-title a {
+        width: 80px;
+      }
+    }
+
+    @media screen and (min-width: 600px) and (max-width: 700px) {
+      #peertube-title a {
+        width: 100px;
+      }
+    }
+
+    @media screen and (min-width: 1000px) {
+      #peertube-title a {
+        width: 120px;
+      }
+    }
+
+    @media screen and (min-width: 1000px) {
+      #peertube-title a {
+        width: 120px;
+      }
+    }
+
+    @media screen and (min-width: 1200px) {
+      padding-left: 15px;
+
+      .hamburger-block {
+        margin-right: 15px;
+      }
+
+      #peertube-title a {
+        width: 135px;
+      }
+    }
+
+    @media screen and (min-width: 1600px) {
+      .hamburger-block {
+        margin-right: 20px;
+      }
+
+      #peertube-title a {
+        width: 180px;
+      }
+    }
   }
 
   my-search {