Patch #32037
closed
Constrain sidebar width on different resolutions
Added by Anonymous about 5 years ago.
Updated about 5 years ago.
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 to Patch #30435: Replace float rules with flexbox for content and sidebar block added
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; }
- Target version set to Candidate for next major release
- 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.
- Related to Feature #32520: Issues activity gnats calendar tabs - too much real estate in high hand panel added
Also available in: Atom
PDF