Ivan Smirnov's redesign #51

aG0aep6G · 2016-01-12T20:09:26Z

Here we go.

Known issues:

The search options get too long. Not sure what to do about it.
forum.dlang.org switches to a smaller font-size in small windows, dlang.org doesn't. We should unify that, I guess.

This depends on the dlang.org changes, of course. I've added some changes to forum-template.dd there.

andralex · 2016-01-12T20:22:27Z

Thanks! @CyberShadow, destroy!!!

CyberShadow · 2016-01-13T01:52:49Z

web/static/css/dfeed.css

-body.forum #cssmenu ul ul a,
-body.forum #cssmenu ul ul h7 {
-	font-size: 100%;
+@media only screen and (max-width: 66em) { /* Narrow layout stage 1 */


Nit, please move this to the Responsive overrides section

CyberShadow · 2016-01-13T01:54:54Z

I'm going to launch this on beta.forum.dlang.org for at least a while so we can test/compare.

CyberShadow · 2016-01-13T06:02:08Z

Posted thread: http://forum.dlang.org/post/odbtivxmrggaywcbebqx@forum.dlang.org

CyberShadow · 2016-01-13T06:07:16Z

Let's make the left navigation side panel narrower (for forum.dlang.org only). Horizontal space can be at a premium in some view modes.
"Toggle navigation" has a · after it, but not the other toolbar items.
Quoted text seems to be a shade too dim to me.
The responsive side menu looks off
"Toggle navigation" should hide the side menu
The side menu is turned into an expandable horizontal bar on small screens. There has to be a better way which doesn't waste vertical space as much. "Toggle navigation" should also hide it, but maybe it could be moved into the red bar or something.
Height calculation for the vertical-split and horizontal-split mode seems to be off. (If you want to replace the unholy mess that is JS height calculations with something like flexbox, please be my guest...)
The new paddings on the sides look nice but are a decrease in usability for small-screen devices, as they eat into valuable srceen space.

Let me know where you want to stop and I could try taking over from there.

The search options get too long. Not sure what to do about it.

You can control the width of the dropdown and its items separately by styling the <option> elements' width. Alternatively we can just ditch the " group" postfix in the search dropdown, which should make all existing items fit. There's also "Current thread" which doesn't currently fit.

`overflow: hidden` doesn't work in Chrome. Also limit the total width so that at most 3 columns happen. Firefox needs would split into more columns otherwise.

aG0aep6G · 2016-01-13T23:39:57Z

Let's make the left navigation side panel narrower (for forum.dlang.org only). Horizontal space can be at a premium in some view modes.

Done. Could go even narrower when it's ok that "About this forum" breaks.

"Toggle navigation" has a · after it, but not the other toolbar items.

Removed the one after "Toggle navigation".

Quoted text seems to be a shade too dim to me.

#888 then? #777? Does this apply to other grey text, and on the main site, too?

The responsive side menu looks off

Ouch. Fixed. Also in the dlang.org PR.

"Toggle navigation" should hide the side menu

Done.

The side menu is turned into an expandable horizontal bar on small screens. There has to be a better way which doesn't waste vertical space as much. "Toggle navigation" should also hide it, but maybe it could be moved into the red bar or something.

This applies to the main site as well, doesn't it? Anyway, I'm not particularly fond of that solution. If you can think of something better, go for it. "Toggle navigation" hides it now via the point above.

Height calculation for the vertical-split and horizontal-split mode seems to be off. (If you want to replace the unholy mess that is JS height calculations with something like flexbox, please be my guest...)

Fixed.

The new paddings on the sides look nice but are a decrease in usability for small-screen devices, as they eat into valuable srceen space.

Fixed by pulling #forum-content over the padding.

You can control the width of the dropdown and its items separately by styling the elements' width.

Can't get this to work. But I think I've found a nice way to fix this: add padding-right (and text-overflow: ellipsis) to the select. Added to the main site PR: dlang/dlang.org@e013cf7

Looks like this in Firefox:

And like this in Chrome (doesn't seem to support text-overflow there):

CyberShadow · 2016-01-14T02:34:25Z

#888 then? #777?

#777 looks good to me. (Incidentally it's also what GitHub uses.)

Does this apply to other grey text, and on the main site, too?

Where does it occur on the main site?

Fixed by pulling #forum-content over the padding.

Can we move that up to the 50em query?

This applies to the main site as well, doesn't it? Anyway, I'm not particularly fond of that solution. If you can think of something better, go for it. "Toggle navigation" hides it now via the point above.

Well, I hacked this together, it seems to work nicely:

/* Move sub-navigation into title bar */
@media only screen and (max-width: 54em) {
    .subnav.expand-container:not(.open) {
        padding: 0;
    }

    .subnav.expand-container > h2 {
        position: absolute;
        left: 0;
        top: -2em;
        width: 100%;
        border: 0;
        color: white;
        background: none;
        text-align: center;
    }
}

CyberShadow · 2016-01-14T02:41:55Z

This applies to the main site as well, doesn't it?

I was mostly concerned with the forum's full-screen view modes.

Generally, my aim is to have the horizontal-split view mode be an usable newsreader on phone screens, so that you could scroll the post list with your left thumb and scroll messages with your right. This implies making the most of usable screen space.

BTW, there's some feedback on the forum thread if you haven't looked yet. Mostly users seem to be lamenting the fixed width (maybe the narrower navigation improved that a bit).

There are also some complaints about the font. Maybe we should go back to some standard sans-serif after all.

CyberShadow · 2016-01-14T02:48:41Z

Could go even narrower when it's ok that "About this forum" breaks.

BTW, that link is redundant - there's another link in the footer, plus the "Help" link in the toolbar.

aG0aep6G · 2016-01-14T17:41:38Z

On 14.01.2016 03:34, Vladimir Panteleev wrote:

Where does it occur on the main site?

#tools, #copyright, the text below the download button, code comments

Fixed by pulling #forum-content over the padding.
Can we move that up to the 50em query?

Done.

Well, I hacked this together, it seems to work nicely:

/* Move sub-navigation into title bar */
@media only screen and (max-width: 54em) {
  .subnav.expand-container:not(.open) {
      padding: 0;
  }

  .subnav.expand-container > h2 {
      position: absolute;
      left: 0;
      top: -2em;
      width: 100%;
      border: 0;
      color: white;
      background: none;
      text-align: center;
  }
}

That moves the subnav toggle in front of the logo and the main menu
button, which is probably easy to fix. But it also breaks when the main
menu is expanded. The subnav toggle ends up in front of the search input.

CyberShadow · 2016-01-15T02:20:18Z

That moves the subnav toggle in front of the logo and the main menu button, which is probably easy to fix. But it also breaks when the main menu is expanded. The subnav toggle ends up in front of the search input.

Oh, right.

Well, I guess there's always JS...

CyberShadow · 2016-01-15T02:28:06Z

#tools, #copyright, the text below the download button, code comments

Hmm, those look fine. Not sure why, possibly because they're not really "content", or possibly because of the font.

CyberShadow · 2016-01-15T06:05:04Z

There's also "Current thread" which doesn't currently fit.

Well that was easy enough to fix, just changed it to "This thread"

CyberShadow · 2016-01-15T13:37:41Z

Height calculation for the vertical-split and horizontal-split mode seems to be off.

This is still not completely fixed. Resizing the window makes the columns have differing widths. More here: http://forum.dlang.org/post/bgghejlldxljnsckpows@forum.dlang.org

aG0aep6G · 2016-01-15T20:09:52Z

Added two commits:

really fix height calculations for split view modes
slightly darker gray for quotes and signatures (#999 -> #777)

aG0aep6G · 2016-01-15T20:14:02Z

... and another one to fix up the margin-left I messed up

CyberShadow · 2016-01-16T07:25:32Z

really fix height calculations for split view modes

Sorry, this still seems wrong. There should be no free space at the bottom of the page in the horizontal-split view modes, and the vertical mode now doesn't fit in the window.

I don't want to burn you out, so as I said above let me know where you want to draw the line and I'll take it from there.

aG0aep6G · 2016-01-16T13:49:58Z

Sorry, this still seems wrong. There should be no free space at the bottom of the page in the horizontal-split view modes, and the vertical mode now doesn't fit in the window.

Hm? Here are screenshots of how things looks for me. The empty spaces below #copyright and above #footernav are padding/margin and can be changed easily, of course.

This depends on the latest changes to dlang.org. The submodule should be at 387922f9176dbd56e5a96b4adadab9fa5a4d676e "give the subnav a left border too".

In style.css the font-size is set for body now, not #content.

aG0aep6G · 2016-01-16T14:07:02Z

Added a commit to fix the font-size in narrow windows.

CyberShadow · 2016-01-16T14:29:20Z

Yes, my apologies, there was a bug in my update script. The correct version is live now.

CyberShadow · 2016-01-17T14:06:47Z

These lines in dlang.org's style.css cause the page to scroll a bit to the right beyond its edge. It also enables horizontal "scrolling" on iPhones, when the page should only scroll vertically.

I don't understand what these lines do, but I don't see a difference after removing them aside from fixing the above annoyance.

CyberShadow · 2016-01-17T14:07:11Z

BTW, pinged you in #52 (comment) in case you have those notifications off.

CyberShadow · 2016-01-17T14:14:46Z

Fixed by pulling #forum-content over the padding.

Why can't we just do this?

diff --git a/web/static/css/dfeed.css b/web/static/css/dfeed.css
index 92ec2c0..ff5ae15 100644
--- a/web/static/css/dfeed.css
+++ b/web/static/css/dfeed.css
@@ -1143,19 +1143,12 @@ body {
    }

    body div#content {
-       padding-left: 0;
-       padding-right: 0;
-       padding-bottom: 0;
        border: 0;
    }

-   /* counter default padding */
-   #content {
-       overflow: visible;
-   }
-   #forum-content {
-       margin-left: -1.33em;
-       margin-right: -1.33em;
+   body > .container {
+       padding-left: 0;
+       padding-right: 0;
    }

    .forum-form,

Negative margins always made me nervous.

dfeed.css already adds margins to where they have to be (i.e. top-level stuff outside tables), so we'd just need to do the same for the subnav etc.

aG0aep6G · 2016-01-17T16:00:41Z

These lines in dlang.org's style.css cause the page to scroll a bit to the right beyond its edge. It also enables horizontal "scrolling" on iPhones, when the page should only scroll vertically.

I don't understand what these lines do, but I don't see a difference after removing them aside from fixing the above annoyance.

The negative margin pulls the box over .container's padding. The padding restores the padding, but inside the .subnav box. The result is (supposed to be) that the .subnav box spans the whole width of the window.

Removing those two lines does not fix the horizontal scrolling for me. Rather, I identify these two lines in dfeed.css as the trouble makers:

@media only screen and (max-width: 50em) {
...
    #forum-content {
        margin-left: -1.33em;
        margin-right: -1.33em;
    }
...
}

I've overlooked those when moving the font-size reduction from #content to body. Changing the values to -1 fixes the issue for me. Added a commit to do that.

BTW, pinged you in #52 (comment) in case you have those notifications off.

I got the notice. Using padding-left instead of word-spacing is fine with me. Added a commit to the dlang.org PR, and removed the tip class from #forum-tools-left here.

Why can't we just do this?
[...]

Yeah, that works, too. Need to remove .subnav's negative margin then, of course. And maybe add padding to #tools. Not sure if it's simpler then.

aG0aep6G · 2016-01-17T21:43:25Z

Alright, new site is online. Anything left to do here? I guess we haven't figured out a solution for the horizontal split view.

CyberShadow · 2016-01-18T09:04:36Z

I guess we haven't figured out a solution for the horizontal split view.

Yep, I guess that's the big one.

Possible options:

Just make the page wider in horizonal-split mode. Ugly as the design will be jumpy.
Move forum navigation into the main navigation (i.e. don't use subnav at all). A pity because it looks just fine in the other view modes.
Perhaps it would be possible to force the subnav into responsive mode for horizontal-split (i.e. present it as an expandable bar at the top)?
Remove the "About this forum" link, make the sidebar even narrower, and leave it at that. "Toggle navigation" should probably not hide the main navigation though, or it should be a separate toggle somehow.

I would also like to remove the subnav bar on small screens, but that's minor.

CyberShadow · 2016-01-18T09:21:52Z

OK, I'm going to go ahead and do this:

Implement this option for a start:

Remove the "About this forum" link, make the sidebar even narrower, and leave it at that.
Deploy this and the other queued changes (in the beta branch) on forum.dlang.org
Continue collecting feedback and incremental improvements.

CyberShadow · 2016-01-18T10:29:07Z

Done: http://forum.dlang.org/post/bmjujolcjxcabshiwueo@forum.dlang.org

CyberShadow · 2016-01-18T10:48:55Z

Yeah, that works, too. Need to remove .subnav's negative margin then, of course. And maybe add padding to #tools. Not sure if it's simpler then.

The negative margins were doing something weird which caused horizontal scrollbars inside the dlang.org iframes, as well as a part of the avatar being cut off, so I went ahead and replaced them as discussed. dec4326

aG0aep6G · 2016-01-18T13:19:59Z

Possible options:

Just make the page wider in horizonal-split mode. Ugly as the design will be jumpy.

Yeah, it's not beautiful, but I think this would be acceptable.

Move forum navigation into the main navigation (i.e. don't use subnav at all). A pity because it looks just fine in the other view modes.

I don't like this one.

Perhaps it would be possible to force the subnav into responsive mode for horizontal-split (i.e. present it as an expandable bar at the top)?

That would possibly be the nicest option. Unfortunately, this means duplicating quite some CSS code. Also it would then be nice if the subnav box stretched the whole width of the window. That's something I haven't planned for, and making it so would mean revisiting the .container thing. In all, doable but a bit of work.

I would also like to remove the subnav bar on small screens, but that's minor.

The subnav can be absolutely positioned over the main menu bar. (Can just remove .container's relative positioning; it's not needed without a sidebar.) But then it's an overlay which it isn't in all the other layouts, and it overlays the main menu when that is expanded. I feel like there must be a better solution.

Done: http://forum.dlang.org/post/bmjujolcjxcabshiwueo@forum.dlang.org

Sweet :)

The negative margins were doing something weird which caused horizontal scrollbars inside the dlang.org iframes, as well as a part of the avatar being cut off,

Not sweet :(

so I went ahead and replaced them as discussed. dec4326

Ok, sure. I love me some negative margins, but this makes sense.

CyberShadow · 2016-01-18T13:34:30Z

But then it's an overlay which it isn't in all the other layouts, and

Does this pose a problem?

and it overlays the main menu when that is expanded.

Yeah, if we do this then the link should be hidden when the main menu is expanded.

I think it's doable with sufficient JS...

Anyway, just waiting for launch feedback for now.

CyberShadow · 2016-04-02T07:15:10Z

Sigh, there is still some wasted space at the bottom on small screens...

aG0aep6G mentioned this pull request Jan 12, 2016

Ivan smirnov's redesign (2nd try) dlang/dlang.org#1190

Merged

CyberShadow reviewed Jan 13, 2016
View reviewed changes

Ivan Smirnov's redesign

c6f3221

aG0aep6G force-pushed the Ivan-Smirnov's-redesign branch from 04f536d to c6f3221 Compare January 13, 2016 20:42

aG0aep6G added 9 commits January 13, 2016 22:01

move responsivity stuff to dedicated section

ced8005

make the left navigation side panel narrower

d27605b

remove middot from "Toggle navigation"

eab75eb

avoid column breaks properly

c395623

`overflow: hidden` doesn't work in Chrome. Also limit the total width so that at most 3 columns happen. Firefox needs would split into more columns otherwise.

fix #content's margin-left in narrow layout

d25bed3

let "Toggle navigation" hide the side menu, too

c194230

fix height calculations for split view modes

918aa5f

counter default left-/right-padding in very narrow view mode

038bdce

update dlang.org submodule

dddb115

move un-padding of #forum-content to 50em layout

dccdb84

update dlang.org submodule

4d8e994

aG0aep6G added 2 commits January 15, 2016 21:08

really fix height calculations for split view modes

b2edadc

slightly darker gray for quotes and signatures (#999 -> #777)

b0abe5c

aG0aep6G force-pushed the Ivan-Smirnov's-redesign branch from 41ec8d7 to b0abe5c Compare January 15, 2016 20:09

fix #content's margin-left

b2efa0c

fix font-size in narrow windows

1807f73

In style.css the font-size is set for body now, not #content.

make alternative column color lighter

a420d6f

aG0aep6G added 2 commits January 17, 2016 16:59

fix amount of #forum-content's negative margin

6af8364

remove tip class from #forum-tools-left

f49d45b

CyberShadow merged commit f49d45b into CyberShadow:master Jan 18, 2016

aG0aep6G deleted the Ivan-Smirnov's-redesign branch January 18, 2016 11:51

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Ivan Smirnov's redesign #51

Ivan Smirnov's redesign #51

aG0aep6G commented Jan 12, 2016

andralex commented Jan 12, 2016

CyberShadow Jan 13, 2016

CyberShadow commented Jan 13, 2016

CyberShadow commented Jan 13, 2016

CyberShadow commented Jan 13, 2016

aG0aep6G commented Jan 13, 2016

CyberShadow commented Jan 14, 2016

CyberShadow commented Jan 14, 2016

CyberShadow commented Jan 14, 2016

aG0aep6G commented Jan 14, 2016

CyberShadow commented Jan 15, 2016

CyberShadow commented Jan 15, 2016

CyberShadow commented Jan 15, 2016

CyberShadow commented Jan 15, 2016

aG0aep6G commented Jan 15, 2016

aG0aep6G commented Jan 15, 2016

CyberShadow commented Jan 16, 2016

aG0aep6G commented Jan 16, 2016

aG0aep6G commented Jan 16, 2016

CyberShadow commented Jan 16, 2016

CyberShadow commented Jan 17, 2016

CyberShadow commented Jan 17, 2016

CyberShadow commented Jan 17, 2016

aG0aep6G commented Jan 17, 2016

aG0aep6G commented Jan 17, 2016

CyberShadow commented Jan 18, 2016

CyberShadow commented Jan 18, 2016

CyberShadow commented Jan 18, 2016

CyberShadow commented Jan 18, 2016

aG0aep6G commented Jan 18, 2016

CyberShadow commented Jan 18, 2016

CyberShadow commented Apr 2, 2016

Ivan Smirnov's redesign #51

Ivan Smirnov's redesign #51

Conversation

aG0aep6G commented Jan 12, 2016

andralex commented Jan 12, 2016

CyberShadow Jan 13, 2016

Choose a reason for hiding this comment

CyberShadow commented Jan 13, 2016

CyberShadow commented Jan 13, 2016

CyberShadow commented Jan 13, 2016

aG0aep6G commented Jan 13, 2016

CyberShadow commented Jan 14, 2016

CyberShadow commented Jan 14, 2016

CyberShadow commented Jan 14, 2016

aG0aep6G commented Jan 14, 2016

CyberShadow commented Jan 15, 2016

CyberShadow commented Jan 15, 2016

CyberShadow commented Jan 15, 2016

CyberShadow commented Jan 15, 2016

aG0aep6G commented Jan 15, 2016

aG0aep6G commented Jan 15, 2016

CyberShadow commented Jan 16, 2016

aG0aep6G commented Jan 16, 2016

aG0aep6G commented Jan 16, 2016

CyberShadow commented Jan 16, 2016

CyberShadow commented Jan 17, 2016

CyberShadow commented Jan 17, 2016

CyberShadow commented Jan 17, 2016

aG0aep6G commented Jan 17, 2016

aG0aep6G commented Jan 17, 2016

CyberShadow commented Jan 18, 2016

CyberShadow commented Jan 18, 2016

CyberShadow commented Jan 18, 2016

CyberShadow commented Jan 18, 2016

aG0aep6G commented Jan 18, 2016

CyberShadow commented Jan 18, 2016

CyberShadow commented Apr 2, 2016