mjasin/Nexus.Reader
1
0
Fork 0
Code Issues 9 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat(stage): add --nexus-only switch to run-stage.sh and execute premium creator edit layout polish

Browse Source
This commit is contained in:
Marek Jaisński
2026-06-14 19:01:41 +02:00
parent a738a28eb4
commit 08905a248d
3 changed files with 192 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
run-stage.sh
+28 -5
View File
@@ -4,11 +4,23 @@
# ------------------------------------------------------------- # -------------------------------------------------------------
set -e set -e
NEXUS_ONLY=false
for arg in "$@"; do
case $arg in
--nexus-only|-n)
NEXUS_ONLY=true
;;
esac
done
ENV_FILE=".env.stage" ENV_FILE=".env.stage"
TEMPLATE_FILE=".env.stage.template" TEMPLATE_FILE=".env.stage.template"
COMPOSE_FILE="docker-compose.stage.yml" COMPOSE_FILE="docker-compose.stage.yml"
echo "🏁 Starting staging environment orchestration..." echo "🏁 Starting staging environment orchestration..."
if [ "$NEXUS_ONLY" = true ]; then
echo "ℹ️ Mode: --nexus-only (only the web/nexus application container will be modified)"
fi
# 1. Create .env.stage if it doesn't exist # 1. Create .env.stage if it doesn't exist
if [ ! -f "$ENV_FILE" ]; then if [ ! -f "$ENV_FILE" ]; then
@@ -58,13 +70,24 @@ POSTGRES_PORT=${POSTGRES_PORT:-5438}
WEB_PORT=${WEB_PORT:-5080} WEB_PORT=${WEB_PORT:-5080}
# 3. Stop any conflicting Docker Compose environments # 3. Stop any conflicting Docker Compose environments
echo "🧹 Stopping existing containers..." if [ "$NEXUS_ONLY" = true ]; then
docker compose -f "$COMPOSE_FILE" --env-file "$ENV_FILE" down --remove-orphans || true echo "🧹 Stopping and removing only the web (nexus) container..."
docker compose down --remove-orphans 2>/dev/null || true docker compose -f "$COMPOSE_FILE" --env-file "$ENV_FILE" stop web || true
docker compose -f "$COMPOSE_FILE" --env-file "$ENV_FILE" rm -f web || true
else
echo "🧹 Stopping existing containers..."
docker compose -f "$COMPOSE_FILE" --env-file "$ENV_FILE" down --remove-orphans || true
docker compose down --remove-orphans 2>/dev/null || true
fi
# 4. Build and start containers # 4. Build and start containers
echo "🚀 Building and starting staging containers..." if [ "$NEXUS_ONLY" = true ]; then
docker compose -f "$COMPOSE_FILE" --env-file "$ENV_FILE" up -d --build echo "🚀 Building and restarting only the web (nexus) container..."
docker compose -f "$COMPOSE_FILE" --env-file "$ENV_FILE" up -d --build web
else
echo "🚀 Building and starting staging containers..."
docker compose -f "$COMPOSE_FILE" --env-file "$ENV_FILE" up -d --build
fi
# 5. Wait for Database to be healthy # 5. Wait for Database to be healthy
echo "⏳ Waiting for database (nexus-db-stage) to become healthy..." echo "⏳ Waiting for database (nexus-db-stage) to become healthy..."
src/NexusReader.UI.Shared/Pages/CreatorEdit.razor
+12 -8
View File
@@ -6,15 +6,18 @@
<div class="creator-edit-fullscreen-wrapper"> <div class="creator-edit-fullscreen-wrapper">
<div class="chapters-sidebar"> <div class="chapters-sidebar">
<h2>Rozdziały</h2> <div class="sidebar-meta-header">
<h2>Rozdziały</h2>
</div>
<div class="chapters-list-wrapper"> <div class="chapters-list-wrapper">
<div class="chapter-item active"> <div class="chapter-item active">
<div class="active-indicator"></div>
<i class="fa-solid fa-book-open chapter-icon"></i> <i class="fa-solid fa-book-open chapter-icon"></i>
<span>1. Rozdział 1: Wprowadzenie do Zen Mode</span> <span class="chapter-title-text">1. Rozdział 1: Wprowadzenie do Zen Mode</span>
</div> </div>
<div class="chapter-item"> <div class="chapter-item">
<i class="fa-solid fa-lock chapter-icon"></i> <i class="fa-solid fa-file-lines chapter-icon"></i>
<span>2. Rozdział 2: Zabezpieczenia i Architektura</span> <span class="chapter-title-text">2. Rozdział 2: Zabezpieczenia i Architektura</span>
</div> </div>
</div> </div>
</div> </div>
@@ -22,8 +25,10 @@
<div class="editor-workspace-area"> <div class="editor-workspace-area">
<div class="editor-header-row"> <div class="editor-header-row">
<h1 class="chapter-title">Rozdział 1: Wprowadzenie do Zen Mode</h1> <div class="title-zone">
<div class="chapter-meta-zone"> <h1 class="chapter-title">Rozdział 1: Wprowadzenie do Zen Mode</h1>
</div>
<div class="telemetry-zone">
<span class="chapter-id-badge">ID: @ChapterId</span> <span class="chapter-id-badge">ID: @ChapterId</span>
</div> </div>
</div> </div>
@@ -42,7 +47,7 @@
<button class="btn-nexus-premium" @onclick="FetchContent"> <button class="btn-nexus-premium" @onclick="FetchContent">
<span>Fetch Markdown Content</span> <span>Fetch Markdown Content</span>
<i class="fa-solid fa-arrow-right"></i> <i class="fa-solid fa-arrow-right-long"></i>
</button> </button>
</div> </div>
@@ -57,7 +62,6 @@
private async Task FetchContent() private async Task FetchContent()
{ {
// Tutaj trafia Twoja logika wyciągania zawartości z edytora Milkdown
await Task.CompletedTask; await Task.CompletedTask;
} }
} }
src/NexusReader.UI.Shared/Pages/CreatorEdit.razor.css
+152 -118
View File
@@ -1,150 +1,179 @@
/* ========================================================================== /* ==========================================================================
NEXUSREADER CREATOR EDIT MODE - PREMIUM SAAS CORE STYLES NEXUSREADER CREATOR EDIT MODE - HIGH-FIDELITY SAAS PREMIUM DESIGN OVERRIDE
========================================================================== */ ========================================================================== */
/* 1. MASTER WRAPPER (Zgładzenie globalnego scrolla przeglądarki) */ /* 1. ARCHITECTURAL BOUNDARY CONTROL */
.creator-edit-fullscreen-wrapper { .creator-edit-fullscreen-wrapper {
width: 100% !important; width: 100% !important;
max-width: 100% !important; max-width: 100% !important;
height: calc(100vh - 4rem) !important; /* Sztywne cięcie pod wysokość topbaru platformy */ height: calc(100vh - 4rem) !important;
margin: 0 !important; margin: 0 !important;
padding: 0 !important; padding: 0 !important;
display: flex !important; display: flex !important;
overflow: hidden !important; /* Całkowity zakaz scrollowania okna głównego */ overflow: hidden !important;
background-color: var(--bg-base); background-color: #121214;
box-sizing: border-box; box-sizing: border-box;
} }
/* 2. MATTE CHAPTERS SIDEBAR (Luksusowy panel boczny) */ /* Dynamic theme bridge mapping for Warm Paper mode */
.theme-light .creator-edit-fullscreen-wrapper {
background-color: #f4f1ea;
}
/* 2. UNIFIED SIDEBAR DESIGN (Eliminating layout color fragmentation) */
.chapters-sidebar { .chapters-sidebar {
width: 290px !important; width: 300px !important;
flex-shrink: 0; flex-shrink: 0;
background-color: #141417 !important; /* Matowy głęboki antracyt z readera */ background-color: #16161a !important;
border-right: 1px solid rgba(255, 255, 255, 0.05) !important; border-right: 1px solid rgba(255, 255, 255, 0.04) !important;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 2rem 1.25rem !important; padding: 2.5rem 1.5rem !important;
box-sizing: border-box; box-sizing: border-box;
} }
.theme-light .chapters-sidebar { .theme-light .chapters-sidebar {
background-color: #ede9df !important; /* Dopasowanie do motywu Warm Paper */ background-color: #eae6db !important; /* Rich warm tone that remains fully cohesive with warm paper base */
border-right: 1px solid var(--border) !important; border-right: 1px solid #dcd7cc !important;
} }
.chapters-sidebar h2 { .sidebar-meta-header h2 {
font-size: 0.85rem; font-size: 0.8rem;
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 1.5px; letter-spacing: 2px;
color: var(--text-muted); color: #a1a1aa;
margin: 0 0 1.5rem 0; margin: 0 0 1.75rem 0;
padding-left: 0.5rem; }
.theme-light .sidebar-meta-header h2 {
color: #78716c;
} }
.chapters-list-wrapper { .chapters-list-wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 4px; gap: 6px;
} }
/* Elementy listy rozdziałów */ /* Premium Navigation Links */
.chapter-item { .chapter-item {
position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
padding: 12px 14px !important; padding: 12px 16px !important;
border-radius: 8px; border-radius: 10px;
color: var(--text-muted); color: #a1a1aa;
font-size: 0.95rem; font-size: 0.95rem;
cursor: pointer; cursor: pointer;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
border-left: 3px solid transparent !important; }
.theme-light .chapter-item {
color: #78716c;
} }
.chapter-item i.chapter-icon { .chapter-item i.chapter-icon {
font-size: 0.9rem; font-size: 0.95rem;
color: var(--text-muted); color: #71717a;
transition: color 0.25s ease;
} }
/* Aktywny stan unifikacji wizualnej */ /* Active Indicator Node Alignment */
.chapter-item.active { .chapter-item.active {
background-color: rgba(0, 255, 153, 0.04) !important; background-color: rgba(0, 255, 153, 0.05) !important;
color: var(--accent) !important; color: #00ff99 !important;
font-weight: 600; font-weight: 600;
border-left: 3px solid var(--accent) !important;
}
.chapter-item.active i.chapter-icon {
color: var(--accent) !important;
} }
.theme-light .chapter-item.active { .theme-light .chapter-item.active {
background-color: rgba(16, 185, 129, 0.06) !important; background-color: rgba(16, 185, 129, 0.06) !important;
color: #10b981 !important;
}
.chapter-item.active i.chapter-icon {
color: inherit !important;
} }
.chapter-item:hover:not(.active) { .chapter-item:hover:not(.active) {
background-color: rgba(255, 255, 255, 0.02); background-color: rgba(255, 255, 255, 0.02);
color: var(--text-main); color: #ffffff;
} }
/* 3. WORKSPACE CORE (Główna oś edytora) */ .theme-light .chapter-item:hover:not(.active) {
background-color: rgba(0, 0, 0, 0.02);
color: #2d2a26;
}
/* 3. WORKSPACE METRICS (Zen presentation spacing) */
.editor-workspace-area { .editor-workspace-area {
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
padding: 2.5rem 3.5rem 2rem 3.5rem !important; /* Odpowiedni, dostojny margines Zen Mode */ padding: 3rem 4rem 2.5rem 4rem !important; /* Generous padding context for premium scale */
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
} }
/* Nagłówek i ID bez ryzyka kolizji */
.editor-header-row { .editor-header-row {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 1.5rem; margin-bottom: 2rem;
flex-shrink: 0; flex-shrink: 0;
width: 100%; width: 100%;
} }
.editor-workspace-area h1.chapter-title { .editor-workspace-area h1.chapter-title {
font-size: 2.2rem; font-size: 2.4rem;
font-weight: 700; font-weight: 700;
color: var(--text-main); color: #ffffff;
margin: 0; margin: 0;
letter-spacing: -0.5px; letter-spacing: -0.75px;
}
.theme-light .editor-workspace-area h1.chapter-title {
color: #2d2a26;
} }
.chapter-id-badge { .chapter-id-badge {
font-family: 'Azeret Mono', monospace; font-family: 'Azeret Mono', monospace;
font-size: 0.75rem; font-size: 0.72rem;
color: var(--text-muted); color: #71717a;
background: rgba(255, 255, 255, 0.03); background: #1a1a1e;
padding: 5px 12px; padding: 6px 14px;
border-radius: 6px; border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.05);
white-space: nowrap; letter-spacing: 0.2px;
} }
.theme-light .chapter-id-badge { .theme-light .chapter-id-badge {
background: rgba(0, 0, 0, 0.02); background: #ffffff;
border: 1px solid var(--border); color: #78716c;
border: 1px solid #dcd7cc;
} }
/* 4. PREMIUM CANVAS CARD (Rozciąganie Flex na 100% wysokości) */ /* 4. ELEVATED EDITOR CANVAS CARD (Introducing layered shadow mechanics) */
.editor-canvas-card { .editor-canvas-card {
background-color: var(--bg-surface) !important; background-color: #1a1a1e !important;
border: 1px solid var(--border) !important; border: 1px solid rgba(255, 255, 255, 0.04) !important;
border-radius: 16px; border-radius: 20px;
padding: 2.5rem !important; padding: 3rem !important;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-grow: 1; /* Wymusza rozciągnięcie do samego paska stopki */ flex-grow: 1;
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); /* Soft diffuse structural shadows mimicking actual surface elevation */
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.2);
}
.theme-light .editor-canvas-card {
background-color: #ffffff !important;
border: 1px solid #dcd7cc !important;
box-shadow: 0 20px 50px rgba(45, 42, 38, 0.04), 0 4px 12px rgba(45, 42, 38, 0.02);
} }
.milkdown-premium-container { .milkdown-premium-container {
@@ -155,8 +184,7 @@
width: 100%; width: 100%;
} }
/* --- DEEP SELECTORS DLA PROSEMIRROR (MILKDOWN RENDER) --- */ /* DEEP MOUNTING COMPONENT INTEROP */
::deep .milkdown { ::deep .milkdown {
background: transparent !important; background: transparent !important;
box-shadow: none !important; box-shadow: none !important;
@@ -169,51 +197,32 @@
} }
::deep .ProseMirror { ::deep .ProseMirror {
color: var(--text-main) !important; color: #e4e1d9 !important;
background-color: transparent !important; background-color: transparent !important;
font-family: inherit !important; font-size: 1.15rem !important;
font-size: 1.1rem !important; line-height: 1.8 !important;
line-height: 1.75 !important;
flex-grow: 1; flex-grow: 1;
overflow-y: auto !important; /* Scroll pojawia się TYLKO na tekście rozdziału */ overflow-y: auto !important;
padding-right: 15px !important; padding-right: 24px !important;
outline: none !important; outline: none !important;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
} }
/* Kontekst zaznaczenia zunifikowany z readerem */ .theme-light ::deep .ProseMirror {
color: #2d2a26 !important;
}
/* Precise matching text selection token */
::deep .ProseMirror ::selection { ::deep .ProseMirror ::selection {
background-color: rgba(0, 255, 153, 0.25) !important; background-color: rgba(0, 255, 153, 0.2) !important;
color: inherit !important;
} }
.theme-light ::deep .ProseMirror ::selection { .theme-light ::deep .ProseMirror ::selection {
background-color: rgba(16, 185, 129, 0.2) !important; background-color: rgba(16, 185, 129, 0.18) !important;
} }
/* Popover / dymek formatowania zintegrowany z czytnikiem */ /* Core webkit custom scrollbar mapping */
::deep .milkdown .popover,
::deep .milkdown-popover,
::deep .prosemirror-bubble-menu {
background-color: #1e1e22 !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 12px !important;
padding: 6px 10px !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
.theme-light ::deep .milkdown .popover,
.theme-light ::deep .prosemirror-bubble-menu {
background-color: #ffffff !important;
border: 1px solid var(--border) !important;
box-shadow: 0 10px 30px rgba(45, 42, 38, 0.06) !important;
}
/* Customowy, dyskretny scrollbar dla tekstu książki */
::deep .ProseMirror::-webkit-scrollbar { ::deep .ProseMirror::-webkit-scrollbar {
width: 6px; width: 6px;
} }
@@ -221,71 +230,96 @@
background: transparent; background: transparent;
} }
::deep .ProseMirror::-webkit-scrollbar-thumb { ::deep .ProseMirror::-webkit-scrollbar-thumb {
background: var(--border); background: rgba(255, 255, 255, 0.08);
border-radius: 3px; border-radius: 4px;
} }
/* 5. FIXED FOOTER BAR (Zintegrowany dół pancernej karty) */ .theme-light ::deep .ProseMirror::-webkit-scrollbar-thumb {
background: #dcd7cc;
}
/* 5. SEAMLESS INTEGRATED ACTIONS FOOTER BAR */
.editor-footer-bar { .editor-footer-bar {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-top: 1.5rem; margin-top: 2rem;
padding-top: 1.25rem; padding-top: 1.5rem;
border-top: 1px solid var(--border); border-top: 1px solid rgba(255, 255, 255, 0.04);
flex-shrink: 0; /* Gwarancja, że pasek nigdy nie ucieknie poza kartę */ flex-shrink: 0;
width: 100%; width: 100%;
} }
/* Status zapisu w chmurze z pulsującą diodą akcentową */ .theme-light .editor-footer-bar {
border-top: 1px solid #dcd7cc;
}
/* Telemetry cloud synchronization line */
.cloud-status-container { .cloud-status-container {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 12px;
} }
.cloud-status-pulse { .cloud-status-pulse {
width: 8px; width: 7px;
height: 8px; height: 7px;
background-color: var(--accent); background-color: #00ff99;
border-radius: 50%; border-radius: 50%;
display: inline-block; display: inline-block;
box-shadow: 0 0 10px var(--accent); box-shadow: 0 0 10px rgba(0, 255, 153, 0.8);
position: relative; }
.theme-light .cloud-status-pulse {
background-color: #10b981;
box-shadow: 0 0 10px rgba(16, 185, 129, 0.6);
} }
.cloud-status-text { .cloud-status-text {
font-family: 'Azeret Mono', monospace; font-family: 'Azeret Mono', monospace;
font-size: 0.85rem; font-size: 0.82rem;
color: var(--text-muted); color: #71717a;
letter-spacing: 0.1px;
} }
/* Przycisk akcji premium */ /* Premium Tactile Operational Button Trigger */
.btn-nexus-premium { .btn-nexus-premium {
background-color: var(--accent) !important; background-color: #00ff99 !important;
color: #121214 !important; color: #121214 !important;
font-weight: 700; font-weight: 700;
font-size: 0.95rem; font-size: 0.9rem;
padding: 10px 22px; letter-spacing: -0.1px;
padding: 11px 24px;
border: none !important; border: none !important;
border-radius: 8px; border-radius: 10px;
cursor: pointer; cursor: pointer;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 14px var(--accent-glow); box-shadow: 0 4px 20px rgba(0, 255, 153, 0.15);
} }
.theme-light .btn-nexus-premium { .theme-light .btn-nexus-premium {
background-color: #10b981 !important;
color: #ffffff !important; color: #ffffff !important;
box-shadow: 0 4px 20px rgba(16, 185, 129, 0.15);
}
.btn-nexus-premium i {
font-size: 0.85rem;
transition: transform 0.2s ease;
} }
.btn-nexus-premium:hover { .btn-nexus-premium:hover {
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 6px 20px var(--accent-glow); box-shadow: 0 8px 24px rgba(0, 255, 153, 0.3);
} }
.btn-nexus-premium:active { .theme-light .btn-nexus-premium:hover {
transform: translateY(0); box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
}
.btn-nexus-premium:hover i {
transform: translateX(3px);
} }