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 {
border: 2px solid #333;
border: 1px solid #333;
width: 180px;
height: 180px;
background-color: #bbbbbb;

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

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

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

@ -3,14 +3,14 @@ a {
}
.photo-container {
border: 2px solid #333;
border: 1px solid #333;
width: 180px;
height: 180px;
background-color: #bbbbbb;
}
.no-image {
.no-image {
color: #7f7f7f;
font-size: 80px;
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;">
<div class="photo-container"
<div class="photo-container rounded"
[style.width.px]="size"
[style.height.px]="size">
<div class="photo"
<div class="photo rounded"
*ngIf="thumbnail && thumbnail.Available"
[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">
</span>
</div>
<!--Info box -->
<div class="info">
<div class="info rounded-bottom">
<div class="directory-name">{{directory.name}}</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"

10
src/frontend/styles.css
View File

@ -27,7 +27,12 @@ element.style {
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 {
--bs-btn-color: #000;
--bs-btn-bg: #f8f9fa;
@ -45,6 +50,9 @@ element.style {
--bs-btn-disabled-border-color: #f8f9fa;
}
/*
This is mostly btn-dark + border fix
*/
[data-bs-theme=dark] .btn-tertiary {
--bs-btn-color: #fff;
--bs-btn-bg: #212529;