Layout improvement

Author: farzindev

Blogifier.Web/Views/Account/ChangePassword.cshtml

@@ -8,7 +8,7 @@
     bool demo = config.GetSetting("Demo") == "true" && !Model.Profile.IsAdmin;
 }
 
-<div class="bf-settings bf-settings-boxed bf-settings-changepassword" data-page-title="@ViewData["Title"]">
+<div class="bf-content bf-content-boxed bf-settings" data-page-title="@ViewData["Title"]">
     <div class="bf-title"><span>@ViewData["Title"]</span></div>
     @Html.Partial("_StatusMessage", Model.StatusMessage)
     <form method="post">

Blogifier.Web/Views/Blogifier/Admin/Settings/About.cshtml

@@ -6,7 +6,7 @@
     Layout = $"~/{ApplicationSettings.BlogAdminFolder}/_Layout/_Settings.cshtml";
 }
 
-<div class="bf-settings bf-settings-boxed bf-settings-about mx-auto">
+<div class="bf-content bf-content-boxed bf-settings bf-settings-about mx-auto">
 
     <div class="text-center pt-5">
         <p class="mb-3">

Blogifier.Web/Views/Blogifier/Admin/Settings/Advanced.cshtml

@@ -4,7 +4,7 @@
     ViewData["Title"] = "Avanced Settings";
     Layout = $"~/{ApplicationSettings.BlogAdminFolder}/_Layout/_Settings.cshtml";
 }
-<div class="bf-settings bf-settings-boxed">
+<div class="bf-content bf-content-boxed bf-settings">
     <div class="bf-title"><span>Import & Export</span></div>
     <div class="btn-group d-flex" role="group">
         <button type="button" class="btn btn-outline-primary w-100" data-toggle="modal" data-target="#importRss">Import RSS</button>

Blogifier.Web/Views/Blogifier/Admin/Settings/General.cshtml

@@ -5,7 +5,7 @@
     Layout = $"~/{ApplicationSettings.BlogAdminFolder}/_Layout/_Settings.cshtml";
 }
 <form method="post" asp-controller="Settings" asp-action="General" asp-antiforgery="true">
-    <div class="bf-settings bf-settings-boxed bf-settings-appsettings">
+    <div class="bf-content bf-content-boxed bf-settings">
         <div class="bf-title d-none d-lg-block"><span>@ViewData["Title"]</span></div>
         <div class="form-group">
             <label class="form-group-label">Title</label>

Blogifier.Web/Views/Blogifier/Admin/Settings/Posts.cshtml

@@ -4,7 +4,7 @@
     ViewData["Title"] = "Posts Settings";
     Layout = $"~/{ApplicationSettings.BlogAdminFolder}/_Layout/_Settings.cshtml";
 }
-<div class="bf-settings bf-settings-boxed bf-settings-import">
+<div class="bf-content bf-content-boxed bf-settings">
     <div class="bf-title d-none d-lg-block"><span>@ViewData["Title"]</span></div>
     <form method="post" asp-controller="Settings" asp-action="Posts" asp-antiforgery="true">
         <div class="form-group">

Blogifier.Web/Views/Blogifier/Admin/Settings/Profile.cshtml

@@ -5,7 +5,7 @@
     Layout = $"~/{ApplicationSettings.BlogAdminFolder}/_Layout/_Settings.cshtml";
     if (!Model.CustomFields.ContainsKey("SendGridApiKey")) { Model.CustomFields.Add("SendGridApiKey", ""); }
 }
-<div class="bf-settings bf-settings-boxed bf-settings-profile">
+<div class="bf-content bf-content-boxed bf-settings">
     <div class="bf-title d-none d-lg-block"><span>@ViewData["Title"]</span></div>
     <form method="post" asp-controller="Settings" asp-action="Profile" asp-antiforgery="true">
         <div class="form-group">

Blogifier.Web/Views/Blogifier/Admin/Settings/Users.cshtml

@@ -10,15 +10,13 @@
     var cntFrom = pgr.CurrentPage == 1 ? 1 : (pgr.CurrentPage - 1) * pgr.ItemsPerPage + 1;
     var cntTo = pgr.CurrentPage * pgr.ItemsPerPage < pgr.Total ? pgr.CurrentPage * pgr.ItemsPerPage : pgr.Total;
 }
-<div class="bf-settings bf-settings-users">
-
+<div class="bf-settings">
   <div class="bf-toolbar d-flex">
       <label class="custom-control custom-checkbox my-auto mr-3"><input class="custom-control-input item-checkbox" type="checkbox" name="selectAll"><span class="item-control custom-control-indicator"></span></label>
       <button type="button" class="btn btn-primary btn-rounded btn-sm mr-3" data-toggle="modal" data-target="#createUserModal">Create User</button>
       <button type="button" id="userActionButtons" class="btn btn-outline-secondary btn-rounded btn-sm btn-icon mr-3" disabled="disabled" data-tooltip onclick="return usersController.removeUser()" title="Delete"><i class="fa fa-trash"></i></button>
       <div class="loading loading-sm"><div class="loading-dot-1"></div><div class="loading-dot-2"></div><div class="loading-dot-3"></div></div>
   </div>
-
   <ul class="bf-users-list d-block" aria-label="posts">
       @foreach (var blog in Model.Blogs)
       {
@@ -33,7 +31,6 @@
           </li>
       }
   </ul>
-
   @if (pgr.ShowNewer || pgr.ShowOlder)
   {
       <ul class="bf-posts-pagination">
@@ -48,8 +45,6 @@
           <li class="item"><a class="item-count">@cntFrom-@cntTo out of @pgr.Total</a></li>
       </ul>
   }
-
-
 </div>
 
 <!-- Create User Modal -->

Blogifier.Web/Views/Blogifier/Admin/_Layout/_Settings.cshtml

@@ -3,7 +3,7 @@
     Layout = $"~/{ApplicationSettings.BlogAdminFolder}/_Layout/_Layout.cshtml";
 }
 <div class="bf-header d-flex d-lg-none">@ViewData["Title"] <i class="fa fa-chevron-down"></i></div>
-<div class="bf-body">
+<div class="bf-main">
     <div class="bf-sidebar d-lg-block">
         <div class="bf-settings-sidebar">
             @if (Model.Profile.IsAdmin)
@@ -44,7 +44,7 @@
             }
         </div>
     </div>
-    <div class="bf-content">
+    <div class="bf-body">
         @RenderBody()
     </div>
 </div>

Blogifier.Web/wwwroot/admin/css/styles.min.css

@@ -5,3 +5,25 @@
     padding-left: $width-taskbar;
   }
 }
+
+.bf-main {
+  position: relative;
+  @media screen and (min-width: 992px) {
+    min-height: 100%;
+    padding-left: $width-sidebar;
+  }
+}
+
+.bf-body {
+  width: 100%;
+}
+
+.bf-content {
+  padding: 2rem;
+  @media screen and (min-width:992px) {
+    &-boxed {
+      max-width: 38rem;
+      width: 100%;
+    }
+  }
+}