search

LogicAndTrick / snarkpit-reboot

New version of Snarkpit
MIT License
0 stars 0 forks source link

V7 Reboot Draft Feedback #2

Open Riven202 opened 5 months ago

Riven202 commented 5 months ago

General Comments:

Home Page:

Maps Landing Page:

Map Detail Page:

Articles / Downloads Landing Page:

User Detail Page:

Forums

Group Landing Page:

More comments to come!

LogicAndTrick commented 5 months ago

Glad you're liking it overall, and this is great feedback. Going to make a checklist for myself to work on over the week. Also a few responses to questions/etc:

Checklist

LogicAndTrick commented 5 months ago

Progress in checklist above. Notes:

Riven202 commented 4 months ago

Hey Dan,

Thanks for continuing to stay on top of this and keeping things moving! I noticed some of the updates, and I think its coming along nicely! I've added my responses below your comments and numbered them for ongoing reference.

1. SVG Graphics / Updated Logo:

SVG (or even PNG) logo would be much appreciated, perhaps in various different layouts (e.g. logo only, logo + text, etc). I couldn't find the original art for the snark so I ended up clipping it out from the original site's graphics.

2. Responsive Ordering:

For changing the order on the mobile layout, I was able to get most of the changes you wanted except for "Recent Updates" which I couldn't put after "Recent Maps" - I can only change the order of things within the same column, but I can't put stuff from the left column underneath stuff from the right column. I put it below "Spotlight" instead, hopefully that's enough. If you really want it that order it's possible, but I would need to duplicate that section into both columns and toggle which one is visible based on the window size - not ideal, but doable.

  • Since Journals were always an underutilized tool, I'd like to avoid giving them a spot at the very top of the home page. Can recent journals section go beneath recent maps section on the medium and large screen breakpoints otherwise? I like where it appears beneath the recent maps on the small screen breakpoint now. Does that still keep it in the same column?

3. Star Maps:

I think I might have not implemented the "star maps" feature, should I add it in?

  • Yes please. That's essentially our recommended maps tag. These are maps that are definitely worth a user's time.

4. Online Users:

I can add the 'other users online' section back in, maybe it can just show logged in users based on their last activity? If they visited any page on the site in the last 10 mins maybe? Tracking the anonymous logins is a lot harder, and I'd like to avoid that if possible. Same for the link to the dedicated page of online users - it seems somewhat overkill. Maybe the whole thing could be replaced with an "active users" section on the home page, like TWHL has?

  • If you're referring to the awesome active user list on TWHL like below, then yes! I think that would be an awesome addition and provide some much-needed encouragement for users ghosting.
  • image
  • Can we add that beneath the Recent Forum Posts section on the home page?
  • I'm completely fine with eliminating the dedicated user's list page otherwise.
  • Additionally, can we add a new line to the common footer on each page?:
  • image
  • Into something that reads like:
  • © Snarkpit.net 2001 - 2024 • about us • contact 184 users online • 13 members browsing forums Snarkpit v7.0 created this page in 1.0037 seconds.

5. Forum Icons:

The forum thread icons just represent if there's new posts that were posted after your last login. I can add a tooltip to them.

  • I think that's completely fine and does the trick!

6. News Items:

I made some changes to the mobile home page - only the first news post is shown, and the first 3 spotlight items. Let me know if this is no good, I can change it back. I ended up changing TWHL to just one new post on the front page since we post news so rarely, and it doesn't make a lot of sense to make everyone scroll past multiple old news post to see the forum updates. Spotlight is 3 because 3 icons fits nicely into 1 row (4 seems a bit small, and 5 is way too small).

  • I think that's a good idea, especially for mobile. I know the "Community News" header at the top is a link to more news, but should there be a new button added beneath that post in the mobile version to "See more" ? But maybe that's not necessary. What are your thoughts?

7. BB Code:

BBCode - the old site had some weirdness going on with bbcode, especially in articles - some of it was pre-parsed and the html saved to the database, and some of it was parsed and converted into html when the page is loaded. It's more consistent now, the bbcode is saved to the database and also converted to html and that's saved into a second database field. It's a little bit more efficient than having to parse the bbcode for every post every time a page is loaded. The BBCode is actually using the same parser that I made for TWHL, which I call WikiCode. I removed most of the TWHL-specific features and added the missing SnarkPit features so it's pretty much compatible with how SnarkPit did it before. Markdown is probably not a good idea since there's a lot of history in the threads that use BBCode stuff that markdown doesn't support too well. My WikiCode variant is sort of a mashup of BBCode and Markdown which allows stuff like bold and /italics/ without typing [b]bold[/b] and so on, so hopefully it does the trick.

  • I think the new system works great, and don't have any other objections to what you pointed out. I think the new system makes a lot more sense for what we need.

Will follow-up with more comments.

Riven202 commented 4 months ago

Hope all is well, Dan! I've got another round of comments queued up, but I think this will cover the last of the design changes, and the rest should just be bug squashing. There was a bit of time between me initially testing the site to write these down, and me posting them here, so I noticed some were no longer issues, and appreciate you continuing to work on the site! I'm feeling really good about how both the mobile and desktop versions of the site are coming along. And it's performing beautifully for me! It's so wonderful to see the Pit get the kind of love needed to keep the content around. I really appreciate your time on all this.

Here's a design thoughts I had as I made efforts to check out both the mobile and desktop versions of the site:

Design Requests:

  1. Header Menu Links: image
    • The top menu links are noticeably different from the original website's link font, which I think will remain distracting to some past users. Does it break anything to update the font for those links to the standard web font: Impact at around 26 pt size, per my experiments below? image
  2. Side Sheet:
    • Can the menu items in the side sheet also match the font and style (all-caps) of the main menu?
  3. Threads:
    • Looks like some users have written URLs and other long strings in their user profile fields that appear next to their avatar on thread posts. Does it make sense to add a truncation script with an ellipsis to each of those items so as to prevent them from overrunning into the body of a post? I'd expect the following example might look something like: "https://www.gamebanana.c..." image
  4. Forum Icons:
    • On a forum's top page with the list of icons along the left side, can we have the icons stack vertically rather than horizontally? They take up a lot of room on mobile, and can make reading the forum topic rather difficult: image
  5. Thread Posts on mobile:
    • On the mobile post shown below, the default author section for each post takes up an inordinate amount of space, which can make for a lot of scrolling through a longer thread: image
    • Does it make sense to provide a different stacking arrangement on mobile breakpoints that reduce or limit some of the author's details? I really appreciate how it was accomplished on TWHL (highlighted below), and I can see that working on the Pit in a similar fashion: image
    • The SnarkPit always listed a lot with a user's post, notable even back on the early 2000's internet standards, so on mobile I would appreciate limiting most of those details in favor of a slimmed down thread to reduce scrolling. I still like the idea of listing their post quantity beneath their name, since that conveys some kind of seniority across user's feedback. Formatted, I can see the following info appear at each author's section above the post itself:
    • Riven
    • 1,628 posts
    • Posted on Sun Jul 7th 2024 at 4:22pm
    • I imagine the author's username would be a little larger font size than the other details.
  6. Thread Edit Buttons on Mobile:
    • The edit buttons on mobile when logged-in wrap in a way that looks odd or may take up more room than necessary in the overall height of each post. I understand this may only be an issue for the super admin profile, since that account is the only one that sees a delete button on every single post, so consider this a low-priority.
  7. Map Details Page:
    • Since there was always a bit of inefficiently distributed spacing for a Map's detail page, does it make sense to reorder or sort some of the sections to give more room to the Map Info section, as shown below? image
    • I imagine this would allow the Map Info section to grow into 2/3rds of the space provided ideally.
    • I'm ok if this means the map rating section needs to come before the downloads section in all breakpoints as they appear on the detail page.
    • Can we add a breadcrumb trail feature at the top of a map's detail page that gives you a link back to the Map's search page with that game category filtered? This would work in a similar fashion to the forum breadcrumb trail feature. So on a map it might read like: _"Maps / Counter Strike Global Offensive / surf_axbl..."
    • I can image the map name itself might need a truncation with ellipses added to prevent the breadcrumb trail from getting too long: image
    • I understand we already have links back to the map's game page, but this would standardize the breadcrumb feature in a way that makes it obvious no matter where you are on the site.
  8. About Us:
    • Have you visited the About us page (linked in the footer on each page)? Don't forget to add your own entry there, since you've more than earned it! Each developer has had an opportunity to leave their mark there no matter how promising or real you feel it might need to be. I like the sense of history it provides, and a bit of insight into the story of the Pit itself.
  9. Thread Reply Section on Mobile:
    • While I love how true-to-form you've been able to design and modernize the reply section on SnarkPit, I'm realizing on mobile breakpoints the Smilie section always left much to be desired.
    • The Smilies sections takes up more than its fair share of space on mobile. Does it make sense to collapse the list to a button on mobile similar to the other icon buttons throughout the rest of the site? image
    • I imagine using this icon or one similar in a button would be sufficient: https://fontawesome.com/icons/face-smile?f=classic&s=regular
    • Additionally, thinking through the location of the "Add signature" checkbox when the message preview can get quite long on mobile, does it make sense to move that checkbox together with the "Live Preview" checkbox so that its not as easy to miss?
    • If we also collapse the Smilies section, then I can image both the message preview and editing field would grow to fill the width like so: image
    • This way, when the Smilies button is expanded, it would fill the space in the way the reply section is currently formatted. What are your thoughts on this?

Bugs:

  1. Header:
    • At medium breakpoint, the top menu expands to wrap links (links that appear when logged-in), causing the SnarkPit logo graphic to split: image
  2. Thread Quote Button:
    • At some point when clicking the quote button on a thread to reply, the page seemed to time-out and never load up. This however, seems to have been fixed between the time I noted this, and posting it today.
  3. Thread Edit Buttons on Mobile:
    • The edit buttons on mobile when logged-in wrap in a way that looks odd or may take up more room than necessary in the overall height of each post. I understand this may only be an issue for the super admin profile, since that account is the only one that sees a delete button on every single post. So consider this a low-priority.
  4. Maps Pagination on Mobile:
    • Maps pagination runs off the edge of the screen when viewed at mobile breakpoint: image
    • I'm not sure if this means the pagination list is simply shorter at smaller breakpoints, revealing fewer pages to cycle through. What are your thoughts on that?
  5. Map Detail Page Image Buttons:
    • On first load of a Map's detail page, the image cycle buttons beneath the image appear correctly sized. However, on tapping or clicking one of them, they become a much larger size as shown below: image image
    • I don't necessarily mind the larger button sizes on mobile, as those appear correctly sized for tapping with a finger. I suspect however, the resizing behavior should not be dependent on clicking/tapping one of the buttons, but rather based on real-time breakpoint resizing?

Items I'm working on:

I will continue to review more of the site testing each of its features and will follow-up here. I'll start to limit my comments to bugs and no longer anticipate asking for any new feature requests like what was listed above, so we can start to wrap-up what we have.

Looking forward to hearing back!

LogicAndTrick commented 4 months ago

Thanks for the detailed feedback, those are all achievable - I'll probably work on them this upcoming weekend.

LogicAndTrick commented 3 months ago

Ok, I've worked through most of the most recent feedback - I'm aware I've still got some more things to do from the initial post.

Design requests:

Bugs:

LogicAndTrick commented 4 weeks ago

@Riven202 long time no update :)

Someone nudged me about this today as the main site was offline (apache had crashed, I fixed it already) so I figured I'd close out the two last things that I hadn't done yet. No pressure, but it'd be great to get the new site deployed at some point. Let me know if you have more feedback or if there's any feedback I missed in the thread.

Added today - I think this was the last remaining things that weren't done yet: Active users on front page image

Online users in footer - tracking anonymous users is something I would like to avoid, so the footer will only show the count of registered users who have accessed the site in the last 10 minutes - it is cached and only updates once a minute so don't worry if you log in and it doesn't immediately go up by 1. image

Riven202 commented 3 days ago

Hey Dan,

Thanks for soldiering on through the long months! It feels as though we're nearly there. And with the recent Half-Life 2 20th anniversary making a splash in the Valve community, it'd be nice to get the new Pit up and running in time for the holidays this December!

The site is looking slick, and running even better, and the new Active users feature is awesome! It really sells that community energy when you can see others engaging in real time. Thank you for implementing it!

I have just a few more bugs, and some hanging design "cleanup" requests, since I made it a point to navigate the site entirely on mobile, as well as push and turn all the back-end dials you painstakingly re-crafted and re-organized. The site is humming super smoothly, so this is my last list of design items, and with your thumbs-up, I'm comfortable going public with v7. Let me know if you have any objections.

A few notes on my previous promises:

Design Notes:

  1. Menu button overlaps header logo graphic on mobile: Note: This is not evident for whatever reason when I emulate a mobile responsive simulation with the dev mode in Edge. So surprising to see it this way:

    image

  2. Poster Listing Squeezed on Mobile: When viewed on my iPhone Xs, the overlap of the post count above the post timestamp gets a little squashed. I'm ok hiding the post count on mobile if it means we don't get an awkward blank line between the user's name and the timestamp, since there's many users with usernames just as long as this one.

    image

  3. Home Page Journals section: a. I may have missed where you previously responded to this, but since the Journals feature was always underutilized, I'd like to avoid giving them a spot at the very top of the home page, especially since they may perpetually remain dated. b. Can we slip this to the bottom of the maps section at medium and large breakpoints? Otherwise, I like where it appears beneath the recent maps on the small screen breakpoint now.

  4. Access Levels: Do Moderator, Admin, and Super Admin provide distinctly different access levels? Admin and Super Admin seem to have similarly listed site management options, but I may be missing something.

  5. Snow Snarks: a. This is an old fan favorite from the very first version of the Pit. They are small images of snarks with santa hats on that gently drift down from the top of the page to the bottom. Clicking on one causes it to play an explosion gif. I enable them manually through the Super Admin > Site Config page under: "snow_snarks" parameter. I usually do this at the beginning of December each year. b. Since this almost always gets cheers, is it easy to re-implement this feature again?

  6. Upgraded Search: I'm loving the new search results! It's actually useful, finally!

  7. Support Forum Question / Answer Feature: a. The v6 edition of the Pit introduce a "Support Forum" which meant the ability for the original poster, or a moderator to select a right / wrong answer on any subsequent post in that thread. That post receives an accepted answer banner. And the option was a drop-down list on each post. The options are:

    • Unset status
    • Assisted
    • Incorrect

    b. These threads could be filtered in a search. c. That forum's thread list also included a column showcasing threads with answers:

    image

    d. Image below is what an accepted post looks like, with the drop-down list at the top.

    • I am not sold on this graphic design for an accepted answer, because I believe it's easy to miss while scrolling down a long thread, but it worked.
    • Would be nice to have a "jump to first accepted answer" button or something similar at the top of such a thread.

    image

Bugs:

  1. Header Banner No Link on Mobile: The Navbar banner logo image does not work as a link back to the home page at mobile screen breakpoints.

  2. Missing Reply Text Formatting Buttons on Mobile: The reply section hides any text formatting menu buttons while viewed on mobile responsive size: image

  3. Formatting help Button: Clicking the "Formatting help" button in the reply section directs you to a 404 section page now. I'm not actually sure what that page used to be though. Do you have a new guide that gives direction on how to use the new text styling syntax and commands?

  4. Forum Thread List Spillover: a. The Forum thread list on any forum page on mobile overflows outside the mobile width for me on iPhone Xs. b. Example taken from the Forums / General Banter thread page: c. This same issue also appears on the Forums / Threads page when accessed from a user's control panel Links list. image

  5. Post List Mobile View Not yet Updated: a. Control Panel > View Forum posts option takes you to a post list that is not yet updated to match the recently revised mobile version of the post list mobile responsive layout. b. Forum / Posts: image

  6. Change Email SQL Error: a. Control Panel > Update email option takes me to an SQL error page: image

  7. Spotlight List Spillover: a. Admin page > Spotlight > Spotlights table overflows beyond the edge of the frame on mobile: image

  8. Games List Spillover: a. Admin page > Games > Games table overflows at most all breakpoints. b. Since the table is so wide, maybe it makes sense to give it an in-frame horizontal scroll bar?

Conclusion:

...And that's it! The site is running extremely smooth for me; definitely makes it feel much more energized! Looking forward to being able to reliably use the site on mobile now!

Feel free to reach out to me on Discord if you have any questions/follow-up if we need to chat before taking next steps. Thanks again for putting all your time on this! It really means a lot that you're able to bring the old site back to life! Looking forward to getting feedback from everyone once we go live.

Best, Eric

LogicAndTrick commented 1 day ago

Design:

  1. I changed it to hide the snark logo when the viewport is too narrow, I couldn't really think of any decent alternative to handle smaller screens that didn't look worse than that. chrome_s9Lbwda9uO
  2. Slightly updated the layout on narrow screens to improve the view: image
  3. Moved journals to be below latest maps on all size screens
  4. Access levels:
    • moderators can: delete/edit articles, forum posts, forum threads, downloads, and news
    • admins can: everything moderators can do, and use all parts of the admin page except for the super admin stuff
    • super admins can: every admins can do, change the level of other users, obliterate users (for spammers), delete user accounts (for non-spam account remove requests)
  5. TWHL has something similar and its based on the date (displays during December) rather than having to be turned on, so I've done something similar for the snow snarks too. Add ?snow to a url to preview outside of December. Unfortunately the explosion gif looks pretty bad in Firefox due to how it handles looping, I can't do anything about that...
  6. Glad you like it :)
  7. Hoping that we can exclude this feature as it wasn't used too much (only about 1 in 10 posts were marked as answered, and those forums were not used all too much)

Bugs:

  1. Made the header a link for mobile screens
  2. Unfortunately that's hard to change, there's just not enough screen page to put all the buttons there without it looking very messy, which is why those buttons are just hidden on small screens.
  3. I haven't made this page yet but it'll be very similar to the TWHL formatting help page, with adjustments to match the Snarkpit flavour of the formatting.
  4. I hid the 'views' and 'last post' columns on the thread list page for narrow screens, which makes it a bit nicer. On the page accessed from user control panel > links, the 'user' column is also hidden.
  5. Updated the user > forum posts page to match the regular post listing page on mobile.
  6. I can't seem to get this error when I try, can you try again?
  7. To be honest I didn't design any of the admin pages for mobile since that's behind the scenes stuff, but I've fixed this by removing the 'by' column on small screens.
  8. As above, but fixed by tweaking the text wrapping and hiding some columns as the screen shrinks.