Wintreath Regional Community

The Frozen Village of Fourneshore - Chats and Discussions => Admin Bureau - Technical and Moderation => Topic started by: Wintermoot on June 20, 2019, 07:36:34 AM

Title: TESTING: Topic View Skin
Post by: Wintermoot on June 20, 2019, 07:36:34 AM
I've been working on a better topic view skin that might be better for mobile, and I'm ready for anyone interested to test it and give feedback before I merge it into the main forum theme. To test it, you'll have to switch to the development theme, and to do that:

1) In your menu (the one at the top right with your username), select Old User CP.

2) Under Modify Profile, select Look and Layout.

3) Beside Current Theme, hit the change link.

4) Scroll down to winter-dev and hit the [Use this theme] link!

Then just view any topic (try changing the size of the browser window while viewing it on PC) and let me know what you think here. It's still a work in progress and probably not a final design cause there's some things I think can be better, but I wanted to go ahead and share it since it's at least useable. :)

Title: TESTING: Topic View Skin
Post by: Ruguo on June 20, 2019, 03:39:18 PM
I definitely like how the new style looks on mobile better than before, but I find the lack of lines dividing the  under from the post a little annoying. That may just be the OCD talking though.

Random query, but do you think there will ever be a dark theme option?
Title: TESTING: Topic View Skin
Post by: Wintermoot on June 20, 2019, 03:50:35 PM
I definitely like how the new style looks on mobile better than before, but I find the lack of lines dividing the  under from the post a little annoying. That may just be the OCD talking though.

Random query, but do you think there will ever be a dark theme option?
Thanks for the feedback! :) For me, it was removing the line between the poster information and the post that took some getting used to, but the more I use it the more I like it...without the lines the post area looks so much cleaner and open. I'd be interested in knowing if you still find the lack of lines disturbing in a day or two though.

Believe it or not, I actually prefer dark themes...Wintreath's theme is the first light theme I'd ever made, in fact. There's some obstacles to having multiple theme options, especially with custom site areas that weren't designed with that in mind, but I'd love to eventually have a dark theme. :)
Title: TESTING: Topic View Skin
Post by: BraveSirRobin on June 20, 2019, 04:05:14 PM
Yeah I'd have to concur the removal of the line between the poster info and the post is quite disorienting :P

The bottom and top line removals/replace with a little bit darker makes everything much cleaner though!
Title: TESTING: Topic View Skin
Post by: Gerrick on June 20, 2019, 05:26:31 PM
As a desktop user, I think it looks quite sharp and modern-looking.

And, wow, I think that's a huge upgrade for mobile. Having the username on top of the posts makes a whole lot more sense. You lose the other bits (post count, karma, familial house, and NS nation), but I suppose those aren't as important.
Title: TESTING: Topic View Skin
Post by: taulover on June 20, 2019, 05:50:48 PM
Congratulations, you might finally get me to turn off "force desktop site." :D

(Though now that I'm trying the mobile site I'm noticing that the forums viewing tables are too large for my old phone screen, and I have to zoom out on each page :(. So maybe not.)

And, wow, I think that's a huge upgrade for mobile. Having the username on top of the posts makes a whole lot more sense. You lose the other bits (post count, karma, familial house, and NS nation), but I suppose those aren't as important.
I think with a bit of work (possibly putting those in smaller, separate columns), those should work in showing up as well. I'm recalling Mafia Universe's mobile site here (or perhaps it's just vBulletin's), where they did similarly and still managed to have the info show up on mobile.
Title: TESTING: Topic View Skin
Post by: Wintermoot on June 21, 2019, 06:20:13 AM
Thanks for the feedback, everyone! :)

Tonight I did some work trying to clean up the top of the page above the posts. I streamlined the breadcrumb navigation (it didn't need to give the topic name since you already know what it is, and there was no point in displaying the category). I also hid some buttons that I doubt are used very often...to show them, all you have to do is hit the ... button.

Title: TESTING: Topic View Skin
Post by: taulover on June 21, 2019, 10:19:17 PM
Like any change, the shortened breadcrumbs are taking a bit to get used to, especially on desktop, and especially since I can't remember what it was like before but it definitely feels different.

Edit: ah, I think the strange part is the current subforum you're in not being on its own line. Feels a bit weird scanning to the far left and not finding it there.
Title: TESTING: Topic View Skin
Post by: Wintermoot on June 21, 2019, 10:28:34 PM
Like any change, the shortened breadcrumbs are taking a bit to get used to, especially on desktop, and especially since I can't remember what it was like before but it definitely feels different.

Edit: ah, I think the strange part is the current subforum you're in not being on its own line. Feels a bit weird scanning to the far left and not finding it there.
Before the breadcrumb navigation took up at least two lines and more often three. I have some other ideas for getting it all on one line though. Hopefully I can work on that tonight. :)
Title: TESTING: Topic View Skin
Post by: taulover on June 21, 2019, 10:34:50 PM
Like any change, the shortened breadcrumbs are taking a bit to get used to, especially on desktop, and especially since I can't remember what it was like before but it definitely feels different.

Edit: ah, I think the strange part is the current subforum you're in not being on its own line. Feels a bit weird scanning to the far left and not finding it there.
Before the breadcrumb navigation took up at least two lines and more often three. I have some other ideas for getting it all on one line though. Hopefully I can work on that tonight. :)
That didn't really matter on larger screens though.

I can see why this is desirable and don't particularly mind the change. This single-line breadcrumb style is used in most other forums after all.

However, most other forums also have a separate in-page subforum title, whereas Wintreath doesn't (and so the last breadcrumb on a subforum page ends up serving the same purpose, which makes it more important).

Edit: changed weird unintentional repetitive wording
Title: TESTING: Topic View Skin
Post by: Wintermoot on June 21, 2019, 10:49:32 PM
That didn't really matter on larger screens though.

I can see why this is desirable and don't particularly mind the change. I can see this single-line breadcrumb style used in most other forums after all.

However, most other forums also have a separate in-page subforum title, whereas Wintreath doesn't (and so the last breadcrumb on a subforum page ends up serving the same purpose, which makes it more important).
No, it doesn't, but the parts I removed weren't necessary, either. I changed the topic title, which can be quite long to "View Topic" because the topic title is already right below it. I removed the category from the breadcrumb entirely because I doubt it's used and it was a duplicate link to the forum front page anyways. I then shortened "Wintreath Regional Community" to "Wintreath". I don't intend on removing the subforum from the breadcrumb.
Title: TESTING: Topic View Skin
Post by: taulover on June 21, 2019, 10:55:16 PM
That didn't really matter on larger screens though.

I can see why this is desirable and don't particularly mind the change. I can see this single-line breadcrumb style used in most other forums after all.

However, most other forums also have a separate in-page subforum title, whereas Wintreath doesn't (and so the last breadcrumb on a subforum page ends up serving the same purpose, which makes it more important).
No, it doesn't, but the parts I removed weren't necessary, either. I changed the topic title, which can be quite long to "View Topic" because the topic title is already right below it. I removed the category from the breadcrumb entirely because I doubt it's used and it was a duplicate link to the forum front page anyways. I then shortened "Wintreath Regional Community" to "Wintreath". I don't intend on removing the subforum from the breadcrumb.
Oh absolutely, the removal of the category is quite helpful, I do recall accidentally clicking on it in the past and getting mildly annoyed.

My point though is that moving the current subforum title off its own line and into the middle of another line deemphasizes it when the subforum title isn't present anywhere else on the page.


And this is getting kinda off topic but the amount that I'm subtly tripping up when trying to navigate this website is making me realize how much I unknowingly rely on this gui element for navigation without even realizing it lol

Like, for some unknown reason, at some point, I apparently have gotten used to using the breadcrumb rather than the logo to navigate back to the main forum, and am now slightly messing up because I'm expecting to click "Regional Community" but am mousing over the first-level subforum breadcrumb instead. :D
Title: TESTING: Topic View Skin
Post by: Wintermoot on June 22, 2019, 03:53:10 PM
The struggles us old-timers take on in the name of modernization. :P

Would it help to display the subforum instead of the forum if the topic is in a subforum?
Title: TESTING: Topic View Skin
Post by: taulover on June 23, 2019, 11:14:50 PM
The struggles us old-timers take on in the name of modernization. :P

Would it help to display the subforum instead of the forum if the topic is in a subforum?
I'm not sure how that would be helpful?

(And to clarify, I'm using "subforum" to refer to any subdivision of this forum, not just nested ones.)
Title: TESTING: Topic View Skin
Post by: Ruguo on June 24, 2019, 01:39:04 AM
So it's been a few days, and I've definitely adjusted to the lack of lines. I still don't like the upper darker part having a hard break next to the profile area, but I have adjusted, and rather like now, the lack of lines. It does grow on one.

I do like the condensed buttons. It threw me when I first noticed it, but I like it.
Title: TESTING: Topic View Skin
Post by: Gerrick on June 24, 2019, 05:39:18 AM
On mobile, all the buttons at the bottom of each post (quote, modify, like, etc.) don't fit in threads where I'm a mod, and so the "like" and "split topic" buttons are cut off. (It's only a problem in portrait mode; landscape is fine.)
Spoiler
(https://wintreath.com/forums/proxy.php?request=http%3A%2F%2Fi.imgur.com%2FgtaNXh9.jpg&hash=afd9596bfb36b649b48babc2910c1c76)
Title: TESTING: Topic View Skin
Post by: taulover on June 24, 2019, 05:01:16 PM
I'm personally not a fan of the condensed buttons, especially on desktop. Hiding features behind menus leads to unnecessary clicks and makes it harder for new members to discover said features, which has already been an issue.

Would it be possible for it to dynamically hide buttons based on screen size, much like the username/avatar placement?

(But even on mobile, it's solved by scrolling, which is something you'll have to do to read the content anyway.)

Not that big of an issue though since the features are rarely used (though, since there is no thread search feature on this forum, Ctrl+F'ing the Print page is actually quite useful and I use it fairly often).
Title: TESTING: Topic View Skin
Post by: Wintermoot on June 24, 2019, 09:49:09 PM
On mobile, all the buttons at the bottom of each post (quote, modify, like, etc.) don't fit in threads where I'm a mod, and so the "like" and "split topic" buttons are cut off. (It's only a problem in portrait mode; landscape is fine.)
Spoiler
(https://wintreath.com/forums/proxy.php?request=http%3A%2F%2Fi.imgur.com%2FgtaNXh9.jpg&hash=afd9596bfb36b649b48babc2910c1c76)
Right off-hand, you shouldn't have the empty space on the right side...the post space should go from one end of the screen to the other at that point. Do you know what resolution your phone is? I'll try to reproduce and fix the issue.

I'm personally not a fan of the condensed buttons, especially on desktop. Hiding features behind menus leads to unnecessary clicks and makes it harder for new members to discover said features, which has already been an issue.

Would it be possible for it to dynamically hide buttons based on screen size, much like the username/avatar placement?

(But even on mobile, it's solved by scrolling, which is something you'll have to do to read the content anyway.)

Not that big of an issue though since the features are rarely used (though, since there is no thread search feature on this forum, Ctrl+F'ing the Print page is actually quite useful and I use it fairly often).
I only hid the buttons that are probably rarely used...I might be biased, but I actually like the buttons hidden on desktop view because it makes things look cleaner, and I think it'd actually help new members find buttons for things that they're more likely to need, like the post button.

I'm considering moving those buttons to the right side of the row with the topic title and changing their formatting to fit, but that depends on if I can get the forum button code to cooperate with me there.
Title: TESTING: Topic View Skin
Post by: Gerrick on June 24, 2019, 10:19:07 PM
Right off-hand, you shouldn't have the empty space on the right side...the post space should go from one end of the screen to the other at that point. Do you know what resolution your phone is? I'll try to reproduce and fix the issue.
I have a Samsung Galaxy Core Prime. A quick Google search says it's 480x800 pixels (can't find the actual resolution anywhere on my phone, but I assume that's correct). I should mention that all pages load zoomed in so that there is no empty space (the screen lines up with the gold borders), but if you scroll right or zoom all the way out, there's the empty space/rest of the page.
image dump
Think it might be related to the category titles at the top of the page. This one has a long one ("Gatekeep's Post - Citizenship and Ambassador Applications"). v
(https://i.imgur.com/dYDiCO5.png)

This one has a short one and so fits correctly ("The Pride - LGBT Chat"). v
(https://i.imgur.com/kghlyeJ.png)

Not sure if this is related, but the main page doesn't exactly line up (you have to zoom out to see everything beyond the gold borders). There's no further empty space to the right, though. v
(https://i.imgur.com/3EYA327.png)

The same is also true for subforums (is that the right term?).
(https://i.imgur.com/1HQ64cR.png)
Title: TESTING: Topic View Skin
Post by: taulover on June 24, 2019, 10:25:54 PM
I'm personally not a fan of the condensed buttons, especially on desktop. Hiding features behind menus leads to unnecessary clicks and makes it harder for new members to discover said features, which has already been an issue.

Would it be possible for it to dynamically hide buttons based on screen size, much like the username/avatar placement?

(But even on mobile, it's solved by scrolling, which is something you'll have to do to read the content anyway.)

Not that big of an issue though since the features are rarely used (though, since there is no thread search feature on this forum, Ctrl+F'ing the Print page is actually quite useful and I use it fairly often).
I only hid the buttons that are probably rarely used...I might be biased, but I actually like the buttons hidden on desktop view because it makes things look cleaner, and I think it'd actually help new members find buttons for things that they're more likely to need, like the post button.

I'm considering moving those buttons to the right side of the row with the topic title and changing their formatting to fit, but that depends on if I can get the forum button code to cooperate with me there.
Perhaps I'm also biased, since I dislike unnecessary collapsed menu & hamburger icons in general.

As a web developer you've probably already heard a lot of the discourse around that, so I won't bore you with it. :P
Title: TESTING: Topic View Skin
Post by: taulover on June 24, 2019, 10:39:52 PM
FYI I have the same issues as Gerrick.

The fact that it bleeds out of the page container isn't much of an issue, but needing to zoom out on non-topic pages to see the content is rather annoying. Given that the main draw of a mobile site is not needing to zoom in/out to see the content, this sort of defeats the purpose and leads to me turning on "Force desktop site" on my profile.

I have an iPhone SE (same form factor as iPhone 5S for those unfamiliar).

another image dump
(https://i.imgur.com/mRSKNOc.png)

(https://i.imgur.com/okfAksu.png)

(https://i.imgur.com/uHfszXV.png)

(https://i.imgur.com/SuU3bc1.png)

(https://i.imgur.com/WwnPC7Q.png)

(https://i.imgur.com/xzmJTMc.png)

(https://i.imgur.com/xlPO1fR.png)
Title: TESTING: Topic View Skin
Post by: taulover on June 25, 2019, 04:55:13 PM
Also, will you get the styling to apply to PMs in the future?
Title: TESTING: Topic View Skin
Post by: Wintermoot on June 26, 2019, 02:55:10 AM
Not all pages have been optimized for mobile. At the moment I'm only focusing on the topic page, but may take up more pages in the future. PM is a pretty low priority, so I can't guess when I'd get around to that.
Title: TESTING: Topic View Skin
Post by: Wintermoot on June 28, 2019, 08:22:35 PM
Today I worked on the bottom post buttons (quote, modify, etc.). I removed the images, which I think looked outdated, and made them look more like buttons. I did some special work with the the like button too...now if you're the author of a post, the button will be darkened and struck through to show that you can't like your own post. If you've already liked a post, it will say Unlike instead of Like (though more work needs to be done to make the button change between like and unlike when you click it).

It doesn't really resolve the issues with mobile, but I think it improves the look of the page...and we'll get there. The solution for mobile is probably to make it so some buttons collapse into a menu below a certain resolution, which is a good bit of work with SMF's code.
Title: TESTING: Topic View Skin
Post by: taulover on June 29, 2019, 05:52:53 PM
These new buttons look nice. Given how you're removing lines I do feel the lines between them could be a bit softer?

You said this doesn't solve issues on mobile, but it does solve one: the like button is now far easier to click without zooming in, even on the desktop site.

The button also looks cool after you click it (though unfortunately that's gone after you reload). I also like that it's possible to tell that you've liked a post, though I do miss the like count being in the button.

However, there is one issue I do have with the like button, which is that it's kinda too similar to the other buttons. Those open new pages, while this one does something different, and I think that would generally imply a different design, much like in the original design.

Also, although the icons are outdated, they do fit all the other icons on the forums (unless you're looking to do a complete overhaul of all of them). And icons in general are still most common, and perhaps even more modern (compare old reddit with new Reddit: the former has no icons and the latter does for comment actions). Maybe more modern-looking icons (Font Awesome icons or something for example) might work? Though I do think I enjoy this look of lack of icons for post actions.

Edit: I'm actually enjoying the look of the buttons quite a bit, they complete the look of the new theme on the desktop site and make it more cohesive as a whole. I might start using winter-dev but still forcing desktop site since other pages are still not optimized for my screen size.
Title: TESTING: Topic View Skin
Post by: Wintermoot on June 30, 2019, 03:12:41 PM
@taulover: The like button does need more work...part of the issue is the script that updates the button after you click is outside the theme, meaning I can't edit it without changing it for all themes. When I do work on it though, I'll try to update it in a way that includes the like count.

In a perfect world I'd love to overhaul the entire forum, but in reality I doubt I have the time to do more than to work on the most used pages, and I decided to do this one because I felt it was the worst of the most used pages for mobile. I took a look at Font Awesome...as icons go, they look neat, and their free ones would cover the post icons, but I'm on the fence. I actually like the look of not having icons...it looks cleaner and more button-like.

Title: TESTING: Topic View Skin
Post by: Wintermoot on June 30, 2019, 11:53:53 PM
Today I continued working with the like button...the like/unlike button now shows the number of likes, and you can actually remove a like now! I discovered in the course of working with the button that you couldn't remove likes before...you could at one time by disliking a post, but when we removed the dislike button that removed that ability as well, which is now restored. I also worked on the collapsing menu buttons, which was a major pain in the ass to work with, but now on very low resolutions, the remove post, split topic, and report post button will collapse into a 'More' button that will show a menu when clicked.
Title: TESTING: Topic View Skin
Post by: taulover on July 01, 2019, 06:25:15 AM
Today I continued working with the like button...the like/unlike button now shows the number of likes, and you can actually remove a like now!
Today I continued working with the like button...the like/unlike button now shows the number of likes, and you can actually remove a like now!
and you can actually remove a like now!
holy shit this is a gamechanger

I also worked on the collapsing menu buttons, which was a major pain in the ass to work with, but now on very low resolutions, the remove post, split topic, and report post button will collapse into a 'More' button that will show a menu when clicked.
Yay it works

Though I'm insulted that my iPhone SE is considered to have "very low resolution." :P Perhaps it's time for a new phone...
Title: TESTING: Topic View Skin
Post by: _zM on July 01, 2019, 06:54:55 AM
"Unlike" appears to be misspelled as "Unike".

Edit: This appears to be the case no longer. Thanks!
Title: TESTING: Topic View Skin
Post by: taulover on July 01, 2019, 08:48:20 PM
What is happening
(https://i.imgur.com/9AWAtcu.png)

Edit: ok I'll change back to old theme and give you some time to do whatever you're doing because the entire site is going a bit wack rn
Title: TESTING: Topic View Skin
Post by: Wintermoot on July 01, 2019, 09:48:19 PM
What is happening
(https://i.imgur.com/9AWAtcu.png)

Edit: ok I'll change back to old theme and give you some time to do whatever you're doing because the entire site is going a bit wack rn
Now you've seen just a glimpse of the pain of working with SMF's theme code. :P

Today I revamped some old code that controlled the position of the link tree and menu to the right of it, which should give it more flow and hopefully fix the issue where on very low resolutions it was pushing out and creating blank space to the right of posts (the issue Gerrick identified earlier). I also removed the number of times a topic had been read from the topic title on the page...out of all the information to display about a topic, that's probably the least useful to see.

I don't believe there's much left to do on this page. I would like to remove the moderators from navigation tree and move that information elsewhere (I'm just not sure where yet). I would also like to revamp the buttons at the top and bottom of the topic pages...I collapsed some of the least used buttons into one earlier one, but now compared to the new buttons in the posts themselves the ones on the top and bottom look amateurish, and I'd like to change that. I'm also going to investigate further whether quick reply should be enabled by default, so that when you hit the quote button the quote appears in the quick reply box at the bottom of the page rather than going to an entirely separate page which also isn't mobile-friendly. Currently, it's available, but you have to uncollapse it in order to enable it in that way.

Title: TESTING: Topic View Skin
Post by: taulover on July 01, 2019, 10:15:48 PM
The spacing on the top is too big on winter-dev now I feel, though it's better than it popping into the page content as it was briefly. :D

I would greatly prefer if pageviews were not removed. I feel like this is still useful information that's occasionally used to gauge activity (for instance, Clickwar looks like a small topic until you see its pageviews) and don't want to see it disappear wholesale just to make the pages look slightly cleaner.

I also probably wouldn't like quotes in quick-reply, at least on desktop. That's now an extra button to press and wait for just so I can get use gui bbcode controls.
Title: TESTING: Topic View Skin
Post by: Wintermoot on July 08, 2019, 07:11:48 AM
Tonight I'm experimenting with moving the top buttons and page links below the topic title, and changing the buttons to look more like the buttons below each post. I think it almost finishes up the cleanup of the area above posts (although the ... needs to expand down, not to the right). Once things are finalized there I'll apply the style to the bottom buttons/pagelinks too.
Title: TESTING: Topic View Skin
Post by: taulover on July 08, 2019, 08:06:26 PM
Will you also make these changes to viewing (sub)forums? If topics are changed and forums are not, that destandardizes the look and feel of UI buttons, which is certainly not a good thing.

Also, not sure how to feel about the button styling/coloring... it does seems to pop out a bit less to my eyes. Not sure why, but it also feels kinda... unmodern? which I wouldn't really care about except one of things people seem to like about this new theme is the modern feel. Maybe it's the pure black on medium gray (which I also found strange when you first added it to the initial winter-dev theme but which I've since gotten used to, though this gray is darker), or the return of a new highly visible black line?

And a suggestion, if you're still trying to remove redundant/cluttering info: maybe get rid of "Topic:"? It's fairly self-evident that the thing is a topic, and the breadcrumb also renders it redundant. (And it gives you space to add back page views :P)

(Sorry if my many posts/feedback are coming off as nitpicky and stuff)
Title: TESTING: Topic View Skin
Post by: Wintermoot on July 08, 2019, 08:20:41 PM
Will you also make these changes to viewing (sub)forums? If topics are changed and forums are not, that destandardizes the look and feel of UI buttons, which is certainly not a good thing.
I would like to...eventually. Realistically I'm not sure if I want to make that my next project with so many other things I want to work on, but eventually, yeah.

Quote
Also, not sure how to feel about the button styling/coloring... it does seems to pop out a bit less to my eyes. Not sure why, but it also feels kinda... unmodern? which I wouldn't really care about except one of things people seem to like about this new theme is the modern feel. Maybe it's the pure black on medium gray (which I also found strange when you first added it to the initial winter-dev theme but which I've since gotten used to, though this gray is darker), or the return of a new highly visible black line?
I agree for the most part...structurally I think it looks good, but I don't think the colours are quite right. The buttons need to pop more, and I'm thinking of making the bar more blue than grey. I experimented a lot with the line...without it it looks visually confusing in the area of the buttons, the first poster topic, and the first poster time...the line at least breaks those elements apart. Maybe having the bar be more blue would allow the line to be less severe. I'm open to ideas on this one, I'll probably need some inspiration here.

Quote
And a suggestion, if you're still trying to remove redundant/cluttering info: maybe get rid of "Topic:"? It's fairly self-evident that the thing is a topic, and the breadcrumb also renders it redundant. (And it gives you space to add back page views :P)
That's a good idea...I'll implement it next time I'm working on the design. :)

Quote
(Sorry if my many posts/feedback are coming off as nitpicky and stuff)
I appreciate the consideration, but don't worry about it. I started this topic because I'd like to make this page as perfect as possible, with a lot of attention to detail. :)
Title: TESTING: Topic View Skin
Post by: taulover on July 08, 2019, 08:55:24 PM
Will you also make these changes to viewing (sub)forums? If topics are changed and forums are not, that destandardizes the look and feel of UI buttons, which is certainly not a good thing.
I would like to...eventually. Realistically I'm not sure if I want to make that my next project with so many other things I want to work on, but eventually, yeah.
Hmm, if the buttons remain changed in one place but unchanged in another in the long term on the default theme, I feel like that might not be good for the cohesiveness and learning curve of the site.
Title: TESTING: Topic View Skin
Post by: Wintermoot on July 09, 2019, 09:40:33 PM
Today was a lot of nitpicky design work...a lot of time spent playing around with colours and different configurations, especially with the new topic options area that I changed around last update. I also spent some time making sure the new layouts looked fine on poll and Clickwar topics, and make some modifications.

I think we're getting very close to finishing this project and moving the new topic page over to the main theme. ^-^
Title: TESTING: Topic View Skin
Post by: taulover on July 10, 2019, 04:46:31 PM
Nice.

Some thoughts:
The new buttons look rather light. (The fact that browsers display colors differently means that it does look a bit better on Chrome and especially on Firefox though [more saturated colors in general I think].)

The timestamp color also feels light (this one isn't changed by browsers), the contrast with the background is a bit low. The new color of gray (it seems to have different color content, not just a different shade of the same color? correct me if I'm wrong) also feels like it clashes with the existing grays. (Same goes for the new buttons/pages bar a bit.)

It also feels somewhat unclear that the "..." is a separate button with expandable options, I'm a bit worried for people trying to learn the site in the future never realizing that those features even exist at all.
Title: TESTING: Topic View Skin
Post by: taulover on July 17, 2019, 09:09:36 PM
It's honestly hilarious right now opening each page and having the Reply and ... buttons be different colors every time.

Edit: hmm I like the one right now :D
Title: TESTING: Topic View Skin
Post by: Wintermoot on July 17, 2019, 10:04:21 PM
@taulover: I hope the one you liked was the one I picked, cause I only noticed this after the fact. xD

I experimented with the colours some more, and got the box that opens when you click ... in order. I think we're getting very close to being finished. :D
Title: TESTING: Topic View Skin
Post by: taulover on July 18, 2019, 05:21:08 PM
@taulover: I hope the one you liked was the one I picked, cause I only noticed this after the fact. xD

I experimented with the colours some more, and got the box that opens when you click ... in order. I think we're getting very close to being finished. :D
I posted that about the color right before the one you settled on. I think this one is even better though. :)

The new shade of grey seems a bit too red relative to everything else, perhaps because the site is quite blue overall. (Both this color and the previous one are pretty decent though.)

The dropdown menu seems to be popping up in a weird place? Don't think that'd be where I'd expect the menu to show up. But I must imagine that working with the site CSS has to be very tricky for you to settle on that positioning.

(I also still think the functionality of the "..." is unclear; it's already a common criticism of hamburger menus, that people often don't even know it's a button, but at least the hamburger icon has the advantage of being a common part of modern UI/UX language.)

Edit: Also locked threads look super wonky, as I discovered when this thread got locked. :P
Title: TESTING: Topic View Skin
Post by: taulover on July 19, 2019, 12:06:32 AM
Also weird bug, there's white vertical lines showing up on the buttons of (sub)forum pages.
Title: TESTING: Topic View Skin
Post by: Wintermoot on July 20, 2019, 02:26:12 AM
@taulover: Could you screenshot how the dropdown menu and locked thread pages look for you? I've tried it on different browsers and resolutions on my home and work computers, but couldn't find anything wrong.
Title: TESTING: Topic View Skin
Post by: Wintermoot on July 20, 2019, 05:41:24 PM
Today was all about putting out detail and final touches:

1) When you like or unlike a post, the list of people who like the post will update along with the number on the like button. It's a minor thing, but I think it makes the page feel more dynamic when all relevant things update when you click something.

2) Based on a suggestion from @taulover earlier in this topic I implemented Font Awesome, and we are now using two of their icons: a clock icon by the post time, and a thumbs-up icon by the people who liked a post (which replaces the older outdated icon). Font Awesome was really easy to set up and use, and I imagine that I'll use it more as I update other pages and create new stuff. Thanks for the suggestion, taulover! :)

3) I started experimenting with the topic title area and trying to get views and posts on the page, so at least for now the topic title appears twice...in a new and old position. The new one is at the top of the page, has a larger font, and includes the post and view stats. I'd love to have feedback on whether it looks good on its own at the top, whether the new formatting looks good but it should go in the dark blue bar like it's always been, or whether it all just sucks, lol.

I would still like to move the list of moderators from the breadcrumb navigation to its own area somewhere, too. I tried putting it below the posts and view counts, but it made the space look too dense with different data. Any suggestions there would be awesome too. :)
Title: TESTING: Topic View Skin
Post by: taulover on July 20, 2019, 08:27:07 PM
@taulover: Could you screenshot how the dropdown menu and locked thread pages look for you? I've tried it on different browsers and resolutions on my home and work computers, but couldn't find anything wrong.
Ah, I think I spotted the issue after looking at the menu on the Underhusen, where I'm a moderator.

I think you're expecting the "..." to be the third item in the menu, after "Add Poll," but for most people on most topics, it's actually the second item on the menu. So it pops up not under the "...", but weirdly to the right:
Spoiler
(https://i.imgur.com/D9rO82q.png)

Try testing on a non-moderator account, perhaps? (And also try testing on locked topics because on those, "..." is the first button, because you can't reply.)

Also this is a bit more nitpicky but the bottom menu basically grazes the floor of the webpage for non-moderators and weirdly expands it for moderators, leaving no margin. Maybe experiment with expanding it upward?

(And now that I'm seeing all the functions hidden in the menu, I'm thinking that in time we're going to end up with an Underhusen Speaker who has no idea how to lock or move topics because they didn't know that the buttons even existed.)

1) When you like or unlike a post, the list of people who like the post will update along with the number on the like button. It's a minor thing, but I think it makes the page feel more dynamic when all relevant things update when you click something.
Niiice

That's one of those things that I've always wanted but never really thought about in detail or thought about requesting because of how minor it seems

3) I started experimenting with the topic title area and trying to get views and posts on the page, so at least for now the topic title appears twice...in a new and old position. The new one is at the top of the page, has a larger font, and includes the post and view stats. I'd love to have feedback on whether it looks good on its own at the top, whether the new formatting looks good but it should go in the dark blue bar like it's always been, or whether it all just sucks, lol.
My personal preference would still be to put it in the blue bar. If you don't want the view count to be on the same line as the title, maybe you could put it underneath (but still in the blue bar perhaps?) as you did in this new title?

If you want to put the title up there for some reason, I might suggest integrating it into the breadcrumbs? For all its faults, I think Tapatalk's website does a good job of that.
Title: TESTING: Topic View Skin
Post by: Wintermoot on July 21, 2019, 06:27:13 PM
I've put the topic information back in the bar...how does it look?

Also, I think I fixed the issue with locked topics, both by changing how the submenu is displayed and actually adding a non-functional locked button so people will know the topic is locked. :)
Title: TESTING: Topic View Skin
Post by: Wintermoot on July 22, 2019, 07:25:11 PM
Today I did some work with quotes...nothing major, just made them a bit more visually appealing, especially the quote header. :)
Title: TESTING: Topic View Skin
Post by: taulover on July 22, 2019, 09:50:54 PM
I've put the topic information back in the bar...how does it look?

Also, I think I fixed the issue with locked topics, both by changing how the submenu is displayed and actually adding a non-functional locked button so people will know the topic is locked. :)
Title looks a bit large (and thin?), possibly just because it's different from previous (and the reply page) size.

I like the change from "..." to "More" with dropdown icon.
Title: TESTING: Topic View Skin
Post by: taulover on July 23, 2019, 04:18:24 AM
Two things:

It seems like the live like update only happens if you're not the first/only person to like the post?

The weird think vertical lines are on the (sub)forum buttons again. I think this might have been fixed earlier, so I'm pointing it out again.
Title: TESTING: Topic View Skin
Post by: Wintermoot on July 23, 2019, 06:36:33 PM
I believe I've fixed those three issues. :)
Title: TESTING: Topic View Skin
Post by: taulover on July 24, 2019, 02:03:55 AM
Rounded rectangles! Truly we have entered the 21st century. :D
Title: TESTING: Topic View Skin
Post by: Wintermoot on July 24, 2019, 06:58:59 AM
Haha, and with that I would say the release of these changes to the main skin is imminent. :)
Title: TESTING: Topic View Skin
Post by: taulover on July 27, 2019, 06:16:03 PM
Ah, I just noticed an issue with the menu.

"SET TOPIC NON-STICKY" is too long to fit in the space, and the text disappears outside of it.

Maybe rename to something shorter like "STICKY TOPIC" and "UN-STICKY TOPIC"?
Title: TESTING: Topic View Skin
Post by: taulover on July 28, 2019, 07:16:22 PM
And something else: hovering over Members gives a menu with no text in it; it should/used to have two options, including one to search for member.
Title: TESTING: Topic View Skin
Post by: taulover on August 06, 2019, 09:22:31 PM
Also, nation and familial house indent, but only on the first line. Is this intentional?
Title: TESTING: Topic View Skin
Post by: Wintermoot on November 22, 2020, 04:45:20 AM
Been awhile, huh?

The new bookmarks feature required some updates to the mobile skin so that elements didn't slide into each other. The Add Poll button for topic creators has been moved to the More menu, and the page links have been moved above and below the topic posts in mobile view.

While I was at it, I fixed the topic page-specific issues taulover raised in the last few posts, specifically indenting on nation and house stats and changing the wording for the Sticky/Unsticky buttons.

These fixes are currently on the development skin, and will be rolled out along with the bookmarks feature to the main skin soon.