Lanmikeman/openvk
Lanmikeman/openvk
1
1
Fork 0
mirror of https://github.com/openvk/openvk synced 2024-11-11 01:19:53 +03:00
Code Issues Projects Releases Packages Wiki Activity

Photos: Album view redesign

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

5
Web/Presenters/PhotosPresenter.php
View file

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

9
Web/Presenters/templates/Photos/Album.xml
View file

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

29
Web/static/css/style.css
View file

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