line breaks in module item_list templates

SteveX
SteveX
@ultrajam
11 years ago
2,584 posts
Why is there a br after the heading in all of the module item_list templates?

It isn't a problem (override every template used is my new way of working, it saves so much time) but I'm curious as to why this isn't being done with css?


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)

updated by @ultrajam: 03/19/14 04:07:16PM
brian
@brian
11 years ago
10,149 posts
I'm looking here through a few and don't see a br tag in the item_list.tpl files - do you have one you are looking at?

Thanks!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
SteveX
SteveX
@ultrajam
11 years ago
2,584 posts
Here are some, the one from jrProfile was downloaded earlier today:
                        <h2><a href="{$jamroom_url}/{$item.profile_url}/{$murl}/{$item._item_id}/{$item.blog_title_url}">{$item.blog_title}</a></h2>
                        <br>

                        <h2><a href="{$jamroom_url}/{$item.profile_url}/{$murl}/{$item.doc_category_url}/{$item._item_id}/{$item.doc_title_url}">{$item.doc_title}</a></h2><br>

                        <h1><a href="{$jamroom_url}/{$item.profile_url}">{$item.profile_name}</a></h1>
                        {if !empty($item.profile_bio)}
                        <br><span class="normal">{$item.profile_bio|jrCore_format_string:$item.profile_quota_id|truncate:250:"..."}</span>

                        <h3><a href="{$jamroom_url}/{$item.profile_url}/{$murl}/{$item._item_id}/{$item.audio_title_url}">{$item.audio_title}</a></h3><br>

                        <h3><a href="{$jamroom_url}/{$item.profile_url}/{$murl}/{$item._item_id}/{$item.youtube_title_url}">{$item.youtube_title}</a></h3><br>
I've only checked those 5, but its in all of them.


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
brian
@brian
11 years ago
10,149 posts
Ahh - you're talking about in the title area. I think that is just the way it was done so the byline/breadcrumbs would show up underneath the title.


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
SteveX
SteveX
@ultrajam
11 years ago
2,584 posts
Hmmm, because headings always stand on their own line, shouldn't that be done in css?

If you choose not to use jrElastic-specific flavor css you will always need to remove that br tag or set it's height to 0.

If modules provided a class on the br, and a note*** in the docs to always look out for the br tag that you need to get rid of, but I think it would be better not to require a br after a heading in the html in order to have the following content on a new line.

*** Make that a prominent note, my guess is that this unusual use of heading html/css will confuse a lot of people, and the more prominent the note the more time will be saved. I don't think I've ever come across anything before where I needed to use a br to clear a html heading tag.


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)

updated by @ultrajam: 02/10/14 12:34:06PM
brian
@brian
11 years ago
10,149 posts
I don't believe it has anything to do with clearing a heading tag - heading tags are not automatically treated as an inline-block (as far as I know), so you need the br if you want what follows to appear on the next line.

Delete the br and you'll see what I mean.


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
SteveX
SteveX
@ultrajam
11 years ago
2,584 posts
But have you ever had to do that after a hX tag before? I haven't.


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
brian
@brian
11 years ago
10,149 posts
If I don't put the br tag there, then it is on the same line as the heading. Maybe most designers define heading tags as "display:inline-block" ?

We can do that in the templates if it makes things easier - no one has ever said anything until now :)


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
SteveX
SteveX
@ultrajam
11 years ago
2,584 posts
It isn’t apparent until you add/replace jr elastic css with anything else.

I don’t know what the html or css specs say about it, but in my experience headings always clear themselves so the content below them appears below them. I’ve never needed to use a br tag after a heading to make it behave like a hX tag, normal.

So finding that you need to set the first br after a heading to 0 height in css or js is very confusing to figure out. Pretty easy to fix though, you just set the height of the first br after a heading to 0, and then wonder why? So I’m off on a tangent...


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
SteveX
SteveX
@ultrajam
11 years ago
2,584 posts
I’m not specifically a bootstrap fan, I’m sure all of the other current css/html frameworks are pretty good as well. But I would go as far as to say that bootstrap html/css is much better than jr5 html/css, extensively and near-perfectly documented and widely used/experimented with (plenty of fiddles to prove it). Twibootstrap is just one of the frameworks, but they are all pretty similar (I say that from skim reading), for good reason.

The main benefit (of using a framework) is the docs (and I think you would refer to them several times a week like I do). The docs make it very easy for all to use, from noob to team, and you need to worry less about mobile: Generally things tend to work pretty well.

I reckon you all probably looked at the frameworks when you were designing jr5. It seems like you were (when looking at the code), but maybe a trick was missed: the completeness, docs and wider experimentation funnel.

Bootstrap, Foundation, others:
http://www.sitepoint.com/beyond-bootstrap-foundation-frameworks-never-heard/

Michael has a basic bootstrap skin on github. It would be really cool to work up a viable alternative to the current core htm/css there. Looks like a potential win/win direction to me, so it’s a gamble. Maybe a significant improvement for jr6, or 5.2. :)


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
SteveX
SteveX
@ultrajam
11 years ago
2,584 posts
On rereading, my smilie looks dumb.


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
brian
@brian
11 years ago
10,149 posts
I would certainly hope that Bootstrap is more complete than our templates - it's backed by Twitter and has thousands of followers, and dozens of contributors.

I'm a fan of Bootstrap as well, and you'll see something from us in regards to bootstrap in the future (just can't talk about it at this time).

Thanks!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
michael
@michael
11 years ago
7,800 posts
The reason your needing a br is because the css for h1 tags is set to display:inline;. (in core_html.css)

If no css is applied all hX tags are block level elements and so the br is un-necessary.

Currently the state of the bootstrap skin on github ( https://github.com/ussher/bootstrap )
Is to the point where its good enough to be used for front-end and profile-section skins but falls down at the back end because the classes that are used in the back end are different from those used with bootstrap.

I can see that using the jrInject ( http://www.jamroom.net/the-jamroom-network/documentation/modules/1629/jrinject ) module would be one way to make the admin area also bootstrap compatible.

The reason bootstrap is on github instead of in the marketplace is to make it a community project if there is interest in doing that.

I can see that forks would also be desirable. The one in my repo I want to keep all the css for all the sections separate so that hopefully in time that profile sectons could be swapped around to with other skins to form new combinations.

That is why the bootsrap skin in github has CSS files which are prefixed with the section: ie: #profile .something {
brian
@brian
11 years ago
10,149 posts
michael:
The reason your needing a br is because the css for h1 tags is set to display:inline;. (in core_html.css)

We can fix this up then - if we don't need the br let's get rid of it.


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

Tags