From d3b109fae0e246d01b0c73afd828347bcf5d2e86 Mon Sep 17 00:00:00 2001
From: Thomas Lange <code@nerdmind.de>
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