Text and icon spacing with new page width.

[Neopopulas]

I was doing some posting and editing and i thought i might bring up some concerns i have with the new change to the site width.

Its comprised of a couple of questions and just observations. Firstly - and most noticeable when i'm posting right here and now is that because of the width change the text edit box is very narrow, possibly too narrow. Or at least, uncomfortably narrow and causing a lot of wasted space.

 

As you can see here there is a ton of space on the right hand side under the moderator options that is just.. empty, and making the text box small and 'claustrophobic'. This gets worse the further down the page you go and the longer your post is, this seems like a bit of a waste and also not very visually pleasant. This is especially bad when you add images to a post because the uploaded file  banner at the bottom of the post is also very tall so it always obscures the bottom of the screen, making the input box pretty tiny in the middle. This is a fairly specific case because is should only appear when you are creating the topic, not editing it but i thought i'd bring it up nonetheless.

I have found an interesting little use-case here though. If you edit a topic that you created in someone elses forum, you get a full-width edit bar. If you edit a post you have made in a thread, its broken in half and if you create a topic in someone elses forum (or you own) its also broken. Weird!

I'm not sure what is to be done about this - perhaps moving the moderator options to underneath the post and expanding the input box to fill the available space would be the best option, but of course its up for discussion.

---

My second observation is that the width change has caused a problem with the edit bar. Because if the reduced width it has broken the edit bar into two lines, this is unavoidable of course but it might just need to be tweaked a little bit so that it is more compact and doesn't have a bunch of empty space all the way on the right.

 

My only thought would be to reduce the overall size of the edit bar - if at all possible - this is at about 80% and it all fits. Bada bing bada boom.. But i have no idea how hard that sort of change would be.

---

Lastly its more of a question. I've been playing with the tables for awhile and obviously the change in width has affected the table i used above, no big deal, it can be adapted. But the problem i'm running into is the spacing within the cell and i'm not sure if its a setting that i'm missing or a site-default, but as you can see there is quite a bit of space between the lines, this really pushes out the height of the cells.

I've tried setting their height of the cell to be very small (down to 10px) but it won't override whatever it is that is causing the line spacing. As you can see below the spacing is pretty huge and i can't tell if its something i've caused by fiddling with the heights and widths of the cells to get them to space 'perfectly' or if its something i can't change even if i tried.

I think its just more pronounced because the font size is small and the line spacing is static. The font size in the table is at a 10 and i think the default is twice as tall, because of this the line spacing - being the same no matter what - just looks more dramatic. If that is the case then it is what it is, but if its something i'm doing or can be adaptive or something it'd be great to know.

Name: Callisto | Class: Wizard (Evocation) | Level: 3 AC: 1516 with Mage Armor | HP: 20 | Prof: +2	Saves: Str -1 / Dex +3 / Con +2 / Int +6 / Wis +1 / Cha +0	Attacks:Quarterstaff | +1 | 1d6 Bludgeoning, 1d8 two handed
Memorized Spells (7) | Spell DC: 12 | Spell Attack: +4	Items: Potions of Healing (2)	Special Abilities: (SP 2/2) Transmute Spell, Quicken Spell, Sculpt Spell, Lucky (2/2)
Cantrips: Fire bolt, Prestidigitation, Shocking Grasp Level 1 | ▣ ▣ ▣ ▣ | Mage Armor, Magic Missile, Burning Hands, Shield, Chromantic Orb Level 2 | ▣ ▣ ▣ | Rime's Binding Ice, Hold Person

 

 

 

 

Edited January 14, 2023 by Neopopulas (see edit history)

[bwatford]

Not sure if moving the moderator options is feasible. but we might be able to shrink that column a little (width wise).

The editor buttons are controlled by a CKE skin that styles them, I can look into some other skins but I think they all are pretty standard with button size. @Eric might be able to force an adjustment on them but with all the buttons going on I am doubtful as it probably would make the buttons too tiny to finger on mobile.

The table issue is directly related to the automatic paragraph line spacing that has been added recently. We can look at adjusting that inside tables (possibly). I highly suggest (from a design perspective) not using a table like the one above as they break on mobile almost 100% of the time when there are more than two columns and/or you force a width beyond what mobile can handle. Honestly, I use tables now more for headers and setting background areas across themes more than I do to decimate information into multiple columns so that everything stays responsive across devices.

I am sure Eric will be along to tell us what can and can't be done with that moderator column from a code perspective.

 

[Eric]

The first-post layout should be almost exactly the same width as a regular post, but I'll check to confirm. (EDIT: It's about 70px narrower. We can probably adjust the widths so it's the same. Also, this made me realize the quick reply is too wide.)

As for buttons, making them any smaller is not practical from an accessibility perspective. I can futz with the toolbar layout to make the wrap seem a little more natural, but ultimately these are the controls that are needed to use all the features.

[iantruesilver]

Whatever was done to the WYSISYG, it seems now it broke free and is no longer adheres to the page widths.

[Eric]

Fixed. Sorry, left that test in there when it should have been disabled 😄

 

[Neopopulas]

11 hours ago, bwatford said:

Not sure if moving the moderator options is feasible. but we might be able to shrink that column a little (width wise).

The editor buttons are controlled by a CKE skin that styles them, I can look into some other skins but I think they all are pretty standard with button size. @Eric might be able to force an adjustment on them but with all the buttons going on I am doubtful as it probably would make the buttons too tiny to finger on mobile.

The table issue is directly related to the automatic paragraph line spacing that has been added recently. We can look at adjusting that inside tables (possibly). I highly suggest (from a design perspective) not using a table like the one above as they break on mobile almost 100% of the time when there are more than two columns and/or you force a width beyond what mobile can handle. Honestly, I use tables now more for headers and setting background areas across themes more than I do to decimate information into multiple columns so that everything stays responsive across devices.

I am sure Eric will be along to tell us what can and can't be done with that moderator column from a code perspective.

 

The moderator options could be half or 2/3 the size it is, just not too close to the wording so it doesn't look squished but it is probably bigger than it needs to be.

It does seem tables break all the time, i'm considering what options are better but i haven't found something i love yet. I pretty much never use the site on mobile but i have checked just now and BOY you should see the mess some of the posts around here are in on mobile 😄
 

11 hours ago, Eric said:

The first-post layout should be almost exactly the same width as a regular post, but I'll check to confirm. (EDIT: It's about 70px narrower. We can probably adjust the widths so it's the same. Also, this made me realize the quick reply is too wide.)

As for buttons, making them any smaller is not practical from an accessibility perspective. I can futz with the toolbar layout to make the wrap seem a little more natural, but ultimately these are the controls that are needed to use all the features.

As for the edit bar maybe if the size/font were the ones to wrap to the next line it wouldn't look so obvious, since they don't have the same background and border and also the rest of the bar might fit in the first line then, the code is outside my wheelhouse though so i can't be sure. My job was always 'is it broken, how it is used and what does it look like' i just made reports to other people and then they told me if it was even possible to fix or change. Basically i was trained to complain in a detailed and hopefully constructive way.

If you were to try and craft a template like i was doing above for the header of a post, with picture and information all nicely separated and laid out, what would you suggest? I'm used to just putting everything in tables to keep it all aligned but i feel like there might be a better, more responsive way i could be doing it with the new tools we have.

 

[bwatford]

1 hour ago, Neopopulas said:

If you were to try and craft a template like i was doing above for the header of a post, with picture and information all nicely separated and laid out, what would you suggest? I'm used to just putting everything in tables to keep it all aligned but i feel like there might be a better, more responsive way i could be doing it with the new tools we have.

 

Here was my crack at responsive "Character Thread" Design. It uses a table but with only a single column, so it responds well to any size screen.

Preferred Character Thread Template - Library - Myth-Weavers

 

1 hour ago, Neopopulas said:

The moderator options could be half or 2/3 the size it is, just not too close to the wording so it doesn't look squished but it is probably bigger than it needs to be.

We are still evaluating that space as there are other moderator options there for different access levels. Also, we are still waiting to see where the sheet integration information ends up in the post. Probably be on either that right side (in which case the moderator stuff may need to be moved all together) or under the member's name and icon in the empty space on the left side, or if it ends up below the post with the dice roller.  So still a lot of final tweaking to do once the sheet system is in place.