Add mixins for modern desktop screen resolutions (#3095)

* Added mixins for modern screen resolutions

* Update mediaQuery.scss

* Update Screen.js

* Update Screen.js

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Screen.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Screen.js
index 296af648bc8f9e3cff6162a21cb03bf85dc9e489..ef59b21013fc964817cd311a020c20da6e310b55 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Screen.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Screen.js
@@ -18,15 +18,18 @@ define(['Core', 'Dictionary', 'Environment'], function(Core, Dictionary, Environ
        var _pageOverlayCounter = 0;
        
        var _mqMap = Dictionary.fromObject({
-               'screen-xs': '(max-width: 544px)',                              /* smartphone */
-               'screen-sm': '(min-width: 545px) and (max-width: 768px)',       /* tablet (portrait) */
-               'screen-sm-down': '(max-width: 768px)',                         /* smartphone + tablet (portrait) */
-               'screen-sm-up': '(min-width: 545px)',                           /* tablet (portrait) + tablet (landscape) + desktop */
-               'screen-sm-md': '(min-width: 545px) and (max-width: 1024px)',   /* tablet (portrait) + tablet (landscape) */
-               'screen-md': '(min-width: 769px) and (max-width: 1024px)',      /* tablet (landscape) */
-               'screen-md-down': '(max-width: 1024px)',                        /* smartphone + tablet (portrait) + tablet (landscape) */
-               'screen-md-up': '(min-width: 769px)',                           /* tablet (landscape) + desktop */
-               'screen-lg': '(min-width: 1025px)'                              /* desktop */
+               'screen-xs': '(max-width: 544px)',                               /* smartphone */
+               'screen-sm': '(min-width: 545px) and (max-width: 768px)',        /* tablet (portrait) */
+               'screen-sm-down': '(max-width: 768px)',                          /* smartphone + tablet (portrait) */
+               'screen-sm-up': '(min-width: 545px)',                            /* tablet (portrait) + tablet (landscape) + desktop */
+               'screen-sm-md': '(min-width: 545px) and (max-width: 1024px)',    /* tablet (portrait) + tablet (landscape) */
+               'screen-md': '(min-width: 769px) and (max-width: 1024px)',       /* tablet (landscape) */
+               'screen-md-down': '(max-width: 1024px)',                         /* smartphone + tablet (portrait) + tablet (landscape) */
+               'screen-md-up': '(min-width: 769px)',                            /* tablet (landscape) + desktop */
+               'screen-lg': '(min-width: 1025px)',                              /* desktop */
+               'screen-lg-only': '(min-width: 1025px) and (max-width: 1280px)',
+               'screen-lg-down': '(max-width: 1280)',
+               'screen-xl': '(min-width: 1281px)'
        });
        
        // Microsoft Edge rewrites the media queries to whatever it

diff --git a/wcfsetup/install/files/style/bootstrap/mixin/mediaQuery.scss b/wcfsetup/install/files/style/bootstrap/mixin/mediaQuery.scss
index 8c69368dcc9e6cae37330a65ffd3fce4da9e67f9..914048d02a33648f8ed2f6f093a72cef8aedd7d5 100644 (file)
--- a/wcfsetup/install/files/style/bootstrap/mixin/mediaQuery.scss
+++ b/wcfsetup/install/files/style/bootstrap/mixin/mediaQuery.scss
@@ -60,3 +60,21 @@
                @content;
        }
 }
+
+@mixin screen-lg-only() {
+       @media screen and (min-width: 1025px) and (max-width: 1280px) {
+               @content;
+       }
+}
+
+@mixin screen-lg-down() {
+       @media screen and (max-width: 1280px) {
+               @content;
+       }
+}
+
+@mixin screen-xl() {
+       @media screen and (min-width: 1281px) {
+               @content;
+       }
+}