Log in

Simple style edits Suggestion.

  • 1 Jun

I've said something of this nature before but I will like to open a thread for it sometime can post full suggestions and with images.

  1. Move the Avatar up while on mobile devices but leave it as it is (flown left) while on pc display. This will give space for full content and bigger images on mobile display.
  2. Wrap the border on (not just border-bottom) but leave it as it is on mobile display.
  3. I don't think it's necessary to display full name on the post pages (even though it's display : none;) it belongs profile. I don't even think full name is necessary for forums.
  4. I can't recall fully but it's like the image is on 50px for mobile devices, I saw some things like this on the spirit github page. Won't it be better to display the images flexibly on mobile devices, using the the percentage? Bigger phone screen bigger images.
    Something like this
    . img {
    Width = 100%;
    }
    Isn't it better.
    I'll post some image edits when I log on to my pc.
    Thanks.
  • 2 Jun

Border wrapping in the comment row.
Here is a simple style edits I did with Chrome 'Inspect'.
[code]
.comment, .row {
padding: 12px;
border: #cecece 1px solid;
margin-bottom: 5px;
border-radius: 5px;
}
[/code]

  • 2 Jun

The result -
css.png

  • 2 Jun

The mobile display (maybe it's better to use margin instead of margin-bottom to space the left and right side, I believe it should look better that way on mobile devices) -
css_mobile.png

margin: 5px; used instead of the margin-bottom: 5px; above
HTML backgroud-color changed to - rgba(246, 246, 246, 0.23);
while the .comment. .row retains the background-color: #fefefe;

Pc Display -
css_pc.png

Mobile Display -
css_mobile2.png

  • 10 Jun

@nitely
I was expecting your feedback on this suggestion.

nitelyEsteban Castro Borsani
  • 1
  • 10 Jun

I've never liked boxes, borders, etc. I find the current design cleaner. I think I'll make the separators less visible, though.

The avatar should be on top of the text on the mobile view, so the text can span the whole width.

I'll add a CSS field in the admin cp, so it'll be easier to add custom changes like this on the fly.

  • 11 Jun

Well that's choice, I prefer wrapped boarder. I looks modern and organized to me.

nitelyEsteban Castro Borsani
  • 1
  • 11 Jun

Yeah, it seems like a pretty subjective change. I just happen to like flat and minimal UIs. If you prefer it that way, then after adding the custom CSS field it should be easy to do.

  • 11 Jun

I am wondering why you uses variables for styling, is it from the template system?

nitelyEsteban Castro Borsani
  • 11 Jun

I use Sass and this naming convention for CSS classes. There is a list of hints that I followed and it's in Spanish for some reason.

  • 11 Jun

Just read through the documentation examples, seems like fun. Everything is now going Object, css don't want to be left out. Never even had time to check out SASS before. The convention looks straightforward and clean to me. Thanks.

Reply