+
+
- Review Bookdrop Files
-+
These files were uploaded to the - Bookdrop Folder. + Bookdrop Folder. Review their fetched metadata, assign a library and subpath, and finalize where they belong in your collection.
+
-
-
- Loading Bookdrop files. Please wait...
+
+
} @else {
-
+
+ Loading Bookdrop files. Please wait...
+
@if (saving) {
-
-
-
-
+
+
+
+
Organizing and moving files to their designated libraries. Please wait...
@@ -56,28 +55,26 @@
}
@if (bookdropFileUis.length !== 0) {
-
+
-
- Library for All Files:
+
+ Library for All Files:
- Subpath for All Files:
+ Subpath for All Files:
@@ -92,7 +89,7 @@
-
+
-
+
@if (bookdropFileUis.length === 0) {
-
+
No bookdrop files to review.
} @else {
@for (file of bookdropFileUis; track file) {
-
-
+
+
@@ -160,7 +156,7 @@
[src]="file.metadataForm.get('thumbnailUrl')?.value"
alt="Cover"
title="Original cover"
- class="w-6 h-8 rounded-sm object-cover cursor-pointer hover:scale-105 hover:shadow-md transition-transform duration-200"
+ class="cover-image"
(click)="file.showDetails = !file.showDetails"/>
}
@@ -169,20 +165,20 @@
[src]="file.file.fetchedMetadata?.thumbnailUrl"
alt="Fetched Cover"
title="Fetched cover"
- class="w-6 h-8 rounded-sm object-cover cursor-pointer hover:scale-105 hover:shadow-md transition-transform duration-200"
+ class="cover-image"
(click)="file.showDetails = !file.showDetails"/>
}
-
+
-
{{ file.file.fileName }}
@@ -209,7 +205,7 @@
optionLabel="name"
optionValue="id"
placeholder="Select Subpath"
- class="min-w-[8rem] max-w-[16rem]"
+ class="path-select"
appendTo="body"
[(ngModel)]="file.selectedPathId">
@@ -224,7 +220,7 @@
@if (file.showDetails) {
+
-
+
@if (bookdropFileUis.length > 0) {
} @else {
-
+
}
-
+
-
+
* + * {
+ margin: 0.25rem;
+ }
+}
+
+.header {
+ padding: 1.5rem 1rem 1rem;
+ display: flex;
+ flex-direction: column;
+ border-bottom: 1px solid var(--p-content-border-color);
+
+ @media (min-width: 768px) {
+ padding: 1.5rem 1.5rem 1rem;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ }
+}
+
+.header-content {
+ h2 {
+ font-size: 1.25rem;
+ font-weight: 600;
+ padding-bottom: 0.25rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ p {
+ font-size: 0.875rem;
+ color: rgb(156, 163, 175);
+
+ strong {
+ color: var(--primary-color);
+ }
+ }
+}
+
+.header-actions {
+ margin-top: 1rem;
+
+ @media (min-width: 768px) {
+ margin-top: 0;
+ }
+}
+
+.external-link-icon {
+ color: rgb(2, 132, 199);
+ cursor: pointer;
+ font-size: 0.9rem;
+}
+
+.loading-overlay {
+ position: absolute;
+ inset: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 50;
+ border-radius: 0.75rem;
+}
+
+.loading-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ > * + * {
+ margin-top: 0.75rem;
+ }
+
+ span {
+ color: rgb(209, 213, 219);
+ }
+
+ p-progressSpinner {
+ width: 2rem;
+ height: 2rem;
+ }
+}
+
+.controls-section {
+ padding: 0 1.5rem 0.5rem;
+}
+
+.saving-overlay {
+ position: absolute;
+ inset: 0;
+ background: rgba(0, 0, 0, 0.5);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ z-index: 50;
+ border-radius: 0.75rem;
+
+ > * + * {
+ margin-top: 0.75rem;
+ }
+
+ p-progressSpinner {
+ width: 2rem;
+ height: 2rem;
+ }
+}
+
+.saving-message {
+ background: rgba(17, 24, 39, 0.9);
+ padding: 0.5rem 1rem;
+ border-radius: 0.375rem;
+
+ span {
+ font-size: 0.875rem;
+ color: rgb(229, 231, 235);
+ text-align: center;
+ }
+}
+
+.controls-row {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 1rem;
+ padding: 0 0.25rem;
+}
+
+.default-controls {
+ display: flex;
+ gap: 1rem;
+ align-items: center;
+
+ span {
+ font-size: 0.875rem;
+ color: rgb(209, 213, 219);
+ font-weight: 500;
+ }
+
+ p-select {
+ min-width: 8rem;
+ max-width: 16rem;
+ }
+}
+
+.action-buttons {
+ display: flex;
+ gap: 1rem;
+}
+
+.content-area {
+ flex: 1;
+ overflow-y: auto;
+ padding: 1rem 1rem 1rem;
+
+ > * + * {
+ margin-top: 0.5rem;
+ }
+
+ @media (min-width: 768px) {
+ padding: 1rem 1.5rem 1rem;
+ }
+}
+
+.empty-state {
+ height: 100%;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: rgb(156, 163, 175);
+ font-style: italic;
+ padding: 2rem 0;
+}
+
+.file-item {
+ display: flex;
+ flex-direction: column;
+}
+
+.file-row {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ border: 1px solid var(--border-color);
+ border-radius: 0.75rem 0.75rem 0 0;
+ padding: 0.5rem 1rem;
+}
+
+.status-indicator {
+ font-size: 0.75rem;
+}
+
+.cover-image {
+ width: 1.5rem;
+ height: 2rem;
+ border-radius: 0.125rem;
+ object-fit: cover;
+ cursor: pointer;
+ transition: transform 0.2s;
+
+ &:hover {
+ transform: scale(1.05);
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+ }
+}
+
+.file-name {
+ flex: 1;
+ font-weight: 500;
+ font-size: 0.875rem;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.metadata-status {
+ &.copied {
+ color: rgb(34, 197, 94);
+ }
+
+ &.no-metadata {
+ color: rgb(59, 130, 246);
+ }
+
+ &.not-applied {
+ color: rgb(239, 68, 68);
+ }
+}
+
+.library-select,
+.path-select {
+ min-width: 8rem;
+ max-width: 16rem;
+}
+
+.details-section {
+ padding: 2rem 3rem;
border-left: 1px solid var(--border-color);
border-right: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
border-top: none;
- border-radius: 0px 0px 10px 10px;
+ border-radius: 0 0 0.625rem 0.625rem;
+}
+
+.footer {
+ padding: 0.5rem 1rem;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 1rem;
+}
+
+.footer-left,
+.footer-right {
+ display: flex;
+ gap: 1rem;
+ align-items: center;
+ min-width: 10rem;
+}
+
+.footer-left {
+ justify-content: flex-start;
+}
+
+.footer-right {
+ min-width: 12.5rem;
+ justify-content: flex-end;
+}
+
+.footer-center {
+ flex-grow: 1;
+ display: flex;
+ justify-content: center;
+}
+
+.spacer {
+ min-width: 10rem;
}
diff --git a/booklore-ui/src/app/features/library-creator/library-creator.component.html b/booklore-ui/src/app/features/library-creator/library-creator.component.html
index 5577dc20..2fd2ee54 100644
--- a/booklore-ui/src/app/features/library-creator/library-creator.component.html
+++ b/booklore-ui/src/app/features/library-creator/library-creator.component.html
@@ -1,4 +1,22 @@
+
@@ -27,151 +45,160 @@
+
+
+
+
+
+
+
+ Library Creator
+Set up a new library to organize and manage your book collection
+
-
Library Information
-Configure your library name, icon import mode and monitoring
+Step 1: Library Information
+Set up your library name, icon, and import preferences
-
-
-
-
- @if (chosenLibraryName.trim()) {
-
+
+
-
+
+
+
+
+
+
+
+ @if (chosenLibraryName.trim()) {
+
+ }
+
+
+
+ @if (!selectedIcon) {
+
+ } @else {
+
+
+
}
+
+
+
+ Selected Icon
+ {{ selectedIcon }}
+
+
-
- @if (!selectedIcon) {
-
-
- Choose an Icon
-
- } @else {
-
diff --git a/booklore-ui/src/app/features/library-creator/library-creator.component.scss b/booklore-ui/src/app/features/library-creator/library-creator.component.scss
index 04474a4b..cbba6e84 100644
--- a/booklore-ui/src/app/features/library-creator/library-creator.component.scss
+++ b/booklore-ui/src/app/features/library-creator/library-creator.component.scss
@@ -1,16 +1,153 @@
.library-creator {
width: 700px;
max-width: 700px;
- margin: 0 auto;
- padding: 1rem 0 0 0;
display: flex;
flex-direction: column;
height: 100%;
+ background: var(--card-background);
+ border: 1px solid var(--border-color);
+ border-radius: 10px;
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+ margin-top: 20px;
@media (max-width: 768px) {
width: 100%;
max-width: 100%;
- padding: 0.75rem;
+ }
+
+ @media (max-width: 640px) {
+ padding: 0.5rem;
+ }
+
+ @media (max-width: 480px) {
+ padding: 0.25rem;
+ }
+}
+
+.main-header {
+ position: relative;
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ padding: 1.25rem;
+ background: var(--overlay-background);
+ border-bottom: 1px solid var(--border-color);
+ border-radius: 10px 10px 0 0;
+ margin-bottom: 1.5rem;
+
+ .main-header-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 48px;
+ height: 48px;
+ background: var(--primary-color);
+ border-radius: 10px;
+ box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
+ flex-shrink: 0;
+
+ i {
+ font-size: 1.5rem;
+ color: var(--primary-contrast-color);
+ }
+ }
+
+ .main-header-content {
+ flex: 1;
+
+ .main-header-title {
+ margin: 0 0 0.25rem 0;
+ font-size: 1.25rem;
+ font-weight: 600;
+ color: var(--text-color);
+ }
+
+ .main-header-subtitle {
+ margin: 0;
+ font-size: 0.875rem;
+ color: var(--text-secondary-color);
+ }
+ }
+
+ ::ng-deep .close-button {
+ position: absolute;
+ top: 0.75rem;
+ right: 0.75rem;
+ }
+
+ @media (max-width: 768px) {
+ padding: 1.25rem;
+
+ .main-header-icon {
+ width: 44px;
+ height: 44px;
+
+ i {
+ font-size: 1.375rem;
+ }
+ }
+
+ .main-header-content {
+ .main-header-title {
+ font-size: 1.25rem;
+ }
+
+ .main-header-subtitle {
+ font-size: 0.875rem;
+ }
+ }
+ }
+
+ @media (max-width: 640px) {
+ padding: 1.25rem;
+ gap: 1rem;
+
+ .main-header-icon {
+ width: 42px;
+ height: 42px;
+
+ i {
+ font-size: 1.25rem;
+ }
+ }
+
+ .main-header-content {
+ .main-header-title {
+ font-size: 1.125rem;
+ }
+
+ .main-header-subtitle {
+ font-size: 0.8rem;
+ }
+ }
+ }
+
+ @media (max-width: 480px) {
+ padding: 1rem;
+
+ .main-header-icon {
+ width: 40px;
+ height: 40px;
+
+ i {
+ font-size: 1.25rem;
+ }
+ }
+
+ .main-header-content {
+ .main-header-title {
+ font-size: 1.125rem;
+ }
+
+ .main-header-subtitle {
+ font-size: 0.8rem;
+ }
+ }
+
+ ::ng-deep .close-button {
+ top: 0.5rem;
+ right: 0.5rem;
+ }
}
}
@@ -32,20 +169,16 @@
.p-stepper-header {
padding: 0.875rem 1rem;
- background: var(--card-background);
- border: var(--card-border);
+ background: transparent;
+ border: 1px solid var(--border-color);
border-radius: 8px;
margin-bottom: 1.25rem;
transition: all 0.3s ease;
&.p-stepper-header-active {
- background: rgba(var(--primary-color-rgb), 0.1);
+ background: var(--overlay-background);
border-color: var(--primary-color);
- .step-icon {
- color: var(--primary-color);
- }
-
.step-title {
color: var(--primary-color);
font-weight: 600;
@@ -72,6 +205,17 @@
display: flex;
flex-direction: column;
}
+
+ @media (max-width: 480px) {
+ .p-stepper-header {
+ padding: 0.5rem;
+ margin-bottom: 0.75rem;
+ }
+
+ .p-steplist {
+ padding: 0 0.5rem !important;
+ }
+ }
}
.step-content {
@@ -82,7 +226,6 @@
.step-labels {
display: flex;
flex-direction: column;
- gap: 0.125rem;
.step-title {
font-size: 0.875rem;
@@ -93,6 +236,8 @@
}
@media (max-width: 640px) {
+ gap: 0.375rem;
+
.step-labels {
display: none;
}
@@ -107,41 +252,43 @@
.step-panel-container {
width: 100%;
- max-width: 100%;
display: flex;
flex-direction: column;
- gap: 1.25rem;
- padding: 1.5rem 1.5rem 2.5rem 1.5rem;
+ padding: 1rem 1.5rem;
flex: 1;
overflow-y: auto;
@media (max-width: 768px) {
padding: 1rem;
}
+
+ @media (max-width: 480px) {
+ padding: 0.75rem 0.5rem 1.25rem;
+ }
}
.panel-header {
display: flex;
align-items: center;
gap: 1rem;
- padding: 0.75rem 0;
- background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.1) 0%, rgba(var(--primary-color-rgb), 0.05) 100%);
- border-radius: 10px;
- border: 1px solid rgba(var(--primary-color-rgb), 0.2);
+ padding: 1rem;
+ background: var(--overlay-background);
+ border-radius: 10px 10px 0 0;
+ border: 1px solid var(--border-color);
.header-icon-wrapper {
display: flex;
align-items: center;
justify-content: center;
- width: 48px;
- height: 48px;
- background: var(--primary-color);
- border-radius: 10px;
- box-shadow: 0 3px 8px rgba(var(--primary-color-rgb), 0.3);
+ width: 38px;
+ height: 38px;
+ border-radius: 8px;
+ border: 1px solid var(--border-color);
+ flex-shrink: 0;
.header-icon {
- font-size: 1.5rem;
- color: var(--primary-contrast-color);
+ font-size: 1.375rem;
+ color: dodgerblue;
}
}
@@ -150,7 +297,7 @@
.panel-title {
margin: 0 0 0.25rem 0;
- font-size: 1.25rem;
+ font-size: 1.125rem;
font-weight: 600;
color: var(--text-color);
}
@@ -165,7 +312,6 @@
@media (max-width: 640px) {
flex-direction: column;
text-align: center;
- padding: 1rem;
.header-icon-wrapper {
width: 42px;
@@ -176,53 +322,94 @@
}
}
- .header-text {
- .panel-title {
- font-size: 1.125rem;
+ .header-text .panel-title {
+ font-size: 1.125rem;
+ }
+ }
+
+ @media (max-width: 480px) {
+ padding: 0.5rem;
+
+ .header-icon-wrapper {
+ width: 36px;
+ height: 36px;
+
+ .header-icon {
+ font-size: 1rem;
}
}
+
+ .header-text .panel-title {
+ font-size: 1rem;
+ }
}
}
.form-container {
display: flex;
flex-direction: column;
- gap: 1rem;
- padding: 1.25rem;
+ padding: 2rem 1.5rem 1.5rem;
background: var(--card-background);
border: 1px solid var(--border-color);
- border-radius: 10px;
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+ border-top: none;
width: 100%;
box-sizing: border-box;
@media (max-width: 768px) {
- padding: 1rem;
+ padding: 1.5rem 1rem;
}
@media (max-width: 640px) {
padding: 1rem;
}
+
+ @media (max-width: 480px) {
+ min-width: 0;
+ }
+}
+
+.form-section {
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+ padding: 1.5rem 0;
+
+ &:first-child {
+ padding-top: 0;
+ }
+
+ &:last-child {
+ padding-bottom: 0;
+ }
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
- padding: 0 1rem 0 1rem;
&.highlight-group {
- padding: 0.625rem;
background: var(--overlay-background);
border-radius: 8px;
- border: 1px solid transparent;
transition: all 0.3s ease;
}
&.nested-group {
padding-left: 1rem;
border-left: 3px solid var(--primary-color);
- margin-top: -0.25rem;
+ margin-top: 0.5rem;
+ }
+
+ @media (max-width: 480px) {
+ gap: 0.25rem;
+
+ &.highlight-group {
+ padding: 0.5rem;
+ }
+
+ &.nested-group {
+ padding-left: 0.5rem;
+ }
}
}
@@ -247,12 +434,19 @@
.input-wrapper {
position: relative;
+ .input-full {
+ width: 100%;
+ padding-right: 2.5rem;
+ box-sizing: border-box;
+ }
+
.input-icon {
position: absolute;
right: 0.75rem;
top: 50%;
transform: translateY(-50%);
font-size: 1rem;
+ pointer-events: none;
&.success {
color: var(--p-green-500);
@@ -264,9 +458,9 @@
display: flex;
align-items: center;
justify-content: center;
- gap: 0.5rem;
+ gap: 0.75rem;
width: 100%;
- padding: 0.875rem;
+ padding: 1rem;
background: var(--ground-background);
border: 1px dashed var(--border-color);
border-radius: 8px;
@@ -281,11 +475,47 @@
border-color: var(--primary-color);
color: var(--primary-color);
transform: translateY(-1px);
- box-shadow: 0 3px 8px rgba(var(--primary-color-rgb), 0.2);
+ box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}
i {
- font-size: 1rem;
+ font-size: 1.25rem;
+ }
+
+ .btn-content {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 0.125rem;
+
+ .btn-title {
+ font-size: 0.9375rem;
+ font-weight: 600;
+ }
+
+ .btn-subtitle {
+ font-size: 0.8rem;
+ opacity: 0.85;
+ }
+ }
+
+ @media (max-width: 480px) {
+ padding: 0.75rem;
+ gap: 0.5rem;
+
+ i {
+ font-size: 1.125rem;
+ }
+
+ .btn-content {
+ .btn-title {
+ font-size: 0.875rem;
+ }
+
+ .btn-subtitle {
+ font-size: 0.75rem;
+ }
+ }
}
}
@@ -293,19 +523,19 @@
display: flex;
align-items: center;
gap: 0.75rem;
- padding: 0.75rem 0.875rem;
+ padding: 0.875rem;
border: 1px solid var(--border-color);
border-radius: 8px;
+ background: var(--ground-background);
.icon-preview {
display: flex;
align-items: center;
justify-content: center;
- width: 42px;
- height: 42px;
- background: var(--p-blue-400);
+ width: 40px;
+ height: 40px;
+ background: var(--primary-color);
border-radius: 8px;
- box-shadow: 0 3px 8px rgba(var(--primary-color-rgb), 0.3);
i {
font-size: 1.25rem;
@@ -320,17 +550,41 @@
gap: 0.125rem;
.icon-label {
- font-size: 0.85rem;
+ font-size: 0.8rem;
color: var(--text-secondary-color);
}
.icon-name {
- font-size: 0.9rem;
+ font-size: 0.875rem;
font-weight: 500;
color: var(--text-color);
font-family: monospace;
}
}
+
+ @media (max-width: 480px) {
+ padding: 0.5rem;
+ gap: 0.5rem;
+
+ .icon-preview {
+ width: 32px;
+ height: 32px;
+
+ i {
+ font-size: 1rem;
+ }
+ }
+
+ .icon-info {
+ .icon-label {
+ font-size: 0.75rem;
+ }
+
+ .icon-name {
+ font-size: 0.8rem;
+ }
+ }
+ }
}
.input-with-info {
@@ -356,10 +610,8 @@
}
}
- &.large {
- i {
- font-size: 1.25rem;
- }
+ &.large i {
+ font-size: 1.25rem;
}
}
}
@@ -397,37 +649,11 @@
}
}
}
-
- .info-tooltip {
- display: flex;
- align-items: center;
- justify-content: center;
- border-radius: 50%;
- color: var(--p-blue-500);
- transition: all 0.2s ease;
-
- i {
- font-size: 1.125rem;
- transition: all 0.2s ease;
-
- &:hover {
- color: var(--primary-color);
- transform: scale(1.1);
- }
- }
-
- &.large {
- i {
- font-size: 1.25rem;
- }
- }
- }
}
.divider {
- height: 1px;
+ height: 2px;
background: linear-gradient(90deg, transparent, var(--border-color), transparent);
- margin: 0.25rem 0;
}
.directories-container {
@@ -437,8 +663,7 @@
padding: 1.25rem;
background: var(--card-background);
border: 1px solid var(--border-color);
- border-radius: 10px;
- box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+ border-top: none;
min-height: 300px;
width: 100%;
box-sizing: border-box;
@@ -447,8 +672,8 @@
padding: 1rem;
}
- @media (max-width: 640px) {
- padding: 1rem;
+ @media (max-width: 480px) {
+ min-width: 0;
}
}
@@ -459,16 +684,14 @@
align-items: center;
gap: 1rem;
width: 100%;
- padding: 0.5rem 1rem 0 1rem;
+ padding: 0.5rem 1rem 0;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
- box-shadow: 0 3px 8px rgba(var(--primary-color-rgb), 0.3);
&:hover {
transform: translateY(-1px);
- box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), 0.4);
}
i {
@@ -491,6 +714,19 @@
opacity: 0.9;
}
}
+
+ @media (max-width: 480px) {
+ gap: 0.5rem;
+ padding: 0.25rem 0.5rem 0;
+
+ .btn-title {
+ font-size: 0.8rem;
+ }
+
+ .btn-subtitle {
+ font-size: 0.7rem;
+ }
+ }
}
}
@@ -533,12 +769,34 @@
max-width: 400px;
line-height: 1.5;
}
+
+ @media (max-width: 480px) {
+ padding-bottom: 1rem;
+
+ .empty-icon-wrapper {
+ width: 48px;
+ height: 48px;
+
+ .empty-icon {
+ font-size: 1.5rem;
+ }
+ }
+
+ .empty-title {
+ font-size: 0.95rem;
+ }
+
+ .empty-description {
+ font-size: 0.75rem;
+ max-width: 90vw;
+ }
+ }
}
.folders-list {
display: flex;
flex-direction: column;
- gap: 1rem;
+ gap: 0.5rem;
.list-header {
display: flex;
@@ -689,89 +947,8 @@
}
}
}
-}
-
-.panel-footer {
- display: flex;
- align-items: center;
- justify-content: space-between;
- gap: 0.75rem;
- padding: 1.25rem 1rem 0 1rem;
- background: var(--card-background);
- border-top: 1px solid var(--border-color);
- box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
- flex-shrink: 0;
-
- .footer-right {
- display: flex;
- align-items: center;
- gap: 0.75rem;
- }
@media (max-width: 640px) {
- flex-direction: column;
- padding: 1rem;
-
- .footer-right {
- width: 100%;
- flex-direction: column;
- }
- }
-}
-
-.validation-status,
-.validation-message {
- display: flex;
- align-items: center;
- gap: 0.375rem;
- padding: 0.375rem;
- font-weight: 500;
- border-radius: 6px;
- font-size: 0.9rem;
-
- i {
- font-size: 0.95rem;
- }
-
- &.error {
- background: rgba(239, 68, 68, 0.1);
- color: rgb(239, 68, 68);
- border: 1px solid rgba(239, 68, 68, 0.3);
-
- i {
- color: rgb(239, 68, 68);
- }
- }
-
- &.success {
- background: rgba(34, 197, 94, 0.1);
- color: rgb(34, 197, 94);
- border: 1px solid rgba(34, 197, 94, 0.3);
-
- i {
- color: rgb(34, 197, 94);
- }
- }
-}
-
-@media (max-width: 640px) {
- .library-creator {
- width: 100%;
- padding: 0.5rem;
- max-width: 100%;
- }
-
- .step-panel-container {
- gap: 1rem;
- padding: 0.75rem;
- }
-
- .form-container,
- .directories-container {
- padding: 1rem;
- }
-
- .folder-card {
flex-direction: column;
align-items: flex-start;
@@ -783,154 +960,121 @@
width: 100%;
}
}
-}
-@media (max-width: 480px) {
- .library-creator {
- width: 100%;
- padding: 0.25rem;
- max-width: 100%;
- }
-
- .custom-stepper {
- .p-stepper-header {
- padding: 0.5rem 0.5rem;
- font-size: 0.95rem;
- margin-bottom: 0.75rem;
- }
- .p-steplist {
- padding: 0 0.5rem !important;
- }
- }
-
- .step-panel-container {
- padding: 0.75rem 0.5rem 1.25rem 0.5rem;
- gap: 0.75rem;
- }
-
- .panel-header {
- padding: 0.5rem;
- .header-icon-wrapper {
- width: 36px;
- height: 36px;
- .header-icon {
- font-size: 1rem;
- }
- }
- .header-text {
- .panel-title {
- font-size: 1rem;
- }
- .panel-description {
- font-size: 0.75rem;
- }
- }
- }
-
- .form-container,
- .directories-container {
- padding: 0.5rem;
- min-width: 0;
- }
-
- .form-group {
- padding: 0 0.5rem 0 0.5rem;
- gap: 0.25rem;
- &.highlight-group {
- padding: 0.25rem;
- }
- &.nested-group {
- padding-left: 0.5rem;
- }
- }
-
- .step-content {
- gap: 0.375rem;
- }
-
- .panel-footer {
- padding: 0.75rem 0.5rem 0 0.5rem;
- gap: 0.5rem;
- .footer-right {
- gap: 0.5rem;
- }
- }
-
- .folder-card {
+ @media (max-width: 480px) {
padding: 0.5rem;
gap: 0.5rem;
+
.folder-icon-section {
.folder-icon-wrapper {
width: 28px;
height: 28px;
+
.folder-icon {
font-size: 0.95rem;
}
}
+
.folder-number {
width: 14px;
height: 14px;
font-size: 0.6rem;
}
}
+
.folder-details {
.folder-path {
font-size: 0.8rem;
}
+
.folder-meta {
font-size: 0.65rem;
}
}
}
+}
- .selected-icon-display {
- padding: 0.5rem 0.5rem;
+.panel-footer {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 1rem;
+ padding: 1.25rem 1.5rem;
+ background: var(--card-background);
+ border-top: 1px solid var(--border-color);
+ border-radius: 0 0 10px 10px;
+ box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
+ flex-shrink: 0;
+
+ .validation-status {
+ flex: 1;
+ min-width: 0;
+ }
+
+ .footer-right {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ flex-shrink: 0;
+ }
+
+ @media (max-width: 640px) {
+ flex-direction: column;
+ align-items: stretch;
+ padding: 1rem;
+ gap: 0.75rem;
+
+ .validation-status {
+ width: 100%;
+ }
+
+ .footer-right {
+ width: 100%;
+ flex-direction: row;
+ justify-content: flex-end;
+ }
+ }
+
+ @media (max-width: 480px) {
+ padding: 0.75rem 0.5rem 0;
gap: 0.5rem;
- .icon-preview {
- width: 32px;
- height: 32px;
- i {
- font-size: 1rem;
- }
- }
- .icon-info {
- .icon-label {
- font-size: 0.75rem;
- }
- .icon-name {
- font-size: 0.8rem;
- }
- }
- }
- .add-folder-section {
- .add-folder-btn {
+ .footer-right {
gap: 0.5rem;
- padding: 0.25rem 0.5rem 0 0.5rem;
- .btn-title {
- font-size: 0.8rem;
- }
- .btn-subtitle {
- font-size: 0.7rem;
- }
- }
- }
-
- .empty-state {
- padding-bottom: 1rem;
- .empty-icon-wrapper {
- width: 48px;
- height: 48px;
- .empty-icon {
- font-size: 1.5rem;
- }
- }
- .empty-title {
- font-size: 0.95rem;
- }
- .empty-description {
- font-size: 0.75rem;
- max-width: 90vw;
}
}
}
+
+.validation-message {
+ display: flex;
+ align-items: center;
+ gap: 0.375rem;
+ padding: 0.25rem 0.5rem;
+ font-weight: 500;
+ border-radius: 6px;
+ font-size: 0.875rem;
+ width: fit-content;
+ max-width: 100%;
+
+ i {
+ font-size: 0.95rem;
+ }
+
+ &.error {
+ background: rgba(239, 68, 68, 0.1);
+ color: rgb(239, 68, 68);
+ border: 1px solid rgba(239, 68, 68, 0.3);
+ }
+
+ &.success {
+ background: rgba(34, 197, 94, 0.1);
+ color: rgb(34, 197, 94);
+ border: 1px solid rgba(34, 197, 94, 0.3);
+ }
+
+ @media (max-width: 640px) {
+ font-size: 0.8rem;
+ padding: 0.375rem 0.5rem;
+ width: 100%;
+ }
+}
diff --git a/booklore-ui/src/app/features/library-creator/library-creator.component.ts b/booklore-ui/src/app/features/library-creator/library-creator.component.ts
index 1dba1447..c498c4a6 100644
--- a/booklore-ui/src/app/features/library-creator/library-creator.component.ts
+++ b/booklore-ui/src/app/features/library-creator/library-creator.component.ts
@@ -73,9 +73,14 @@ export class LibraryCreatorComponent implements OnInit {
}
}
+ closeDialog(): void {
+ this.dynamicDialogRef.close();
+ }
+
openDirectoryPicker(): void {
this.directoryPickerDialogRef = this.dialogService.open(DirectoryPickerComponent, {
header: 'Select Media Directory',
+ showHeader: false,
modal: true,
closable: true,
contentStyle: {overflow: 'hidden'},
diff --git a/booklore-ui/src/app/features/magic-shelf/component/magic-shelf-component.html b/booklore-ui/src/app/features/magic-shelf/component/magic-shelf-component.html
index 12e67734..6021a692 100644
--- a/booklore-ui/src/app/features/magic-shelf/component/magic-shelf-component.html
+++ b/booklore-ui/src/app/features/magic-shelf/component/magic-shelf-component.html
@@ -1,16 +1,32 @@
-
-
+
+
-
-
-
- Selected Icon
- {{ selectedIcon }}
-
-
+
-
+
+
+
+ @if (scanMode === 'FOLDER_AS_BOOK') {
+
+
+
+
+
+
+
+
+
}
+
+
+
+
+
-
-
-
- @if (scanMode === 'FOLDER_AS_BOOK') {
-
-
-
-
-
-
-
+
@@ -221,6 +248,8 @@
+
-
@@ -212,7 +239,7 @@
-
-
+
- }
-
-
-
-
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
Book Directories
+Step 2: Book Directories
Add folders containing your book files
-
-
+
+
+
+
+
+
+
+
+
+
+ Magic Shelf Builder
+Create smart shelves with custom rules to automatically organize your books
+