2.1 BoardIndex.template.php: redundant markup.

Started by Antechinus, September 08, 2015, 04:48:19 AM

Previous topic - Next topic

Antechinus

Hey that index.css commit missed two of them further up:

Oh NVM I see them when I view the whole file. Already done.

Antechinus

There's still this to do though:

Code (Find) Select
/* Child boards */
.children {
width: 100%;
float: left;
border-top: 1px solid #DDD;
padding: 5px;
}
.children p {
font-size: 0.9em;
}
p.moderators {
font-size: 0.9em;
font-weight: bold;
}
span.postby {
width: 100%;
float: left;
}


Code (Replace) Select
/* Child boards */
.children {
border-top: 1px solid #DDD;
padding: 5px;
}
.children p {
font-size: 0.9em;
}
.moderators {
font-size: 0.9em;
font-weight: bold;
}
.postby {
display: block;
}


The whole float: left; width: 100%; thing doesn't play well with borders and paddings, so best to ditch it when it's not needed. Just generally less crud too.

* Antechinus doesn't like crud

Antes

That's my bad side shall i say :( I don't like touching the icons, rather changing the invisible codes :P

Antechinus

Icons? What is this icons? Anyway it looks like you got it already: https://github.com/Antes/kittenground/commit/99fa19ab2a0aa243efcbee3921fefe6f26babba6

Didn't see that before. Could still lose the span tag off .postby if you can be bothered. It works fine just calling the class name. Same with .moderators vs p.moderators.

Antechinus

Well I think BoardIndex.template is pretty well sorted now.

I might dive into the main menu stuff next. I'll leave the generic_icons spans alone since you don't fancy messing with them at this stage, but there's still a fair bit of other cleaning up that could be done with the main menu CSS.

Antes

tbh considering things on my list I really want to avoid some changes are not really needed.

About menu: https://github.com/Antes/kittenground/commit/d42afe9e03f71f1f4a9d773f4aaf6265e41ef253

Antechinus

Yeah that's a good start. It can be simplified even more than that. Also, some parts of it are broken even if you haven't realised. I'll whip up a sorted version (will test it first of course).

Oh and I got sidetracked. I just knocked 30% off the message index CSS without changing the look. Also reduced markup slightly by putting floatright on the .icons div and removing it from the individual .generic_icons spans. Same result, less crudz. Will post the code on GitHub. :)

Antechinus

#27
Replacement code as per https://github.com/SimpleMachines/SMF2.1/issues/3043

Code (index.css) Select
/* MessageIndex */
/* Start with description and other things */
#description_board {
padding: 8px 10px;
border-radius: 6px 6px 0 0;
border-bottom: none;
box-shadow: none;
}
#description_board h3, #description_board p {
display: inline-block;
}
#description_board h3:after {
content: ' - ';
}
/* Topic list */
#topic_header {
margin: 0;
}
#topic_header div {
height: 2em;
font-weight: bold;
padding: 0;
}
.moderation {
display: table-cell;
width: 35px;
vertical-align: middle;
}
#topic_container .windowbg, #topic_container .windowbg2 {
height: 4em;
border: 1px solid #ddd;
border-top: none;
}
#topic_container .windowbg, #topic_container .windowbg2 {
box-shadow: none;
border-radius: 0;
padding: 0;
margin: 0;
}
#topic_container .windowbg>div, #topic_container .windowbg2>div {
padding-top: 0;
}
#topic_container .board_stats p {
margin: .5em 0 -.5em;
}
/* Quick moderation selects and submit */
#quick_actions {
padding: 4px 0;
}
.qaction {
padding: 0;
}
/* Investigate default select and button sizing. Something is slightly off there.*/
.qaction.button_submit {
margin: 1px 4px 0 4px;
}
/* Icons and jump to */
#topic_icons:before {
display: block;
height: 8px;
clear: both;
content: '';
}
#topic_icons .information {
font-size: .9em;
border-radius: 4px;
}
#topic_icons p {
padding: 0 12px 0 4px;
line-height: 2em;
}
/* Should lose this before RC1. It's a kludge. Can be fixed by new image */
#topic_icons .floatleft img:first-child {
padding: 0 2px;
}
#message_index_jump_to_select {
font-size: 1em;
padding: 0;
}
/* This is a bit of a kludge too */
#message_index_jump_to .button_submit {
margin-top: 3px;
padding: 1px 6px;
}


Code (index.css) Select
/* TitleBar & SubBar */
.title_bar {
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
border-top: 2px solid #ff9400;
border-bottom: 2px solid #bf6900;
background: #fff;
color: #666;
border-radius: 2px 2px 0 0;
margin: 5px 0 0 0;
}


Code (MessageIndex.template.php) Select
<div id="description_board" class="generic_list_wrapper">
<h3>', $context['name'], '</h3>


Code (MessageIndex.template.php) Select
// Now we handle the icons
echo '
<div class="icons floatright">';
if ($topic['is_watched'])
echo '
<span class="generic_icons watch" title="', $txt['watching_this_topic'], '"></span>';
if ($topic['is_locked'])
echo '
<span class="generic_icons lock"></span>';
if ($topic['is_sticky'])
echo '
<span class="generic_icons sticky"></span>';
if ($topic['is_redirect'])
echo '
<span class="generic_icons move"></span>';
if ($topic['is_poll'])
echo '
<span class="generic_icons poll"></span>';
echo '
</div>';


Code (Recent.template.php - in two functions) Select
// Now we handle the icons
echo '
<div class="icons floatright">';
if ($topic['is_locked'])
echo '
<span class="generic_icons lock"></span>';
if ($topic['is_sticky'])
echo '
<span class="generic_icons sticky"></span>';
if ($topic['is_poll'])
echo '
<span class="generic_icons poll"></span>';
echo '
</div>';

Antes

On github you need to use line break to make things look good


```
My Code
```

```My Code``` does not work :P

Antechinus

I did use line breaks. It still made a mess of it. :P

Oh is it three of the frigging ` things? I thought it was two. Why the @$@%# does it need three of them FFS? ::) Might as well have ten of the buggers.

Antechinus

Ok, so  gave it three thingies instead of two. Still drops all the indenting. Total awesomesauce for a site built around coding. :P

Advertisement: