Photos: Album view redesign

This commit is contained in:
veselcraft 2021-12-20 23:51:50 +03:00
parent 40b0603429
commit 05643e97cd
No known key found for this signature in database
GPG key ID: AED66BC1AC628A4E
3 changed files with 42 additions and 25 deletions

View file

@ -138,12 +138,13 @@ final class PhotosPresenter extends OpenVKPresenter
}
$this->template->album = $album;
$this->template->photos = iterator_to_array( $album->getPhotos( (int) ($this->queryParam("p") ?? 1) ) );
$this->template->photos = iterator_to_array( $album->getPhotos( (int) ($this->queryParam("p") ?? 1), 20) );
$this->template->paginatorConf = (object) [
"count" => $album->getPhotosCount(),
"page" => $this->queryParam("p") ?? 1,
"amount" => sizeof($this->template->photos),
"perPage" => OPENVK_DEFAULT_PER_PAGE,
"perPage" => 20,
"atBottom" => true
];
}

View file

@ -27,11 +27,12 @@
 | 
<a href="/album{$album->getPrettyId()}/edit">{_"edit_album"}</a>
{/if}
<br/>
<br/><br/>
{if $album->getPhotosCount() > 0}
<div class="container_gray album-flex">
{foreach $photos as $photo}
{php if($photo->isDeleted()) continue; }
<div class="album-photo" style="display: inline-table;">
<div class="album-photo">
<a
n:if="!is_null($thisUser) && $album->canBeModifiedBy($thisUser)"
href="/album{$album->getPrettyId()}/remove_photo.pl/{$photo->getId()}" class="album-photo--delete">
@ -39,11 +40,11 @@
</a>
<a href="/photo{$photo->getPrettyId()}?from=album{$album->getId()}">
<img class="album-photo--image" src="{$photo->getURL()}" alt="{$photo->getDescription()}" style="width:unset;max-height:unset;max-width: 188px;" />
<img class="album-photo--image" src="{$photo->getURL()}" alt="{$photo->getDescription()}" />
</a>
</div>
{/foreach}
</div>
{include "../components/paginator.xml", conf => $paginatorConf}
{else}
{include "../components/nothing.xml"}

View file

@ -257,23 +257,29 @@ a {
.album-photo {
position: relative;
background-color: darkgrey;
margin: 4pt;
width: calc(33% - 10pt);
height: 82px;
width: 25%;
max-height: 140px;
margin-bottom: 8px;
text-align: center;
vertical-align: text-top;
display: flex;
align-items: center;
justify-content: center;
}
.album-photo img {
width: 100%;
max-height: 82px;
width: unset;
max-height: 120px !important;
max-width: 83%;
vertical-align: top;
border: 1px #ccc solid;
padding: 8px;
background-color: #fff;
}
.album-photo > .album-photo--delete {
position: absolute;
right: 0;
top: 0;
padding: 5px;
margin: 4px;
color: #fff;
@ -289,6 +295,11 @@ a {
opacity: 1;
}
.album-flex {
display: flex;
flex-wrap: wrap;
}
.name-checkmark {
margin-left: 2pt;
}
@ -738,6 +749,10 @@ table.User {
margin-bottom: -12px;
}
.container_gray.bottom {
border-bottom: #ebebeb solid 1px;
}
#auth .container_gray {
margin-left: -10px;
margin-bottom: -10px;