https://www.redmine.org/https://www.redmine.org/favicon.ico?16793021292019-01-16T22:05:31ZRedmineRedmine - Patch #30451: Move #main-menu outside of the #header to follow directly after the #header insetadhttps://www.redmine.org/issues/30451?journal_id=894472019-01-16T22:05:31ZMarius BÄ‚LTEANU
<ul><li><strong>Related to</strong> <i><a class="issue tracker-3 status-5 priority-4 priority-default closed" href="/issues/30231">Patch #30231</a>: Operation: "Unwraping The Mine" or conerns about how elements are wrapped</i> added</li></ul> Redmine - Patch #30451: Move #main-menu outside of the #header to follow directly after the #header insetadhttps://www.redmine.org/issues/30451?journal_id=894672019-01-17T10:03:27ZBernhard Rohloff
<ul><li><strong>File</strong> <a href="/attachments/22243">layout_stack_proposal.png</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/22243/layout_stack_proposal.png">layout_stack_proposal.png</a> added</li></ul><p>In my opinion it's a "historical" chance to bring a bit more basic structure into the core of Redmine. For this reason I would like to suggest to have some conceptual discussion and planning on the topic. What do you think about including the "main menu" div inside the main container as it's more related to the content and sidebar than to the header and footer section? This feels more logical to me.</p>
<p><img src="https://www.redmine.org/attachments/download/22243/layout_stack_proposal.png" alt="" /></p> Redmine - Patch #30451: Move #main-menu outside of the #header to follow directly after the #header insetadhttps://www.redmine.org/issues/30451?journal_id=894702019-01-17T12:39:04ZAnonymous
<ul><li><strong>File</strong> <a href="/attachments/22246">concept.html</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/22246/concept.html">concept.html</a> added</li></ul><p>It seems like a challenge to form the layout of the flexbox as:<br />column 1 to be strictly just the main-menu with full width<br />column 2 to be two rows of <em>content</em> and <em>sidebar</em> blocks</p>
<p>There will be some major complex changes to the #main block if we will decide to put #main-menu into the #main block, because now it will be containing 3 unique tiles.</p>
<p>Currently, with sticky footer implemented, I stumbled upon the issue that <em>column 2</em> of the flexbox ends up far from the <em>column 1</em> for some reason, but only until you will insert some Lorem ipsum. XD</p>
<p>If somebody can suggest a fix, then I will have nothing against moving the #main-menu block even into the #main block as well.</p>
<p>I'm attaching the HTML concept to take a look :)</p>
<p>Also, notice how I used semantic blocks and how we could get rid of many class definitions in html tags, since we could just refer to elements by their tags. :)</p> Redmine - Patch #30451: Move #main-menu outside of the #header to follow directly after the #header insetadhttps://www.redmine.org/issues/30451?journal_id=894832019-01-18T05:40:03ZBernhard Rohloff
<ul></ul><p>Yes, unfortunately you are right. This doesn't seem to be achievable at the moment. I had a hard time yesterday getting your concept fixed and succeeded... well... on Firefox, Chrome was a f***in b****. It seems like flexbox isn't that flexible when it comes to mixed layouts. So right now it seems to be the best leaving the structure as it is and when CSS grid becomes a common standard (in a century or so) we can overthink it again.</p> Redmine - Patch #30451: Move #main-menu outside of the #header to follow directly after the #header insetadhttps://www.redmine.org/issues/30451?journal_id=894992019-01-18T14:47:40ZAnonymous
<ul><li><strong>File</strong> <a href="/attachments/22259">concept-menu-between-main&header.html</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/22259/concept-menu-between-main&header.html">concept-menu-between-main&header.html</a> added</li></ul><p>Yep, that's why in the subject of this ticket I propose something like this (see the attachment), as a temporary solution until we will find how to move #main-menu into the #main block without additional wrappers if possible.<br />But both concepts will definitely work if a theme designer to choose to set #main-menu sticky (position: sticky; top: 0;), it's just that, keeping #main-menu in the header is imho not an option, since in case of sticky design, it won't be able to push beyond the #header container, and the method with moving #main-menu as a first node of the #main isn't sufficient (for now, since flexbox method seems broken) if we re to create a sticky footer patch for Remdine later, which I think Redmine also could use, and even if not, IMHO we still should think about other people who create themes for Redmine and could definitely have it easier to set footer sticky :)</p> Redmine - Patch #30451: Move #main-menu outside of the #header to follow directly after the #header insetadhttps://www.redmine.org/issues/30451?journal_id=895252019-01-19T16:40:16ZAnonymous
<ul><li><strong>File</strong> <a href="/attachments/22272">concept-gridbox-version.html</a> <a class="icon-only icon-download" title="Download" href="/attachments/download/22272/concept-gridbox-version.html">concept-gridbox-version.html</a> added</li></ul><p>Bernhard, I was able to get concept for your proposal fixed by using grid box instead, I'm thinking if gridbox could actually be something better now, rule definitions for it are also more straight forward imho :)</p> Redmine - Patch #30451: Move #main-menu outside of the #header to follow directly after the #header insetadhttps://www.redmine.org/issues/30451?journal_id=896042019-01-23T22:23:57ZAnonymous
<ul></ul><p>Anyhow, I get both flexbox and gridbox version to be displayed incorrectly in IE11, so I will be trying to find out why, I have a feeling it's just the problem with semantic tag names. I created glitch.com container, so anyone can anonymously edit to propose whatever changes.<br /><a class="external" href="https://glitch.com/edit/#!/join/8ea142cb-8340-4278-a149-fe3e24fa5b2e">https://glitch.com/edit/#!/join/8ea142cb-8340-4278-a149-fe3e24fa5b2e</a></p>
<p>For preview: <a class="external" href="https://layout-concepts.glitch.me">https://layout-concepts.glitch.me</a></p>