#252 - Better organize menu items on "md" display.

maraf · Apr 12, 2020 · f9b7c9e · f9b7c9e
1 parent 3020e8f
commit f9b7c9e
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 20 deletions.
diff --git a/src/Money.UI.Blazor/Layouts/MainMenu.razor b/src/Money.UI.Blazor/Layouts/MainMenu.razor
@@ -30,7 +30,7 @@
                     <NavLink class="nav-link" href="@Navigator.UrlAbout()">About</NavLink>
                 </li>
             </ul>
-            <ul class="nav navbar-nav navbar-right">
+            <ul class="nav navbar-nav">
                 <li>
                     <PwaInstall />
                 </li>

diff --git a/src/Money.UI.Blazor/Layouts/UserInfo.razor b/src/Money.UI.Blazor/Layouts/UserInfo.razor
@@ -1,7 +1,7 @@
 @if (IsAuthenticated || Loading.IsLoading)
 {
-    <form class="navbar-right" @onsubmit="@OnLogoutAsync">
-        <ul class="nav navbar-nav navbar-right">
+    <form class="form-inline" @onsubmit="@OnLogoutAsync">
+        <ul class="nav navbar-nav">
             <Loading Context="@Loading">
                 <LoadingContent>
                     <li class="nav-item">

diff --git a/src/Money.UI.Blazor/Pages/Categories.razor b/src/Money.UI.Blazor/Pages/Categories.razor
@@ -16,19 +16,19 @@
     {
         @foreach (var item in Models)
         {
-            <div class="alert" style="background-color: @item.Color.ToHashCode()">
+            <div class="alert d-flex" style="background-color: @item.Color.ToHashCode()">
                 @if (item.Icon != null)
                 {
-                    <span>@item.Icon</span>
+                    <span class="mr-1">@item.Icon</span>
                 }
-                <strong>
+                <strong class="mr-1">
                     @item.Name
                 </strong>
                 <span class="gray">
                     @item.Description
                 </span>
 
-                <div class="nav navbar-right">
+                <div class="nav ml-auto">
                     <IconButton Icon="pen" ToolTip="Rename" Click="@(() => OnActionClick(item, NameModal))" />
                     <IconButton Icon="image" ToolTip="Icon" Click="@(() => OnActionClick(item, IconModal))" />
                     <IconButton Icon="tint" ToolTip="Color" Click="@(() => OnActionClick(item, ColorModal))" />

diff --git a/src/Money.UI.Blazor/Pages/Currencies.razor b/src/Money.UI.Blazor/Pages/Currencies.razor
@@ -17,12 +17,12 @@
         @foreach (var item in Models)
         {
             <div class="card">
-                <div class="card-header">
+                <div class="card-header d-flex">
                     <strong>
                         @item.Symbol
                     </strong>
 
-                    <div class="nav navbar-right">
+                    <div class="nav ml-auto">
                         @if (!item.IsDefault)
                         {
                             <IconButton Icon="home" ToolTip="Set as default" Click="@(async () => { await OnChangeDefaultClickAsync(item); StateHasChanged(); })" />

diff --git a/src/Money.UI.Blazor/wwwroot/css/site.min.css b/src/Money.UI.Blazor/wwwroot/css/site.min.css
diff --git a/src/Money.UI.Blazor/wwwroot/css/site.scss b/src/Money.UI.Blazor/wwwroot/css/site.scss
@@ -157,16 +157,6 @@ h4 {
     opacity: 0.7;
 }
 
-.navbar-right {
-    float: right;
-}
-
-@media (max-width: 768px) {
-    .navbar-collapse .navbar-right {
-        float: none;
-    }
-}
-
 .table {
     .btn-link {
         padding: 0;