October 22

Hi all, hope you're doing well ^^

Styling: explanation sections

To create clearer explanations for users in various sections of the site, I realised a specific "explanation template" would be helpful for things where a user needs to be aware of information without specifically looking for details (which is what tooltips are better suited for).

To that end, I took inspiration from BookStack's "callouts" system. Example callouts look like this:

Information callout

Warning callout

Since one of the biggest problems for most sites is users not reading rules and other things they need to know about, making sure important information is clearly signposted will go a long way to mitigating that problem. For now I've created a very similar 'callout' design for Deserted Chateau, that is implemented similarly to the tooltip shells I designed before: they are dynamically rendered before page load in PHP, and can then be modified if needed in JavaScript.

Here's an example of an information callout at the moment, in the Settings -> Account page:

Another example, in the Submit Artwork page:

I'll need to think about the colours for each callout, and which types of callout will be needed (for example, because in Deserted Chateau's case some callouts could be in response to user actions or a specific user's account settings, it might be helpful to have distinct "warning" and "alert" callouts that signify standard warnings and user-specific warnings, or something like that). The colour scheme also needs to be decided, and I need to ensure the background and font colours are as readable as possible, but the system itself works.

Safety Settings implemented

I've implemented the remaining buttons on the User Settings -> Safety page, so that users can unblock/unhide/unmute users they previously blocked/hid/muted there. Definitely needs some styling improvements, but the functionality is done.

View Artwork modal improvements

I haven't made any progress on the view artwork modal itself, yet - I spent most of this period on other parts of Deserted Chateau - but I wanted to decide how to deal with the scenario where a user either refreshes the page, or goes directly to a "/viewartwork/" link (which is the URL for when the view artwork modal is active in a gallery page on some particular artwork).

Ultimately, it's best to cater for the "direct from browser" situation, where a user goes straight to such a URL. In that scenario, the only information we have is in the URL itself, and assuming minimal information means we can have consistent behaviour in this situation. As such, I decided to do something similar to what Twitter does; if you refresh a status page, it goes to that user's profile instead. It makes sense to do this, and there isn't really any other useful action to take; if the user searched for something, we don't know what they searched for, so it's the only practical option.

I've implemented this in the httpd.conf file for the webservers, so the redirect happens automatically.

Artwork interaction buttons improvements

A shortcoming of the existing gallery system is that the standard and square layouts don't allow a user to easily interact with an artwork, whereas the feed layout has interaction buttons on the side.

I thought a neat way to solve this problem would be to add interaction buttons into the title element for each artwork in the standard and square layouts, as that doesn't change the overall space taken up by the artwork (which would mean editing a lot of gallery code to adjust the size calculations), and works pretty well. 

One problem I had to figure out was the Tippy tooltip placement: the "add to bookmark folder" button uses a Tippy tooltip as a kind of popup modal, to allow the user to select which bookmark folders to put an artwork in. The tooltip element itself, although it has a CSS z-index of its own, seems to derive its 'effective' z-index from the artwork's title container (possibly due to the title container only being visible on hover). This meant that if the tooltip appeared on top of another artwork's title overlay, hovering in that region would close the tooltip as the original artwork's title overlay would fade out.

To solve this, a weird workaround was needed, whereby opening the tooltip boosts that specific artwork title overlay's z-index by 1, and closing it returns it to normal. This way the currently hovered artwork's title overlay remains "above" all the other ones until the add to bookmark folders tooltip is closed, so the other title overlays don't present any hover problem.

User moderation database structure

I decided on a structure for user sanctions in the database, which works both as a "current sanctions" table and a "sanctions history" table. I'm partway through improving the user moderation page to work with this; at present it can lookup users and show their sanction history, now I need to implement actually sanctioning a user via that page.

I'll also need to implement cross-referencing of the user sanctions table on certain user actions, when a sanction is relevant to whether the user has permission to perform that action or not.

Misc / Bug Fixes

• Fixed previous/next buttons in galleries, when not using infinite scroll, having incorrect offset values and thus loading the last image of the previous gallery first when going to the next page of results.
  
  
• Added regex support to the FormHandler class used for AJAX forms, to improve input validation.

Documentation

• Added a page detailing tooltip shells and tooltip templates, and their usage to render tooltips server-side.