Cutlery/Kavita
1
0
Fork 0
mirror of https://github.com/Kareadita/Kavita.git synced 2025-07-09 03:04:19 -04:00
Code Issues Packages Projects Releases Wiki Activity

Donate styling (#1886)

Browse Source 
* Donate styling

# Changed
- Changed the styling and positioning of the donate button to still be visible but less intrusive and more cohesive to the application.

* Updated pr action

* Revert "Updated pr action"

This reverts commit d3f7c7b2edfdcdbb79acb9e7816247ef5ebc30ea.
This commit is contained in:
Robbie Davis 2023-03-17 11:02:11 -04:00 committed by GitHub
parent bade2293f6
commit f41fed7a7b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 65 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
UI/Web/src/app/sidenav/_components/side-nav/side-nav.component.html
View File

@ -17,7 +17,6 @@
</app-side-nav-item> </app-side-nav-item>
<app-side-nav-item icon="fa-bookmark" title="Bookmarks" link="/bookmarks/"></app-side-nav-item> <app-side-nav-item icon="fa-bookmark" title="Bookmarks" link="/bookmarks/"></app-side-nav-item>
<app-side-nav-item icon="fa-regular fa-rectangle-list" title="All Series" link="/all-series/" *ngIf="libraries.length > 0"></app-side-nav-item> <app-side-nav-item icon="fa-regular fa-rectangle-list" title="All Series" link="/all-series/" *ngIf="libraries.length > 0"></app-side-nav-item>
<app-side-nav-item icon="fa-heart" title="Donate" link="https://opencollective.com/kavita" [external]="true"></app-side-nav-item>
<div class="mb-2 mt-3 ms-2 me-2" *ngIf="libraries.length > 10 && (navService?.sideNavCollapsed$ | async) === false"> <div class="mb-2 mt-3 ms-2 me-2" *ngIf="libraries.length > 10 && (navService?.sideNavCollapsed$ | async) === false">
<label for="filter" class="form-label visually-hidden">Filter</label> <label for="filter" class="form-label visually-hidden">Filter</label>
<div class="form-group"> <div class="form-group">
@ -33,4 +32,7 @@
</app-side-nav-item> </app-side-nav-item>
</div> </div>
<div class="side-nav-overlay" (click)="toggleNavBar()" [ngClass]="{'closed' : (navService.sideNavCollapsed$ | async)}"></div> <div class="side-nav-overlay" (click)="toggleNavBar()" [ngClass]="{'closed' : (navService.sideNavCollapsed$ | async)}"></div>
<div class="bottom" [ngClass]="{'closed' : (navService.sideNavCollapsed$ | async), 'hidden': (navService.sideNavVisibility$ | async) === false}">
<app-side-nav-item [ngClass]="'donate'" icon="fa-heart" title="Donate" link="https://opencollective.com/kavita" [external]="true"></app-side-nav-item>
</div>
</ng-container> </ng-container>

64
UI/Web/src/app/sidenav/_components/side-nav/side-nav.component.scss
View File

@ -1,8 +1,68 @@
.bottom {
position: absolute;
bottom: 12px;
width: 190px;
background: var(--navbar-bg-color);
border-radius: var(--side-nav-border-radius);
font-size: 12px;
transition: width var(--side-nav-openclose-transition);
z-index: 999;
&.closed {
width: 50px;
overflow-x: hidden;
overflow-y: auto;
}
}
:host ::ng-deep .bottom .donate .side-nav-item {
justify-content: center;
min-height: 25px;
align-items: center;
:hover {
background-color: unset;
}
}
:host ::ng-deep .bottom .donate .side-nav-item span {
flex-grow: unset !important;
min-width: unset !important;;
}
:host ::ng-deep .bottom .donate .side-nav-item span div {
min-width: unset !important;
}
:host ::ng-deep .bottom .donate .side-nav-item span div i{
font-size: 12px !important;
}
:host ::ng-deep .bottom .donate .side-nav-item.closed span.phone-hidden div {
width: 100%;
}
:host ::ng-deep .bottom .donate .side-nav-item.closed span.side-nav-text div {
width: 0;
}
@media (max-width: 576px) {
:host ::ng-deep .bottom .donate .side-nav-item.closed {
display: none;
}
:host ::ng-deep .bottom .donate .side-nav-item span.phone-hidden {
display: block !important;
}
}
.side-nav { .side-nav {
padding-bottom: 10px; padding-bottom: 10px;
width: 190px; width: 190px;
background-color: var(--side-nav-bg-color); background-color: var(--side-nav-bg-color);
height: calc((var(--vh)*100) - 85px); height: calc((var(--vh)*100) - 115px);
position: fixed; position: fixed;
margin: 0; margin: 0;
left: 10px; left: 10px;
@ -36,7 +96,7 @@
padding: 10px 0; padding: 10px 0;
width: 55vw; width: 55vw;
background-color: var(--side-nav-mobile-bg-color); background-color: var(--side-nav-mobile-bg-color);
height: calc((var(--vh)*100) - 56px); height: calc((var(--vh)*100) - 125px);
position: fixed; position: fixed;
margin: 0; margin: 0;
left: 0; left: 0;