From 05643e97cd2be4f9a94c2dddab07b752f6fcf0ec Mon Sep 17 00:00:00 2001
From: veselcraft <veselcraft@icloud.com>
Date: Mon, 20 Dec 2021 23:51:50 +0300
Subject: [PATCH] Photos: Album view redesign

---
 Web/Presenters/PhotosPresenter.php        |  5 ++--
 Web/Presenters/templates/Photos/Album.xml | 33 ++++++++++++-----------
 Web/static/css/style.css                  | 29 +++++++++++++++-----
 3 files changed, 42 insertions(+), 25 deletions(-)

diff --git a/Web/Presenters/PhotosPresenter.php b/Web/Presenters/PhotosPresenter.php
index 24531222..56247bde 100644
--- a/Web/Presenters/PhotosPresenter.php
+++ b/Web/Presenters/PhotosPresenter.php
@@ -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
         ];
     }
     
diff --git a/Web/Presenters/templates/Photos/Album.xml b/Web/Presenters/templates/Photos/Album.xml
index d4fe819a..9927c297 100644
--- a/Web/Presenters/templates/Photos/Album.xml
+++ b/Web/Presenters/templates/Photos/Album.xml
@@ -27,23 +27,24 @@
         &nbsp;|&nbsp;
         <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">
-                    &times;
-                </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">
+                        &times;
+                    </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"}
diff --git a/Web/static/css/style.css b/Web/static/css/style.css
index 4fdf6f8f..489f7b8d 100644
--- a/Web/static/css/style.css
+++ b/Web/static/css/style.css
@@ -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;