Project

General

Profile

Actions

Defect #42818

closed

Unnecessary margin below icons on the board-style projects page

Added by Mizuki ISHIKAWA 2 days ago. Updated about 23 hours ago.

Status:
Closed
Priority:
Normal
Assignee:
Category:
UI
Target version:
Start date:
Due date:
% Done:

0%

Estimated time:
Resolution:
Fixed
Affected version:

Description

In the projects page (board), when using alert syntax or code blocks in the project descriptions, an unwanted margin appears below the alert icons or the copy button of the code blocks.This margin is originally intended for the my-project and bookmarked icons, so I'll explicitly apply styles only to those elements to resolve this.

Since wrapping the sprite_icon inside a <span> tag is already implemented in the projects page (list), I think it's a good idea to do the same here for consistency. https://github.com/redmine/redmine/blob/200eced4692ba0ec3cd1df8e1d6b19ba06c419a3/app/helpers/projects_queries_helper.rb#L27-L28

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index e35e5cba0..deea6c903 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -922,7 +922,7 @@ ul.projects div.description ul li {list-style-type:initial;}
   background-image: none;
   padding-left: 0;
 }
-#projects-index ul.projects div.root svg {
+#projects-index ul.projects div.root .icon-bookmarked-project svg, #projects-index ul.projects div.root .my-project svg {
   stroke-width: 2;
   margin-bottom: 10px;
 }
diff --git a/app/helpers/projects_helper.rb b/app/helpers/projects_helper.rb
index 01a5452f7..bae1c4e3a 100644
--- a/app/helpers/projects_helper.rb
+++ b/app/helpers/projects_helper.rb
@@ -80,8 +80,8 @@ module ProjectsHelper
       classes += %w(icon icon-bookmarked-project) if bookmarked_project_ids.include?(project.id)

       s = link_to_project(project, {}, :class => classes.uniq.join(' '))
-      s << sprite_icon('user', l(:label_my_projects), icon_only: true) if User.current.member_of?(project)
-      s << sprite_icon('bookmarked', l(:label_my_bookmarks), icon_only: true) if bookmarked_project_ids.include?(project.id)
+      s << tag.span(sprite_icon('user', l(:label_my_projects), icon_only: true), class: 'icon-only icon-user my-project') if User.current.member_of?(project)
+      s << tag.span(sprite_icon('bookmarked', l(:label_my_bookmarks), icon_only: true), class: 'icon-only icon-bookmarked-project') if bookmarked_project_ids.include?(project.id)
       if project.description.present?
         s << content_tag('div', textilizable(project.short_description, :project => project), :class => 'wiki description')
       end

before change after change

Files

screenshot 2025-06-03 16.08.00.png (74.5 KB) screenshot 2025-06-03 16.08.00.png Mizuki ISHIKAWA, 2025-06-04 03:05
screenshot 2025-06-03 16.08.14.png (74.5 KB) screenshot 2025-06-03 16.08.14.png Mizuki ISHIKAWA, 2025-06-04 03:05
index-before-fix.png (47.9 KB) index-before-fix.png Katsuya HIDAKA, 2025-06-04 08:47
index-trunk.png (48 KB) index-trunk.png Katsuya HIDAKA, 2025-06-04 08:47
list-trunk.png (54.2 KB) list-trunk.png Katsuya HIDAKA, 2025-06-04 08:47
index-after-fix.png (47.9 KB) index-after-fix.png Katsuya HIDAKA, 2025-06-04 08:47
list-after-fix.png (54.2 KB) list-after-fix.png Katsuya HIDAKA, 2025-06-04 08:47
list-before-fix.png (54.2 KB) list-before-fix.png Katsuya HIDAKA, 2025-06-04 08:47

Related issues

Related to Redmine - Feature #29214: Button to copy `pre` code block content to the clipboardClosedGo MAEDA

Actions
Related to Redmine - Feature #42603: Enable commonmark alert extensionClosedMarius BĂLTEANU

Actions
Actions #1

Updated by Go MAEDA 2 days ago

  • Related to Feature #29214: Button to copy `pre` code block content to the clipboard added
Actions #2

Updated by Katsuya HIDAKA 2 days ago

I tested with the built-in themes and several third-party themes, and confirmed that the copy button is displayed as expected. I also think that this approach is appropriate as it improves consistency with the list view implementation.

However, I noticed one issue: after applying this patch, the left margin styling for the project icon and bookmark icon in the project board view is no longer applied.

Here is the fix for this issue.

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index e4d7f31b1..7164d3071 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -925,6 +925,12 @@ ul.projects div.description ul li {list-style-type:initial;}
   background-image: none;
   padding-left: 0;
 }
+#projects-index .icon-bookmarked-project svg,
+#projects-index .my-project svg,
+table.projects .icon-bookmarked-project svg,
+table.projects .my-project svg {
+  margin-left: 4px;
+}
 #projects-index ul.projects div.root .icon-bookmarked-project svg, #projects-index ul.projects div.root .my-project svg {
   stroke-width: 2;
   margin-bottom: 10px;
@@ -936,9 +942,6 @@ ul.projects div.description ul li {list-style-type:initial;}
   background-image: none;
   padding-left: 0;
 }
-#projects-index a.project ~ svg, table.projects tr.project td.name svg {
-  margin-left: 4px;
-}
 #projects-index div.wiki p {
   margin-top: 0px;
 }

Before the fix:

After the fix:

Trunk (before the changes from this issue are applied):

Applying this fix does not affect the project list view.

Before the fix:

After the fix:

Trunk (before the changes from this issue are applied):

Actions #3

Updated by Katsuya HIDAKA 2 days ago

The patch in comment #note-2 had several points that could be improved. Here is the improved version of the patch.

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index e4d7f31b1..12db44b56 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -925,6 +925,10 @@ ul.projects div.description ul li {list-style-type:initial;}
   background-image: none;
   padding-left: 0;
 }
+#projects-index ul.projects .icon-bookmarked-project svg,
+#projects-index ul.projects .my-project svg {
+  margin-left: 4px;
+}
 #projects-index ul.projects div.root .icon-bookmarked-project svg, #projects-index ul.projects div.root .my-project svg {
   stroke-width: 2;
   margin-bottom: 10px;
@@ -936,13 +940,15 @@ ul.projects div.description ul li {list-style-type:initial;}
   background-image: none;
   padding-left: 0;
 }
-#projects-index a.project ~ svg, table.projects tr.project td.name svg {
-  margin-left: 4px;
-}
 #projects-index div.wiki p {
   margin-top: 0px;
 }

+table.projects td.name .icon-bookmarked-project svg,
+table.projects td.name .my-project svg {
+  margin-left: 4px;
+}
+
 #notified-projects>ul, #tracker_project_ids>ul, #custom_field_project_ids>ul {max-height:250px; overflow-y:auto;}

 ul.subprojects {list-style: none; display: inline-block; padding: 0; margin: 0;}

The above patch includes the following improvements from the patch in #note-2:

  • The selectors for .icon-bookmarked-project and .my-project have been made more specific, making the intention clear and improving code readability.
  • Since the project board view and list view have different styles, the selectors are separated to clarify the context, improving readability and maintainability.
Actions #4

Updated by Go MAEDA 1 day ago

  • Target version set to 6.1.0
Actions #5

Updated by Go MAEDA 1 day ago

Actions #6

Updated by Go MAEDA about 23 hours ago

  • Subject changed from Unnecessary margin under icons in projects page (board) to Unnecessary margin below icons on the board-style projects page
  • Status changed from New to Closed
  • Assignee set to Go MAEDA
  • Resolution set to Fixed

Committed the fix in r23820. Thank you for your contribution.

Actions

Also available in: Atom PDF