New Homepage design

[Anticimex]

@cimba007 @hek fine by me. I take issue with a width that forces line breaking of menu entries when not required by physical limitations. And the old design did. Hence my complaint that it was too narrow for comfort.
And since I presume you use a mac (with its ridiculous window manager) let's meet in the middle, widening the design enough to accommodate reasonable long article titles for the left hand menu without line breaking while permitting people that for various reasons don't want or can't tilt the display nor resize the browser.

[cimba007]

I like your idea ;-) and I totally agree that breaking lines when there is enough space is not a good design.

And .. I would never ever use a mac ;-)

And you are right .. I can't tilt my screen and I am not willing to change my browser size for one tab out of ~25.

Even if it might be obvious .. if the title is too long to fit the layout .. maybe choose a shorter, more concisely title ;-)

[hek]

A few % side-padding here on the forum wouldn't hurt.

I'll see what I can do with the forum menu with a simple css hack (as I would like to keep away from doing my own theme).

[Anticimex]

@cimba007 as you can see from my picture, judging by your standards "advanced build options" would then be a too long title, and if that is the case, we would need to provide an on screen legend to explain all the abbreviations we would have to use just to keep the menu "sane". And then we are into really bad page design ;)

[hek]

Regarding menu.. Is this better?

[Anticimex]

@hek not sure, menu for me is the main site vertical list of topics. The forum layout I don't really mind as I can zoom the page to make it more appealing to me even if you revert back to the old layout. But in the main site, zooming would not help as the contents was forced to adapt to the layout.

[cimba007]

Yeah .. "advanced build options" should in every case fit there :dancer:

@hek: If this is your "real" screen size I can totally understand why this is no issue for you at all :D
It looks a "little bit" packed but still much more accessible then splitting. I want to search? Top right corner .. I want to read the most recent message? Top right .. wanne check download area? Guess what ..

[hek]

I could add some padding between the two lower sections.. just a sec, lets try it.

[hek]

5% padding added (not sure how much it helps on your screen though) and moved menu to the right.

[cimba007]

I would be more happy with 10-15% but I think I can live with it. Would be even more awesome if this could be set as a "preference" on a per user basis .. but this would be too much to ask :)

PS: Can u tell me where you have added the padding? (in the css file?!)

[hek]

10% och each side is way too much on smaller screens.

You'll have to greasemonkey in your padding changes on the #content div.

Or simply remove the width: 100% !important on it to get the old behaviour back (but that also affects the menu... which might not a problem for your screen size).

[cimba007]

@hek said:

#content div

Yep .. I am just heading for greasemonkey

[cimba007]

This is just "balm for the eyes" .. I can absolutelty life with tinkering with greasemoneky ;-)

[hek]

Haha, have fun redesigning sites ;)

[Anticimex]

@cimba007 @hek and it was much rejoicing

[cimba007]

Sorry for stirring up so you guys at this late hour .. but .. I only strive to improve mysensors (with my stupid comments and ideas :D) as I really like the library, the controller, the site ;-)

[hek]

No problem, feedback is always appreciated!

[cimba007]

Well .. overwriting an !important doesn't seem to be this easy .. :D

The best I could come up with:

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://forum.mysensors.org/*
// @grant        none
// ==/UserScript==

function addNewStyle(newStyle) {
    var styleElement = document.getElementById('styles_js');
    if (!styleElement) {
        styleElement = document.createElement('style');
        styleElement.type = 'text/css';
        styleElement.id = 'styles_js';
        document.getElementsByTagName('head')[0].appendChild(styleElement);
    }
    styleElement.appendChild(document.createTextNode(newStyle));
}

(function() {
    'use strict';
    // Your code here...
    addNewStyle('.container { width: 55% !important;}');
    //$(".container").removeAttr("width");
})();