From 4c3fc4ab3f012afc48be15193595c6b945496288 Mon Sep 17 00:00:00 2001 From: Thomas Lange Date: Sat, 12 Jun 2021 00:56:45 +0200 Subject: Use SCSS for stylesheets --- theme/admin/rsrc/css/import/_responsive.scss | 80 ++++++++++++++++++++++++++++ 1 file changed, 80 insertions(+) create mode 100644 theme/admin/rsrc/css/import/_responsive.scss (limited to 'theme/admin/rsrc/css/import/_responsive.scss') diff --git a/theme/admin/rsrc/css/import/_responsive.scss b/theme/admin/rsrc/css/import/_responsive.scss new file mode 100644 index 0000000..a8275bf --- /dev/null +++ b/theme/admin/rsrc/css/import/_responsive.scss @@ -0,0 +1,80 @@ +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Responsive Level #1 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +@media only screen and (max-width: 50em) { + html { + font-size: 1.125rem; /*18px*/ + background-image: none !important; + } +} + +/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +# Responsive Level #2 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ +@media only screen and (max-width: 37.5em) { + .flex.flex-responsive { + display: block; + width: auto; + + > .flex-item { + width: 100%; + + + .flex-item { + border-top: 0.05rem solid #AAA; + } + } + } + + #main-navi { + font-size: 1rem; + + li { + span { + display: none; + } + + .fa { + margin-right: 0; + } + } + + a { + padding: 0.5rem; + } + } + + .flex-emoticons { + display: none; + } + + .actions { + float: none; + display: flex; + width: 100%; + flex-grow: 1; + justify-content: center; + overflow: hidden; + box-sizing: border-box; + + li { + flex-grow: 1; + + + li { + border-left: none; + } + } + } + + .actions-before { + float: none; + } + + .arguments { + font-size: 0.5rem; + line-height: 0.75rem; + } + + main { + padding: 0.5rem; + } +} -- cgit v1.2.3 From e5da1f532334a265e1b1c88d2a942e92654370d6 Mon Sep 17 00:00:00 2001 From: Thomas Lange Date: Sun, 13 Jun 2021 00:14:38 +0200 Subject: Replace the flex layout in favor of a grid layout This commit replaces the initial CSS flexbox layout for forms of the admin theme with a more elegant approach called "grid layout". :) Some interesting information: https://www.w3schools.com/css/css_grid.asp https://blog.logrocket.com/flexbox-vs-css-grid/ --- theme/admin/rsrc/css/import/_responsive.scss | 19 +++++-------------- 1 file changed, 5 insertions(+), 14 deletions(-) (limited to 'theme/admin/rsrc/css/import/_responsive.scss') diff --git a/theme/admin/rsrc/css/import/_responsive.scss b/theme/admin/rsrc/css/import/_responsive.scss index a8275bf..2d3d62a 100644 --- a/theme/admin/rsrc/css/import/_responsive.scss +++ b/theme/admin/rsrc/css/import/_responsive.scss @@ -12,19 +12,6 @@ # Responsive Level #2 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ @media only screen and (max-width: 37.5em) { - .flex.flex-responsive { - display: block; - width: auto; - - > .flex-item { - width: 100%; - - + .flex-item { - border-top: 0.05rem solid #AAA; - } - } - } - #main-navi { font-size: 1rem; @@ -43,10 +30,14 @@ } } - .flex-emoticons { + #emoticon-list-wrapper { display: none; } + .form-grid { + grid-template-columns: auto auto; + } + .actions { float: none; display: flex; -- cgit v1.2.3 From d3b109fae0e246d01b0c73afd828347bcf5d2e86 Mon Sep 17 00:00:00 2001 From: Thomas Lange Date: Sun, 13 Jun 2021 19:46:34 +0200 Subject: Use grid layout for items in administration area Introduce a new 1/2/3-column CSS grid layout in the administration area for items on overview pages and in the search results. The column count of the grid depends on the users viewport width. In addition, the default value of the following configuration settings has been changed to 12 because 12 can also be divided by 2 and 3 which is useful for the 1/2/3-column grid layout. ADMIN.PAGE.LIST_SIZE = 12 ADMIN.POST.LIST_SIZE = 12 --- theme/admin/rsrc/css/import/_responsive.scss | 46 ++++++++++++++++++++-------- 1 file changed, 33 insertions(+), 13 deletions(-) (limited to 'theme/admin/rsrc/css/import/_responsive.scss') diff --git a/theme/admin/rsrc/css/import/_responsive.scss b/theme/admin/rsrc/css/import/_responsive.scss index 2d3d62a..e387c98 100644 --- a/theme/admin/rsrc/css/import/_responsive.scss +++ b/theme/admin/rsrc/css/import/_responsive.scss @@ -1,17 +1,34 @@ -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Responsive Level #1 -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -@media only screen and (max-width: 50em) { +@media only screen and (max-width: 90em /*1440px*/) { + .item-container.grid { + grid-template-columns: auto auto; + } +} + +@media only screen and (min-width: 62.5em /*1000px*/) { + #main-content { + border: 0.05rem solid #AAA; + border-top: none; + border-bottom: none; + } +} + +@media only screen and (max-width: 62.5em /*1000px*/) { + .item-container.grid { + grid-template-columns: auto; + } +} + +@media only screen and (max-width: 50em /*800px*/) { html { font-size: 1.125rem; /*18px*/ - background-image: none !important; } } -/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -# Responsive Level #2 -++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -@media only screen and (max-width: 37.5em) { +@media only screen and (max-width: 37.5em /*600px*/) { + #main-content { + padding: 0.5rem; + } + #main-navi { font-size: 1rem; @@ -34,6 +51,13 @@ display: none; } + .item-container.grid { + grid-column-gap: 0.75rem; + grid-row-gap: 0.75rem; + column-gap: 0.75rem; + row-gap: 0.75rem; + } + .form-grid { grid-template-columns: auto auto; } @@ -64,8 +88,4 @@ font-size: 0.5rem; line-height: 0.75rem; } - - main { - padding: 0.5rem; - } } -- cgit v1.2.3