From fa10a9fac36a14fc89099bdd980e1d02d942bbdd Mon Sep 17 00:00:00 2001 From: Sascha Greuel Date: Wed, 13 Nov 2019 17:39:23 +0100 Subject: [PATCH] Add mixins for modern desktop screen resolutions (#3095) * Added mixins for modern screen resolutions * Update mediaQuery.scss * Update Screen.js * Update Screen.js --- .../files/js/WoltLabSuite/Core/Ui/Screen.js | 21 +++++++++++-------- .../style/bootstrap/mixin/mediaQuery.scss | 18 ++++++++++++++++ 2 files changed, 30 insertions(+), 9 deletions(-) diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Screen.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Screen.js index 296af648bc..ef59b21013 100644 --- 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 8c69368dcc..914048d02a 100644 --- 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; + } +} -- 2.20.1