From 3500ee7b331b9aa427d7574a8abe29f6982916bf Mon Sep 17 00:00:00 2001 From: An Phan Date: Thu, 17 Mar 2016 17:46:24 +0800 Subject: [PATCH] Set media queries to viewport, not device --- resources/assets/js/components/auth/login-form.vue | 2 +- .../assets/js/components/main-wrapper/extra/index.vue | 4 ++-- .../js/components/main-wrapper/main-content/album.vue | 4 ++-- .../js/components/main-wrapper/main-content/artist.vue | 4 ++-- .../js/components/main-wrapper/main-content/home.vue | 2 +- .../js/components/main-wrapper/main-content/index.vue | 2 +- .../components/main-wrapper/main-content/profile.vue | 2 +- .../js/components/main-wrapper/main-content/queue.vue | 2 +- .../components/main-wrapper/main-content/settings.vue | 2 +- .../js/components/main-wrapper/main-content/users.vue | 6 +++--- .../js/components/main-wrapper/sidebar/index.vue | 2 +- resources/assets/js/components/shared/song-list.vue | 2 +- .../assets/js/components/site-footer/equalizer.vue | 2 +- resources/assets/js/components/site-footer/index.vue | 10 +++++----- resources/assets/js/components/site-header/index.vue | 2 +- .../assets/js/components/site-header/search-form.vue | 2 +- .../assets/js/components/site-header/user-badge.vue | 2 +- 17 files changed, 26 insertions(+), 26 deletions(-) diff --git a/resources/assets/js/components/auth/login-form.vue b/resources/assets/js/components/auth/login-form.vue index ab72004f..eefa527f 100644 --- a/resources/assets/js/components/auth/login-form.vue +++ b/resources/assets/js/components/auth/login-form.vue @@ -87,7 +87,7 @@ } @media only screen - and (max-device-width : 414px) { + and (max-width : 414px) { border: 0; background: transparent; } diff --git a/resources/assets/js/components/main-wrapper/extra/index.vue b/resources/assets/js/components/main-wrapper/extra/index.vue index b40e9c0c..8a12e81a 100644 --- a/resources/assets/js/components/main-wrapper/extra/index.vue +++ b/resources/assets/js/components/main-wrapper/extra/index.vue @@ -173,7 +173,7 @@ } - @media only screen and (max-device-width : 1024px) { + @media only screen and (max-width : 1024px) { position: fixed; height: calc(100vh - #{$headerHeight + $footerHeight}); padding-bottom: $footerHeight; // make sure the footer can never overlap the content @@ -188,7 +188,7 @@ } } - @media only screen and (max-device-width : 667px) { + @media only screen and (max-width : 667px) { width: 100%; } } diff --git a/resources/assets/js/components/main-wrapper/main-content/album.vue b/resources/assets/js/components/main-wrapper/main-content/album.vue index d4d0bd1b..0e875cdf 100644 --- a/resources/assets/js/components/main-wrapper/main-content/album.vue +++ b/resources/assets/js/components/main-wrapper/main-content/album.vue @@ -120,7 +120,7 @@ position: relative; padding-left: 84px; - @media only screen and (max-device-width : 768px) { + @media only screen and (max-width : 768px) { padding-left: 0; } } @@ -130,7 +130,7 @@ left: 0; top: -7px; - @media only screen and (max-device-width : 768px) { + @media only screen and (max-width : 768px) { display: none; } } diff --git a/resources/assets/js/components/main-wrapper/main-content/artist.vue b/resources/assets/js/components/main-wrapper/main-content/artist.vue index 8f5003b2..929fb871 100644 --- a/resources/assets/js/components/main-wrapper/main-content/artist.vue +++ b/resources/assets/js/components/main-wrapper/main-content/artist.vue @@ -114,7 +114,7 @@ position: relative; padding-left: 84px; - @media only screen and (max-device-width : 768px) { + @media only screen and (max-width : 768px) { padding-left: 0; } } @@ -124,7 +124,7 @@ left: 0; top: -7px; - @media only screen and (max-device-width : 768px) { + @media only screen and (max-width : 768px) { display: none; } } diff --git a/resources/assets/js/components/main-wrapper/main-content/home.vue b/resources/assets/js/components/main-wrapper/main-content/home.vue index b4c92633..e2189a2f 100644 --- a/resources/assets/js/components/main-wrapper/main-content/home.vue +++ b/resources/assets/js/components/main-wrapper/main-content/home.vue @@ -305,7 +305,7 @@ } } - @media only screen and (max-device-width: 768px) { + @media only screen and (max-width: 768px) { .top-sections { display: block; diff --git a/resources/assets/js/components/main-wrapper/main-content/index.vue b/resources/assets/js/components/main-wrapper/main-content/index.vue index 5362aba3..95a251d8 100644 --- a/resources/assets/js/components/main-wrapper/main-content/index.vue +++ b/resources/assets/js/components/main-wrapper/main-content/index.vue @@ -154,7 +154,7 @@ @media only screen - and (max-device-width : 768px) { + and (max-width : 768px) { h1.heading { font-size: 18px; min-height: 0; diff --git a/resources/assets/js/components/main-wrapper/main-content/profile.vue b/resources/assets/js/components/main-wrapper/main-content/profile.vue index 73ed0582..a5b498a4 100644 --- a/resources/assets/js/components/main-wrapper/main-content/profile.vue +++ b/resources/assets/js/components/main-wrapper/main-content/profile.vue @@ -250,7 +250,7 @@ } } - @media only screen and (max-device-width : 667px) { + @media only screen and (max-width : 667px) { input { &[type="text"], &[type="email"], &[type="password"] { width: 100%; diff --git a/resources/assets/js/components/main-wrapper/main-content/queue.vue b/resources/assets/js/components/main-wrapper/main-content/queue.vue index c777db18..adda7f47 100644 --- a/resources/assets/js/components/main-wrapper/main-content/queue.vue +++ b/resources/assets/js/components/main-wrapper/main-content/queue.vue @@ -146,7 +146,7 @@ } } - @media only screen and (max-device-width : 667px) { + @media only screen and (max-width : 667px) { } } diff --git a/resources/assets/js/components/main-wrapper/main-content/settings.vue b/resources/assets/js/components/main-wrapper/main-content/settings.vue index f9a040b1..daebe1ec 100644 --- a/resources/assets/js/components/main-wrapper/main-content/settings.vue +++ b/resources/assets/js/components/main-wrapper/main-content/settings.vue @@ -68,7 +68,7 @@ margin-top: 12px; } - @media only screen and (max-device-width : 667px) { + @media only screen and (max-width : 667px) { input[type="text"] { width: 100%; } diff --git a/resources/assets/js/components/main-wrapper/main-content/users.vue b/resources/assets/js/components/main-wrapper/main-content/users.vue index 93f552b6..fb18fb6c 100644 --- a/resources/assets/js/components/main-wrapper/main-content/users.vue +++ b/resources/assets/js/components/main-wrapper/main-content/users.vue @@ -330,7 +330,7 @@ } } - @media only screen and (max-device-width : 667px) { + @media only screen and (max-width : 667px) { form.user-create, form.user-edit { flex-direction: column; align-items: stretch; @@ -363,8 +363,8 @@ } @media only screen - and (min-device-width : 668px) - and (max-device-width : 768px) { + and (min-width : 668px) + and (max-width : 768px) { .users { flex-direction: column; diff --git a/resources/assets/js/components/main-wrapper/sidebar/index.vue b/resources/assets/js/components/main-wrapper/sidebar/index.vue index eea1a585..71d5401b 100644 --- a/resources/assets/js/components/main-wrapper/sidebar/index.vue +++ b/resources/assets/js/components/main-wrapper/sidebar/index.vue @@ -261,7 +261,7 @@ } - @media only screen and (max-device-width : 667px) { + @media only screen and (max-width : 667px) { position: fixed; height: calc(100vh - #{$headerHeight + $footerHeight}); padding-bottom: $footerHeight; // make sure the footer can never overlap the content diff --git a/resources/assets/js/components/shared/song-list.vue b/resources/assets/js/components/shared/song-list.vue index 4e8aa353..2b670493 100644 --- a/resources/assets/js/components/shared/song-list.vue +++ b/resources/assets/js/components/shared/song-list.vue @@ -534,7 +534,7 @@ } - @media only screen and (max-device-width: 768px) { + @media only screen and (max-width: 768px) { table, tbody, tr { display: block; } diff --git a/resources/assets/js/components/site-footer/equalizer.vue b/resources/assets/js/components/site-footer/equalizer.vue index 8311cfff..91e54799 100644 --- a/resources/assets/js/components/site-footer/equalizer.vue +++ b/resources/assets/js/components/site-footer/equalizer.vue @@ -369,7 +369,7 @@ } } - @media only screen and (max-device-width : 768px) { + @media only screen and (max-width : 768px) { position: fixed; max-width: 414px; left: auto; diff --git a/resources/assets/js/components/site-footer/index.vue b/resources/assets/js/components/site-footer/index.vue index e303589e..9681ab13 100644 --- a/resources/assets/js/components/site-footer/index.vue +++ b/resources/assets/js/components/site-footer/index.vue @@ -361,7 +361,7 @@ } - @media only screen and (max-device-width: 768px) { + @media only screen and (max-width: 768px) { position: absolute !important; right: 0; height: $footerHeight; @@ -423,7 +423,7 @@ } - @media only screen and (max-device-width: 768px) { + @media only screen and (max-width: 768px) { flex: 1; &::before { @@ -446,7 +446,7 @@ @include hasSoftGradientOnTop($colorMainBgr); - @media only screen and (max-device-width: 768px) { + @media only screen and (max-width: 768px) { width: 100%; position: absolute; top: 0; @@ -509,7 +509,7 @@ } - @media only screen and (max-device-width: 768px) { + @media only screen and (max-width: 768px) { .meta, .title { display: none; } @@ -531,7 +531,7 @@ width: 16px; } - @media only screen and (max-device-width: 768px) { + @media only screen and (max-width: 768px) { display: none !important; } } diff --git a/resources/assets/js/components/site-header/index.vue b/resources/assets/js/components/site-header/index.vue index 38f13c33..7e4008ec 100644 --- a/resources/assets/js/components/site-header/index.vue +++ b/resources/assets/js/components/site-header/index.vue @@ -74,7 +74,7 @@ display: none; } - @media only screen and (max-device-width: 667px) { + @media only screen and (max-width: 667px) { display: flex; align-content: stretch; justify-content: flext-start; diff --git a/resources/assets/js/components/site-header/search-form.vue b/resources/assets/js/components/site-header/search-form.vue index 5b9b1060..c0690157 100644 --- a/resources/assets/js/components/site-header/search-form.vue +++ b/resources/assets/js/components/site-header/search-form.vue @@ -63,7 +63,7 @@ - @media only screen and (max-device-width : 667px) { + @media only screen and (max-width : 667px) { z-index: -1; position: absolute; left: 0; diff --git a/resources/assets/js/components/site-header/user-badge.vue b/resources/assets/js/components/site-header/user-badge.vue index 9763cf51..a7d8535e 100644 --- a/resources/assets/js/components/site-header/user-badge.vue +++ b/resources/assets/js/components/site-header/user-badge.vue @@ -57,7 +57,7 @@ @include vertical-center(); } - @media only screen and (max-device-width : 667px) { + @media only screen and (max-width : 667px) { flex: 0 0 96px; margin-right: 0; padding-right: 0;