Vote #80313
完了Constrain sidebar width on different resolutions
0%
説明
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.
journals
--------------------------------------------------------------------------------
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 attachment:responsive-multiresolution-sidebar.patch is wider than the current default theme and too wide for me.
<pre><code class="diff">
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; }
</code></pre>
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
Committed the patch with slight changes. Thank you for improving Redmine.
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
related_issues
relates,Closed,30435,Replace float rules with flexbox for content and sidebar block
relates,Closed,32520,Issues activity gnats calendar tabs - too much real estate in high hand panel