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