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 index 804bceb..610c9c0 100644 --- 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; +} \ No newline at end of file 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 index 8d761ca..d40c255 100644 --- 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 @@ - +
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 index 0cb1079..0d33118 100644 --- 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; +} \ No newline at end of file