Enh #7233: Mobile view: enlarge images in gallery preview of entries for the wall stream (#7235)

CHANGELOG.md

@@ -38,6 +38,7 @@ HumHub Changelog
 - Enh #7224: Added `user\Module::$invitesTimeToLiveInDays` to automatically clean up User Invites after a specified number of days
 - Enh #7231: Removed deprecated `ShowMorePager` widget
 - Fix #7230: Update module with new id
+- Enh #7233: Mobile view: enlarge images in gallery preview of entries for the wall stream
 
 1.16.3 (Unreleased)
 --------------------------

protected/humhub/modules/file/widgets/views/showFiles.php

@@ -2,8 +2,8 @@
 
 use humhub\components\ActiveRecord;
 use humhub\modules\file\converter\PreviewImage;
-use humhub\modules\file\widgets\FilePreview;
 use humhub\modules\file\libs\FileHelper;
+use humhub\modules\file\widgets\FilePreview;
 use humhub\modules\ui\view\helpers\ThemeHelper;
 use humhub\widgets\JPlayerPlaylistWidget;
 use yii\helpers\Html;
@@ -29,14 +29,24 @@ foreach ($files as $file) {
     }
 }
 
-$fullWidthColumnClass = 'col-media col-xs-12 col-sm-12 col-md-12';
-$nonFluidColumnClass = 'col-media col-xs-3 col-sm-3 col-md-4';
-$fluidColumnClass = 'col-media col-xs-3 col-sm-3 col-md-2';
+$nbFiles = count($files);
+$isFluid = ThemeHelper::isFluid();
 
-$galleryColumnClass = ThemeHelper::isFluid() ? $fluidColumnClass : $nonFluidColumnClass;
+// Image height is defined in file.less and matches this template
+$mobileBsColumns = 6;
+$desktopBsColumns = $isFluid ? 3 : 4;
+if ($nbFiles === 1) {
+    $mobileBsColumns = 12;
+    $desktopBsColumns = $isFluid ? 4 : 6;
+}
+if ($nbFiles === 2) {
+    $desktopBsColumns = $isFluid ? 4 : 6;
+}
+$fullWidthColumnClass = 'col-media col-xs-12 col-sm-12 col-md-12';
+$galleryColumnClass = 'col-media col-xs-' . $mobileBsColumns . ' col-sm-' . $desktopBsColumns . ' col-md-' . $desktopBsColumns;
 ?>
 
-<?php if (count($files) > 0): ?>
+<?php if ($nbFiles > 0): ?>
     <!-- hideOnEdit mandatory since 1.2 -->
     <div class="hideOnEdit">
         <!-- Show Images as Thumbnails -->

static/less/file.less

@@ -65,30 +65,43 @@ ul.files {
     }
 }
 
-& when (@isFluid) {
-    @media  (min-width: 1200px) and (max-width: 1700px) {
-        .post-files img {
-            height: 100px;
-        }
-    }
+// Matches the protected/humhub/modules/file/widgets/views/showFiles.php template
 
-    @media (min-width: 992px) and (max-width: 1199px) {
-        .post-files img {
-            height: 80px;
+// extra-small
+@media (max-width: 768px) {
+    .post-files {
+        img {
+            height: 150px;
         }
-    }
 
-    @media (max-width: 991px) {
-        .post-files img {
-            height: 100px;
+        .col-xs-12 img { // One image
+            height: 300px;
         }
     }
 }
 
-& when not(@isFluid) {
-    @media (max-width: 650px) {
-        .post-files img {
-            height: 100px;
+// small
+@media (min-width: 768px) and (max-width: 991px) {
+    .post-files {
+        img {
+            height: 150px;
+        }
+
+        .col-sm-6 img { // One or two images
+            height: 250px;
+        }
+    }
+}
+
+// medium
+@media (min-width: 992px) {
+    .post-files {
+        img {
+            height: 200px;
+        }
+
+        .col-sm-6 img { // One or two images
+            height: 300px;
         }
     }
 }
@@ -113,8 +126,8 @@ ul.files {
 
         img {
             max-width: 190px;
-            height:100px;
-            width:auto;
+            height: 100px;
+            width: auto;
         }
     }
 }

themes/HumHub/css/theme.css

@@ -322,6 +322,10 @@ span.likeLinkContainer .unlike.disabled {
 #topbar-first .nav > .account .dropdown-toggle #user-account-image {
   margin-bottom: 0;
 }
+#topbar-first .nav > .account .dropdown-toggle #user-account-image + .caret {
+  float: right;
+  margin: 12px 0 0 6px;
+}
 #topbar-first .topbar-brand {
   position: relative;
   z-index: 2;
@@ -1932,13 +1936,23 @@ input[type=checkbox]:checked {
   color: white;
 }
 input[type=checkbox]:checked::after {
-  content: '\2714';
-  font-size: 14px;
+  content: '\f00c';
+  /* FontAwesome checkmark */
+  font-family: 'FontAwesome';
+  /* FontAwesome Font */
+  font-size: 12px;
   position: absolute;
-  top: -3px;
+  top: 0;
   left: 1px;
   color: white;
 }
+/* Chromium */
+@supports (-webkit-appearance: none) {
+  input[type=checkbox]:checked::after {
+    top: 1px;
+    left: 1px;
+  }
+}
 input[type=radio] {
   border-radius: 50%;
 }
@@ -3356,9 +3370,28 @@ ul.files li.file-preview-item .file-fileInfo {
   object-fit: cover;
   border-radius: 4px;
 }
-@media (max-width: 650px) {
+@media (max-width: 768px) {
   .post-files img {
-    height: 100px;
+    height: 150px;
+  }
+  .post-files .col-xs-12 img {
+    height: 300px;
+  }
+}
+@media (min-width: 768px) and (max-width: 991px) {
+  .post-files img {
+    height: 150px;
+  }
+  .post-files .col-sm-6 img {
+    height: 250px;
+  }
+}
+@media (min-width: 992px) {
+  .post-files img {
+    height: 200px;
+  }
+  .post-files .col-sm-6 img {
+    height: 300px;
   }
 }
 .post-file-list {
@@ -6389,7 +6422,7 @@ ul.tag_input li img {
  * Define or overwrite your theme variables here.
  *
  * Check for @humhub/static/less/variables.less file for all available variables.
- *
+ * 
  * You can also access your variables within your view files by calling Yii::$app->view->theme->variable('myVariable');
  *
  * You can disable the import of humhub theme components by using variables of the format @prev-{component} e.g.:
@@ -6403,4 +6436,4 @@ ul.tag_input li img {
 **/
 /**
  * Define or overwrite your theme selectors within this file.
-**/
+**/