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

1 files changed, 26 insertions, 10 deletions

diff --git a/theme/admin/rsrc/css/main.scss b/theme/admin/rsrc/css/main.scss
index e00c60a..0397754 100644
--- a/theme/admin/rsrc/css/main.scss
+++ b/theme/admin/rsrc/css/main.scss
@@ -22,7 +22,7 @@ a {
 # Headings
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
 h1, h2, h3, h4, h5, h6 {
-	margin: 0;
+	margin-bottom: 0;
 	text-transform: uppercase;
 
 	+p {
@@ -35,6 +35,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h1 {
+	margin-top: 0;
 	font-size: 0.80rem;
 }
 
@@ -83,10 +84,6 @@ body {
 	flex-direction: column;
 }
 
-main {
-	padding: 0.75rem;
-}
-
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 # Main content
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@@ -95,9 +92,12 @@ main {
 	width: 100%;
 	background: #FFF;
 	box-sizing: border-box;
-	border: 0.05rem solid #AAA;
-	border-top: none;
-	border-bottom: none;
+	padding: 0.75rem;
+	// border definition in _responsive.scss
+
+	&.wide {
+		max-width: 90rem;
+	}
 }
 
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
@@ -249,6 +249,7 @@ main {
 	display: flex;
 	box-sizing: border-box;
 	justify-content: space-between;
+	margin-top: 0.75rem;
 
 	> div {
 		display: flex;
@@ -422,9 +423,9 @@ table, td {
 # Item Element
 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
 .item {
-	display: block;
+	display: flex;
+	flex-direction: column;
 	border: 0.05rem solid #AAA;
-	margin-bottom: 1rem;
 	clear: both;
 
 	header {
@@ -432,6 +433,10 @@ table, td {
 		border-bottom: 0.05rem solid #AAA;
 		position: sticky;
 		top: 0;
+
+		h2 {
+			margin-top: 0;
+		}
 	}
 
 	footer {
@@ -473,6 +478,7 @@ table, td {
 		padding: 0.75rem;
 		overflow: hidden;
 		font-family: inherit;
+		flex-grow: 1;
 
 		p {
 			margin-bottom: 0;
@@ -494,6 +500,16 @@ table, td {
 		background: #EEE;
 		border: 0.05rem solid #AAA;
 	}
+
+	&-container.grid {
+		width: 100%;
+		display: grid;
+		grid-template-columns: auto auto auto;
+		grid-column-gap: 1rem;
+		grid-row-gap: 1rem;
+		column-gap: 1rem;
+		row-gap: 1rem;
+	}
 }
 
 /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++