From ece3029bd99a76b3c48a1cc8c58914c5cf61f106 Mon Sep 17 00:00:00 2001
From: Rigel Kent <sendmemail@rigelk.eu>
Date: Mon, 3 Feb 2020 22:33:28 +0100
Subject: [PATCH] Media queries to use variables when possible

---
 .../my-account-video-channels.component.scss                   | 2 +-
 .../my-account-video-playlists.component.scss                  | 2 +-
 client/src/app/+signup/+register/register.component.scss       | 2 +-
 client/src/app/app.component.scss                              | 2 +-
 client/src/app/core/hotkeys/hotkeys.component.scss             | 3 ++-
 client/src/sass/application.scss                               | 2 +-
 client/src/sass/include/_miniature.scss                        | 2 +-
 7 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss
index 20582e478..db0c7f94f 100644
--- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss
+++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss
@@ -58,7 +58,7 @@
   margin: 20px 0 50px;
 }
 
-@media screen and (max-width: 800px) {
+@media screen and (max-width: $small-view) {
   .video-channels-header {
     text-align: center;
   }
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss
index 4e4156b22..aed3302ba 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlists.component.scss
@@ -43,7 +43,7 @@
   }
 }
 
-@media screen and (max-width: 800px) {
+@media screen and (max-width: $small-view) {
   .video-playlists-header {
     text-align: center;
   }
diff --git a/client/src/app/+signup/+register/register.component.scss b/client/src/app/+signup/+register/register.component.scss
index 2f62dd59d..e135b5cb4 100644
--- a/client/src/app/+signup/+register/register.component.scss
+++ b/client/src/app/+signup/+register/register.component.scss
@@ -44,7 +44,7 @@
       }
     }
 
-    @media screen and (max-width: 500px) {
+    @media screen and (max-width: $mobile-view) {
       width: auto;
     }
   }
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index 7a6710829..a7be8e1af 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -61,7 +61,7 @@
       }
     }
 
-    @media screen and (max-width: 500px) {
+    @media screen and (max-width: $mobile-view) {
       width: 70px;
 
       .peertube-title {
diff --git a/client/src/app/core/hotkeys/hotkeys.component.scss b/client/src/app/core/hotkeys/hotkeys.component.scss
index 02c8c59aa..a970260c9 100644
--- a/client/src/app/core/hotkeys/hotkeys.component.scss
+++ b/client/src/app/core/hotkeys/hotkeys.component.scss
@@ -1,3 +1,4 @@
+@import '_variables';
 @import '_mixins';
 
 .cfp-hotkeys-container {
@@ -93,7 +94,7 @@
   cursor: pointer;
 }
 
-@media all and (max-width: 500px) {
+@media all and (max-width: $mobile-view) {
   .cfp-hotkeys {
     font-size: 0.8em;
   }
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 4ad14ea5b..6bf345789 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -167,7 +167,7 @@ label {
     color: var(--mainForegroundColor);
   }
 
-  @media screen and (max-width: 500px) {
+  @media screen and (max-width: $mobile-view) {
     margin-right: 15px;
   }
 }
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index b0e07d61a..c1d1b3c59 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -240,7 +240,7 @@ $play-overlay-width: 18px;
     width: $video-miniature-width * 2;
   }
 
-  @media screen and (max-width: 500px) {
+  @media screen and (max-width: $mobile-view) {
     width: auto;
     margin: 0 !important;
 
-- 
2.41.0