style(ui): refactor reader layout grid, fix focus mode layout collapse, fix SVG rendering dots, reorganize intelligence toolbar #69

Merged
mjasin merged 10 commits from feature/reader-visual-refactor into develop 2026-06-05 09:51:29 +00:00
2 changed files with 18 additions and 4 deletions
Showing only changes of commit 41cc9f8f21 - Show all commits
@@ -9,12 +9,15 @@
@if (IsVisible) @if (IsVisible)
{ {
<div class="selection-ai-panel @(_positionBelow ? "below" : "")" style="@_style"> <div class="selection-ai-panel @(_positionBelow ? "below" : "")" style="@_style">
<button class="toolbar-btn primary @(IsLoadingSummary ? "loading" : "") @(IsAnyLoading ? "disabled" : "")" <button id="summary-btn" class="toolbar-btn primary @(IsLoadingSummary ? "loading" : "") @(IsAnyLoading ? "disabled cursor-not-allowed opacity-50" : "")"
disabled="@IsAnyLoading" disabled="@IsAnyLoading"
@onclick="RequestSummaryAsync"> @onclick="RequestSummaryAsync">
@if (IsLoadingSummary) @if (IsLoadingSummary)
{ {
<span class="spinner-inline"></span> <svg class="animate-spin h-4 w-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" style="animation: spin 1s linear infinite; width: 14px; height: 14px; color: currentColor; display: inline-block; margin-right: 4px;">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" style="opacity: 0.25;"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" style="opacity: 0.75;"></path>
</svg>
<span class="btn-text">Podsumowywanie...</span> <span class="btn-text">Podsumowywanie...</span>
} }
else else
@@ -24,12 +27,15 @@
} }
</button> </button>
<div class="toolbar-divider"></div> <div class="toolbar-divider"></div>
<button class="toolbar-btn secondary @(IsLoadingQuiz ? "loading" : "") @(IsAnyLoading ? "disabled" : "")" <button id="quiz-btn" class="toolbar-btn secondary @(IsLoadingQuiz ? "loading" : "") @(IsAnyLoading ? "disabled cursor-not-allowed opacity-50" : "")"
disabled="@IsAnyLoading" disabled="@IsAnyLoading"
@onclick="GenerateQuizAsync"> @onclick="GenerateQuizAsync">
@if (IsLoadingQuiz) @if (IsLoadingQuiz)
{ {
<span class="spinner-inline"></span> <svg class="animate-spin h-4 w-4 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" style="animation: spin 1s linear infinite; width: 14px; height: 14px; color: currentColor; display: inline-block; margin-right: 4px;">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" style="opacity: 0.25;"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" style="opacity: 0.75;"></path>
</svg>
<span class="btn-text">Generowanie...</span> <span class="btn-text">Generowanie...</span>
} }
else else
@@ -109,3 +109,11 @@
} }
} }
.opacity-50 {
opacity: 0.5 !important;
}
.cursor-not-allowed {
cursor: not-allowed !important;
}