AZEN-SGG/Kavita
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Miscellaneous styling fixes (#1374)

Browse source 
* Fixing up modal and cover selector

* adding code for card image

* fixing placeholder border

* Fixing placeholder issue

* Fixing drop down z-index

* Updating reading list
This commit is contained in:
Robbie Davis 2022-07-13 17:50:15 -04:00 • committed by GitHub
parent 2f48360d47
commit e3974e64af
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 70 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

4
UI/Web/src/app/reading-list/draggable-ordered-list/draggable-ordered-list.component.html
View file

@ -1,11 +1,11 @@
<div cdkDropList class="{{items.length > 0 ? 'example-list list-group-flush' : ''}}" (cdkDropListDropped)="drop($event)">
<div class="example-box" *ngFor="let item of items; index as i" cdkDrag [cdkDragData]="item" cdkDragBoundary=".example-list">
<div class="d-flex">
<div class="d-flex list-container">
<div class="me-3 align-middle">
<i class="fa fa-grip-vertical drag-handle" aria-hidden="true" cdkDragHandle></i>
</div>
<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item, idx: i }"></ng-container>
<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item, idx: i }"></ng-container>
<div class="align-middle" style="padding-top: 40px">
<label for="reorder-{{i}}" class="form-label visually-hidden">Reorder</label>

82
UI/Web/src/app/reading-list/draggable-ordered-list/draggable-ordered-list.component.scss
View file

@ -5,51 +5,57 @@
display: block;
border-radius: 4px;
overflow: hidden;
}
}
.example-box {
padding: 20px 10px;
border-bottom: solid 1px #ccc;
display: flex;
flex-direction: row;
box-sizing: border-box;
font-size: 14px;
.example-box {
margin: 5px 0;
//border-bottom: solid 1px #ccc;
display: flex;
flex-direction: row;
box-sizing: border-box;
font-size: 14px;
.drag-handle {
cursor: move;
font-size: 24px;
margin-top: 215%;
}
.drag-handle {
cursor: move;
font-size: 24px;
margin-top: 215%;
}
}
.cdk-drag-preview {
box-sizing: border-box;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.cdk-drag-preview {
box-sizing: border-box;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.cdk-drag-placeholder {
opacity: 0;
}
.cdk-drag-placeholder {
opacity: 0;
}
.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.example-box:last-child {
border: none;
}
.example-box:last-child {
border: none;
}
.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.example-custom-placeholder {
background: #ccc;
border: dotted 3px #999;
min-height: 60px;
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.example-custom-placeholder {
background: #ccc;
border: dotted 3px #999;
min-height: 60px;
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.list-container {
background: var(--card-bg-color);
padding: 10px;
border-radius: 5px;
width: 100%;
}

2
UI/Web/src/app/reading-list/reading-list-detail/reading-list-detail.component.html
View file

@ -60,7 +60,7 @@
<!-- TODO: This needs virtualization -->
<app-draggable-ordered-list [items]="items" (orderUpdated)="orderUpdated($event)" (itemRemove)="itemRemoved($event)" [accessibilityMode]="accessibilityMode">
<ng-template #draggableItem let-item let-position="idx">
<app-reading-list-item [item]="item" [position]="position" [libraryTypes]="libraryTypes"
<app-reading-list-item class="content-container" [item]="item" [position]="position" [libraryTypes]="libraryTypes"
[promoted]="item.promoted" (read)="readChapter($event)"></app-reading-list-item>
</ng-template>
</app-draggable-ordered-list>

3
UI/Web/src/app/reading-list/reading-list-detail/reading-list-detail.component.scss
View file

@ -0,0 +1,3 @@
.content-container {
width: 100%;
}