#21 Center widgets

AlexHedley · Jul 13, 2023 · 7f74d6f · 7f74d6f
1 parent 881266d
commit 7f74d6f
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 35 deletions.
diff --git a/src/Blashing.Core/Components/Clock/ClockWidget.razor.css b/src/Blashing.Core/Components/Clock/ClockWidget.razor.css
@@ -2,12 +2,15 @@
     background-color: #dc5945;
     height: 100%;
     width: 100%;
-
     text-align: center;
-/*    width: inherit;*/
-/*    height: inherit;*/
-/*    display: table-cell;*/
+    /*    width: inherit;*/
+    /*    height: inherit;*/
+    /*    display: table-cell;*/
     vertical-align: middle;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    /*align-items: center;*/
 }
 
 h1, h2, h3, h4, h5, p {

diff --git a/src/Blashing.Core/Components/Comments/CommentsWidget.razor.css b/src/Blashing.Core/Components/Comments/CommentsWidget.razor.css
@@ -2,12 +2,15 @@
     background-color: #eb9c3c;
     height: 100%;
     width: 100%;
-
     text-align: center;
-/*    width: inherit;*/
-/*    height: inherit;*/
-/*    display: table-cell;*/
+    /*    width: inherit;*/
+    /*    height: inherit;*/
+    /*    display: table-cell;*/
     vertical-align: middle;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    /*align-items: center;*/
 }
 
 .title {

diff --git a/src/Blashing.Core/Components/Graph/GraphWidget.razor.css b/src/Blashing.Core/Components/Graph/GraphWidget.razor.css
@@ -1,14 +1,17 @@
 .widget-graph {
-    background-color: #dc5945;
+    background-color: #ff9618; /*#dc5945;*/
     position: relative;
     height: 100%;
     width: 100%;
-
     text-align: center;
-/*    width: inherit;*/
-/*    height: inherit;*/
-/*    display: table-cell;*/
+    /*    width: inherit;*/
+    /*    height: inherit;*/
+    /*    display: table-cell;*/
     vertical-align: middle;
+    /*display: flex;*/
+    /*flex-direction: column;*/
+    /*justify-content: center;*/
+    /*align-items: center;*/
 }
 
 svg {

diff --git a/src/Blashing.Core/Components/Image/ImageWidget.razor.css b/src/Blashing.Core/Components/Image/ImageWidget.razor.css
@@ -2,12 +2,15 @@
     background-color: #4b4b4b;
     height: 100%;
     width: 100%;
-
     text-align: center;
-/*    width: inherit;*/
-/*    height: inherit;*/
-/*    display: table-cell;*/
+    /*    width: inherit;*/
+    /*    height: inherit;*/
+    /*    display: table-cell;*/
     vertical-align: middle;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    /*align-items: center;*/
 }
 
 img {

diff --git a/src/Blashing.Core/Components/List/ListWidget.razor.css b/src/Blashing.Core/Components/List/ListWidget.razor.css
@@ -3,12 +3,17 @@
     vertical-align: top;
     height: 100%;
     width: 100%;
-
     text-align: center;
-/*    width: inherit;*/
-/*    height: inherit;*/
-/*    display: table-cell;*/
+    /*    width: inherit;*/
+    /*    height: inherit;*/
+    /*    display: table-cell;*/
     vertical-align: middle;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    /*align-items: center;*/
+
+    padding: 20px;
 }
 
 .title {

diff --git a/src/Blashing.Core/Components/Meter/MeterWidget.razor.css b/src/Blashing.Core/Components/Meter/MeterWidget.razor.css
@@ -2,12 +2,15 @@
     background-color: #9c4274;
     height: 100%;
     width: 100%;
-
     text-align: center;
-/*    width: inherit;*/
-/*    height: inherit;*/
-/*    display: table-cell;*/
+    /*    width: inherit;*/
+    /*    height: inherit;*/
+    /*    display: table-cell;*/
     vertical-align: middle;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    /*align-items: center;*/
 }
 
 input.meter {

diff --git a/src/Blashing.Core/Components/Number/NumberWidget.razor.css b/src/Blashing.Core/Components/Number/NumberWidget.razor.css
@@ -2,12 +2,14 @@
     background-color: #47bbb3;
     height: 100%;
     width: 100%;
-
     text-align: center;
-/*    width: inherit;*/
-/*    height: inherit;*/
-/*    display: table-cell;*/
-    vertical-align: middle;
+    /*width: inherit;*/
+    /*height: inherit;*/
+    /*display: table-cell;*/
+    /*vertical-align: middle;*/
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
 }
 
 .title {

diff --git a/src/Blashing.Core/Components/Text/TextWidget.razor.css b/src/Blashing.Core/Components/Text/TextWidget.razor.css
@@ -2,12 +2,18 @@
     background-color: #ec663c;
     height: 100%;
     width: 100%;
-
     text-align: center;
-    /*    width: inherit;*/
-    /*    height: inherit;*/
-    /*    display: table-cell;*/
-    vertical-align: middle;
+    /*width: inherit;*/
+    /*height: inherit;*/
+    /*display: table-cell;*/ /* Parent: "display: table;" */
+    /*vertical-align: middle;*/
+    /*line-height: ;*/
+    /*display: flex;*/
+    /*align-items: center;*/
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    /*align-items: center;*/
 }
 
 .title {