Improve sidebar placement

[ctrueden]

There are (at least) three kinds of sidebars:

1. Table of contents
2. Menus (e.g. Development menu)
3. Plugin/component info boxes

All of these should be located in the left and/or right margins, to avoid displacing the main narrative text.

Here is a rough first cut at some CSS rules that start going in the direction I have in mind:

.toc {
position: absolute;
left: 0;
font-size: 0.75em;
width: 240px;
DELETE -- margin-right
DELETE -- max-width
DELETE -- margin-bottom
}

.container {
margin: 0 200px; // the 200px is left & right margin... for sidebars
DELETE? -- max-width: calc(100% - 4em);
DELETE? -- width: 60em;
}

#content {
 // check this!
}
.page-content {
 // check this!
}

#info-box {
DELETE -- float: right;
DELETE -- min-width: 500px;
position: absolute;
right: 0;
width: 240px;
font-size: 0.75em;
}

.table-info { // main.css:3237
  DELETE -- width: 80%;
  DELETE -- margin: 0 10%;
}

.main { // main.css:4007 (and main.css:3483)
padding: 0;
}

Maybe we can use absolute positioning inside relative positioning or similar tricks to put multiple sidebars vertically sequentially without overlapping?

One problem is that when screen width gets narrow (e.g. mobile phones), the margins disappear, and these sidebars will need to become sandwich menus or else "pop in" to the main column. Further development and experimentation needed to develop a good set of CSS rules.

If no one else is comfortable doing this while I'm away, I'll work on it later this fall.

[imagesc-bot]

This issue has been mentioned on Image.sc Forum. There might be relevant details there:

https://forum.image.sc/t/imagej-web-site-migration-timeline/40500/5

[smgriffin2]

I've just implemented the above css changes and am now working on formatting the various info boxes to work with the new style.

NOTE: I've changed the sidebar attributes in main.css:

.sidebar {
        width: none; ---> width: 240px;
        float: right; ---> position: absolute;

Work still needs to be done to ensure that sidebars stack if multiple appear on a page.

[ctrueden]

With dacf12ea3b50e74a2bc2572f7d03b58b1099d9eb, there is now a main menu in one sidebar encompassing navigation for the whole site. The only thing left to do for this issue to be considered complete in my mind is for the remaining sidebars (user, plugin, component) to also automatically be located on the left preceding the TOC. Once we have that working, the site layout should be much less cluttered.

[smgriffin2]

Great! I will look at getting the plugins-menu built out in a similar way to the master-menu include. I think the user menu is already built and resides in the user-box include.

[ctrueden]

As of 0183a5497b58c3eed1af1234aeffcc82cfe11152, which added a statbox for component stats, I'd say this issue is addressed. There are now three sidebar blocks in total, with main menu on the left alone, and statbox + TOC on the right, in cases where either of those exists for that particular page. In addition to component statistics, the statbox also supports users (fd438c9a2061e9473f2289dc7e335dd023e8892d, b37b354aeb16d29ee5cdc69c37bc6e25e81ec4ba), and could be extended to support additional types of content pretty easily. Some loose ends remain, but those are captured by other issues (#59, #67, #78, #35, #48).