feature/design: css corection for navigate and all page (mobile and d…

angular.json

@@ -116,5 +116,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

src/app/app.component.html

@@ -1,5 +1,4 @@
 <div id="wrapper">
   <app-top-menu />
-  <div class="spacer"></div>
   <router-outlet />
 </div>

src/app/app.component.scss

@@ -9,18 +9,9 @@
   max-width: 1536px;
   min-height: 100%;
   margin: 0 auto;
-  padding: 0 3vw 3vh;
-
-  @include mediaMax($topMenuBreakpoint) {
-    padding-top: 3vh;
-  }
+  padding: 0 20px;
 
   @include mediaMax($small) {
-    padding-top: 0;
-    padding-bottom: 3vh;
+    padding: 4vw 4vw 18vw 4vw;
   }
 }
-
-.spacer {
-  height: 30px;
-}

src/app/components/horde/current-user-status/current-user-status.component.html

@@ -1,4 +1,4 @@
-<div class="col-md-12 flex flex-justify-content-center">
+<div class="col-md-12 flex smallBoxGap">
   <app-small-box [title]="'app.kudos' | transloco" color="#67c23a" [icon]="kudosIcon()">
     {{currentUser().kudos | formatNumber}}
   </app-small-box>

src/app/components/horde/current-user-status/current-user-status.component.scss

@@ -1,10 +1,31 @@
+@import "../../../../scss/colors";
+@import "../../../../scss/breakpoints";
+
 :host {
   width: 100%;
 }
 
 app-small-box {
-  margin-right: 15px;
-  &:last-of-type {
-    margin-right: 0;
+  @include mediaMax($large) {
+    flex-grow: 1;
+  }
+
+  .svg-inline--fa {
+    max-width: 20px;
+    max-height: 20px;
+    height: 100%;
+    width: 100%;
+    align-self: center;
+  }
+}
+
+.smallBoxGap {
+  gap: 15px;
+  justify-content: center;
+  margin-bottom: 50px;
+
+  @include mediaMax($large) {
+    flex-wrap: wrap;
+    margin-bottom: 0;
   }
 }

src/app/components/loader/loader.component.scss

@@ -1,19 +1,25 @@
 @import "../../../scss/colors";
 
+:host {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+}
+
 .loader {
   width: 75px;
   aspect-ratio: 1;
   border-radius: 50%;
   border: 8px solid $primaryColor;
   animation: l20-1 0.8s infinite linear alternate,
   l20-2 1.6s infinite linear;
-
   position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  margin: auto;
+  margin: 50px auto;
 }
 
 @keyframes l20-1 {

src/app/components/lora-text-row/lora-text-row.component.html

@@ -1,3 +1,4 @@
+<span>
 @if (lora().strengthModel === undefined && lora().strengthClip === undefined) {
   {{lora().id | loraName:(lora().isVersionId ?? false) | async }}@if (comma()){,}
 } @else if (lora().strengthModel !== undefined && lora().strengthClip !== undefined) {
@@ -11,3 +12,4 @@
   {{lora().id | loraName:(lora().isVersionId ?? false) | async }},
   ({{'app.generate.lora.clip_strength' | transloco}}: {{lora().strengthClip! | formatNumber}})@if (comma()){,}
 }
+</span>

src/app/components/lora-text-row/lora-text-row.component.scss

@@ -0,0 +1,17 @@
+@import "../../../scss/colors";
+@import "../../../scss/breakpoints";
+
+:host {
+  display: block;
+  width: calc(100% - 50px);
+  font-size: 14px;
+  line-height: 26px;
+  font-weight: 400;
+}
+
+span {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

src/app/components/modal/modal.component.scss

@@ -1,3 +1,5 @@
+@import "../../../scss/breakpoints";
+
 .modal-overlay {
   position: fixed;
   top: 0;
@@ -21,4 +23,21 @@
   z-index: 2;
   padding: 15px;
   max-height: 90%;
+
+  @include mediaMax($large) {
+    top: 105px;
+    transform: translate(-50%, 0);
+    max-height: calc(100% - 125px);
+    animation: unset !important;
+  }
+
+  @include mediaMax($medium) {
+    width: calc(100% - 40px) !important;
+  }
+
+  @include mediaMax($small) {
+    width: calc(100% - 8vw) !important;
+    top: 4vw;
+    max-height: calc(100% - 23vw);
+  }
 }

src/app/components/slider-with-value/slider-with-value.component.scss

@@ -1,9 +1,18 @@
+@import "../../../scss/colors";
+@import "../../../scss/breakpoints";
+
+:host {
+  margin-bottom: 0;
+}
+
 div > input {
   &:first-child {
     flex: 85% 1 1;
-    margin-right: 1vw;
+    margin-right: 15px;
   }
   &:last-child {
     flex: 15% 1 1;
+    text-align: center;
+    min-width: 65px;
   }
 }

src/app/components/small-box/small-box.component.scss

@@ -1,14 +1,23 @@
 @import "../../../scss/colors";
+@import "../../../scss/breakpoints";
+
+:host {
+  width: auto;
+}
 
 .box {
-  width: 300px;
-  height: 104px;
+  width: 100%;
+  height: auto;
   background: $cardBackground;
   box-shadow: $shadowColor 0 0 12px 0;
   border-radius: 4px;
   border: 1px solid $borderColor;
   align-items: center;
   padding: 15px;
+
+  @include mediaMax($small) {
+
+  }
 }
 
 .icon {
@@ -32,8 +41,10 @@
 .title {
   color: gray;
   margin-bottom: 6px;
+  white-space: nowrap;
 }
 
 .content {
   font-size: 22px;
+  white-space: nowrap;
 }

src/app/components/toggle-checkbox/toggle-checkbox.component.scss

@@ -8,8 +8,8 @@
   display: inline-block;
   background: #ccc;
   border-radius: 16px;
-  width: 58px;
-  height: 32px;
+  width: 48px;
+  height: 26px;
   position: relative;
   vertical-align: middle;
   transition: background 0.25s;
@@ -21,22 +21,21 @@
     display: block;
     background: linear-gradient(to bottom, $mainTextColor 0%, lighten($mainTextColor, 10%) 100%);
     border-radius: 50%;
-    box-shadow: 0 0 0 1px rgba(red($shadowColor), green($shadowColor), blue($shadowColor), 0.25);
-    width: 24px;
-    height: 24px;
+    box-shadow: 0 0 0 1px rgba(red($shadowColor), green($shadowColor), blue($shadowColor), 0.15);
+    width: 20px;
+    height: 20px;
     position: absolute;
-    top: 4px;
-    left: 4px;
+    top: 3px;
+    left: 3px;
     transition: left 0.25s;
   }
   .toggle:hover &:before {
     background: linear-gradient(to bottom, $mainTextColor 0%, $mainTextColor 100%);
-    box-shadow: 0 0 0 1px $shadowColor;
   }
   .toggle-checkbox:checked + & {
     background: $successColor;
     &:before {
-      left: 30px;
+      left: 24px;
     }
   }
 }
@@ -48,5 +47,6 @@
   margin-left: 5px;
   position: relative;
   top: 2px;
+  font-size: 14px;
   margin-right: 4px;
 }

src/app/components/top-menu/top-menu.component.html

@@ -1,12 +1,10 @@
-<ul>
-  <li>
-    <a routerLink="/" class="logo">
-      <img ngSrc="/assets/logo-64x64.png" priority height="64" width="64" alt="{{'app.logo.alt' | transloco}}"/>
-      <span>
+<a routerLink="/" class="logo">
+  <img ngSrc="/assets/logo-64x64.png" priority height="64" width="64" alt="{{'app.logo.alt' | transloco}}"/>
+  <span>
         <transloco key="app.title" />
       </span>
-    </a>
-  </li>
+</a>
+<ul>
   <li>
     <a routerLink="/generate">
       <fa-icon [icon]="iconSliders" />