self-hosted/pigallery2
1
0
Fork 0
mirror of https://github.com/bpatrik/pigallery2.git synced 2024-12-23 01:27:14 +02:00
Code Issues Releases Activity

Making things more rounded #587

Browse Source
This commit is contained in:
Patrik J. Braun 2023-08-05 18:55:40 +02:00
parent 16a936a5ba
commit 6332fcdc8a
6 changed files with 21 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/frontend/app/ui/albums/album/album.component.css
View File

@ -20,7 +20,7 @@ a {
} }
.photo-container { .photo-container {
border: 2px solid #333; border: 1px solid #333;
width: 180px; width: 180px;
height: 180px; height: 180px;
background-color: #bbbbbb; background-color: #bbbbbb;

8
src/frontend/app/ui/albums/album/album.component.html
View File

@ -2,22 +2,22 @@
style="display: inline-block;"> style="display: inline-block;">
<div class="photo-container" <div class="photo-container rounded"
[style.width.px]="size" [style.width.px]="size"
[style.height.px]="size"> [style.height.px]="size">
<div class="photo" <div class="photo rounded"
*ngIf="thumbnail && thumbnail.Available" *ngIf="thumbnail && thumbnail.Available"
[style.background-image]="getSanitizedThUrl()"></div> [style.background-image]="getSanitizedThUrl()"></div>
<span *ngIf="!thumbnail || !thumbnail.Available" class="oi oi-folder no-image" <span *ngIf="!thumbnail || !thumbnail.Available" class="oi oi-folder no-image rounded"
aria-hidden="true"> aria-hidden="true">
</span> </span>
</div> </div>
<!--Info box --> <!--Info box -->
<div class="info"> <div class="info rounded-bottom">
{{album.name}} ({{album.count}}) {{album.name}} ({{album.count}})
<span *ngIf="CanUpdate && !album.locked" <span *ngIf="CanUpdate && !album.locked"
(click)="deleteAlbum($event)" (click)="deleteAlbum($event)"

4
src/frontend/app/ui/gallery/directories/directory/directory.gallery.component.css
View File

@ -3,14 +3,14 @@ a {
} }
.photo-container { .photo-container {
border: 2px solid #333; border: 1px solid #333;
width: 180px; width: 180px;
height: 180px; height: 180px;
background-color: #bbbbbb; background-color: #bbbbbb;
} }
.no-image {
.no-image {
color: #7f7f7f; color: #7f7f7f;
font-size: 80px; font-size: 80px;
top: calc(50% - 40px); top: calc(50% - 40px);

8
src/frontend/app/ui/gallery/directories/directory/directory.gallery.component.html
View File

@ -4,19 +4,19 @@
style="display: inline-block;"> style="display: inline-block;">
<div class="photo-container" <div class="photo-container rounded"
[style.width.px]="size" [style.width.px]="size"
[style.height.px]="size"> [style.height.px]="size">
<div class="photo" <div class="photo rounded"
*ngIf="thumbnail && thumbnail.Available" *ngIf="thumbnail && thumbnail.Available"
[style.background-image]="getSanitizedThUrl()"></div> [style.background-image]="getSanitizedThUrl()"></div>
<span *ngIf="!thumbnail || !thumbnail.Available" class="oi oi-folder no-image" <span *ngIf="!thumbnail || !thumbnail.Available" class="oi oi-folder no-image rounded"
aria-hidden="true"> aria-hidden="true">
</span> </span>
</div> </div>
<!--Info box --> <!--Info box -->
<div class="info"> <div class="info rounded-bottom">
<div class="directory-name">{{directory.name}}</div> <div class="directory-name">{{directory.name}}</div>
</div> </div>

2
src/frontend/app/ui/gallery/grid/photo/photo.grid.gallery.component.html
View File

@ -1,4 +1,4 @@
<div #photoContainer class="photo-container" (mouseover)="mouseOver()" (mouseout)="mouseOut()"> <div #photoContainer class="photo-container rounded" (mouseover)="mouseOver()" (mouseout)="mouseOut()">
<img alt="{{gridMedia.media.name}}" #img [src]="thumbnail.Src" <img alt="{{gridMedia.media.name}}" #img [src]="thumbnail.Src"

10
src/frontend/styles.css
View File

@ -27,7 +27,12 @@ element.style {
width: 100px; width: 100px;
} }
/*
Creating btn-tertiary until bootstrap supports it our of the box.
*/
/*
This is mostly btn-light
*/
.btn-tertiary, [data-bs-theme=light] .btn-tertiary { .btn-tertiary, [data-bs-theme=light] .btn-tertiary {
--bs-btn-color: #000; --bs-btn-color: #000;
--bs-btn-bg: #f8f9fa; --bs-btn-bg: #f8f9fa;
@ -45,6 +50,9 @@ element.style {
--bs-btn-disabled-border-color: #f8f9fa; --bs-btn-disabled-border-color: #f8f9fa;
} }
/*
This is mostly btn-dark + border fix
*/
[data-bs-theme=dark] .btn-tertiary { [data-bs-theme=dark] .btn-tertiary {
--bs-btn-color: #fff; --bs-btn-color: #fff;
--bs-btn-bg: #212529; --bs-btn-bg: #212529;