What happened to the Nesdev phpBB theme?!?!

Found an issue with the phpBB system here at NESdev? Use this forum to report problems.

Moderator: Moderators

Rahsennor
Posts: 479
Joined: Thu Aug 20, 2015 3:09 am

Re: What happened to the Nesdev phpBB theme?!?!

Post by Rahsennor »

Finally, our absentee admin returns. Glad to see you again, WhoaMan. I mean it.

As for the ongoing discussion: I could hardly care less about the theme. My beef is that everything is broken.

<rant>
Every single button (and some things that aren't buttons) on the site has a box full of hex instead of a readable icon or label.
Every second button produces a popup on hover (instead of click), obscuring a huge chunk of the screen and stealing clicks for no reason.
Half the links I want are hidden somewhere inside said popups, so I couldn't CSS them away if I wanted to.

The act of trying to navigate the site is like trying to find my way to the bathroom in the dark after someone has rearranged all my furniture. I have to wave my mouse everywhere waiting for a popup or tooltip to appear to tell me where to find what I'm looking for. Even logging in is a pain in the neck.

Whoever designed this alleged 'user interface' should be strung up by the ankles over a pile of manure for a week to give them an appreciation for just how much it stinks.
</rant>
User avatar
Bregalad
Posts: 8055
Joined: Fri Nov 12, 2004 2:49 pm
Location: Divonne-les-bains, France

Re: What happened to the Nesdev phpBB theme?!?!

Post by Bregalad »

Rahsennor wrote: Thu Nov 28, 2019 1:35 am <rant>
Every single button (and some things that aren't buttons) on the site has a box full of hex instead of a readable icon or label.
Every second button produces a popup on hover (instead of click), obscuring a huge chunk of the screen and stealing clicks for no reason.
Half the links I want are hidden somewhere inside said popups, so I couldn't CSS them away if I wanted to.

The act of trying to navigate the site is like trying to find my way to the bathroom in the dark after someone has rearranged all my furniture. I have to wave my mouse everywhere waiting for a popup or tooltip to appear to tell me where to find what I'm looking for. Even logging in is a pain in the neck.

Whoever designed this alleged 'user interface' should be strung up by the ankles over a pile of manure for a week to give them an appreciation for just how much it stinks.
</rant>
That should be an issue with your browser. None of this happens for me. Although some button changed (especially the inverted Preview/Sumbmit) and that's annoying.
nocash wrote: Wed Nov 27, 2019 10:24 am Could that be a problem with your browser, or do you have an ultra-wide-hires monitor, or did you configure the browser to use super-small fontsize, or did you connect to something like wap.mobile.forums.nesdev.com (if there is any such thing)?

With my two browsers (pc/win98/opera with 19" screen, and tablet/android/chrome with 8" screen), I have small borders on left/right, and the message text is using at least 66% of the screen (not counting the avatar column, which is blowing up another 20% or so).
Don't know, here is a screenshow, and the wasted space highlited in yellow. As you guys said, wasting some space on the sides is great and improves reading, wasting that much of it is IMO too much, although it's down to personal preference.
Rahsennor
Posts: 479
Joined: Thu Aug 20, 2015 3:09 am

Re: What happened to the Nesdev phpBB theme?!?!

Post by Rahsennor »

Bregalad wrote: Thu Nov 28, 2019 1:52 amNone of this happens for me.
Because you don't visit sites that force an #^@$%&^% unreadable font for the entire site, and thus have not blocked remote fonts, which the new board software is abusing for icons, like all the other "cool" sites with no regard for usability do these days.

As for the other two: move your mouse below "Jump to" at the lower right corner of the page, then try to click on the paginator, and say hello to the 2014 NesDev compo board. Or try to find "view unread posts", which is how I saw your reply.
Drag
Posts: 1615
Joined: Mon Sep 27, 2004 2:57 pm
Contact:

Re: What happened to the Nesdev phpBB theme?!?!

Post by Drag »

Oh yeah, usability tanks when Font Awesome can't load.

I could list the benefits of using an icon font like FA, but really the theme should have a fallback.

The other issue with the popup menus only happens when javascript is disabled, otherwise, it requires a click. The only fallback there is to pop the menu up on hover, which is better than no menu at all. :P

And yes, it's due to a couple of bad actors that we have users who want to block absolutely everything that isn't text, but there's this weird sentiment that there's a userbase who wants both Youtube to work but also pages to only be static text, and I can't tell you how frustrating this is as a web developer. :P
ShiningSun
Posts: 9
Joined: Mon Jul 01, 2019 3:15 pm

Re: What happened to the Nesdev phpBB theme?!?!

Post by ShiningSun »

In defense of GNOME3, I don't think right now is as bad as people claim it to be. If you treat it like a Window Manager, I think it can be very nice. I myself liked it, I can live with it without any trouble, and is also a very different beast from Windows 10 (from which I had no good experiences overall though)

Ah yes, it seems like the site has changed. The dark theme isn't too awful though (prosilver dark) so I can most certainly use this. Though being greeted by all the blue-y isn't as fun as it may seem, but I can adapt to it.
tepples
Posts: 22705
Joined: Sun Sep 19, 2004 11:12 pm
Location: NE Indiana, USA (NTSC)
Contact:

Re: What happened to the Nesdev phpBB theme?!?!

Post by tepples »

Drag wrote: Thu Nov 28, 2019 9:47 am The other issue with the popup menus only happens when javascript is disabled, otherwise, it requires a click. The only fallback there is to pop the menu up on hover, which is better than no menu at all. :P
In theory, it should be possible to make a menu show and hide itself with a click using either the <details> element or the CSS checkbox technique.
Drag wrote: Thu Nov 28, 2019 9:47 am And yes, it's due to a couple of bad actors that we have users who want to block absolutely everything that isn't text
There are far more than "a couple", unless you consider the entire adtech industry to be just one actor.
Drag wrote: Thu Nov 28, 2019 9:47 ambut there's this weird sentiment that there's a userbase who wants both Youtube to work but also pages to only be static text, and I can't tell you how frustrating this is as a web developer. :P
People like this may not actually want YouTube to work. Instead of relying on silos, they want to visit the website of a video producer and download clips from that website to play later in VLC media player or whatever other not-a-browser video player application that they prefer to use. Someone stuck on satellite Internet, for example, could schedule the computer to download videos during hours when the ISP doesn't run the meter, generally from 0100 to 0500 local time.
zzo38
Posts: 1096
Joined: Mon Feb 07, 2011 12:46 pm

Re: What happened to the Nesdev phpBB theme?!?!

Post by zzo38 »

I think making it with NNTP would fix many of these problems. Then you can use your own software with your own theme. Maybe have both the NNTP interface and the HTML interface, and then you can have the best of both.
tepples wrote: Thu Nov 28, 2019 12:53 pmIn theory, it should be possible to make a menu show and hide itself with a click using either the <details> element or the CSS checkbox technique.
I was unaware of <details> element, but yes it seems a good idea for many purposes.
(Free Hero Mesh - FOSS puzzle game engine)
User avatar
rainwarrior
Posts: 8731
Joined: Sun Jan 22, 2012 12:03 pm
Location: Canada
Contact:

Re: What happened to the Nesdev phpBB theme?!?!

Post by rainwarrior »

Rahsennor wrote: Thu Nov 28, 2019 1:58 amBecause you don't visit sites that force an #^@$%&^% unreadable font for the entire site, and thus have not blocked remote fonts, which the new board software is abusing for icons, like all the other "cool" sites with no regard for usability do these days.
Interesting... I have the option "allow pages to choose their own fonts" disabled in Firefox, because I generally don't like custom fonts for text content. Previously icon fonts would appear broken with this setting, and I'd just live with that, but I hadn't noticed that they apparently work now... Not sure what changed or when, must have been sometime this year, but I'm curious how the icon fonts have been excepted.

However it's implemented seems to be working pretty well though. I haven't been noticing any non-icon custom fonts...
lidnariq
Posts: 11429
Joined: Sun Apr 13, 2008 11:12 am

Re: What happened to the Nesdev phpBB theme?!?!

Post by lidnariq »

Several years ago, Firefox elected to use webfonts for code points that it couldn't load locally... I swear I remember reading the bug report on their bugzilla about this.

This is compounded by the fact that some installed-by-default font in debian includes hexadecimal-filled tofu for all characters without a better grapheme. On the one hand, it's arguably better to display hexadecimal-filled tofu than empty tofu or nothing at all, but on the other hand, Ffffffff.

And further by the part where, in TTF, all ligatures have to have a code point, which means that ligature will be in the Private Use Area, which means that it can collide with this appropriation of same by FontAwesome. The only vague workaround I found at the time is to install a copy of FontAwesome locally. ( https://github.com/FortAwesome/Font-Awe ... v4.7.0.zip )

Really, we should just fix the CSS to use actual unicode code points instead of FontAwesome. Do Tepples and Memblers still have permissions to update phpbb themes in phpbb3.2? It should be practical to just de-"awesome" font-awesome.min.css to fix things for everyone.


edit: To the best of my knowledge, phpbb3.2 is only using the following symbols in FontAwesome:

Code: Select all

fa-angle-left - left-facing chevron - return to thread index
fa-asterisk - asterisk - for generating [*] in post editor
fa-bars - three horizontal lines - stupid "hamburger" menu symbol
fa-bell - a bell - next to "notifications"
fa-bold - boldface "B" - for generating [b][/b] in post editor
fa-bookmark-o - rounded square with right angle dent upwards in  bottom, like a ribbon - to bookmark a topic
fa-check-square-o - rounded square with checkmark - to subscribe to a topic
fa-chevron-circle-up - a solid circle with a chevron pointing up inside - In the lower right corner of every post to scroll to the top of the page
fa-chevron-left - left-facing chevron (heavier weight than fa-angle-left) - for going to first page of thread
fa-code - the "</>" icon  - for generating [code][/ code] in the post editor
fa-cog - a sprocket - "advanced search"
fa-commenting-o - outlined speech bubble - for the "contact with user" menu
fa-envelope - solid envelope - "contact the admins" at the bottom of the page
fa-envelope-o - outlined envelope - "email this topic"
fa-exclamation - exclamation mark - for reporting a thread
fa-external-link-square - rounded square with an arrow pointing out of it - jump to most recent post in a thread from any thread listing
fa-file - solid page with dog-eared corner - used to get the link to the specific post
fa-file-o - outlined page with dog-eared corner - used in "Quick Links" menu and to indicate subfora without new posts from the thread listings
fa-group - three fisher price Little People - used to get to "members" list
fa-home - one-story house with chimney - link to board index
fa-image - outline around stylized sun-and-mountain - for generating [img][/img] in post editor
fa-inbox - open-toped box with notch in front - for private messages
fa-italic - italic "I" - for generating [i][/i] in post editor
fa-link - three links of chain - for generating [url][/url] in post editor
fa-list - four dot-then-lines - for generating [list][/list] in post editor
fa-list-ol - three number-then-lines - for generating [list=][/list] in post editor
fa-pencil - a pencil - for editing a post
fa-power-off - "I" superimposed over "O" logo - for logging out
fa-print - printer - switch to print view
fa-question-circle - solid circle with question mark - links to generic phpBB FAQ
fa-quote-left - big open quote - for generating [quote][/quote] in post editor
fa-reply - bendy arrow from lower right, up, then left - to reply to a thread
fa-search - magnifying glass - various "do the search" buttons
fa-shield - left half opaque right half outlined shield - link to list of admins
fa-sliders - three horizontal lines with one black square on each, at different X positions - link to user control panel
fa-sort-amount-asc - four horizontal lines of increasing width from top to bottom, with an arrow going down - "display and sorting options"
fa-sort-down - downwards-pointing right isosceles triangle - indicating where pop-down menues exist
fa-square-o - rounded square outline - unsubscribing from a thread
fa-times - heavy "X" - for deleting a post
fa-times-circle - solid circle with X - for acknowledging server-side error popups (????)
fa-tint - water droplet - for generating [color=][/color] in post editor
fa-trash - metal trash can, the sort that Oscar the Grouch lives in - at bottom of page, for "deleting cookies" 
fa-underline - "U" with underline - for generating [u][/u] in post editor
fa-user - single fisher price Little Person - for going to user's own profile
fa-wrench - a wrench or spanner - for opening dialog that contains various thread options
I suspect it wouldn't be much more work to "fix" the CSS to not use fontawesome than it took to document the above.
Drag
Posts: 1615
Joined: Mon Sep 27, 2004 2:57 pm
Contact:

Re: What happened to the Nesdev phpBB theme?!?!

Post by Drag »

It looks like the code points are already in use:

Code: Select all

<i class="icon fa-home fa-fw">

.fa-home::before {
    content: "\f015";
}
In fact, that's why you see the hex blocks in the first place.

If the icon font worked based on font ligatures (like you're talking about), you'd instead see the de-ligatured sequence of characters (i.e., it's the font itself which converts a sequence of characters like "home" into a square glyph of a house; without the font, you just see the text "home"). The only icon font I'm familiar with which works this way is Material Icons, whose HTML looks like this:

Code: Select all

<i class="material-icons">home</i>
To remove the dependency of an icon font, you'd need to source static images or SVGs of all the needed icons, then go through the phpBB template files to replace font awesome elements with references to the static files instead, and finally, you need to test that all icons work as they should afterwards, and don't forget the responsive layouts which depend on the icons since the text labels are hidden (which is also why you can't just remove the icons all together).

*pout rant pout web design mumble mumble users mumble mumble*

On the upside though, I found this post which suggests that the phpBB team is going to improve how iconography is handled, which might make all of this a moot point.
tepples
Posts: 22705
Joined: Sun Sep 19, 2004 11:12 pm
Location: NE Indiana, USA (NTSC)
Contact:

Re: What happened to the Nesdev phpBB theme?!?!

Post by tepples »

I considered changing the template to use standard emoji, but Unicode doesn't have a gavel emoji yet, and the gavel (representing the moderation menu) is one of the icons I most often click with all the spam about.
lidnariq
Posts: 11429
Joined: Sun Apr 13, 2008 11:12 am

Re: What happened to the Nesdev phpBB theme?!?!

Post by lidnariq »

Drag wrote: Fri Nov 29, 2019 10:28 pm It looks like the code points are already in use:

Code: Select all

.fa-home::before {
    content: "\f015";
}
In fact, that's why you see the hex blocks in the first place.
Yes, but we can literally just update the CSS to stop using FontAwesome and its symbols in the Private Use Area.

We can replace U+F015 there with U+2302. We can replace U+F10D with U+275D. We can replace U+F121 with the whole string "</>". And it would all be fine, because of how the CSS works here.

The only thing we can't do is put HTML markup inside the "content" bits. But that's fine, e.g.:

Code: Select all

.fa-bold::before {
    content: "B";
    font-weight: 1000;
    font-size-adjust: +0.8;
}
To remove the dependency of an icon font, you'd need to source static images or SVGs of all the needed icons
Except that, in this specific case, almost all the symbols already exist elsewhere in the BMP.

(A few don't. I'm not convinced that they're ones that are in the right place on the effort-vs-reward scale, such as the icons at the bottom of the page.)
tepples wrote: Fri Nov 29, 2019 10:40 pm I considered changing the template to use standard emoji, but Unicode doesn't have a gavel emoji yet, and the gavel (representing the moderation menu) is one of the icons I most often click with all the spam about.
Even moving partially away from FontAwesome is still a UI improvement for someone who isn't displaying any FontAwesome glyphs.
calima
Posts: 1745
Joined: Tue Oct 06, 2015 10:16 am

Re: What happened to the Nesdev phpBB theme?!?!

Post by calima »

It's not like folks blocking web fonts would have an emoji font installed though (I don't). Emoji are just as cancer as webfonts abused for icons.
zzo38
Posts: 1096
Joined: Mon Feb 07, 2011 12:46 pm

Re: What happened to the Nesdev phpBB theme?!?!

Post by zzo38 »

I use a custom CSS on my end to customize the dark theme, removing all of the icons and animations and most of the rounded corners and a lot of other stuff, making so that more stuff can fit on the screen at once. I can add my own text indications with such codes like:

Code: Select all

  .topic_unread_locked::before { display: inline; content: "-UL-"; }
(Free Hero Mesh - FOSS puzzle game engine)
User avatar
Nioreh
Posts: 115
Joined: Sun Jan 22, 2012 11:46 am
Location: Stockholm, Sweden

Re: What happened to the Nesdev phpBB theme?!?!

Post by Nioreh »

I really like the new site with dark mode on. Works on my phone now too! I am a happy camper
Post Reply