- improve mobile view
This commit is contained in:
parent
e64a38ccdf
commit
890b5bbf0b
5 changed files with 109 additions and 12 deletions
|
|
@ -224,8 +224,7 @@
|
||||||
"RelativeToolTip": "wwwroot\\app.css",
|
"RelativeToolTip": "wwwroot\\app.css",
|
||||||
"ViewState": "AgIAAJYCAAAAAAAAAAAiwKoCAAAJAAAAAAAAAA==",
|
"ViewState": "AgIAAJYCAAAAAAAAAAAiwKoCAAAJAAAAAAAAAA==",
|
||||||
"Icon": "ae27a6b0-e345-4288-96df-5eaf394ee369.003000|",
|
"Icon": "ae27a6b0-e345-4288-96df-5eaf394ee369.003000|",
|
||||||
"WhenOpened": "2026-07-04T08:22:21.143Z",
|
"WhenOpened": "2026-07-04T08:22:21.143Z"
|
||||||
"EditorCaption": ""
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"$type": "Document",
|
"$type": "Document",
|
||||||
|
|
@ -271,7 +270,7 @@
|
||||||
"RelativeDocumentMoniker": "Components\\Layout\\MainLayout.razor",
|
"RelativeDocumentMoniker": "Components\\Layout\\MainLayout.razor",
|
||||||
"ToolTip": "E:\\ollama_net\\ollama\\AuthorBuddy.Web\\Components\\Layout\\MainLayout.razor",
|
"ToolTip": "E:\\ollama_net\\ollama\\AuthorBuddy.Web\\Components\\Layout\\MainLayout.razor",
|
||||||
"RelativeToolTip": "Components\\Layout\\MainLayout.razor",
|
"RelativeToolTip": "Components\\Layout\\MainLayout.razor",
|
||||||
"ViewState": "AgIAADIAAAAAAAAAAAApwEUAAAByAAAAAAAAAA==",
|
"ViewState": "AgIAADMAAAAAAAAAAAApwEYAAAByAAAAAAAAAA==",
|
||||||
"Icon": "ae27a6b0-e345-4288-96df-5eaf394ee369.000759|",
|
"Icon": "ae27a6b0-e345-4288-96df-5eaf394ee369.000759|",
|
||||||
"WhenOpened": "2026-05-15T16:04:36.444Z",
|
"WhenOpened": "2026-05-15T16:04:36.444Z",
|
||||||
"EditorCaption": ""
|
"EditorCaption": ""
|
||||||
|
|
@ -310,8 +309,7 @@
|
||||||
"RelativeToolTip": "Components\\Pages\\Settings.razor",
|
"RelativeToolTip": "Components\\Pages\\Settings.razor",
|
||||||
"ViewState": "AgIAABIAAAAAAAAAAAAAADMAAAAfAAAAAAAAAA==",
|
"ViewState": "AgIAABIAAAAAAAAAAAAAADMAAAAfAAAAAAAAAA==",
|
||||||
"Icon": "ae27a6b0-e345-4288-96df-5eaf394ee369.000759|",
|
"Icon": "ae27a6b0-e345-4288-96df-5eaf394ee369.000759|",
|
||||||
"WhenOpened": "2026-05-15T16:43:26.6Z",
|
"WhenOpened": "2026-05-15T16:43:26.6Z"
|
||||||
"EditorCaption": ""
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"$type": "Document",
|
"$type": "Document",
|
||||||
|
|
|
||||||
|
|
@ -224,8 +224,7 @@
|
||||||
"RelativeToolTip": "wwwroot\\app.css",
|
"RelativeToolTip": "wwwroot\\app.css",
|
||||||
"ViewState": "AgIAAJYCAAAAAAAAAAAiwKoCAAAJAAAAAAAAAA==",
|
"ViewState": "AgIAAJYCAAAAAAAAAAAiwKoCAAAJAAAAAAAAAA==",
|
||||||
"Icon": "ae27a6b0-e345-4288-96df-5eaf394ee369.003000|",
|
"Icon": "ae27a6b0-e345-4288-96df-5eaf394ee369.003000|",
|
||||||
"WhenOpened": "2026-07-04T08:22:21.143Z",
|
"WhenOpened": "2026-07-04T08:22:21.143Z"
|
||||||
"EditorCaption": ""
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"$type": "Document",
|
"$type": "Document",
|
||||||
|
|
@ -271,7 +270,7 @@
|
||||||
"RelativeDocumentMoniker": "Components\\Layout\\MainLayout.razor",
|
"RelativeDocumentMoniker": "Components\\Layout\\MainLayout.razor",
|
||||||
"ToolTip": "E:\\ollama_net\\ollama\\AuthorBuddy.Web\\Components\\Layout\\MainLayout.razor",
|
"ToolTip": "E:\\ollama_net\\ollama\\AuthorBuddy.Web\\Components\\Layout\\MainLayout.razor",
|
||||||
"RelativeToolTip": "Components\\Layout\\MainLayout.razor",
|
"RelativeToolTip": "Components\\Layout\\MainLayout.razor",
|
||||||
"ViewState": "AgIAADIAAAAAAAAAAAApwEUAAAByAAAAAAAAAA==",
|
"ViewState": "AgIAADMAAAAAAAAAAAApwEYAAAByAAAAAAAAAA==",
|
||||||
"Icon": "ae27a6b0-e345-4288-96df-5eaf394ee369.000759|",
|
"Icon": "ae27a6b0-e345-4288-96df-5eaf394ee369.000759|",
|
||||||
"WhenOpened": "2026-05-15T16:04:36.444Z",
|
"WhenOpened": "2026-05-15T16:04:36.444Z",
|
||||||
"EditorCaption": ""
|
"EditorCaption": ""
|
||||||
|
|
@ -310,8 +309,7 @@
|
||||||
"RelativeToolTip": "Components\\Pages\\Settings.razor",
|
"RelativeToolTip": "Components\\Pages\\Settings.razor",
|
||||||
"ViewState": "AgIAABIAAAAAAAAAAAAAADMAAAAfAAAAAAAAAA==",
|
"ViewState": "AgIAABIAAAAAAAAAAAAAADMAAAAfAAAAAAAAAA==",
|
||||||
"Icon": "ae27a6b0-e345-4288-96df-5eaf394ee369.000759|",
|
"Icon": "ae27a6b0-e345-4288-96df-5eaf394ee369.000759|",
|
||||||
"WhenOpened": "2026-05-15T16:43:26.6Z",
|
"WhenOpened": "2026-05-15T16:43:26.6Z"
|
||||||
"EditorCaption": ""
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"$type": "Document",
|
"$type": "Document",
|
||||||
|
|
|
||||||
|
|
@ -29,7 +29,8 @@ else
|
||||||
<div class="main-content">
|
<div class="main-content">
|
||||||
@if (_isAuthenticated)
|
@if (_isAuthenticated)
|
||||||
{
|
{
|
||||||
<aside class="sidebar">
|
<aside class="sidebar @(_showMobileSidebar ? "mobile-visible" : "")">
|
||||||
|
<div class="mobile-sidebar-close" @onclick="CloseMobileSidebar">✕</div>
|
||||||
<div class="sidebar-logo">
|
<div class="sidebar-logo">
|
||||||
<img src="/Assets/logo.jpg" alt="Author Buddy" />
|
<img src="/Assets/logo.jpg" alt="Author Buddy" />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -343,6 +344,14 @@ else
|
||||||
</aside>
|
</aside>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@if (_isAuthenticated)
|
||||||
|
{
|
||||||
|
<button class="hamburger" @onclick="ToggleMobileSidebar">☰</button>
|
||||||
|
}
|
||||||
|
@if (_showMobileSidebar)
|
||||||
|
{
|
||||||
|
<div class="mobile-sidebar-backdrop" @onclick="CloseMobileSidebar"></div>
|
||||||
|
}
|
||||||
<main class="detail-panel">
|
<main class="detail-panel">
|
||||||
@if (currentProjectId > 0)
|
@if (currentProjectId > 0)
|
||||||
{
|
{
|
||||||
|
|
@ -452,6 +461,7 @@ else
|
||||||
private string newFileName = string.Empty;
|
private string newFileName = string.Empty;
|
||||||
private FileTreeItem? newFileParentDir;
|
private FileTreeItem? newFileParentDir;
|
||||||
private bool showCopyProjectDialog;
|
private bool showCopyProjectDialog;
|
||||||
|
private bool _showMobileSidebar;
|
||||||
private Action? _opStateHandler;
|
private Action? _opStateHandler;
|
||||||
private string? _editingCategoryPath;
|
private string? _editingCategoryPath;
|
||||||
private HashSet<string> _selectedFiles = new();
|
private HashSet<string> _selectedFiles = new();
|
||||||
|
|
@ -710,9 +720,20 @@ else
|
||||||
private void NavigateTo(string path)
|
private void NavigateTo(string path)
|
||||||
{
|
{
|
||||||
activeSection = null;
|
activeSection = null;
|
||||||
|
_showMobileSidebar = false;
|
||||||
Navigation.NavigateTo(path);
|
Navigation.NavigateTo(path);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private void ToggleMobileSidebar()
|
||||||
|
{
|
||||||
|
_showMobileSidebar = !_showMobileSidebar;
|
||||||
|
}
|
||||||
|
|
||||||
|
private void CloseMobileSidebar()
|
||||||
|
{
|
||||||
|
_showMobileSidebar = false;
|
||||||
|
}
|
||||||
|
|
||||||
private void ToggleInfoOverlay()
|
private void ToggleInfoOverlay()
|
||||||
{
|
{
|
||||||
_showInfoOverlay = !_showInfoOverlay;
|
_showInfoOverlay = !_showInfoOverlay;
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
<Project>
|
<Project>
|
||||||
<PropertyGroup>
|
<PropertyGroup>
|
||||||
<_PublishTargetUrl>E:\ollama_net\ollama\AuthorBuddy.Web\bin\Release\net10.0\publish\</_PublishTargetUrl>
|
<_PublishTargetUrl>E:\ollama_net\ollama\AuthorBuddy.Web\bin\Release\net10.0\publish\</_PublishTargetUrl>
|
||||||
<History>True|2026-07-04T08:31:55.1105019Z||;True|2026-07-03T19:42:19.2725521+02:00||;True|2026-07-03T19:14:41.2291817+02:00||;True|2026-06-26T17:29:16.2419779+02:00||;True|2026-06-14T08:09:44.9432726+02:00||;</History>
|
<History>True|2026-07-05T05:05:59.5910017Z||;True|2026-07-04T10:31:55.1105019+02:00||;True|2026-07-03T19:42:19.2725521+02:00||;True|2026-07-03T19:14:41.2291817+02:00||;True|2026-06-26T17:29:16.2419779+02:00||;True|2026-06-14T08:09:44.9432726+02:00||;</History>
|
||||||
<LastFailureDetails />
|
<LastFailureDetails />
|
||||||
</PropertyGroup>
|
</PropertyGroup>
|
||||||
</Project>
|
</Project>
|
||||||
|
|
@ -1237,6 +1237,37 @@ button.primary {
|
||||||
border-color: var(--accent-color);
|
border-color: var(--accent-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Hamburger menu */
|
||||||
|
.hamburger {
|
||||||
|
display: none;
|
||||||
|
align-self: flex-start;
|
||||||
|
flex-shrink: 0;
|
||||||
|
z-index: 1100;
|
||||||
|
font-size: 24px;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border: none;
|
||||||
|
background: var(--button-bg);
|
||||||
|
color: var(--text-main);
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 4px;
|
||||||
|
line-height: 40px;
|
||||||
|
text-align: center;
|
||||||
|
margin: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hamburger:hover {
|
||||||
|
background: var(--button-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-sidebar-backdrop {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-sidebar-close {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
/* Editor modified badge */
|
/* Editor modified badge */
|
||||||
.editor-modified-badge {
|
.editor-modified-badge {
|
||||||
color: #e74c3c;
|
color: #e74c3c;
|
||||||
|
|
@ -1765,10 +1796,59 @@ button.primary {
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hamburger {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-sidebar-backdrop {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mobile-sidebar-close {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 6px;
|
||||||
|
right: 6px;
|
||||||
|
z-index: 1060;
|
||||||
|
font-size: 20px;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
color: var(--text-main);
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 4px;
|
||||||
|
line-height: 32px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-sidebar-close:hover {
|
||||||
|
background: var(--button-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar.mobile-visible {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 1050;
|
||||||
|
width: 280px;
|
||||||
|
max-width: 85vw;
|
||||||
|
min-width: 200px;
|
||||||
|
border-right: 2px solid var(--border-color);
|
||||||
|
background: var(--window-bg);
|
||||||
|
padding: 4px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.main-content {
|
.main-content {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue