Beefy Boxes and Bandwidth Generously Provided by pair Networks
Syntactic Confectionery Delight
 
PerlMonks  

Re^2: Title bar and menu face lift?

by Lady_Aleena (Curate)
on Sep 11, 2020 at 16:17 UTC ( #11121621=note: print w/replies, xml ) Need Help??


in reply to Re: Title bar and menu face lift?
in thread Title bar and menu face lift?

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.

Replies are listed 'Best First'.
Re^3: Title bar and menu face lift?
by jcb (Vicar) on Sep 11, 2020 at 22:25 UTC

    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".

      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".

      I completely agree! I too run NoScript. Often pages simply don't render with JavaScript turned off. Unless it is a page I really want or need to visit, I'll simply go somewhere else. Even for a page I have to visit I'll enable the minimum script I need to see the content I'm interested in. Funny how often that leaves large blank spaces free of adds and unwanted video content!

      Optimising for fewest key strokes only makes sense transmitting to Pluto or beyond

        The modern interwebs is fundamentally broken. It's sad that users have to take action to prevent crazy bloated, bandwidth wasting, cpu cycle burning garbage to protect their privacy and to enjoy a faster, less resource hungry experience. If you aren't already aware things like pi hole (old but nice write up by Troy Hunt here) exist to take away some of the associated ugly. Al Gore did not invent the interwebs for such shenanigans...

      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".

      I agree with every word of this. (++)


      🦛

      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".

      Completely agree.

      All that will happen without javascript is that the details boxes will be closed for desktop users. That is no biggie. They will still toggle open without javascript.

      PerlMonks has to modernize. That means not sticking to HTML4.01/XHTML and CSS2. This site needs to become responsive and mobile friendly. Why not use tools that are already accepted by most browsers? I find it off-putting that new things are ignored just because they are new. Getting divs and checkboxes to work for collapsing is a pain, so using details makes sense.

      There will be teething pains, but those should go away quickly enough. Give this a chance, please?

      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 find it off-putting that new things are ignored just because they are new."

        I don't think that is the case here. JavaScript is not required for a mobile friendly responsive front end. This sort of discussion is worth considering. My feelings are that the major issue preventing more development work (front or backend) is the fundamentals of the everything engine (N.B. this site runs a fork of everything made long ago). The mechanics of how it all hangs together are daunting to casual users. If I had time I'd work on a modern reimplementation in Mojolicious for a cleaner approach. Use of a more modern, far simpler framework would have several benefits, including making it less daunting for people to contribute.

        If you haven't already, try this: go to your Display Settings, and turn on the three options Lay out {nodelets|main|threads} as <div> instead of <table>. Then add CSS in the On-Site CSS Markup box to style those divs as you like. And in Free Nodelet Settings you can add javascript to mess around with behaviors and such. And when you've gotten something working you think is really cool, share it in PMD with "[Free Nodelet Hack]" in the title. :-)

        Here's how I have customized my layout using the above method: screenshot
        The big scrollable box near the top contains the "main" part of the page.
        The colored nodelet boxes below that float. :-)

        I reckon we are the only monastery ever to have a dungeon stuffed with 16,000 zombies.
        That means not sticking to HTML4.01/XHTML and CSS2.

        Why?

        PerlMonks is a collection of documents. HTML4.01/XHTML are document markup.

        PerlMonks is not a Web N.0 collection of hipster "application" garbage. HTML5 is for applications and CSS is backwards/upwards compatible — you can use CSS3 with HTML4.01 and XHTML just fine.

        The HTML4 specification specifies document structure and leaves all details to the user's renderer. The HTML5 specification includes lengthy prescriptions for details of event processing. HTML4 is for documents; HTML5 is for hipster "application" garbage.

        This site needs to become responsive and mobile friendly.

        These issues were considered in HTML4.01 and early CSS. Proper HTML4.01 logical markup is mobile friendly. (Consider the media attribute on the <link rel="stylesheet"> tag.) "Responsive" seems to be a content-free buzzword as far as I can tell, so I say the site is already responsive, because "responsive" has no meaning.

        I find it off-putting that new things are ignored just because they are new.

        I find it off-putting that new things are introduced instead of learning how to use the existing technologies that can already solve the problem at hand.

        Getting divs and checkboxes to work for collapsing is a pain, so using details makes sense.

        You have a worked example in SearX. Why are you complaining about this?

Re^3: Title bar and menu face lift?
by Lady_Aleena (Curate) on Sep 12, 2020 at 13:43 UTC

    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

Log In?
Username:
Password:

What's my password?
Create A New User
Node Status?
node history
Node Type: note [id://11121621]
help
Chatterbox?
and the web crawler heard nothing...

How do I use this? | Other CB clients
Other Users?
Others avoiding work at the Monastery: (5)
As of 2020-11-27 12:11 GMT
Sections?
Information?
Find Nodes?
Leftovers?
    Voting Booth?

    No recent polls found

    Notices?