refactor: Modularize UI components and utilities
- Extract UI components into separate JS files - Centralize configuration values in config.js - Introduce a dedicated logger module - Improve file tree drag-and-drop and undo functionality - Refactor modal handling to a single manager - Add URL routing support for SPA navigation - Implement view mode for read-only access
This commit is contained in:
Mahmoud-Emad
@@ -1,14 +1,22 @@
|
||||
/* Base layout styles */
|
||||
html, body {
|
||||
height: 100%;
|
||||
html,
|
||||
body {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
/* Prevent page-level scrolling */
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
|
||||
background-color: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Column Resizer */
|
||||
.column-resizer {
|
||||
width: 1px;
|
||||
@@ -17,14 +25,21 @@ html, body {
|
||||
transition: background-color 0.2s ease, width 0.2s ease, box-shadow 0.2s ease;
|
||||
user-select: none;
|
||||
flex-shrink: 0;
|
||||
padding: 0 3px; /* Add invisible padding for easier grab */
|
||||
margin: 0 -3px; /* Compensate for padding */
|
||||
padding: 0 3px;
|
||||
/* Add invisible padding for easier grab */
|
||||
margin: 0 -3px;
|
||||
/* Compensate for padding */
|
||||
height: 100%;
|
||||
/* Take full height of parent */
|
||||
align-self: stretch;
|
||||
/* Ensure it stretches to full height */
|
||||
}
|
||||
|
||||
.column-resizer:hover {
|
||||
background-color: var(--link-color);
|
||||
width: 1px;
|
||||
box-shadow: 0 0 6px rgba(13, 110, 253, 0.3); /* Visual feedback instead of width change */
|
||||
box-shadow: 0 0 6px rgba(13, 110, 253, 0.3);
|
||||
/* Visual feedback instead of width change */
|
||||
}
|
||||
|
||||
.column-resizer.dragging {
|
||||
@@ -36,12 +51,59 @@ html, body {
|
||||
background-color: var(--link-color);
|
||||
}
|
||||
|
||||
/* Adjust container for flex layout */
|
||||
.container-fluid {
|
||||
/* Navbar */
|
||||
.navbar {
|
||||
background-color: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
transition: background-color 0.3s ease;
|
||||
flex-shrink: 0;
|
||||
/* Prevent navbar from shrinking */
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.navbar .container-fluid {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: calc(100% - 56px);
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
/* Override the hidden overflow for navbar */
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
color: var(--text-primary) !important;
|
||||
font-weight: 600;
|
||||
font-size: 1.1rem;
|
||||
margin: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.navbar-brand i {
|
||||
font-size: 1.2rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.navbar-center {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navbar-right {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Adjust container for flex layout */
|
||||
.container-fluid {
|
||||
flex: 1;
|
||||
/* Take remaining space after navbar */
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
/* Prevent container scrolling */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.row {
|
||||
@@ -50,6 +112,8 @@ html, body {
|
||||
flex-direction: row;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
/* Prevent row scrolling */
|
||||
}
|
||||
|
||||
#sidebarPane {
|
||||
@@ -57,6 +121,9 @@ html, body {
|
||||
min-width: 150px;
|
||||
max-width: 40%;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
/* Prevent pane scrolling */
|
||||
}
|
||||
|
||||
#editorPane {
|
||||
@@ -64,25 +131,23 @@ html, body {
|
||||
min-width: 250px;
|
||||
max-width: 70%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#previewPane {
|
||||
flex: 1 1 40%;
|
||||
min-width: 250px;
|
||||
max-width: 70%;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
/* Prevent pane scrolling */
|
||||
}
|
||||
|
||||
/* Sidebar - improved */
|
||||
.sidebar {
|
||||
background-color: var(--bg-secondary);
|
||||
border-right: 1px solid var(--border-color);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
height: 100%;
|
||||
transition: background-color 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
/* Prevent sidebar container scrolling */
|
||||
}
|
||||
|
||||
.sidebar h6 {
|
||||
@@ -92,25 +157,27 @@ html, body {
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
flex-shrink: 0;
|
||||
/* Prevent header from shrinking */
|
||||
}
|
||||
|
||||
/* Collection selector - fixed height */
|
||||
.collection-selector {
|
||||
flex-shrink: 0;
|
||||
/* Prevent selector from shrinking */
|
||||
padding: 12px 10px;
|
||||
background-color: var(--bg-secondary);
|
||||
}
|
||||
|
||||
#fileTree {
|
||||
flex: 1;
|
||||
/* Take remaining space */
|
||||
overflow-y: auto;
|
||||
/* Enable vertical scrolling */
|
||||
overflow-x: hidden;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
/* Navbar */
|
||||
.navbar {
|
||||
background-color: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
color: var(--text-primary) !important;
|
||||
font-weight: 600;
|
||||
padding: 4px 10px;
|
||||
min-height: 0;
|
||||
/* Important: allows flex child to shrink below content size */
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
@@ -135,28 +202,78 @@ html, body {
|
||||
|
||||
/* Preview Pane Styling */
|
||||
#previewPane {
|
||||
flex: 1 1 40%;
|
||||
min-width: 250px;
|
||||
max-width: 70%;
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
background-color: var(--bg-primary);
|
||||
border-left: 1px solid var(--border-color);
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
/* Enable vertical scrolling for preview pane */
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
#preview {
|
||||
padding: 20px;
|
||||
min-height: 100%;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
color: var(--text-primary);
|
||||
min-height: 100%;
|
||||
/* Ensure content fills at least the full height */
|
||||
}
|
||||
|
||||
#preview > p:first-child {
|
||||
#preview>p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#preview > h1:first-child,
|
||||
#preview > h2:first-child {
|
||||
#preview>h1:first-child,
|
||||
#preview>h2:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* View Mode Styles */
|
||||
body.view-mode #editorPane {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.view-mode #resizer1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.view-mode #resizer2 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.view-mode #previewPane {
|
||||
max-width: 100%;
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
body.view-mode #sidebarPane {
|
||||
display: flex;
|
||||
flex: 0 0 20%;
|
||||
height: 100%;
|
||||
/* Keep sidebar at 20% width in view mode */
|
||||
}
|
||||
|
||||
body.edit-mode #editorPane {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
body.edit-mode #resizer1 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body.edit-mode #resizer2 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body.edit-mode #previewPane {
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
body.edit-mode #sidebarPane {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
Reference in New Issue
Block a user