Project

General

Profile

Actions

Patch #32037

closed

Constrain sidebar width on different resolutions

Added by Anonymous over 4 years ago. Updated over 4 years ago.

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

0%

Estimated time:

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.


Files


Related issues

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

Actions
Related to Redmine - Feature #32520: Issues activity gnats calendar tabs - too much real estate in high hand panelClosed

Actions
Actions #1

Updated by Go MAEDA over 4 years ago

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

Updated by Go MAEDA over 4 years 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; }
Actions #3

Updated by Go MAEDA over 4 years ago

  • Target version set to Candidate for next major release
Actions #4

Updated by Go MAEDA over 4 years 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.

Actions #5

Updated by Marius BÄ‚LTEANU over 4 years ago

  • Related to Feature #32520: Issues activity gnats calendar tabs - too much real estate in high hand panel added
Actions

Also available in: Atom PDF