somehow working UI

EvAlex · Feb 21, 2022 · 5d8622f · 5d8622f
1 parent 7eb396e
commit 5d8622f
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 14 deletions.
diff --git a/...EntityFrameworkCore.Diagrams.Frontend/src-website/app/components/demo/demo.component.scss b/...EntityFrameworkCore.Diagrams.Frontend/src-website/app/components/demo/demo.component.scss
@@ -1,7 +1,6 @@
-@import '~@angular/material/theming';
+@import "~@angular/material/theming";
 
 main {
-
     &.fullscreen {
         section {
             display: none;
@@ -21,7 +20,7 @@ main {
             bottom: 32%;
             right: 32px;
 
-            @media (max-width: 570px)  {
+            @media (max-width: 570px) {
                 left: calc(25% - 28px);
                 bottom: 28px;
             }
@@ -52,5 +51,16 @@ main {
         @include mat-elevation(4);
         margin: 32px 0;
         width: 100%;
+        mat-grid-list:nth-child(1){
+            display: flex !important;
+            flex-flow: row nowrap !important;
+            width: 100% !important;
+        }
     }
 }
+
+#container-right-column{
+    display: flex !important;
+    flex-flow: row nowrap !important;
+    width: 100% !important;
+}
diff --git a/....Diagrams/EntityFrameworkCore.Diagrams.Frontend/src/app/components/app/app.component.html b/....Diagrams/EntityFrameworkCore.Diagrams.Frontend/src/app/components/app/app.component.html
@@ -75,7 +75,7 @@
     </mat-toolbar>
 </ng-template>
 
-<mat-grid-list cols="4" rowHeight="fit">
+<mat-grid-list cols="4" rowHeight="fit" id="container-right-column">
     <mat-grid-tile class="toolbar" [colspan]="toolbarCollapsed ? 0 : 1">
         <div class="toolbar-inner">
 

diff --git a/....Diagrams/EntityFrameworkCore.Diagrams.Frontend/src/app/components/app/app.component.scss b/....Diagrams/EntityFrameworkCore.Diagrams.Frontend/src/app/components/app/app.component.scss
@@ -1,4 +1,4 @@
-@import '~@angular/material/theming';
+@import "~@angular/material/theming";
 
 $toolbar-zindex: 30;
 
@@ -13,7 +13,6 @@ $toolbar-zindex: 30;
     }
 
     mat-toolbar {
-
         &.main-toolbar {
             padding: 0 16px;
 
@@ -100,7 +99,8 @@ $toolbar-zindex: 30;
                     overflow-x: hidden;
 
                     .entities-list {
-
+                        display: flex !important;
+                        flex-flow: column wrap !important;
                         [mat-icon-button] {
                             width: 20px;
                             height: 20px;
@@ -127,11 +127,9 @@ $toolbar-zindex: 30;
                         }
 
                         .mat-line {
-
                             @media (max-width: 1024px) {
                                 margin: 0 -12px;
                             }
-
                         }
                     }
 
@@ -198,8 +196,8 @@ $toolbar-zindex: 30;
                                 }
 
                                 @media (max-width: 330px) {
-                                        margin-left: 16px;
-                                        margin-top: 8px;
+                                    margin-left: 16px;
+                                    margin-top: 8px;
                                 }
 
                                 [mat-icon-button] {
@@ -216,7 +214,6 @@ $toolbar-zindex: 30;
                                 }
                             }
                         }
-
                     }
                 }
 
@@ -230,6 +227,7 @@ $toolbar-zindex: 30;
         }
 
         .diagram {
+            width: 90%;
             @media print {
                 left: 0 !important;
                 width: 100vw !important;
@@ -257,7 +255,6 @@ $toolbar-zindex: 30;
     }
 }
 
-
 .import-btn {
     input {
         position: absolute;
@@ -271,7 +268,8 @@ $toolbar-zindex: 30;
     }
 }
 
-h1, h2 {
+h1,
+h2 {
     font-weight: 300;
     color: rgba(0, 0, 0, 0.87);
 }
@@ -283,3 +281,9 @@ h1 {
 h2 {
     font-size: 22px;
 }
+
+#container-right-column{
+    display: flex !important;
+    flex-flow: row nowrap !important;
+    width: 100% !important;
+}