somehow working UI

Toumash · Toumash · commit 06037de19792 · 2022-02-23T20:32:18.000+01:00
diff --git a/EntityFrameworkCore.Diagrams/EntityFrameworkCore.Diagrams.Frontend/src-website/app/components/demo/demo.component.scss b/EntityFrameworkCore.Diagrams/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/EntityFrameworkCore.Diagrams/EntityFrameworkCore.Diagrams.Frontend/src/app/components/app/app.component.html b/EntityFrameworkCore.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/EntityFrameworkCore.Diagrams/EntityFrameworkCore.Diagrams.Frontend/src/app/components/app/app.component.scss b/EntityFrameworkCore.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;
+}

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-@import '~@angular/material/theming';`
	`1`	`+@import "~@angular/material/theming";`
`2`	`2`
`3`	`3`	`$toolbar-zindex: 30;`
`4`	`4`
`@@ -13,7 +13,6 @@ $toolbar-zindex: 30;`
`13`	`13`	`}`
`14`	`14`
`15`	`15`	`mat-toolbar {`
`16`		`-`
`17`	`16`	`&.main-toolbar {`
`18`	`17`	`padding: 0 16px;`
`19`	`18`
`@@ -100,7 +99,8 @@ $toolbar-zindex: 30;`
`100`	`99`	`overflow-x: hidden;`
`101`	`100`
`102`	`101`	`.entities-list {`
`103`		`-`
	`102`	`+ display: flex !important;`
	`103`	`+ flex-flow: column wrap !important;`
`104`	`104`	`[mat-icon-button] {`
`105`	`105`	`width: 20px;`
`106`	`106`	`height: 20px;`
`@@ -127,11 +127,9 @@ $toolbar-zindex: 30;`
`127`	`127`	`}`
`128`	`128`
`129`	`129`	`.mat-line {`
`130`		`-`
`131`	`130`	`@media (max-width: 1024px) {`
`132`	`131`	`margin: 0 -12px;`
`133`	`132`	`}`
`134`		`-`
`135`	`133`	`}`
`136`	`134`	`}`
`137`	`135`
`@@ -198,8 +196,8 @@ $toolbar-zindex: 30;`
`198`	`196`	`}`
`199`	`197`
`200`	`198`	`@media (max-width: 330px) {`
`201`		`- margin-left: 16px;`
`202`		`- margin-top: 8px;`
	`199`	`+ margin-left: 16px;`
	`200`	`+ margin-top: 8px;`
`203`	`201`	`}`
`204`	`202`
`205`	`203`	`[mat-icon-button] {`
`@@ -216,7 +214,6 @@ $toolbar-zindex: 30;`
`216`	`214`	`}`
`217`	`215`	`}`
`218`	`216`	`}`
`219`		`-`
`220`	`217`	`}`
`221`	`218`	`}`
`222`	`219`
`@@ -230,6 +227,7 @@ $toolbar-zindex: 30;`
`230`	`227`	`}`
`231`	`228`
`232`	`229`	`.diagram {`
	`230`	`+ width: 90%;`
`233`	`231`	`@media print {`
`234`	`232`	`left: 0 !important;`
`235`	`233`	`width: 100vw !important;`
`@@ -257,7 +255,6 @@ $toolbar-zindex: 30;`
`257`	`255`	`}`
`258`	`256`	`}`
`259`	`257`
`260`		`-`
`261`	`258`	`.import-btn {`
`262`	`259`	`input {`
`263`	`260`	`position: absolute;`
`@@ -271,7 +268,8 @@ $toolbar-zindex: 30;`
`271`	`268`	`}`
`272`	`269`	`}`
`273`	`270`
`274`		`-h1, h2 {`
	`271`	`+h1,`
	`272`	`+h2 {`
`275`	`273`	`font-weight: 300;`
`276`	`274`	`color: rgba(0, 0, 0, 0.87);`
`277`	`275`	`}`
`@@ -283,3 +281,9 @@ h1 {`
`283`	`281`	`h2 {`
`284`	`282`	`font-size: 22px;`
`285`	`283`	`}`
	`284`	`+`
	`285`	`+#container-right-column{`
	`286`	`+ display: flex !important;`
	`287`	`+ flex-flow: row nowrap !important;`
	`288`	`+ width: 100% !important;`
	`289`	`+}`