Skip to main content
Topic: Table classes stuff. (Read 19812 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Re: Table classes stuff.

Reply #15

Ok, I'll do it.  ;D

TBH I hadn't really bothered playing with table-cell display before last night, because I can do most things without it, but just for a change I marked up a "table" (actually based on a ul) at the bottom of MessageIndex.template.php and spent an hour or so messing around with it. I can see it having a lot of potential, and it's very easy to implement.

If adopted in several places it should end up saving on rtl.css at least, although it probably wont do much to reduce index.css. Still, if we can automate the majority of rtl.css that's gotta help. If anyone is still on IE6 or 7 (I know some public library pooters in the UK are) it just defaults to block display, which is stable if not terribly exciting for layout.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Table classes stuff.

Reply #16

I started playing with the messageindex, converting it to an unsorted list, but more to completely change its aspect:
http://www.elkarte.net/index.php?topic=271.msg2114#msg2114
to try something "new", not the boring tabular look. O:-)
Bugs creator.
Features destroyer.
Template killer.

Re: Table classes stuff.

Reply #17

Ok, I had a play around with the display: table-cell; idea. It wont provide advantages in all areas. We'll still be using floats for some things, which is fair enough (that's why they invented floats). However, it's great for board index and message index.

I really am not that interested in board stats, so was thinking maybe they should be shunted off to the right (a la vB). That way your eye just flows from board name/description to latest post stuff. After trying it out, I rather like it that way. Some people wouldn't like it though, and would prefer the old SMF style.

So, I thought a bit more and got cunning with the markup (still simple) and managed to get it all quite swap-around-able very easily.  Check out the screenshot. This is all the same markup for each row, and the layout changes are just very simple alterations to one or two floats and a bit of padding. So, it allows four stable layouts without any markup hacking at all, and without needing to be a CSS genius.

Add in some media queries, and the whole thing will become nicely responsive right down to phone size.

I've checked it in FF, Chrome, Opera, Safari, IE9 and IE8, with a variety of font sizes. No problems. :)

ETA: ROFL. I just thought of something. I can actually get eight layouts, not four. That's not counting setting things to straight block display so they stack down the page. I mean I can get eight layout choices in each "table row". That should keep anyone happy.

The other four aren't just done with float tweaks. They require direction tricks as well, but it's still easy. Will get it into a real template scenario with proper CSS. I've just been playing with it all hard coded with inline CSS. Should be able to sort it easily over the weekend. :)

ETA again: Added an extra screeny to show all eight layouts. They can be tweaked for borders, paddings, etc of course. This is just proof of concept.
Last Edit: June 28, 2013, 07:50:42 am by Antechinus
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Table classes stuff.

Reply #18

Ok, ths is nuts. :D I thought a bit more about this when I woke up early this morning. In theory there are 24 posssible stacking orders (anyone remember factorials?) for the "four blocks" (ie: icon, board name/description, stats, last post). Having thought them through, I'm pretty sure that all of them could be stable on a fixed width site, given suitable choices of margins, paddings and widths. This is taking into account user-selectable text size in the browser, of course.

Fluid width is trickier. Making some of the permutations stable on fluid width might not be possible, but I'd have to test them thoroughly to be sure. I may also have missed that some permutations are effctively identical, given how hard it is to mentally keep track of 24 of them early in the morning. :D

However, I quite certain that there are at least another eight which would be easy to do in stable form on a fluid width site. So, even if not the ultimate in flexibility of presentation, it provides a very high degree of independence from source order.

That got me thinking about what happens on narrow screens, when things start stacking vertically. I haven't tested this yet, but after thinking it through a bit I'm fairly sure there should be a high degree of independence there too. How much of this would be useful or desirable to use in practice is another matter, but there's definitely scope for experimentation when someone has the time and inclination.

tl:dr version: this sucker totally kills tables. :)
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Table classes stuff.

Reply #19

I think you should go a completely different route...

In first column, use the last poster's avatars. In the bottom right-hand corner of the avatar, show a green dot to illustrate a "new post". In the second column, show the last post info, then in the third show the board title and description. Board icons are a waste in alot of ways, they server no purpose other than to illustrate a new topic or not. If the board icon for each board could be different/custom, then that would be a completely different matter entirely, sense it would act as a proper illustration. However, since Elkarte doesn't have custom board icons, show the last poster's avatar in it's place(for visual flow). From there multiple methods could be used to indicate a new post or not, such as: avatar opacity, red/green borders or dots, or whatever you can come up with.

Re: Table classes stuff.

Reply #20

Ok, but that's just tweaks to content. The basic markup has awesome flexibility with very little CSS knowledge being required, so what it means is that regardless of what content you put in what blocks, anyone (almost) can re-shuffle them to get the presentation order they want.

Also, TBH I'm not sure I'd be keen on avatars by default. I like clean presentation on a site's front page, and having defined icons is more consistent and (IMO) more pleasing than an assortment of avatars. It's also faster to load, and will still look good if someone has images disabed.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Table classes stuff.

Reply #21

Ok, examples. :)

Assuming the latest theme stuffz PR has been applied on your test site (not in the repo yet, they're busy) this will give an idea of the options available with the new non-tabular markup.

This code can be pasted into index.css, or a variant css file, anywhere after the new board index stuffz. You can try out the options just by commenting and un-commenting examples as you go. Position is everything. :D

Code: [Select]
/* --------------------------------------------------------------------- */
/* The following are alternative layout orders for the board index rows. */
/* They can be commented and un-commented to see them in action.
/* --------------------------------------------------------------------- */

/* This one simply puts the board stats back in the old SMF location. */
/*
.board_stats {
text-align: left;
padding: 1px  6px 1px 0;
float: left;
}
*/

/* This one flips the row left to right, and sets the lastpost text to LTR. */
/*
.board_row {
direction: rtl;
}
.board_latest {
direction: ltr;
border: none;
}
*/

/* This one does the LTR flip, and puts the board icon at far right. */
/*
.board_row {
direction: rtl;
}
.icon_anchor {
float: right;
padding: 2px 0 0 6px;
}
.board_latest {
direction: ltr;
border: none;
}
*/

/* ------------------------------------------------------ */
/* This is where the fun starts. Absolute positioning. :D */
/* ------------------------------------------------------ */
/* This one takes the previous example, and puts the board icon back to far left. */
/*
.board_row {
direction: rtl;
position: relative;
}
.icon_anchor {
position: absolute;
left: 8px;
}
.board_latest {
direction: ltr;
border: none;
padding-left: 66px;
}
*/

/* You want more? Ok. This one does the above, but also puts board stats over
/* at far right, and sets board name and description back to left aligned. */
/*
.board_row {
direction: rtl;
position: relative;
}
.board_info {
direction: ltr;
padding-right: 8.4em;
}
.icon_anchor {
position: absolute;
left: 8px;
}
.board_description, .moderators {
margin: 0;
}
.board_latest {
direction: ltr;
border: none;
padding-left: 66px;
}
.board_stats {
position: absolute;
right: 8px;
}
*/
/* There are more options, but those should be enough to give the general idea. */

/* ----------------------------------------------- */
/* End alternative layouts. Back to standard stuff.*/
/* ----------------------------------------------- */
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Table classes stuff.

Reply #22

Screenshots to go with the examples. Screenies are ordered the same as the CSS bitz. Standard first, then down the list of options. :)

Note that these are just quick proof of concept demos, and could obviously be tweaked further for styling and whatever.

Re: Table classes stuff.

Reply #23

Nice one, my personal favorite is Alternative1.
 TE is a creature of habbit.
Thorsten "TE" Eurich
------------------------