mirror of
https://github.com/openvk/openvk
synced 2024-11-13 10:39:24 +03:00
Photos: Album view redesign
This commit is contained in:
parent
40b0603429
commit
05643e97cd
3 changed files with 42 additions and 25 deletions
|
@ -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
|
||||
];
|
||||
}
|
||||
|
||||
|
|
|
@ -27,23 +27,24 @@
|
|||
|
|
||||
<a href="/album{$album->getPrettyId()}/edit">{_"edit_album"}</a>
|
||||
{/if}
|
||||
<br/>
|
||||
<br/><br/>
|
||||
{if $album->getPhotosCount() > 0}
|
||||
{foreach $photos as $photo}
|
||||
{php if($photo->isDeleted()) continue; }
|
||||
<div class="album-photo" style="display: inline-table;">
|
||||
<a
|
||||
n:if="!is_null($thisUser) && $album->canBeModifiedBy($thisUser)"
|
||||
href="/album{$album->getPrettyId()}/remove_photo.pl/{$photo->getId()}" class="album-photo--delete">
|
||||
×
|
||||
</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;" />
|
||||
</a>
|
||||
</div>
|
||||
{/foreach}
|
||||
|
||||
<div class="container_gray album-flex">
|
||||
{foreach $photos as $photo}
|
||||
{php if($photo->isDeleted()) continue; }
|
||||
<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">
|
||||
×
|
||||
</a>
|
||||
|
||||
<a href="/photo{$photo->getPrettyId()}?from=album{$album->getId()}">
|
||||
<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"}
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue