booklore-app/booklore
1
0
Fork 0
mirror of https://github.com/booklore-app/booklore.git synced 2026-02-18 23:42:06 +01:00
Code Issues Packages Projects Releases Wiki Activity

More layout fixes for bottom bar

Browse Source
This commit is contained in:
aditya.chandel
2025-01-23 15:49:07 -07:00
parent 7c1920635c
commit 3fba668013
2 changed files with 6 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
booklore-ui/src/app/book/components/book-browser/book-browser.component.html
View File

@@ -3,10 +3,10 @@
<div class="flex justify-between items-center p-2 rounded-t-xl mb-4 bg-[var(--card-background)]">
<div class="flex items-center pl-2">
<ng-container *ngIf="entityType$ | async as entityType">
<p *ngIf="entityType !== EntityType.ALL_BOOKS" class="text-2xl">
<p *ngIf="entityType !== EntityType.ALL_BOOKS" class="text-2xl whitespace-nowrap overflow-hidden text-ellipsis">
{{ entityType }}: {{ (entity$ | async)?.name }}
</p>
<p *ngIf="entityType === EntityType.ALL_BOOKS" class="text-2xl">
<p *ngIf="entityType === EntityType.ALL_BOOKS" class="text-2xl whitespace-nowrap overflow-hidden text-ellipsis">
All Books
</p>
<div *ngIf="entityType !== EntityType.ALL_BOOKS">
@@ -121,24 +121,21 @@
<div class="flex justify-between gap-8">
<ng-container *ngIf="entityType$ | async as entityType">
<p-button *ngIf="entityType === EntityType.LIBRARY || entityType === EntityType.ALL_BOOKS"
icon="pi pi-book"
label="Assign Shelf"
severity="info"
(onClick)="openShelfAssigner()">
</p-button>
<p-button *ngIf="entityType === EntityType.SHELF"
icon="pi pi-minus-circle"
label="Unshelf"
severity="info"
(click)="unshelfBooks()">
</p-button>
<p-button
icon="pi pi-database"
label="Refresh Metadata"
severity="info"
(click)="updateMetadata()">
</p-button>
<p-button icon="pi pi-times"
<p-button
label="Deselect All"
severity="warn"
(click)="deselectAllBooks()">

27
booklore-ui/src/app/book/components/book-browser/book-browser.component.scss
View File

@@ -38,32 +38,12 @@
right: 20%;
display: flex;
justify-content: center;
padding: 1.1rem;
box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1);
padding: 1rem 0.5rem 0.5rem;
z-index: 1;
border-radius: 10px 10px 0 0;
}
.book-browser-footer::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.85);
z-index: -1;
border-radius: 10px 10px 0 0;
border: 1px solid rgba(255, 255, 255, 0.5);
border-width: 1px 1px 0px 1px;
}
.book-browser-footer > * {
pointer-events: auto;
}
.book-browser-footer:hover::before {
pointer-events: none;
background-color: rgba(0, 0, 0, 0.5);
}
.topbar-items {
@@ -77,8 +57,6 @@
li {
position: relative;
}
}
.topbar-item {
@@ -97,6 +75,7 @@
outline-color: transparent;
background-color: var(--card-background);
cursor: pointer;
&:hover {
border-color: var(--primary-color);
}