From c998d1343a8c9077744644a155387b2033926bcd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marek=20Fi=C5=A1era?= Date: Wed, 26 May 2021 08:37:10 +0200 Subject: [PATCH] #354 - Optimize header size on mobile view. Hide sub header. Rewrite styles for header so main header is ellipsing correctly. Shrink spacing. --- src/Money.Blazor.Host/Components/Title.razor | 53 ++++++++++++------- src/Money.Blazor.Host/Pages/Overview.razor | 2 +- src/Money.Blazor.Host/Pages/Summary.razor | 2 +- .../wwwroot/css/site.min.css | 2 +- src/Money.Blazor.Host/wwwroot/css/site.scss | 35 +++++------- 5 files changed, 48 insertions(+), 46 deletions(-) diff --git a/src/Money.Blazor.Host/Components/Title.razor b/src/Money.Blazor.Host/Components/Title.razor index ccb1f2ba..461101f8 100644 --- a/src/Money.Blazor.Host/Components/Title.razor +++ b/src/Money.Blazor.Host/Components/Title.razor @@ -1,28 +1,31 @@ 
+
+

+ @if (!String.IsNullOrEmpty(Icon)) + { + + } -

- @if (!String.IsNullOrEmpty(Icon)) - { - - } + @Main +

+
+ @if (!String.IsNullOrEmpty(ButtonText) || ButtonClick != null) + { + + } - @if (!String.IsNullOrEmpty(ButtonText) || ButtonClick != null) - { -
+

- @ButtonText - - } - - @ButtonContent - @if (!String.IsNullOrEmpty(Sub)) {
@@ -32,4 +35,14 @@
-
+@if (!String.IsNullOrEmpty(Sub)) +{ +
+
+
+} + +
+
+
+ diff --git a/src/Money.Blazor.Host/Pages/Overview.razor b/src/Money.Blazor.Host/Pages/Overview.razor index 1c961f7f..ac8456de 100644 --- a/src/Money.Blazor.Host/Pages/Overview.razor +++ b/src/Money.Blazor.Host/Pages/Overview.razor @@ -2,7 +2,6 @@ <ButtonContent> - <ExpenseCreateButton CategoryKey="CategoryKey" /> @{ var trendsButton = TrendsTitleUrl(); } @@ -15,6 +14,7 @@ </span> </button> } + <ExpenseCreateButton CategoryKey="CategoryKey" /> </ButtonContent> diff --git a/src/Money.Blazor.Host/Pages/Summary.razor b/src/Money.Blazor.Host/Pages/Summary.razor index 406b17df..6bf6782e 100644 --- a/src/Money.Blazor.Host/Pages/Summary.razor +++ b/src/Money.Blazor.Host/Pages/Summary.razor @@ -2,8 +2,8 @@ <ButtonContent> - <ExpenseCreateButton /> <IncomeCreateButton OnClick="IncomeCreate.Show" /> + <ExpenseCreateButton /> </ButtonContent> diff --git a/src/Money.Blazor.Host/wwwroot/css/site.min.css b/src/Money.Blazor.Host/wwwroot/css/site.min.css index b98d6711..052c10ae 100644 --- a/src/Money.Blazor.Host/wwwroot/css/site.min.css +++ b/src/Money.Blazor.Host/wwwroot/css/site.min.css @@ -1 +1 @@ -@charset "UTF-8";::-webkit-scrollbar{width:8px;}::-webkit-scrollbar-track{background:#f5f5f5;}::-webkit-scrollbar-thumb{background:#007bff;}.clear{clear:both;}html,body{overscroll-behavior-y:none;}body{position:relative;min-width:380px;min-height:100vh;padding-top:30px;padding-bottom:20px;}.body-content{margin-top:20px;margin-bottom:64px;}footer{position:absolute;bottom:0;width:100%;}h4{margin-bottom:20px;}.fas.fa-trash-alt{color:#d85a5a;}.navbar{background-color:#0078d7;border-color:#398bf5;}.navbar .navbar-collapse{border-color:#398bf5;height:calc(100vh - 56px);}@media(min-width:992px){.navbar .navbar-collapse{height:auto;}}.navbar .navbar-toggle,.navbar .navbar-toggle:focus,.navbar .navbar-toggle:hover{background-color:#0078d7;border-color:#398bf5;}.navbar .navbar-toggler{border:none;outline:none;}@media(max-width:992px){.navbar .nav-link{padding-top:.75rem;padding-bottom:.75rem;}.navbar hr{margin-right:-18px;margin-left:-26px;}}@media(max-width:992px) and (min-width:596px){.navbar hr{margin-right:-1rem;margin-left:-1rem;}}.navbar .navbar-nav>li>a,.navbar .navbar-nav>li>button{color:#bcdbff;cursor:pointer;}@media(max-width:767px){.navbar .navbar-nav>.open ul.dropdown-menu>li>a{color:#bcdbff;}}.navbar .navbar-nav>.open>a,.navbar .navbar-nav>.open>a:hover{background:#245a9d;}.navbar .navbar-nav>li>a.active{color:#fff;}.navbar .navbar-nav>li>button:hover{text-decoration:none;}.navbar a.navbar-brand{color:#fff;padding:0;}.navbar .nav-item hr{border-color:rgba(255,255,255,.5);}@media(max-width:992px){.navbar .fas,.navbar .fa{width:30px;text-align:center;}}.navbar .navbar-brand{position:relative;}.navbar .navbar-brand .status{font-size:10px;top:5px;position:absolute;}.nav-tabs>li>a:hover{cursor:pointer;}.nav-tabs>li.active>a:hover{cursor:default;}.header{position:absolute;width:100%;min-width:380px;left:0;top:56px;padding:14px 0;background:#f5f5f5;border-bottom:1px solid #ddd;}.header .icon{font-size:26px;color:#0078d7;}.header h3{line-height:1.25;margin-bottom:0;}.header h3 span.text{position:relative;top:6px;display:inline-block;overflow:hidden;max-width:calc(100% - 177px);text-overflow:ellipsis;white-space:nowrap;}.header h3 button{float:right;}.header h6{width:100%;margin-top:.5rem;margin-bottom:0;text-overflow:ellipsis;line-height:1.25;white-space:nowrap;overflow:hidden;}.header-append{margin-bottom:150px;}.bottom-bar{background:#f5f5f5;border-top:1px solid #ddd;}.bottom-bar .items-4 span.text,.bottom-bar .items-3 span.text{display:none;}.center{text-align:center;}.gray{opacity:.7;}.table .btn-link{padding:0;}.table .min-column{max-width:1px;overflow:auto;}.alert .nav{margin-top:-7px;margin-bottom:-7px;}.alert .nav .btn-link{color:#333;}.back-dark{color:#eee !important;}.back-dark .btn-link{color:#eee !important;}.back-light{color:#212529 !important;}.btn-icon,.btn-color{width:48px;height:48px;margin:3px;}.btn-icon{font-size:1.6em;padding:0;}.btn-selectable{border-radius:4px;border:2px solid transparent;}.btn-selectable:focus,.btn-selectable:hover{text-decoration:none;}.btn-selectable.btn-selectable-selected,.btn-selectable:focus,.btn-selectable:hover{position:relative;outline:none;border-color:#000;}.btn-selectable.btn-selectable-selected::before,.btn-selectable:focus::before,.btn-selectable:hover::before{content:" ";content:"✓";padding:2px;background:#000;border-radius:0 0 4px 0;position:absolute;left:0;top:0;color:#fff;font-size:11px;}.card{margin-bottom:15px;}.card .nav{margin-top:-7px;margin-bottom:-7px;}.card .nav .btn-link{color:#333;}.card p:last-child{margin:0;}.sort a{cursor:pointer;}.summary{position:relative;}.summary .sort{position:absolute;right:0;}.summary .sort .btn{border-color:transparent;}.summary .months{padding-right:70px;}.summary .graph{margin-bottom:-15px;}.bar-graph{margin:0;border-width:1px 0 0 0;box-shadow:none;cursor:pointer;}.bar-graph .card-body{position:relative;height:60px;padding:15px;}.bar-graph .description{position:absolute;margin:0;font-size:24px;font-weight:normal;line-height:1.1;display:inline;z-index:1;}.bar-graph .description .name{font-size:16px;white-space:nowrap;}.bar-graph .description .icon{display:inline-block;width:34px;text-align:center;}.bar-graph .value{position:absolute;width:calc(100% - 30px);}.bar-graph .amount{float:right;}.bar-graph .bar{height:10px;float:right;clear:both;transition:width 1s;}.bar-graph:hover{background-color:#f5f5f5;}.bar-graph-summary{border:none;}.bar-graph-summary .glyphicon{margin:0 4px;}.bar-graph-summary .category-name{font-weight:bold;}.bar-graph-summary .amount{font-weight:bold;}.overview{max-width:900px;margin:0 auto;}.overview .sort{float:right;margin-right:35px;}.search{max-width:900px;margin:0 auto;}.search .controls{display:none;}.cards{margin:20px 0;}.cards .row:first-child{border-top:1px solid #dee2e6 !important;}.cards .row:hover{background:#eee;}.cards .row .btn-link{color:#333;}@media(max-width:767px){.modal .btn-primary{width:100%;display:block;}}.vertical-bar{display:flex;align-items:flex-end;}.splash{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;background:#0078d7;z-index:1031;transition:height 1s,opacity .5s linear 1s,margin-top .1s linear 2s;}.splash .app-title{position:absolute;bottom:40px;width:100vw;text-align:center;color:#fff;font-size:1.6rem;font-weight:lighter;transition:opacity .5s;}.splash img{width:120px;height:120px;transition:margin-left .5s linear .5s,width .5s,height .5s;}.splash.animate{height:56px;opacity:0;margin-top:-60px;}.splash.animate .app-title{opacity:0;}.splash.animate img{width:40px;height:40px;margin-left:calc(-100vw + 71px);}@media(min-width:576px){.splash.animate img{margin-left:-480px;}}@media(min-width:768px){.splash.animate img{margin-left:-680px;}}@media(min-width:992px){.splash.animate img{margin-left:-890px;}}@media(min-width:1200px){.splash.animate img{margin-left:-1070px;}}.loading-bar{display:inline-block;position:relative;width:64px;height:84px;}.loading-bar div{display:inline-block;position:absolute;left:6px;width:13px;background:#193f6f;animation:loading-bar 1.2s cubic-bezier(0,.5,.5,1) infinite;}.loading-bar div:nth-child(1){left:6px;animation-delay:-.24s;}.loading-bar div:nth-child(2){left:26px;animation-delay:-.12s;}.loading-bar div:nth-child(3){left:45px;animation-delay:0;}@keyframes loading-bar{0%{top:6px;height:71px;}50%,100%{top:19px;height:26px;}}.loading{position:relative;}.loading .mask{position:absolute;left:0;top:0;width:100%;height:100%;display:none;opacity:.9;background:#fff;}.loading-active .mask{display:block;}.pager{margin:20px 0 40px 0;}.pager a{cursor:pointer;}.pager li{display:inline-block;}.pager .current{margin:0 16px;}.user{margin:20px 15px;}.login{margin-top:20px;}.expenses-bag{position:relative;}.expenses-bag button{display:none;}.expenses-bag button:last-child{display:inline-block;}.refresher{pointer-events:none;--refresh-width:55px;background:#fff;width:var(--refresh-width);height:var(--refresh-width);border-radius:50%;position:absolute;top:-56px;left:calc(50% - var(--refresh-width)/2);padding:8px;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2);transition:all 300ms cubic-bezier(0,0,.2,1);will-change:transform,opacity;display:inline-flex;justify-content:space-evenly;align-items:center;z-index:1100;visibility:hidden;}.refresher.visible{top:56px;}.loading-bar{width:4px;height:18px;border-radius:4px;animation:loading 1s ease-in-out infinite;}.loading-bar:nth-child(1){background-color:#3498db;animation-delay:0;}.loading-bar:nth-child(2){background-color:#c0392b;animation-delay:.09s;}.loading-bar:nth-child(3){background-color:#f1c40f;animation-delay:.18s;}.loading-bar:nth-child(4){background-color:#27ae60;animation-delay:.27s;}@keyframes loading{0%{transform:scale(1);}20%{transform:scale(1,2.2);}40%{transform:scale(1);}} \ No newline at end of file +@charset "UTF-8";::-webkit-scrollbar{width:8px;}::-webkit-scrollbar-track{background:#f5f5f5;}::-webkit-scrollbar-thumb{background:#007bff;}.clear{clear:both;}html,body{overscroll-behavior-y:none;}body{position:relative;min-width:380px;min-height:100vh;padding-top:30px;padding-bottom:20px;}.body-content{margin-top:20px;margin-bottom:64px;}footer{position:absolute;bottom:0;width:100%;}h4{margin-bottom:20px;}.fas.fa-trash-alt{color:#d85a5a;}.navbar{background-color:#0078d7;border-color:#398bf5;}.navbar .navbar-collapse{border-color:#398bf5;height:calc(100vh - 56px);}@media(min-width:992px){.navbar .navbar-collapse{height:auto;}}.navbar .navbar-toggle,.navbar .navbar-toggle:focus,.navbar .navbar-toggle:hover{background-color:#0078d7;border-color:#398bf5;}.navbar .navbar-toggler{border:none;outline:none;}@media(max-width:992px){.navbar .nav-link{padding-top:.75rem;padding-bottom:.75rem;}.navbar hr{margin-right:-18px;margin-left:-26px;}}@media(max-width:992px) and (min-width:596px){.navbar hr{margin-right:-1rem;margin-left:-1rem;}}.navbar .navbar-nav>li>a,.navbar .navbar-nav>li>button{color:#bcdbff;cursor:pointer;}@media(max-width:767px){.navbar .navbar-nav>.open ul.dropdown-menu>li>a{color:#bcdbff;}}.navbar .navbar-nav>.open>a,.navbar .navbar-nav>.open>a:hover{background:#245a9d;}.navbar .navbar-nav>li>a.active{color:#fff;}.navbar .navbar-nav>li>button:hover{text-decoration:none;}.navbar a.navbar-brand{color:#fff;padding:0;}.navbar .nav-item hr{border-color:rgba(255,255,255,.5);}@media(max-width:992px){.navbar .fas,.navbar .fa{width:30px;text-align:center;}}.navbar .navbar-brand{position:relative;}.navbar .navbar-brand .status{font-size:10px;top:5px;position:absolute;}.nav-tabs>li>a:hover{cursor:pointer;}.nav-tabs>li.active>a:hover{cursor:default;}.header{position:absolute;width:100%;min-width:380px;left:0;top:56px;padding:14px 0;background:#f5f5f5;border-bottom:1px solid #ddd;}.header .icon{font-size:26px;color:#0078d7;}.header h3{line-height:1.25;margin-bottom:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.header h6{width:100%;margin-top:.5rem;margin-bottom:0;text-overflow:ellipsis;line-height:1.25;white-space:nowrap;overflow:hidden;}.header .actions{white-space:nowrap;}.header-append{margin-bottom:150px;}.header-append-small{margin-bottom:110px;}.bottom-bar{background:#f5f5f5;border-top:1px solid #ddd;}.bottom-bar .items-4 span.text,.bottom-bar .items-3 span.text{display:none;}.center{text-align:center;}.gray{opacity:.7;}.table .btn-link{padding:0;}.table .min-column{max-width:1px;overflow:auto;}.alert .nav{margin-top:-7px;margin-bottom:-7px;}.alert .nav .btn-link{color:#333;}.back-dark{color:#eee !important;}.back-dark .btn-link{color:#eee !important;}.back-light{color:#212529 !important;}.btn-icon,.btn-color{width:48px;height:48px;margin:3px;}.btn-icon{font-size:1.6em;padding:0;}.btn-selectable{border-radius:4px;border:2px solid transparent;}.btn-selectable:focus,.btn-selectable:hover{text-decoration:none;}.btn-selectable.btn-selectable-selected,.btn-selectable:focus,.btn-selectable:hover{position:relative;outline:none;border-color:#000;}.btn-selectable.btn-selectable-selected::before,.btn-selectable:focus::before,.btn-selectable:hover::before{content:" ";content:"✓";padding:2px;background:#000;border-radius:0 0 4px 0;position:absolute;left:0;top:0;color:#fff;font-size:11px;}.card{margin-bottom:15px;}.card .nav{margin-top:-7px;margin-bottom:-7px;}.card .nav .btn-link{color:#333;}.card p:last-child{margin:0;}.sort a{cursor:pointer;}.summary{position:relative;}.summary .sort{position:absolute;right:0;}.summary .sort .btn{border-color:transparent;}.summary .months{padding-right:70px;}.summary .graph{margin-bottom:-15px;}.bar-graph{margin:0;border-width:1px 0 0 0;box-shadow:none;cursor:pointer;}.bar-graph .card-body{position:relative;height:60px;padding:15px;}.bar-graph .description{position:absolute;margin:0;font-size:24px;font-weight:normal;line-height:1.1;display:inline;z-index:1;}.bar-graph .description .name{font-size:16px;white-space:nowrap;}.bar-graph .description .icon{display:inline-block;width:34px;text-align:center;}.bar-graph .value{position:absolute;width:calc(100% - 30px);}.bar-graph .amount{float:right;}.bar-graph .bar{height:10px;float:right;clear:both;transition:width 1s;}.bar-graph:hover{background-color:#f5f5f5;}.bar-graph-summary{border:none;}.bar-graph-summary .glyphicon{margin:0 4px;}.bar-graph-summary .category-name{font-weight:bold;}.bar-graph-summary .amount{font-weight:bold;}.overview{max-width:900px;margin:0 auto;}.overview .sort{float:right;margin-right:35px;}.search{max-width:900px;margin:0 auto;}.search .controls{display:none;}.cards{margin:20px 0;}.cards .row:first-child{border-top:1px solid #dee2e6 !important;}.cards .row:hover{background:#eee;}.cards .row .btn-link{color:#333;}@media(max-width:767px){.modal .btn-primary{width:100%;display:block;}}.vertical-bar{display:flex;align-items:flex-end;}.splash{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;background:#0078d7;z-index:1031;transition:height 1s,opacity .5s linear 1s,margin-top .1s linear 2s;}.splash .app-title{position:absolute;bottom:40px;width:100vw;text-align:center;color:#fff;font-size:1.6rem;font-weight:lighter;transition:opacity .5s;}.splash img{width:120px;height:120px;transition:margin-left .5s linear .5s,width .5s,height .5s;}.splash.animate{height:56px;opacity:0;margin-top:-60px;}.splash.animate .app-title{opacity:0;}.splash.animate img{width:40px;height:40px;margin-left:calc(-100vw + 71px);}@media(min-width:576px){.splash.animate img{margin-left:-480px;}}@media(min-width:768px){.splash.animate img{margin-left:-680px;}}@media(min-width:992px){.splash.animate img{margin-left:-890px;}}@media(min-width:1200px){.splash.animate img{margin-left:-1070px;}}.loading-bar{display:inline-block;position:relative;width:64px;height:84px;}.loading-bar div{display:inline-block;position:absolute;left:6px;width:13px;background:#193f6f;animation:loading-bar 1.2s cubic-bezier(0,.5,.5,1) infinite;}.loading-bar div:nth-child(1){left:6px;animation-delay:-.24s;}.loading-bar div:nth-child(2){left:26px;animation-delay:-.12s;}.loading-bar div:nth-child(3){left:45px;animation-delay:0;}@keyframes loading-bar{0%{top:6px;height:71px;}50%,100%{top:19px;height:26px;}}.loading{position:relative;}.loading .mask{position:absolute;left:0;top:0;width:100%;height:100%;display:none;opacity:.9;background:#fff;}.loading-active .mask{display:block;}.pager{margin:20px 0 40px 0;}.pager a{cursor:pointer;}.pager li{display:inline-block;}.pager .current{margin:0 16px;}.user{margin:20px 15px;}.login{margin-top:20px;}.expenses-bag{position:relative;}.expenses-bag button{display:none;}.expenses-bag button:last-child{display:inline-block;}.refresher{pointer-events:none;--refresh-width:55px;background:#fff;width:var(--refresh-width);height:var(--refresh-width);border-radius:50%;position:absolute;top:-56px;left:calc(50% - var(--refresh-width)/2);padding:8px;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2);transition:all 300ms cubic-bezier(0,0,.2,1);will-change:transform,opacity;display:inline-flex;justify-content:space-evenly;align-items:center;z-index:1100;visibility:hidden;}.refresher.visible{top:56px;}.loading-bar{width:4px;height:18px;border-radius:4px;animation:loading 1s ease-in-out infinite;}.loading-bar:nth-child(1){background-color:#3498db;animation-delay:0;}.loading-bar:nth-child(2){background-color:#c0392b;animation-delay:.09s;}.loading-bar:nth-child(3){background-color:#f1c40f;animation-delay:.18s;}.loading-bar:nth-child(4){background-color:#27ae60;animation-delay:.27s;}@keyframes loading{0%{transform:scale(1);}20%{transform:scale(1,2.2);}40%{transform:scale(1);}} \ No newline at end of file diff --git a/src/Money.Blazor.Host/wwwroot/css/site.scss b/src/Money.Blazor.Host/wwwroot/css/site.scss index 103f2ec5..39a5d7a2 100644 --- 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;