From b74e9bbd699d41bfd2683860b7d735e2d2e5764c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torsten=20L=C3=BCcke?= <privat@torsten-hettstedt.de>
Date: Wed, 14 Apr 2021 17:10:01 +0200
Subject: [PATCH] =?UTF-8?q?Es=20wurde=20an=20die=20Darstellung=20auf=20ein?=
 =?UTF-8?q?en=20iPhone=20bzw.=20=C3=A4hnlichen=20Ger=C3=A4ten=20angepasst.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/public/less/lesslib/media_queries.less    | 53 +++++++++++++++++---
 ui/public/less/lesslib/mixins.framework.less | 15 +++---
 2 files changed, 53 insertions(+), 15 deletions(-)

diff --git a/ui/public/less/lesslib/media_queries.less b/ui/public/less/lesslib/media_queries.less
index a651da0..0b57d01 100644
--- a/ui/public/less/lesslib/media_queries.less
+++ b/ui/public/less/lesslib/media_queries.less
@@ -137,6 +137,7 @@
         width: @breiteNavBereich;
     }
 }
+
 @media screen and (max-width: 830px) {
     html body {
         @boxHeight: 5rem;
@@ -145,19 +146,21 @@
             font-size: @boxHeight;
             text-align: center;
             padding: 1rem;
-
+        }
+        & > footer {
+            padding: 1rem;
         }
         & > nav {
-            background: none;
-            left:auto;
             ul {
                 li {
                     display: inline-block;
                     border: none;
                     width: auto;
-                        a {
-                            padding: 0.75rem;
-                        }
+                    height: 1.5em;
+                    padding-top: 0.25em;
+                    a {
+                        padding: 0.75rem;
+                    }
                     &:not(:first-child) {
                         border-left: none;
                     }
@@ -184,6 +187,7 @@
                 @formLabelWidth: 10rem;
                 @formItemWidth: 40rem;
                 @sectionMargin: 1rem;
+                margin: @sectionMargin;
                 fieldset {
                     width: auto;
                     margin: 1rem auto;
@@ -262,6 +266,41 @@
         }
     }
 }
-
 @media screen and (max-width: 720px) {
+    html body {
+        @boxHeight: 2.5rem;
+        & > header {
+            height: @boxHeight;
+            font-size: @boxHeight;
+            text-align: center;
+            padding: 1rem;
+        }
+
+        & > nav {
+            .hamburgerMenu();
+        }
+        main section header {
+            h1, h2 {
+                text-align: center;
+                margin: 0.5rem auto;
+            }
+        }
+        table {
+            width: 100%;
+            margin: 1rem 0;
+            td, th {
+                padding: 0.25rem;
+            }
+            colgroup:not(:first-child) col:first-child{
+                border-left: solid thin;
+            }
+            thead {
+                th {
+                    font-size: 100%;
+                    font-weight: bold;
+                    .hyphens();
+                }
+            }
+        }
+    }
 }
\ No newline at end of file
diff --git a/ui/public/less/lesslib/mixins.framework.less b/ui/public/less/lesslib/mixins.framework.less
index 28424a4..258c97e 100644
--- a/ui/public/less/lesslib/mixins.framework.less
+++ b/ui/public/less/lesslib/mixins.framework.less
@@ -67,19 +67,18 @@
 	color: white;
 	width: 3rem;
 	height: 2rem;
-	top: 0.5rem;
-	right: 0.5rem;
-	left: auto;
+	top: 0.25rem;
+	left: 0.25rem;
 	.border-radius(4px);
 	border: none;
-	.vertical-gradient(#555; #000);
+	.vertical-gradient(@mainColorDark; @mainColor);
 	> ul {
 		height: auto;
 		width: auto;
 		position: absolute;
-		right: 0;
+		left: 0;
 		top: 100%;
-		background: fade(black,80%);
+		background: fade(@mainColorDark,80%);
 		.border-radius(5px);
 		display: none;
 		> li {
@@ -100,7 +99,7 @@
 				&:hover,
 					&:focus {
 					color: white;
-					.vertical-gradient(#59b4fd; #0560e8);
+					.vertical-gradient(@mainColorLight; @mainColor);
 				}
 			}
 			&:first-child {
@@ -115,7 +114,7 @@
 			}
 		}
 	}
-	&:hover, &:focus, &:active {
+	&:hover, &:focus, &:active, &:checked {
 		ul {
 			display: block;
 		}