http://www.perlmonks.org?node_id=11121498

I played around with some new code for the top bar and the menu. I removed the tables and used flex. It isn't perfect, but it might be a slight improvement.

Note:This, or something close to it, is what I originally posted. The code in the first one is different.

My OS is Debian 10 (Buster); my perl versions are 5.28.1 local and 5.16.3 or 5.30.0 on web host depending on the shebang.

No matter how hysterical I get, my problems are not time sensitive. So, relax, have a cookie, and a very nice day!
Lady Aleena

Replies are listed 'Best First'.
Re: Title bar and menu face lift?
by tobyink (Canon) on Sep 09, 2020 at 09:58 UTC

    It's a definite improvement, but I would be surprised if PerlMonks ever got a face lift.

Re: Title bar and menu face lift?
by jdporter (Paladin) on Sep 09, 2020 at 20:23 UTC

    How does it work? "Used flex" tells me nothing. What would we have to do to here to get something like what you showed?

    I reckon we are the only monastery ever to have a dungeon stuffed with 16,000 zombies.

      G'day jdporter,

      I'm reasonably certain that the "flex" to which Lady Aleena refers, is the W3C's "CSS Flexible Box Layout" module. If you look at the CSS listing (top, right-hand panel) in the "new code", you'll see:

      ... div#title { display: flex; flex-direction: row; flex-wrap: wrap; ... } ...

      [Note: I see the content of the new code linked page has changed since I viewed it yesterday (when I approved the node). I don't know exactly what changed; however, the overall layout is different (links moved from the top of the page to a new side bar; new content in this side bar). Obviously, I have no idea which version you may have seen.]

      This CSS module is a work in progress. It does seem to have stalled close to two years ago. This may affect the choice to use it. From the "Status of this document" section:

      "... This document will remain a Candidate Recommendation at least until 19 December 2018 in order to ensure the opportunity for wide review."

      ...

      "Publication as a Candidate Recommendation does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress."

      My intention is not to dissuade usage — I've certainly used plenty of W3C's Candidate Recommendations over the years — but I felt it was important to advise the current, non-stable status of this CSS module.

      For what it's worth, I don't mind the general direction of this proposed change; although, I preferred what I saw yesterday, to what I'm seeing today.

      — Ken

        Thank you, sir. I like the direction of this kind of change. And I have no qualms at all about using an old/stale module, if it gets the job done. (We are using Perl after all, aren't we? lol) If/when something like this gets implemented here, you should still have a good degree of configurability, just as you do now. I wouldn't expect you to get locked into a certain layout.

        I reckon we are the only monastery ever to have a dungeon stuffed with 16,000 zombies.

      As Julie Andrews said in The Sound of Music, "Let's start at the very beginning."

      Currently, PerlMonks is riddled with tables, lots and lots and lots of tables. Over the years, there have been cries to stop using them for layout. Also, tables are awful on mobile devices. So, the first thing that I did was begin the process of weeding them out and replacing them.

      The biggest jump for PerlMonks will be leaving HTML 4; no more loose, transitional, or strict. The DOCTYPE will be for HTML 5.

      print "Content-Type: text/html; charset=utf-8 \n\n"; print "<!DOCTYPE html>\n";

      The explanation below is for this code.



      The monkbar

      One easy and flexible way to replace tables with divs is to use the css display property flex with all the related properties coming together to form a flexbox. To read more about flexboxen, I would suggest the simple tutorial and reference a complete guide to flex. I used it for the top bar. It is cross-browser compatible with the exception of IE, which uses ms- prefix.


      Now, breaking down the top bar I wrote, and what is in the bar.

      1. The #sitename <div>
        • The site name, PerlMonks, is now at the top left of the page not the top right. It is stylized with :: for now, but I put that in for fun.
        • The quip is under the name of the site not above the bar anymore
      2. The #pair <div>
        • The banner for our gracious host is in the middle of the bar not above it.
      3. The #search <div>
        • The search box is now at the right of the bar not the left.
        • The Super Search link that was with the site navigation links was moved under the search box.

      The one thing that did not make into the bar or anywhere is the Monk Pictures. I turned them back on briefly the other day when I was writing the html, and I saw pictures I remember from 10 years ago. I am hoping those whose pictures I did not make room for are not angry by this decision.


      The styles of the top bar are where you will see display: flex; in action.

      With flex, I was able to put the Pair.com banner in the center of the top bar between the name of our site here and the search box. However, if you look towards the bottom of the css, you will see a @media query. In the query, I state the order of the heading items differently than they appear in the code. Since I do not know the agreement PerlMonks has with Pair.com, I made the assumption that Pair.com wants its banner at the top of the page. So, when the page is viewed on a screen less than 700px in width, the Pair.com banner will be above the site name and the search box. That are other css rules set in that query that makes the top bar look better for smaller screens.

      To see how to top bar looks on a smaller screen, use ctrl+shift+m in Firefox or ctrl+shift+i in Google Chrome.

      With the css display property flex and other flex properties, one does not need a table to make a pretty top bar. Flex has the advantage of only writing the html once and using the styles to place the elements within it.


      To use the top bar I showed, replace <table id="monkbar"> with the code lines 1 through 26. The only part I did not know how to code was the quips. When I view the source of these pages, the quip on the page is what I see in the source.

      Note about the quips: Please remove line breaks introduced into the quips, if any. Most quips will fit nicely in the space without line breaks. At least I hope they do.

      I changed the id for the top bar in my code to match the current bar. You will need to copy the css lines 14 through 53 and from line 87 to the end. (The last in the @media is for class nodelets that I think it will be harmless unless that class is taken by the current nodelets.)



      The sidebar

      For the sidebar, I used the HTML 5 <details> element. These are collapsible boxes that can be opened or closed with a click or touch of its <summary> element.

      The first box is the site navigation that is in the second cell in the titlebar-top table currently. What the site's navigation is doing in the title bar I do not know. I moved "Need help?" from the second cell in the titlebar-bottom table to the navigation box as well.

      The second box is for user login or user settings. If a user is not logged in, the Login box will appear. If a user is logged in, the Settings box will appear. I am a bit vague on the details on how to make that happen since I do not know what code triggers that in PerlMonk site code. Settings is currently a nodelet.

      The third box is the nodelets that is currently in the nodelet_container table that is also in the general container. They are also <details> elements within a <details> element. Currently the nodelets are in their own <tbody> elements. How each nodelet is triggered to display now will apply for the new nodelet layout, but with the new HTML. I will use the XP nodelet as an example of the HTML.

      tbody code details code
      <tbody class="nodelet" id="XP_Nodelet"> <tr><th class="nodelet_head"> <span class="title">XP Nodelet</span><a href="?node=About the XP + Nodelet" class="nodelethead-annot"><sup>?</sup></a> </th></tr> <tr><td class="nodelet_body"> You have <b>23</b> <a href="?node_id=5938" title="Voting/Experience Sy +stem">votes</a> left today. </td></tr> </tbody>
      <details class="nodelet" id="XP_Nodelet"> <summary> <span class="title">XP Nodelet</span><a href="?node=About the XP N +odelet" class="nodelethead-annot"><sup>?</sup></a> </summary> <p> You have <b>23</b> <a href="?node_id=5938" title="Voting/Experienc +e System">votes</a> left today. </p> </details> <!-- Each nodelet should be examined to see if they contain inner tabl +es too. -->

      details has a Boolean attribute called open that will set whether or not a details box is toggled open on loading it. A new option for nodelets can be added to Nodelet Settings called "Open" to set whether the nodelet is open or closed on page loads that should only apply for desktop page loads. I have a lot of nodelets in my sidebar, but only want the XP, Approval, and Tick Tock nodelets open when a page loads. The others I can toggle open when I want to use them.

      I wrote possible new code for Nodelet settings.

      There is a little but of javascript attached to the sidebar. The three top details boxes will be toggled open when the screen width is greater than 700px. When the screen width is less, all the details boxes will be toggled closed to save screen space. This way mobile users will get more content on their screens. The css for the sidebar also removes the right float for the sidebar and increases the font size for mobile users to make the toggles and links easier to touch. The screen width could be decreased if wanted.



      I hope I explained the HTML, CSS, and the one bit of javascript well enough.

        Some monks (myself included) use NoScript as a matter of local security policy. Have you ensured that the pages will display correctly even without JavaScript?

        Lastly, PerlMonks does not use Web N.0 garbage currently and I request that PerlMonks continue to present its pages as documents instead of "application" hipster trash. This means sticking to the feature set of HTML4.01 and/or XHTML, although collapsibles are possible using only HTML4 <div>, checkboxes, and CSS. SearX uses this for its pages if you want a simple example.

        Edit: Apologies for the harsh tone, but I have had too many things I liked screwed up by hipster "new! shiny!" change-for-no-good-reason and PerlMonks has been one of my few respites from that malignant idiocy. If it is not broken, do not fix it. "Old system that still works" is not "broken".

        To get around the javascript issue; having navigation, user settings, and nodelets opened on page load could be a setting in Nodelet Settings (see my pen). If the user selects to have a box opened, the following attribute will be added to the details element.

        <!-- normal --> <details> <summary>Summary of details</summary> Details content. </details> <!-- open --> <details open> <summary>Summary of details</summary> Details content. </details>

        Those three details elements could be open by default, and the user would have to deselect the option, or not.

        My OS is Debian 10 (Buster); my perl versions are 5.28.1 local and 5.16.3 or 5.30.0 on web host depending on the shebang.

        No matter how hysterical I get, my problems are not time sensitive. So, relax, have a cookie, and a very nice day!
        Lady Aleena
Re: Title bar and menu face lift?
by Lady_Aleena (Priest) on Sep 09, 2020 at 15:03 UTC

    I could not help myself. I did not like how the site navigation looked on mobile, so I moved it to the right. I also added boxes for users and nodelets.

    My OS is Debian 10 (Buster); my perl versions are 5.28.1 local and 5.16.3 or 5.30.0 on web host depending on the shebang.

    No matter how hysterical I get, my problems are not time sensitive. So, relax, have a cookie, and a very nice day!
    Lady Aleena

      I was going to suggest that you added an update to your OP indicating that the "new code" content had changed. Following my comments regarding this change, it may be worth having links to both versions. In any event, please follow the guidelines in "How do I change/delete my post?".

      — Ken

        Note added.

        My OS is Debian 10 (Buster); my perl versions are 5.28.1 local and 5.16.3 or 5.30.0 on web host depending on the shebang.

        No matter how hysterical I get, my problems are not time sensitive. So, relax, have a cookie, and a very nice day!
        Lady Aleena