site: decrease menus size

Put some menus as submenus so it does not break responsive layout
darakeon · Aug 6, 2024 · 584441f · 584441f
1 parent 6ffd34b
commit 584441f
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 60 deletions.
diff --git a/core/Language/Language/Site/general.json b/core/Language/Language/Site/general.json
@@ -54,6 +54,7 @@
 		"NoneLimit": "No limit",
 		"Zero": "Zero",
 		"Settings": "Settings",
+		"Administration": "Administration",
 		"Code": "Code",
 		"WipedData": "Deleted Data",
 
@@ -234,6 +235,7 @@
 		"NoneLimit": "Sem limites",
 		"Zero": "Zero",
 		"Settings": "Configurações",
+		"Administration": "Administração",
 		"Code": "Código",
 		"WipedData": "Dados removidos",
 

diff --git a/site/MVC/Assets/styles/default.css b/site/MVC/Assets/styles/default.css
@@ -27,6 +27,10 @@ a.navbar-brand {
 		margin: -1em 0.2em -0.5em 0;
 	}
 
+.navbar-nav {
+	max-width: 564px;
+}
+
 .move-down {
 	margin-top: 25px;
 }

diff --git a/site/MVC/Views/Shared/Skeleton/Menus/AccountArea.cshtml b/site/MVC/Views/Shared/Skeleton/Menus/AccountArea.cshtml
@@ -39,31 +39,39 @@
 	</li>
 }
 
-@if (Model.IsUsingCategories)
-{
-	<li>
-		@Html.ActionLink(
-			Context.Translate("CategorySummary"),
-			"Categories", "Reports",
-			null, new { @class = categoriesClass }
-		)
-	</li>
-}
+<li class="dropdown">
+	<a class="dropdown-toggle @moveClass hide-whl-after-click" data-toggle="dropdown" role="button">
+		@Context.Translate("Reports")
+	</a>
 
-<li>
-	@Html.ActionLink(
-		Context.Translate("MonthMoves"),
-		"Month", "Reports",
-		null, new { @class = extractClass }
-	)
-</li>
+	<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
+		<li>
+			@Html.ActionLink(
+				Context.Translate("MonthMoves"),
+				"Month", "Reports",
+				null, new { @class = $"text-right {extractClass}" }
+			)
+		</li>
 
-<li>
-	@Html.ActionLink(
-		Context.Translate("YearMoves"),
-		"Year", "Reports",
-		null, new { @class = summaryClass }
-	)
+		<li>
+			@Html.ActionLink(
+				Context.Translate("YearMoves"),
+				"Year", "Reports",
+				null, new { @class = $"text-right {summaryClass}" }
+			)
+		</li>
+
+		@if (Model.IsUsingCategories)
+		{
+			<li>
+				@Html.ActionLink(
+					Context.Translate("CategorySummary"),
+					"Categories", "Reports",
+					null, new { @class = $"text-right {categoriesClass}" }
+				)
+			</li>
+		}
+	</ul>
 </li>
 
 <li>

diff --git a/site/MVC/Views/Shared/Skeleton/Menus/DefaultArea.cshtml b/site/MVC/Views/Shared/Skeleton/Menus/DefaultArea.cshtml
@@ -2,43 +2,54 @@
 
 @{
 	const String menuHL = " wl-other-color";
+
+	var adminClass = ViewBag.AdminMenuClass + menuHL;
+
 	var schedulesClass = ViewBag.SchedulesMenuClass + menuHL;
 	var accountsClass = ViewBag.AccountsMenuClass + menuHL;
 	var categoriesClass = ViewBag.CategoriesMenuClass + menuHL;
 	var loginsClass = ViewBag.LoginsMenuClass + menuHL;
 }
 
-<li>
-	@Html.ActionLink(
-		Context.Translate("Accounts"),
-		"Index", "Accounts",
-		null, new { @class = accountsClass }
-	)
-</li>
+<li class="dropdown">
+	<a class="dropdown-toggle @adminClass hide-whl-after-click" data-toggle="dropdown" role="button">
+		@Context.Translate("Administration")
+	</a>
 
-@if (Model.IsUsingCategories)
-{
-	<li>
-		@Html.ActionLink(
-			Context.Translate("Categories"),
-			"Index", "Categories",
-			null, new { @class = categoriesClass }
-		)
-	</li>
-}
+	<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
+		<li>
+			@Html.ActionLink(
+				Context.Translate("Accounts"),
+				"Index", "Accounts",
+				null, new { @class = $"text-right {accountsClass}" }
+			)
+		</li>
 
-<li>
-	@Html.ActionLink(
-		Context.Translate("Schedules"),
-		"Index", "Schedules",
-		null, new { @class = schedulesClass }
-	)
-</li>
+		@if (Model.IsUsingCategories)
+		{
+			<li>
+				@Html.ActionLink(
+					Context.Translate("Categories"),
+					"Index", "Categories",
+					null, new { @class = $"text-right {categoriesClass}" }
+				)
+			</li>
+		}
+
+		<li>
+			@Html.ActionLink(
+				Context.Translate("Schedules"),
+				"Index", "Schedules",
+				null, new { @class = $"text-right {schedulesClass}" }
+			)
+		</li>
 
-<li>
-	@Html.ActionLink(
-		Context.Translate("Logins"),
-		"Index", "Logins",
-		null, new { @class = loginsClass }
-	)
+		<li>
+			@Html.ActionLink(
+				Context.Translate("Logins"),
+				"Index", "Logins",
+				null, new { @class = $"text-right {loginsClass}" }
+			)
+		</li>
+	</ul>
 </li>
diff --git a/site/MVC/Views/Shared/Skeleton/Menus/Settings.cshtml b/site/MVC/Views/Shared/Skeleton/Menus/Settings.cshtml
@@ -30,7 +30,7 @@
 				Html,
 				Context.Translate("MainSettings"),
 				"Index", "Settings",
-				new { @class = "text-right " + settingsMainClass }
+				new { @class = $"text-right {settingsMainClass}" }
 			)
 		</li>
 
@@ -39,7 +39,7 @@
 				Html,
 				Context.Translate("EmailSettings"),
 				"Email", "Settings",
-				new { @class = "text-right " + settingsEmailClass }
+				new { @class = $"text-right {settingsEmailClass}" }
 			)
 		</li>
 
@@ -48,7 +48,7 @@
 				Html,
 				Context.Translate("PasswordSettings"),
 				"Password", "Settings",
-				new { @class = "text-right " + settingsPasswordClass }
+				new { @class = $"text-right {settingsPasswordClass}" }
 			)
 		</li>
 
@@ -57,7 +57,7 @@
 				Html,
 				Context.Translate("TFASettings"),
 				"TFA", "Settings",
-				new { @class = "text-right " + settingsTFAClass }
+				new { @class = $"text-right {settingsTFAClass}" }
 			)
 		</li>
 
@@ -66,7 +66,7 @@
 				Html,
 				Context.Translate("ThemeSettings"),
 				"Theme", "Settings",
-				new { @class = "text-right " + settingsThemeClass }
+				new { @class = $"text-right {settingsThemeClass}" }
 			)
 		</li>
 
@@ -75,7 +75,7 @@
 				Html,
 				Context.Translate("MiscSettings"),
 				"Misc", "Settings",
-				new { @class = "text-right " + settingsMiscClass }
+				new { @class = $"text-right {settingsMiscClass}" }
 			)
 		</li>
 
@@ -84,7 +84,7 @@
 				Html,
 				Context.Translate("WipeSettings"),
 				"Wipe", "Settings",
-				new { @class = "text-right " + settingsWipeClass }
+				new { @class = $"text-right {settingsWipeClass}" }
 			)
 		</li>
 	</ul>