From 5d8622f0b381da3e6c97b967d532f2104832c4c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tomasz=20D=C5=82uski?= <tomasz@globaltransportsolutions.com>
Date: Mon, 21 Feb 2022 09:23:09 +0100
Subject: [PATCH] somehow working UI
---
.../app/components/demo/demo.component.scss | 16 ++++++++++---
.../src/app/components/app/app.component.html | 2 +-
.../src/app/components/app/app.component.scss | 24 +++++++++++--------
3 files changed, 28 insertions(+), 14 deletions(-)
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 @@
</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
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