New Responsive design

2026-05-23 18:08:27 +02:00
parent 3fdbaf0285
commit 0d436d8190
19 changed files with 2152 additions and 607 deletions
@@ -16,7 +16,6 @@
 html {
    background-color: #FAFAFB !important;
    font-family: Aleo;
-
 }

 h1, h2, h3, h4, h5, h6 {
@@ -39,11 +38,10 @@ h1, h2, h3, h4, h5, h6 {
 }

 .header {
-    height: 80px; /* Höhe anpassen */
+    height: 80px;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 40px);
-
 }

 .header .anonymous-actions {
@@ -78,7 +76,6 @@ h1, h2, h3, h4, h5, h6 {
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    width: 100%;
    margin-top: -5px;
-
 }

 .flexbox {
@@ -88,8 +85,6 @@ h1, h2, h3, h4, h5, h6 {
    padding: 0;
    gap: 1px;
    margin: 0;
-
-
 }

 /* Layout */
@@ -182,3 +177,124 @@ th:after {
    font-weight: bold;
    text-decoration: none;
 }
+
+/* ═══════════════════════════════════════════
+   RESPONSIVE – TABLET (640px – 1023px)
+═══════════════════════════════════════════ */
+@media (max-width: 1023px) {
+    .app-layout {
+        margin: 0 !important;
+        height: 100vh;
+        border-radius: 0;
+    }
+
+    .main {
+        margin: 0 !important;
+        border-radius: 0 !important;
+        box-shadow: none !important;
+    }
+
+    .header {
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+        justify-content: space-between;
+        height: 60px;
+        padding: 0;
+        width: 100%;
+    }
+
+    .header .anonymous-actions,
+    .header .user-info {
+        position: static !important;
+        right: auto !important;
+        top: auto !important;
+        width: auto !important;
+        border-radius: 0 !important;
+        background-color: transparent !important;
+        padding: 0 10px !important;
+        text-align: right;
+    }
+
+    .header .left-side {
+        flex: 1;
+        height: auto;
+        padding: 0 15px;
+        margin-top: 0 !important;
+        box-shadow: none;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        width: auto;
+    }
+
+    .header .left-side h1 {
+        font-size: 1.1rem;
+        margin: 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    #show_username {
+        position: static !important;
+        top: auto !important;
+        font-size: 0.78rem;
+        text-align: left;
+        width: auto !important;
+    }
+
+    .content {
+        padding: 20px 15px !important;
+    }
+
+    .footer table {
+        font-size: 9pt;
+    }
+
+    .footer table td:first-child {
+        width: auto;
+    }
+}
+
+/* ═══════════════════════════════════════════
+   RESPONSIVE – SMARTPHONE (< 640px)
+═══════════════════════════════════════════ */
+@media (max-width: 639px) {
+    .header {
+        height: 56px;
+    }
+
+    .header .left-side h1 {
+        font-size: 0.95rem;
+    }
+
+    #show_username {
+        display: none !important;
+    }
+
+    .header .anonymous-actions a,
+    .header .user-info a {
+        padding: 8px 8px !important;
+        font-size: 0.8rem;
+    }
+
+    .content {
+        padding: 12px 8px !important;
+    }
+
+    .footer table,
+    .footer table tbody,
+    .footer table tr,
+    .footer table td {
+        display: block;
+        width: 100% !important;
+        text-align: center;
+        line-height: 1.8em;
+    }
+
+    .footer {
+        font-size: 9pt;
+        padding: 6px;
+    }
+}
@@ -38,3 +38,96 @@
    font-weight: bolder;
    font-size: 12pt;
 }
+
+/* ═══════════════════════════════════════════
+   RESPONSIVE – TABLET (640px – 1023px)
+═══════════════════════════════════════════ */
+@media (max-width: 1023px) {
+    .costunit-list table {
+        width: 100% !important;
+        font-size: 0.88rem;
+    }
+
+    .costunit-list table tr td input[type="button"] {
+        width: 100%;
+        margin-bottom: 6px;
+    }
+
+    .costunit-list table tr th {
+        width: 120px !important;
+        font-size: 0.88rem;
+    }
+}
+
+/* ═══════════════════════════════════════════
+   RESPONSIVE – SMARTPHONE (< 640px)
+═══════════════════════════════════════════ */
+@media (max-width: 639px) {
+    .costunit-list table {
+        width: 100% !important;
+        padding: 8px !important;
+    }
+
+    .costunit-list table thead,
+    .costunit-list table tbody,
+    .costunit-list table tfoot,
+    .costunit-list table tr,
+    .costunit-list table td,
+    .costunit-list table th {
+        display: block !important;
+        width: 100% !important;
+    }
+
+    .costunit-list table td[rowspan] {
+        width: 100% !important;
+    }
+
+    .costunit-list table tr {
+        display: flex !important;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: 4px;
+        margin-bottom: 4px;
+    }
+
+    .costunit-list table tr th {
+        flex: 0 0 140px;
+        font-size: 0.82rem !important;
+        width: 140px !important;
+        padding-right: 8px;
+    }
+
+    .costunit-list table tr td {
+        flex: 1;
+        font-size: 0.82rem;
+        padding-right: 0;
+    }
+
+    .costunit-list table thead tr td {
+        font-size: 1rem !important;
+        padding: 6px 0 !important;
+        border-bottom: 1px solid #ddd;
+        margin-bottom: 8px;
+    }
+
+    .costunit-list table tr td:last-child {
+        flex: 0 0 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+        padding-top: 8px;
+    }
+
+    .costunit-list table tr td input[type="button"] {
+        width: 100% !important;
+        margin: 0 !important;
+        font-size: 0.85rem;
+        padding: 10px;
+    }
+
+    .costunit-list .link {
+        display: inline-block;
+        margin: 4px 0;
+        font-size: 0.85rem;
+    }
+}
@@ -40,7 +40,6 @@ fieldset legend {
    border-radius: 10px;
 }

-
 .invoice-list-table {
    width: 90%;
    margin: 20px auto;
@@ -59,7 +58,93 @@ fieldset legend {
    border-right: 1px solid #c3c4c7;
 }

-
 .invoice-list-table tr:first-child td {
    background: linear-gradient(to bottom, #fff, #f6f7f7);
 }
+
+/* ═══════════════════════════════════════════
+   RESPONSIVE – TABLET (640px – 1023px)
+═══════════════════════════════════════════ */
+@media (max-width: 1023px) {
+    .invoice-main-flexbox {
+        flex-wrap: wrap;
+        gap: 15px;
+        padding: 15px;
+    }
+
+    .invoice-type-layer {
+        flex: 1 1 calc(50% - 15px);
+        min-width: 180px;
+        min-height: 150px;
+    }
+
+    fieldset {
+        margin: 10px 10px;
+        padding: 12px 20px;
+    }
+
+    .invoice-list-table {
+        width: 100%;
+        font-size: 0.9rem;
+    }
+}
+
+/* ═══════════════════════════════════════════
+   RESPONSIVE – SMARTPHONE (< 640px)
+═══════════════════════════════════════════ */
+@media (max-width: 639px) {
+    .invoice-main-flexbox {
+        flex-direction: column;
+        padding: 10px;
+        gap: 10px;
+    }
+
+    .invoice-type-layer {
+        flex: 1 1 100%;
+        min-height: 100px;
+        font-size: 0.9rem;
+        padding: 12px;
+    }
+
+    fieldset {
+        margin: 8px 4px;
+        padding: 10px 12px;
+    }
+
+    fieldset legend {
+        padding: 6px 12px;
+        font-size: 0.9rem;
+    }
+
+    .invoice-list-table {
+        width: 100%;
+        font-size: 0.82rem;
+    }
+
+    .invoice-list-table tr {
+        display: block;
+        margin-bottom: 10px;
+        border: 1px solid #c3c4c7;
+        border-radius: 6px;
+        padding: 6px;
+    }
+
+    .invoice-list-table td {
+        display: block;
+        width: 100% !important;
+        border: none !important;
+        padding: 4px 6px;
+    }
+
+    .invoice-list-table tr:first-child td {
+        background: linear-gradient(to bottom, #fff, #f6f7f7);
+        border-bottom: 1px solid #ddd !important;
+        font-weight: bold;
+    }
+
+    .invoice-list-table input[type="button"],
+    .invoice-list-table .button {
+        width: 100%;
+        margin-top: 6px;
+    }
+}