This topic was marked solved by its starter, on February 6th, 2017, 11:42 PM
[CSS] .postheader and previous/next post title looking bad

CerealGuy

  • Posts: 343
[CSS] .postheader and previous/next post title looking bad
« on January 16th, 2017, 03:01 PM »
There are some problems with .postheader and the .prevnext_prev/.prevnext_next css clasess.
- .postheader does align the items in center but strecht is better because otherwise items don't
vertically aligned on the same level.
- #top_subject has no fixed weight. Set to 60% (prev's have 20%)
- All the elements should have an word-wrap: break-word.

Fix:
Code: (section.css) [Select]
// Topic title and Quick access
.posthead
width: 100%
padding: 8px
border-radius: 12px
background: rgba(0,0,0, .015)
box-sizing: border-box
@if ie[-7]
div mixes .inline-block
@elseif $can_flex
display: flex
align-items: stretch
> div
flex: 1 1 auto
@else
display: table
> div
display: table-cell
vertical-align: middle
@endif

#top_subject
padding: 4px 8px
font: 100 1.6em/1.2em $head_font
text-align: center
color: gray
letter-spacing: -1px
width: 60%

#top_subject, .prevnext_prev
word-wrap: break-word;

// Previous/next topic links inside .posthead
.prevnext_prev
font: 400 1em/1.3em $main_font
text-align: left
width: 20%
a
color: $reddish

.prevnext_next extends .prevnext_prev
text-align: right

Pictures:
before:

after:


PR: https://github.com/Wedge/wedge/pull/49

EDIT: You can watch this bug right in this topic :lol:

Nao

  • Dadman with a boy
  • Posts: 16,079
[CSS] Re: .postheader and previous/next post title looking bad
« Reply #1, on January 16th, 2017, 11:42 PM »
If you'll excuse me, the BEFORE picture looks like the RIGHT one to me... This CSS bit is intended to make the whole thing work on mobile contexts. Having the prev/next titles shown to the left and right makes no sense in that way. That's why I settled on moving them to the top & bottom. Actually, it's the ONLY reason I used this complicated setup at all... :^^;:

CerealGuy

  • Posts: 343
[CSS] Re: .postheader and previous/next post title looking bad
« Reply #2, on January 17th, 2017, 12:45 AM »Last edited on January 17th, 2017, 01:02 AM
It's not a bug, it's a feature :lol:

Still it looks for me a bit... weird.

Mobile with "fix"


Mobile without


I get what you mean, on mobile the default one looks ways better. How about join together both worlds?

Otherwise this is stuff for custom skins :whistle:

What I don't like about this, is the inconsisty. When the topic names of prev and next are similiar long, it kinda looks like my fix. Some other times it's aligned to top and bottom. It sometimes looks broken. For example on the next topic, it looks a bit like with my fix ^^

PS: This thing bugged me out very early, it's the reason why i disabled this thing completely. The only reason I stumbled across this once again was some bug with topic length. You can't set how long topic names can be in the moment, and it's done a bit weird. Have to dig around this Mange Stuff and add it as a new setting i think. Not the right stuff for a plugin :lol:

Nao

  • Dadman with a boy
  • Posts: 16,079