comment on

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";
[download]

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.

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
The #pair <div>
- The banner for our gracious host is in the middle of the bar not above it.
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>
[download]

<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. -->
[download]

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.

In reply to Re^2: Title bar and menu face lift? by Lady_Aleena
in thread Title bar and menu face lift? by Lady_Aleena

Are you posting in the right place? Check out Where do I post X? to know for sure.
Posts may use any of the Perl Monks Approved HTML tags. Currently these include the following:
<code> <a> <b> <big> <blockquote> <br /> <dd> <dl> <dt> <em> <font> <h1> <h2> <h3> <h4> <h5> <h6> <hr /> <i> <li> <nbsp> <ol> <p> <small> <strike> <strong> <sub> <sup> <table> <td> <th> <tr> <tt> <u> <ul>
Snippets of code should be wrapped in <code> tags not <pre> tags. In fact, <pre> tags should generally be avoided. If they must be used, extreme care should be taken to ensure that their contents do not have long lines (<70 chars), in order to prevent horizontal scrolling (and possible janitor intervention).
Want more info? How to link or How to display code and escape characters are good places to start.