Defect #42818
closedUnnecessary margin below icons on the board-style projects page
0%
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
Related issues
Updated by Go MAEDA 2 days ago
- Related to Feature #29214: Button to copy `pre` code block content to the clipboard added
Updated by Katsuya HIDAKA 2 days ago
- File index-trunk.png index-trunk.png added
- File index-before-fix.png index-before-fix.png added
- File list-trunk.png list-trunk.png added
- File index-after-fix.png index-after-fix.png added
- File list-after-fix.png list-after-fix.png added
- File list-before-fix.png list-before-fix.png added
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):
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.
Updated by Go MAEDA 1 day ago
- Related to Feature #42603: Enable commonmark alert extension added
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.