[Scummvm-git-logs] scummvm-web master -> 13e208d6c0e0cf670e4918983a5ab5f755a26763

[Thunderforge]

This automated email contains information about 1 new commit which have been
pushed to the 'scummvm-web' repo located at https://github.com/scummvm/scummvm-web .

Summary:
13e208d6c0 WEB: Changing grid view to be more responsive (#219)


Commit: 13e208d6c0e0cf670e4918983a5ab5f755a26763
    https://github.com/scummvm/scummvm-web/commit/13e208d6c0e0cf670e4918983a5ab5f755a26763
Author: Thunderforge (wjherrmann at gmail.com)
Date: 2022-03-12T18:50:40-06:00

Commit Message:
WEB: Changing grid view to be more responsive (#219)

* WEB: Changing grid view to be more responsive

Improvements are:

* Long captions are now always visible instead of being cut off
* Differently sized cards no longer cause gaps
* Images are now always at a visible size instead of becoming too small to see
* Images are centered on the page, preventing the possibility of a wide gap on the right side

* WEB: Removing restriction of 4 screenshots per row.

Ultrawide monitor users rejoice!

Changed paths:
    scss/components/_card.scss
    scss/pages/_screenshots.scss
    templates/pages/screenshots_category.tpl


diff --git a/scss/components/_card.scss b/scss/components/_card.scss
index e45f17d8..10ab3ada 100644
--- a/scss/components/_card.scss
+++ b/scss/components/_card.scss
@@ -3,12 +3,10 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  margin-bottom: 20px;
+  margin: 5px;
   padding: 10px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
   transition: 0.2s;
-  height: auto;
-  width: 100%;
   background: #fff;
 
   &:hover {
@@ -32,6 +30,7 @@
     display: flex;
     align-items: center;
     height: 10%;
+    max-width: 250px;
   }
 
   &.sponsor {
diff --git a/scss/pages/_screenshots.scss b/scss/pages/_screenshots.scss
index 8404957b..d8b44e8b 100644
--- a/scss/pages/_screenshots.scss
+++ b/scss/pages/_screenshots.scss
@@ -9,14 +9,10 @@
 }
 
 .gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
   text-align: center;
-
-  .caption {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    height: 38px;
-    display: inline-block;
-    text-align: center;
-    width: 100%;
-  }
 }
diff --git a/templates/pages/screenshots_category.tpl b/templates/pages/screenshots_category.tpl
index d30bf231..c2dfaa37 100644
--- a/templates/pages/screenshots_category.tpl
+++ b/templates/pages/screenshots_category.tpl
@@ -1,22 +1,18 @@
 {* List all screenshots for an entry or category. *}
 {capture "content"}
     {foreach from=$screenshots.games item=g name=cat_loop}
+        <h3 class="subhead"><a href="{'/screenshots/'|lang}{$category}/{$g->getCategory()}/">{$g->getName()}</a></h3>
         <div class="gallery">
-            <div class="row">
-                <h3 class="subhead"><a href="{'/screenshots/'|lang}{$category}/{$g->getCategory()}/">{$g->getName()}</a></h3>
-                {foreach from=$g->getFiles() item=fdata name=game_loop}
-                    <div class="col-1-4 col-md-1">
-                        <div class="card">
-                            <div class="image">
-                                <a href="{$smarty.const.DIR_SCREENSHOTS}/{$fdata.filename}_full.png" title="{$fdata.caption}">
-                                    <img class="pixelated" src="{$smarty.const.DIR_SCREENSHOTS}/{$fdata.filename}.jpg" alt="{$g->getName()} screenshot #{$smarty.foreach.cat_loop.iteration}">
-                                </a>
-                            </div>
-                            <div class="caption">{$fdata.caption}</div>
-                        </div>
+            {foreach from=$g->getFiles() item=fdata name=game_loop}
+                <div class="card">
+                    <div class="image">
+                        <a href="{$smarty.const.DIR_SCREENSHOTS}/{$fdata.filename}_full.png" title="{$fdata.caption}">
+                            <img class="pixelated" src="{$smarty.const.DIR_SCREENSHOTS}/{$fdata.filename}.jpg" alt="{$g->getName()} screenshot #{$smarty.foreach.cat_loop.iteration}">
+                        </a>
                     </div>
-                {/foreach}
-            </div>
+                    <div class="caption">{$fdata.caption}</div>
+                </div>
+            {/foreach}
         </div>
     {/foreach}
 {/capture}