styles

.gitignore

@@ -8,6 +8,5 @@ websrc/node_modules/
 websrc/gulpfile.js
 websrc/package-lock.json
 mithril_client/
-webroot/css/grd_styles.css
 websrc/src/less-files.css
 

src/Template/Element/user_menu.ctp

@@ -23,7 +23,7 @@ if(intval($transactionPendings) > 0) {
 }
 ?>
 <div class="user-menu-container">
-    <span class="user-name"><?=$user['first_name'].' '.$user['last_name']?></span>
+    <span class="user-name" onclick="toggleUserMenu()"><?=$user['first_name'].' '.$user['last_name']?></span>
     <i class="material-icons-outlined user-icon" onclick="toggleUserMenu()">account_circle</i>
 </div>
 <div class="nav-vertical user-menu">

src/Template/Layout/frontend.ctp

@@ -74,13 +74,13 @@ $GLOBALS["self"] = $this;
         </ul>
       </div>
     </div>
-    <div class="content">
-      <div class="nav-content">
-        <div class="flash-messages" onclick="this.classList.add('hidden')">
-          <?= $this->Flash->render() ?>
-        </div>
-        <?= $this->element('navi_center'); ?>
+    <div class="nav-content">
+      <div class="flash-messages" onclick="this.classList.add('hidden')">
+        <?= $this->Flash->render() ?>
       </div>
+      <?= $this->element('navi_center'); ?>
+    </div>
+    <div class="content">
       <?php if ($this->fetch('header')): ?>
       <div class="content-container info-container">
         <?= $this->fetch('header') ?>

websrc/src/less/01-layout.less

@@ -26,13 +26,23 @@
   grid-template-rows: [top] 8vh [line2] 86vh [footer1] 3vh [footer2] 5vh [end];
   grid-template-columns: [left1] auto [left2] 1fr [left3] 12fr [right3] 1fr [right2] auto [right1];
   grid-template-areas: "header header header header header"
-  "left . center . ."
+  "left . center center ."
   "footer footer footer footer footer"
   "bottom bottom bottom bottom bottom";
   margin: 0;
   padding: 0;
 }
 
+@media @wide-screen-down {
+  .layout {
+    grid-template-areas: "header header header header header"
+    "left . center center center"
+    "footer footer footer footer footer"
+    "bottom bottom bottom bottom bottom";
+  }
+
+}
+
 @media @tablet-down {
   .layout {
     position: relative;
@@ -101,4 +111,3 @@
   grid-row-start: footer2;
   grid-row-end: end;
 }
-

websrc/src/less/02-colors.less

@@ -84,8 +84,9 @@
 @error: red;
 @error-border: rgba(255, 0, 0, 0.5);
 @success: #047006;
+@success-message: #1A1A1A;
+@success-message-background: #06c50a;
 @success-border: #04700675;
-@success-background: rgba(4, 112, 6, 0.2);
 @success-background-icon: rgba(4, 112, 6, 0.2);
 @success-background-hover: lightgreen;
 @alert: #ff5f66;
@@ -117,6 +118,10 @@
     color: @orange
 }
 
+.blue-color {
+    color: blue
+}
+
 .unobtrusive {
     color: @unobtrusive;
 }

websrc/src/less/05-screen.less

@@ -49,6 +49,11 @@
         overflow: hidden;
     }
 
+    div {
+        border-collapse: collapse;
+        box-sizing: border-box;
+    }
+
     /* =======================
         Kopfbereich
        =======================*/

websrc/src/less/06-messages.less

@@ -30,8 +30,8 @@ and open the template in the editor.
     }
 
     .alert-success {
-      color: @alert-color !important;
-      background-color: @success;
+      color: @success-message !important;
+      background-color: @success-message-background;
       border: 1px solid @success-border;
     }
 

websrc/src/less/07-user.less

@@ -15,27 +15,37 @@
     justify-content: flex-start;
     align-items: flex-end;
     align-content: flex-end;
+    position: relative;
     width: 100%;
     min-width: 12em;
+    height: 40px;
     background-color: @container-background;
     border: 1px solid @menu-border-color;
     border-radius: 0 0 0 18px;
   }
 
   .user-menu-container {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
     font-size: .8em;
     font-weight: 300;
-    margin: auto;
-    padding: .25em 1em;
+    padding: .25em .5em;
     z-index: 20;
+    height: 40px;
   }
 
+  .user-name,
   .user-icon {
     display: inline-block;
-    vertical-align: center;
+    vertical-align: middle;
     cursor: pointer;
   }
 
+  .user-name {
+    padding-right: .25em;
+  }
+
   .nav-vertical.user-menu {
     display: none;
     background-color: @container-background;
@@ -45,6 +55,9 @@
     z-index: 15;
     font-size: .9em;
     margin-top: 0 !important;
+    position: fixed;
+    top: 39px;
+    right: 0;
   }
 
   .nav-vertical.user-menu.visible {
@@ -82,7 +95,8 @@
       min-width: 3em;
       background-color: transparent;
       justify-content: center;
-      margin-top: -4px;
+      height: 100%;
+      margin-top: -13px;
       margin-left: -16px;
       color: @action-button-background1;
     }
@@ -92,6 +106,9 @@
       padding: 0;
     }
 
+    .user-icon {
+
+    }
     .user-name {
       display: none;
     }

websrc/src/less/10-center.less

@@ -30,16 +30,15 @@
     letter-spacing: @content-letter-spacing;
     font-family: Roboto, sans-serif;
     font-weight: 500;
-    font-size: 1rem;    /*padding-top: 2em;*/
-    padding-right: 10em;
+    font-size: 1rem;
+    padding-right: 5em;
   }
 
-  @media @phone-down {
+  @media @tablet-down {
+    .content {
+      padding-right: 0;
+    }
 
-    /*    .content {
-        flex-direction: column;
-      }
-    */
   }
 
   /* Center Navigation Top */
@@ -89,7 +88,7 @@
   /* Top Info Above Main */
   .info-container {
     display: flex;
-    justify-content: space-around;
+    justify-content: space-between;
     align-items: center;
     max-width: 70%;
     padding: 1em 25px;
@@ -166,7 +165,7 @@
   .content-item {
     margin: .5em 0;
     margin-right: 5em;
-    width: 160px;
+    width: 220px;
     padding: 1em 2em;
   }
 

websrc/src/less/20-list.less

@@ -71,6 +71,7 @@
 
     .c0 {
         flex-grow: 5;
+        min-width: 20%;
     }
 
     .c1 {
@@ -98,6 +99,11 @@
         flex: 0 0 320px;
     }
 
+    .c6 {
+        min-width: 400px;
+        flex: 0 0 400px;
+    }
+
     @media @tablet-down {
         .cell {
             padding: .25em 1.5em;
@@ -123,6 +129,10 @@
             flex-basis: auto;
         }
 
+        .c6 {
+            flex-basis: auto;
+        }
+
     }
 
     .header-cell {

websrc/src/less/30-form.less

@@ -97,6 +97,13 @@ and open the template in the editor.
     background-color: @badge-background-error;
   }
 
+  .form-full-width {
+    grid-column-start: 1;
+    grid-column-end: 3;
+    display: flex;
+    flex-direction: column;
+  }
+
   .form-button {
     cursor: pointer;
     font: 600 13.3333px Arial;
@@ -158,6 +165,36 @@ and open the template in the editor.
     width: 100px;
   }
 
+  .note-smaller {
+    font-size: smaller;
+  }
+
+  .form-row,
+  .grid-row {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    align-content: center;
+    width: 100%;
+    -webkit-transition-duration: .5s;
+    transition-duration: .5s;
+  }
+
+  @media @tablet-down {
+    .grid-row {
+      flex-direction: column;
+    }
+
+  }
+
+  .form-row {
+    border-top: 1px solid #f2f4f9;
+  }
+
+  .form-row:hover {
+    background-color: #f6f7f9;
+  }
+
   /* CENTER FORM SPECIFICS */
   .form-body form {
     display: grid;