aboutsummaryrefslogtreecommitdiffstats
path: root/theme/admin/rsrc
diff options
context:
space:
mode:
authorThomas Lange <code@nerdmind.de>2021-06-13 19:46:34 +0200
committerThomas Lange <code@nerdmind.de>2021-06-13 19:46:34 +0200
commitd3b109fae0e246d01b0c73afd828347bcf5d2e86 (patch)
tree00e9aaef44b0c49c9695dfa7357ef59a75ada60c /theme/admin/rsrc
parentb3fea3b92240a0ce51437ff84d933dd7a942a1b8 (diff)
downloadblog-d3b109fae0e246d01b0c73afd828347bcf5d2e86.tar.gz
blog-d3b109fae0e246d01b0c73afd828347bcf5d2e86.tar.xz
blog-d3b109fae0e246d01b0c73afd828347bcf5d2e86.zip
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
Diffstat (limited to 'theme/admin/rsrc')
-rw-r--r--theme/admin/rsrc/css/import/_responsive.scss46
-rw-r--r--theme/admin/rsrc/css/main.css71
-rw-r--r--theme/admin/rsrc/css/main.scss36
3 files changed, 109 insertions, 44 deletions
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;
- }
}
diff --git a/theme/admin/rsrc/css/main.css b/theme/admin/rsrc/css/main.css
index 2677f19..f3a39c1 100644
--- a/theme/admin/rsrc/css/main.css
+++ b/theme/admin/rsrc/css/main.css
@@ -22,7 +22,7 @@ a:focus {
# Headings
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
h1, h2, h3, h4, h5, h6 {
- margin: 0;
+ margin-bottom: 0;
text-transform: uppercase;
}
h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p {
@@ -33,6 +33,7 @@ h1 .fa, h2 .fa, h3 .fa, h4 .fa, h5 .fa, h6 .fa {
}
h1 {
+ margin-top: 0;
font-size: 0.8rem;
}
@@ -81,10 +82,6 @@ body {
flex-direction: column;
}
-main {
- padding: 0.75rem;
-}
-
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# Main content
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
@@ -93,9 +90,10 @@ main {
width: 100%;
background: #FFF;
box-sizing: border-box;
- border: 0.05rem solid #AAA;
- border-top: none;
- border-bottom: none;
+ padding: 0.75rem;
+}
+#main-content.wide {
+ max-width: 90rem;
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
@@ -230,6 +228,7 @@ main {
display: flex;
box-sizing: border-box;
justify-content: space-between;
+ margin-top: 0.75rem;
}
#site-navi > div {
display: flex;
@@ -387,9 +386,9 @@ table, td {
# Item Element
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.item {
- display: block;
+ display: flex;
+ flex-direction: column;
border: 0.05rem solid #AAA;
- margin-bottom: 1rem;
clear: both;
}
.item header {
@@ -398,6 +397,9 @@ table, td {
position: sticky;
top: 0;
}
+.item header h2 {
+ margin-top: 0;
+}
.item footer {
border-top: 0.05rem solid #AAA;
}
@@ -430,6 +432,7 @@ table, td {
padding: 0.75rem;
overflow: hidden;
font-family: inherit;
+ flex-grow: 1;
}
.item blockquote p {
margin-bottom: 0;
@@ -448,6 +451,15 @@ table, td {
background: #EEE;
border: 0.05rem solid #AAA;
}
+.item-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;
+}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# Argument list
@@ -665,20 +677,34 @@ label:after {
margin-bottom: 1rem;
}
-/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
-# Responsive Level #1
-++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+@media only screen and (max-width: 90em) {
+ .item-container.grid {
+ grid-template-columns: auto auto;
+ }
+}
+@media only screen and (min-width: 62.5em) {
+ #main-content {
+ border: 0.05rem solid #AAA;
+ border-top: none;
+ border-bottom: none;
+ }
+}
+@media only screen and (max-width: 62.5em) {
+ .item-container.grid {
+ grid-template-columns: auto;
+ }
+}
@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) {
+ #main-content {
+ padding: 0.5rem;
+ }
+
#main-navi {
font-size: 1rem;
}
@@ -696,6 +722,13 @@ label:after {
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;
}
@@ -724,10 +757,6 @@ label:after {
font-size: 0.5rem;
line-height: 0.75rem;
}
-
- main {
- padding: 0.5rem;
- }
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# FontAwesome Main
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;
+ }
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++