From 5899616837bc9609549c32345f1700344a5e916c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc=20Farr=C3=A9?= <23310825+marc-farre@users.noreply.github.com> Date: Fri, 27 Sep 2024 17:28:56 +0100 Subject: [PATCH] Enh #7233: Mobile view: enlarge images in gallery preview of entries for the wall stream (#7235) --- CHANGELOG.md | 1 + .../modules/file/widgets/views/showFiles.php | 22 +++++--- static/less/file.less | 51 ++++++++++++------- themes/HumHub/css/theme.css | 47 ++++++++++++++--- 4 files changed, 89 insertions(+), 32 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ebd00750cf..c89ae4b3c0 100644 --- a/CHANGELOG.md +++ b/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) -------------------------- diff --git a/protected/humhub/modules/file/widgets/views/showFiles.php b/protected/humhub/modules/file/widgets/views/showFiles.php index bba2367a19..0d623837f9 100644 --- a/protected/humhub/modules/file/widgets/views/showFiles.php +++ b/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; ?> - 0): ?> + 0): ?>
diff --git a/static/less/file.less b/static/less/file.less index 4665028797..4466bf05cc 100644 --- a/static/less/file.less +++ b/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; } } } diff --git a/themes/HumHub/css/theme.css b/themes/HumHub/css/theme.css index 9ba61993dc..c4c2c95dd1 100644 --- a/themes/HumHub/css/theme.css +++ b/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. -**/ \ No newline at end of file +**/