use the following search parameters to narrow your results:
e.g. subreddit:pics site:imgur.com dog
subreddit:pics site:imgur.com dog
advanced search: by author, sub...
~4 users here now
This is Saidit's main sub for things related to the saidit.net website itself.
If you need help with using this website or related tools, post in /s/help. If you want a place to post any topic to the community, try /s/whatever or /s/asksaidit. If you want to create a wiki page, use /s/wiki.
Saidit CSS updates April 2, 2022
submitted 1 year ago * by magnora7 from self.SaidIt
I just completed a few minor visual CSS updates for saidit:
The sidebar (showing chat and sub info) was sometimes showing at the top of the page when viewing the page with a narrow browser, like on a phone. This occurred in some browsers (chrome, safari, etc) but not in firefox. Now if the page is too narrow to have the sidebar on the side, the sidebar always goes to the bottom so it's out of the way and the content is right at the top. No more scrolling past the whole sidebar every time before you can see the post on mobile
Fixed some minor graphical issues with the 'hot' 'new' etc tabs at the top of the main page so now they sit flushly with the border and the one selected is bolded and red while the others are not.
Removed a large full-page blank space that would sometimes appear at the bottom on narrow browsers, it was an image that had overflowed its container.
Very slightly tightened up the spacing between posts on the front page, so there's not quite so much white space, more visible info per page, and moved the posts a bit to the right so they're not so close to the edge of the page
Fixed how the upvote buttons, image previews, and titles are arranged when viewing in portrait mode on a phone, to minimize wasted space
Overall this makes for a better and smoother browsing experience, especially on phone web browsers. Cheers
[–]yabbit 5 insightful - 7 fun5 insightful - 6 fun6 insightful - 6 fun6 insightful - 7 fun - 1 year ago (0 children)
You da man my nigga
[–]Tiwaking 7 insightful - 3 fun7 insightful - 2 fun8 insightful - 2 fun8 insightful - 3 fun - 1 year ago (1 child)
Looks great! Thank you magnora7 :D
[–]magnora7[S] 3 insightful - 3 fun3 insightful - 2 fun4 insightful - 2 fun4 insightful - 3 fun - 1 year ago* (0 children)
Thanks, glad you all like it
[–][deleted] 4 insightful - 2 fun4 insightful - 1 fun5 insightful - 1 fun5 insightful - 2 fun - 1 year ago (0 children)
purdy
[–]HibikiBlack 3 insightful - 2 fun3 insightful - 1 fun4 insightful - 1 fun4 insightful - 2 fun - 1 year ago (1 child)
Thanks for the updates. Keep up the good work Mag!
[–]magnora7[S] 3 insightful - 3 fun3 insightful - 2 fun4 insightful - 2 fun4 insightful - 3 fun - 1 year ago (0 children)
Thanks
[–]LarrySwinger2 3 insightful - 1 fun3 insightful - 0 fun4 insightful - 0 fun4 insightful - 1 fun - 1 year ago (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 - 0 fun3 insightful - 1 fun - 1 year ago (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 - 1 fun4 insightful - 2 fun - 1 year ago (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 - 1 fun2 insightful - 2 fun - 1 year ago (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 - 0 fun3 insightful - 1 fun - 1 year ago (0 children)
Sounds good
[–]package 1 insightful - 2 fun1 insightful - 1 fun2 insightful - 1 fun2 insightful - 2 fun - 1 year ago (7 children)
Looks dated and ugly as always
[–]magnora7[S] 1 insightful - 2 fun1 insightful - 1 fun2 insightful - 1 fun2 insightful - 2 fun - 1 year ago (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 - 2 fun5 insightful - 3 fun - 1 year ago (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 - 1 fun3 insightful - 2 fun - 1 year ago (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 - 2 fun4 insightful - 3 fun - 1 year ago (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 - 2 fun3 insightful - 3 fun - 1 year ago* (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 - 1 fun3 insightful - 2 fun - 1 year ago (0 children)
Thank you for the feedback, I'll probably make those changes soon
Thanks, maybe I'll do some of those
[–]YORAMRW 1 insightful - 1 fun1 insightful - 0 fun2 insightful - 0 fun2 insightful - 1 fun - 1 year ago (0 children)
I liked the old layout much better
[–]soundsituation 1 insightful - 1 fun1 insightful - 0 fun2 insightful - 0 fun2 insightful - 1 fun - 1 year ago (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 - 0 fun3 insightful - 1 fun - 1 year ago* (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 - 1 fun4 insightful - 2 fun - 1 year ago (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 - 1 fun4 insightful - 2 fun - 1 year ago* (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 - 1 fun4 insightful - 2 fun - 1 year ago (1 child)
Looks good now:) 👍
great!
[–]NutterButterFlutter 1 insightful - 1 fun1 insightful - 0 fun2 insightful - 0 fun2 insightful - 1 fun - 1 year ago (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 - 0 fun3 insightful - 1 fun - 1 year ago (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 - 0 fun3 insightful - 1 fun - 1 year ago (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.
[–]yabbit 5 insightful - 7 fun5 insightful - 6 fun6 insightful - 6 fun6 insightful - 7 fun - (0 children)
[–]Tiwaking 7 insightful - 3 fun7 insightful - 2 fun8 insightful - 2 fun8 insightful - 3 fun - (1 child)
[–]magnora7[S] 3 insightful - 3 fun3 insightful - 2 fun4 insightful - 2 fun4 insightful - 3 fun - (0 children)
[–][deleted] 4 insightful - 2 fun4 insightful - 1 fun5 insightful - 1 fun5 insightful - 2 fun - (0 children)
[–]HibikiBlack 3 insightful - 2 fun3 insightful - 1 fun4 insightful - 1 fun4 insightful - 2 fun - (1 child)
[–]magnora7[S] 3 insightful - 3 fun3 insightful - 2 fun4 insightful - 2 fun4 insightful - 3 fun - (0 children)
[–]LarrySwinger2 3 insightful - 1 fun3 insightful - 0 fun4 insightful - 0 fun4 insightful - 1 fun - (3 children)
[–]magnora7[S] 2 insightful - 1 fun2 insightful - 0 fun3 insightful - 0 fun3 insightful - 1 fun - (2 children)
[–]LarrySwinger2 3 insightful - 2 fun3 insightful - 1 fun4 insightful - 1 fun4 insightful - 2 fun - (1 child)
[–]magnora7[S] 1 insightful - 2 fun1 insightful - 1 fun2 insightful - 1 fun2 insightful - 2 fun - (0 children)
[–]AlanSmith33 2 insightful - 1 fun2 insightful - 0 fun3 insightful - 0 fun3 insightful - 1 fun - (0 children)
[–]package 1 insightful - 2 fun1 insightful - 1 fun2 insightful - 1 fun2 insightful - 2 fun - (7 children)
[–]magnora7[S] 1 insightful - 2 fun1 insightful - 1 fun2 insightful - 1 fun2 insightful - 2 fun - (6 children)
[–]package 4 insightful - 3 fun4 insightful - 2 fun5 insightful - 2 fun5 insightful - 3 fun - (5 children)
[–]magnora7[S] 2 insightful - 2 fun2 insightful - 1 fun3 insightful - 1 fun3 insightful - 2 fun - (3 children)
[–]package 3 insightful - 3 fun3 insightful - 2 fun4 insightful - 2 fun4 insightful - 3 fun - (2 children)
[–]magnora7[S] 2 insightful - 3 fun2 insightful - 2 fun3 insightful - 2 fun3 insightful - 3 fun - (0 children)
[–]magnora7[S] 2 insightful - 2 fun2 insightful - 1 fun3 insightful - 1 fun3 insightful - 2 fun - (0 children)
[–]magnora7[S] 1 insightful - 2 fun1 insightful - 1 fun2 insightful - 1 fun2 insightful - 2 fun - (0 children)
[–]YORAMRW 1 insightful - 1 fun1 insightful - 0 fun2 insightful - 0 fun2 insightful - 1 fun - (0 children)
[–]soundsituation 1 insightful - 1 fun1 insightful - 0 fun2 insightful - 0 fun2 insightful - 1 fun - (7 children)
[–]magnora7[S] 2 insightful - 1 fun2 insightful - 0 fun3 insightful - 0 fun3 insightful - 1 fun - (6 children)
[–]soundsituation 3 insightful - 2 fun3 insightful - 1 fun4 insightful - 1 fun4 insightful - 2 fun - (5 children)
[–]magnora7[S] 3 insightful - 2 fun3 insightful - 1 fun4 insightful - 1 fun4 insightful - 2 fun - (2 children)
[–]soundsituation 3 insightful - 2 fun3 insightful - 1 fun4 insightful - 1 fun4 insightful - 2 fun - (1 child)
[–]magnora7[S] 2 insightful - 2 fun2 insightful - 1 fun3 insightful - 1 fun3 insightful - 2 fun - (0 children)
[–]NutterButterFlutter 1 insightful - 1 fun1 insightful - 0 fun2 insightful - 0 fun2 insightful - 1 fun - (2 children)
[–]magnora7[S] 2 insightful - 1 fun2 insightful - 0 fun3 insightful - 0 fun3 insightful - 1 fun - (1 child)
[–]NutterButterFlutter 2 insightful - 1 fun2 insightful - 0 fun3 insightful - 0 fun3 insightful - 1 fun - (0 children)