#354 - Optimize header size on mobile view.

Hide sub header. Rewrite styles for header so main header is ellipsing correctly. Shrink spacing.
maraf · May 26, 2021 · c998d13 · c998d13
1 parent f531229
commit c998d13
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 46 deletions.
diff --git a/src/Money.Blazor.Host/Components/Title.razor b/src/Money.Blazor.Host/Components/Title.razor
@@ -1,28 +1,31 @@
 <div class="header">
     <div class="container">
+        <div class="d-flex">
+            <h3 class="mr-1">
+                @if (!String.IsNullOrEmpty(Icon))
+                {
+                    <Icon Identifier="@Icon" class="ml-1 mr-2" />
+                }
 
-        <h3>
-            @if (!String.IsNullOrEmpty(Icon))
-            {
-                <Icon Identifier="@Icon" class="mr-1" />
-            }
+                @Main
+            </h3>
+            <div class="actions">
+                @if (!String.IsNullOrEmpty(ButtonText) || ButtonClick != null)
+                {
+                    <button type="button" class="btn btn-primary" @onclick="@(() => ButtonClick?.Invoke())">
+                        @if (!String.IsNullOrEmpty(ButtonIcon))
+                        {
+                            <Icon Identifier="@ButtonIcon" class="mr-1" />
+                        }
 
-            <span class="text">@Main</span>
+                        @ButtonText
+                    </button>
+                }
 
-            @if (!String.IsNullOrEmpty(ButtonText) || ButtonClick != null)
-            {
-                <button type="button" class="btn btn-primary" @onclick="@(() => ButtonClick?.Invoke())">
-                    @if (!String.IsNullOrEmpty(ButtonIcon))
-                    {
-                        <Icon Identifier="@ButtonIcon" class="mr-1" />
-                    }
+                @ButtonContent
+            </div>
+        </div>
 
-                    @ButtonText
-                </button>
-            }
-
-            @ButtonContent
-        </h3>
         @if (!String.IsNullOrEmpty(Sub))
         {
             <h6 class="d-none d-md-block">
@@ -32,4 +35,14 @@
 
     </div>
 </div>
-<div class="header-append"></div>
+@if (!String.IsNullOrEmpty(Sub))
+{
+    <div class="d-none d-md-block">
+        <div class="header-append"></div>
+    </div>
+}
+
+<div class="d-block d-md-none">
+    <div class="header-append-small"></div>
+</div>
+
diff --git a/src/Money.Blazor.Host/Pages/Overview.razor b/src/Money.Blazor.Host/Pages/Overview.razor
@@ -2,7 +2,6 @@
 
 <Title Icon="calendar" Main="@Title" Sub="@SubTitle">
     <ButtonContent>
-        <ExpenseCreateButton CategoryKey="CategoryKey" />
         @{
             var trendsButton = TrendsTitleUrl();
         }
@@ -15,6 +14,7 @@
                 </span>
             </button>
         }
+        <ExpenseCreateButton CategoryKey="CategoryKey" />
     </ButtonContent>
 </Title>
 <ExceptionPanel />

diff --git a/src/Money.Blazor.Host/Pages/Summary.razor b/src/Money.Blazor.Host/Pages/Summary.razor
@@ -2,8 +2,8 @@
 
 <Title Icon="signal" Main="Summary" Sub="@SubTitle">
     <ButtonContent>
-        <ExpenseCreateButton />
         <IncomeCreateButton OnClick="IncomeCreate.Show" />
+        <ExpenseCreateButton />
     </ButtonContent>
 </Title>
 <ExceptionPanel />

diff --git a/src/Money.Blazor.Host/wwwroot/css/site.min.css b/src/Money.Blazor.Host/wwwroot/css/site.min.css
diff --git a/src/Money.Blazor.Host/wwwroot/css/site.scss b/src/Money.Blazor.Host/wwwroot/css/site.scss
@@ -164,33 +164,14 @@ h4 {
         font-size: 26px;
         color: #0078D7;
     }
-    /*h2 {
-        position: relative;
-        height: 40px;
-        overflow: hidden;
 
-        button {
-            position: absolute;
-            right: 0;
-        }
-    }*/
     h3 {
         line-height: 1.25;
         margin-bottom: 0;
-
-        span.text {
-            position: relative;
-            top: 6px;
-            display: inline-block;
-            overflow: hidden;
-            max-width: calc(100% - 177px);
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-
-        button {
-            float: right;
-        }
+        flex: 1;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 
     h6 {
@@ -202,12 +183,20 @@ h4 {
         white-space: nowrap;
         overflow: hidden;
     }
+
+    .actions {
+        white-space: nowrap;
+    }
 }
 
 .header-append {
     margin-bottom: 150px;
 }
 
+.header-append-small {
+    margin-bottom: 110px;
+}
+
 .bottom-bar {
     background: #f5f5f5;
     border-top: 1px solid #dddddd;