Merge pull request #1665 from Grandi0z/cypht-enh-imap-image-view

kroky · web-flow · commit b67ef2688d97 · 2025-09-11T16:37:10.000+03:00
refactor(frontend): enhance image display and white space handling in IMAP module
diff --git a/modules/core/site.css b/modules/core/site.css
@@ -1584,7 +1584,7 @@ a[disabled] {
 
 /* Bootstrap-based message headers */
 .msg_text * {
-  white-space: normal !important;
+  white-space: normal;
   word-break: break-word;
   overflow-wrap: anywhere;
 }
diff --git a/modules/imap/functions.php b/modules/imap/functions.php
@@ -711,7 +711,10 @@ function format_attached_image_section($struct, $output_mod, $dl_link) {
     $isThereAnyImg = false;
     foreach ($struct as $id => $vals) {
         if ($vals['type'] === 'image') {
-            $res .= '<div><img class="attached_image" src="?'.$dl_link.'&amp;imap_msg_part='.$output_mod->html_safe($id).'" ></div>';
+            $res .= '<div class="col-6 col-md-3">
+                        <img class="attached_image img-fluid" 
+                             src="?' . $dl_link . '&amp;imap_msg_part=' . $output_mod->html_safe($id) . '" >
+                     </div>';
             $isThereAnyImg = true;
         }
         if (isset($vals['subs'])) {
@@ -720,7 +723,7 @@ function format_attached_image_section($struct, $output_mod, $dl_link) {
     }
 
     if ($isThereAnyImg) {
-        $res = '<div class="attached_image_box">' . $res . '</div>';
+        $res = '<div class="container-fluid"><div class="row text-center attached_image_box">' . $res . '</div></div>';
     }
 
     return $res;
diff --git a/modules/imap/site.css b/modules/imap/site.css
@@ -222,6 +222,9 @@
   text-overflow: ellipsis;
   width: 20%;
 }
+.msg_parts td * {
+  white-space: nowrap;
+}
 .download_link {
   width: 100px;
 }
@@ -442,13 +445,13 @@
 }
 .mobile .download_link,
 .mobile .remove_attachment {
-  width: 50px !important;
   overflow: visible !important;
-  margin-left: 25px;
 }
 .mobile .part_desc,
 .mobile .part_size {
-  margin-left: 25px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .mobile .unflag_send_div {
   float: right;
@@ -465,13 +468,8 @@
   height: 200px;
 }
 .attached_image_box {
-  display: flex;
-  flex-wrap: wrap;
   border-top: solid 1px #ddd;
-  padding-top: 20px;
-  padding-left: 20px;
-  width: 100%;
-  padding-bottom: 40px;
+  padding-top: 1rem;
 }
 /* .list_meta { float: none; margin-left: 37%; } */
 

Original file line number	Diff line number	Diff line change
`@@ -1584,7 +1584,7 @@ a[disabled] {`
`1584`	`1584`
`1585`	`1585`	`/* Bootstrap-based message headers */`
`1586`	`1586`	`.msg_text * {`
`1587`		`- white-space: normal !important;`
	`1587`	`+ white-space: normal;`
`1588`	`1588`	`word-break: break-word;`
`1589`	`1589`	`overflow-wrap: anywhere;`
`1590`	`1590`	`}`
Original file line number	Diff line number	Diff line change
`@@ -711,7 +711,10 @@ function format_attached_image_section($struct, $output_mod, $dl_link) {`
`711`	`711`	`$isThereAnyImg = false;`
`712`	`712`	`foreach ($struct as $id => $vals) {`
`713`	`713`	`if ($vals['type'] === 'image') {`
`714`		`- $res .= '<div><img class="attached_image" src="?'.$dl_link.'&imap_msg_part='.$output_mod->html_safe($id).'" ></div>';`
	`714`	`+ $res .= '<div class="col-6 col-md-3">`
	`715`	`+ <img class="attached_image img-fluid"`
	`716`	`+ src="?' . $dl_link . '&imap_msg_part=' . $output_mod->html_safe($id) . '" >`
	`717`	`+ </div>';`
`715`	`718`	`$isThereAnyImg = true;`
`716`	`719`	`}`
`717`	`720`	`if (isset($vals['subs'])) {`
`@@ -720,7 +723,7 @@ function format_attached_image_section($struct, $output_mod, $dl_link) {`
`720`	`723`	`}`
`721`	`724`
`722`	`725`	`if ($isThereAnyImg) {`
`723`		`- $res = '<div class="attached_image_box">' . $res . '</div>';`
	`726`	`+ $res = '<div class="container-fluid"><div class="row text-center attached_image_box">' . $res . '</div></div>';`
`724`	`727`	`}`
`725`	`728`
`726`	`729`	`return $res;`
Original file line number	Diff line number	Diff line change
`@@ -222,6 +222,9 @@`
`222`	`222`	`text-overflow: ellipsis;`
`223`	`223`	`width: 20%;`
`224`	`224`	`}`
	`225`	`+.msg_parts td * {`
	`226`	`+ white-space: nowrap;`
	`227`	`+}`
`225`	`228`	`.download_link {`
`226`	`229`	`width: 100px;`
`227`	`230`	`}`
`@@ -442,13 +445,13 @@`
`442`	`445`	`}`
`443`	`446`	`.mobile .download_link,`
`444`	`447`	`.mobile .remove_attachment {`
`445`		`- width: 50px !important;`
`446`	`448`	`overflow: visible !important;`
`447`		`- margin-left: 25px;`
`448`	`449`	`}`
`449`	`450`	`.mobile .part_desc,`
`450`	`451`	`.mobile .part_size {`
`451`		`- margin-left: 25px;`
	`452`	`+ white-space: nowrap;`
	`453`	`+ overflow: hidden;`
	`454`	`+ text-overflow: ellipsis;`
`452`	`455`	`}`
`453`	`456`	`.mobile .unflag_send_div {`
`454`	`457`	`float: right;`
`@@ -465,13 +468,8 @@`
`465`	`468`	`height: 200px;`
`466`	`469`	`}`
`467`	`470`	`.attached_image_box {`
`468`		`- display: flex;`
`469`		`- flex-wrap: wrap;`
`470`	`471`	`border-top: solid 1px #ddd;`
`471`		`- padding-top: 20px;`
`472`		`- padding-left: 20px;`
`473`		`- width: 100%;`
`474`		`- padding-bottom: 40px;`
	`472`	`+ padding-top: 1rem;`
`475`	`473`	`}`
`476`	`474`	`/* .list_meta { float: none; margin-left: 37%; } */`
`477`	`475`