Patch #32037

Constrain sidebar width on different resolutions

Added by Antonio McDeal 10 days ago. Updated 4 days ago.

Status:ClosedStart date:
Priority:NormalDue date:
Assignee:Go MAEDA% Done:

0%

Category:UI
Target version:4.1.0

Description

Currently sidebar's width is set to 22% which is not properly constrained, so I will become really huge on wider displays even though there is no need. I made a patch with multi-resolution rules to set sidebar's width depending on different resolution widths, but it's not perfect yet.
If you have any ideas on which resolutions to add or how else to constrain it properly, please add your ideas or versions of your patch.

responsive-multiresolution-sidebar.patch Magnifier (1.12 KB) Antonio McDeal, 2019-09-08 18:01


Related issues

Related to Redmine - Patch #30435: Replace float rules with flexbox for content and sidebar ... Closed

Associated revisions

Revision 18471
Added by Go MAEDA 4 days ago

Constrain sidebar width on different resolutions (#32037).

Patch by Antonio McDeal.

History

#1 Updated by Go MAEDA 10 days ago

  • Related to Patch #30435: Replace float rules with flexbox for content and sidebar block added

#2 Updated by Go MAEDA 10 days ago

I would like to add widths for 960px and 1152px as follows. What do you think? I usually use the web browser around 1024px to 1100px wide. The sidebar width set by responsive-multiresolution-sidebar.patch is wider than the current default theme and too wide for me.

diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index d5f1762e3..0544322ac 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -85,7 +85,14 @@ div[id^="wrapper"] { min-height: inherit; }

 #main {flex-grow: 2; display: flex; flex-direction: row-reverse;}

-#sidebar{ flex-shrink: 0; width: 22%; padding-left: 20px; background: #EEEEEE; border-left: 1px solid #ddd}
+#sidebar{ flex-shrink: 0; padding-left: 20px; background: #EEEEEE; border-left: 1px solid #ddd}
+@media screen and (min-width: 0px) and (max-width: 960px) {#sidebar{width:200px;}}
+@media screen and (min-width: 960px) and (max-width: 1152px) {#sidebar{width:220px;}}
+@media screen and (min-width: 1152px) and (max-width: 1280px) {#sidebar{width:240px;}}
+@media screen and (min-width: 1280px) and (max-width: 1600px) {#sidebar{width:280px;}}
+@media screen and (min-width: 1600px) and (max-width: 1920px) {#sidebar{width:320px;}}
+@media screen and (min-width: 1920px) and (max-width: 2560px) {#sidebar{width:360px;}}
+@media screen and (min-width: 2560px) {#sidebar{width:380px;}}
 #sidebar h3{ font-size: 14px; margin-top:14px; color: #666;  }
 #sidebar hr{ width: 100%; margin: 0 auto; height: 1px; background: #ccc; border: 0; }
 * html #sidebar hr{ width: 95%; position: relative; left: -6px; color: #ccc; }

#3 Updated by Go MAEDA 9 days ago

  • Target version set to Candidate for next major release

#4 Updated by Go MAEDA 4 days ago

  • Status changed from New to Closed
  • Assignee set to Go MAEDA
  • Target version changed from Candidate for next major release to 4.1.0

Committed the patch with slight changes. Thank you for improving Redmine.

Also available in: Atom PDF