all 29 comments

[–]yabbit 5 insightful - 7 fun5 insightful - 6 fun6 insightful - 7 fun -  (0 children)

You da man my nigga

[–]Tiwaking 7 insightful - 3 fun7 insightful - 2 fun8 insightful - 3 fun -  (1 child)

Looks great! Thank you magnora7 :D

[–]magnora7[S] 3 insightful - 3 fun3 insightful - 2 fun4 insightful - 3 fun -  (0 children)

Thanks, glad you all like it

[–][deleted] 4 insightful - 2 fun4 insightful - 1 fun5 insightful - 2 fun -  (0 children)

purdy

[–]HibikiBlack 3 insightful - 2 fun3 insightful - 1 fun4 insightful - 2 fun -  (1 child)

Thanks for the updates. Keep up the good work Mag!

[–]magnora7[S] 3 insightful - 3 fun3 insightful - 2 fun4 insightful - 3 fun -  (0 children)

Thanks

[–]LarrySwinger2 3 insightful - 1 fun3 insightful - 0 fun4 insightful - 1 fun -  (3 children)

And if you don't like the default CSS: append .compact to the URL for something completely different.

[–]magnora7[S] 2 insightful - 1 fun2 insightful - 0 fun3 insightful - 1 fun -  (2 children)

Yup like https://saidit.net/message/unread/.compact

Pretty cool how different it looks.

Also you can add .m at the end for yet another CSS layout (probably the ugliest one, a bad design for mobile that's been superseded by the normal CSS)

[–]LarrySwinger2 3 insightful - 2 fun3 insightful - 1 fun4 insightful - 2 fun -  (1 child)

That one's for the masochists among us. Perhaps that's what the m really stands for.

[–]magnora7[S] 1 insightful - 2 fun1 insightful - 1 fun2 insightful - 2 fun -  (0 children)

lol. The stylesheet files in the open source for it end in .m as well, and github always thinks they're matlab files. It's basically horrible in every way possible

[–]AlanSmith33 2 insightful - 1 fun2 insightful - 0 fun3 insightful - 1 fun -  (0 children)

Sounds good

[–]package 1 insightful - 2 fun1 insightful - 1 fun2 insightful - 2 fun -  (7 children)

Looks dated and ugly as always

[–]magnora7[S] 1 insightful - 2 fun1 insightful - 1 fun2 insightful - 2 fun -  (6 children)

Suggestions on how to improve it?

Some people say this, but then never have any ideas about what they think is better

[–]package 4 insightful - 3 fun4 insightful - 2 fun5 insightful - 3 fun -  (5 children)

  • make tabs less rounded and more padded

  • add visual cues to tabs to indicate that their content is not part of the current page. Typically this is done with a slightly darker or lighter background color.

  • make margins and padding more consistent and reasonable throughout the site; as a general rule the outer edges of text should never be closer to the sides of a box than it is to the top and bottom if there aren't other page elements directly before/after it. The comment collapse button is a good example of breaking this rule and making the site look like it was styled by someone with brain damage who is also a time traveler from the late 90s.

[–]magnora7[S] 2 insightful - 2 fun2 insightful - 1 fun3 insightful - 2 fun -  (3 children)

I did some CSS testing and came up with this design to address the first two bullet points, what do you think, is this optimal?: https://i.imgur.com/T0PwPwN.jpg

[–]package 3 insightful - 3 fun3 insightful - 2 fun4 insightful - 3 fun -  (2 children)

Maybe slightly less dark on the tabs but yep that's genuinely a great start.

[–]magnora7[S] 2 insightful - 3 fun2 insightful - 2 fun3 insightful - 3 fun -  (0 children)

Alright the changes are live, I did the background tabs slightly less dark, looks good. Also did it in dark mode. Thanks for the suggestions. I also moved the comment content over so it doesn't overlap the comment collapse button when viewed in a phone in portrait mode (only time this happened), and it looks good.

If you have 3 more bullet points of things to fix so it doesn't look like it was styled by someone with brain damage who is also a time traveler from the late 90s, I'm all ears.

[–]magnora7[S] 2 insightful - 2 fun2 insightful - 1 fun3 insightful - 2 fun -  (0 children)

Thank you for the feedback, I'll probably make those changes soon

[–]magnora7[S] 1 insightful - 2 fun1 insightful - 1 fun2 insightful - 2 fun -  (0 children)

Thanks, maybe I'll do some of those

[–]YORAMRW 1 insightful - 1 fun1 insightful - 0 fun2 insightful - 1 fun -  (0 children)

I liked the old layout much better

[–]soundsituation 1 insightful - 1 fun1 insightful - 0 fun2 insightful - 1 fun -  (7 children)

Things are looking weird on mobile. Some comments appear in elderly-friendly (but margin-unfriendly) large print and some show up tiny. On the plus side I love that comments are now above the sidebar.

[–]magnora7[S] 2 insightful - 1 fun2 insightful - 0 fun3 insightful - 1 fun -  (6 children)

Yeah I just spent an hour working on that. I should have a fix tomorrow. It happens when a long link without any underscores (or spaces) occurs in a parent comment. Also the "codebox" (invoked with 4 spaces before typing) will mess up the width.

So like this page looks fine because there are no links or codeboxes: https://saidit.net/s/Europe/comments/93tq/british_hospitals_asking_men_if_they_are_pregnant/

But this one looks messed up: https://saidit.net/s/AskSaidIt/comments/93xe/am_i_reading_this_data_correct_184_of_unvaxed/

Right?

[–]soundsituation 3 insightful - 2 fun3 insightful - 1 fun4 insightful - 2 fun -  (5 children)

Yeah, the first link looks fine and the other one has the issue the issue I was talking about. Thanks for caring! I appreciate the work.

[–]magnora7[S] 3 insightful - 2 fun3 insightful - 1 fun4 insightful - 2 fun -  (2 children)

Glad to help! I think I finally got it sorted out, everything fits the page properly even in portrait mode. I discovered that safari phone browsers don't support the CSS "word-wrap: anywhere" command that is accepted by firefox and chrome, so I had to also use "word-break: break-all" CSS command to get it to work on safari.

Anyway should be all 100% fixed now, let me know that it looks good on your end.

[–]soundsituation 3 insightful - 2 fun3 insightful - 1 fun4 insightful - 2 fun -  (1 child)

Looks good now:) 👍

[–]magnora7[S] 2 insightful - 2 fun2 insightful - 1 fun3 insightful - 2 fun -  (0 children)

great!

[–]NutterButterFlutter 1 insightful - 1 fun1 insightful - 0 fun2 insightful - 1 fun -  (2 children)

Wondering if there's a way to make adjustments on #1.

Totally appreciate not having to scroll past the sidebar while mobile browsing now! But now users who do want or need to use the sidebar have to scroll past 100 posts just to get to it. Even scrolling past 25 is a lot and unlikely to happen. My concern is that sidebars is where sub rules are listed, also where "message the moderators" is ... and for mods who use mobile, where all their mod tools for the sub are.

I don't know how deep into design you are, but is there a way to make it operate like how a taskbar does on a Windows computer ... a taskbar can be dragged from the default bottom over to the left or right side of the screen now. So in this case, perhaps the sidebar could be a hidden expandable/collapsible "taskbar" using the dead space on the right side, which hides or displays once a sideways caret/chevron is tapped?

Sort of like what Reddit does with their "multi Reddit" feature on home pages. Theirs is on the left side though, and only accessible from the main home page. In my scenario, it would be that functionality, but for the sidebar of individual subs and only for mobile browsing.

[–]magnora7[S] 2 insightful - 1 fun2 insightful - 0 fun3 insightful - 1 fun -  (1 child)

Thanks for the idea, I'll think about it and see if it's feasible, but it sounds pretty tough compared to the changes I made so that would be a project in itself. I appreciate the feedback.

[–]NutterButterFlutter 2 insightful - 1 fun2 insightful - 0 fun3 insightful - 1 fun -  (0 children)

Yeah, I'm a complete noob when it comes to this kind of stuff ... I can manage to copy and tweak what other people do with CSS and HTML, but that's the extent of my skill.

Thanks for considering! Maybe there's another easier way it could be implemented on mobile, I'll keep thinking it over and let you know if I come up with any other ideas.