jase
 admin, 3644 posts
 Cogito, ergo procuro.
 Carpe stultus!
Sun 21 Jul 2019
at 04:54
Re: RPoL Design Update
Fixed header needs to be removed from the options actually... possibly something that could be look at later along with the hide-the-menus option.  Maybe.  I'll tighten up the user preferences now actually, all the colour schemes also give people the wrong impression (I'll add some more back later but probably not as many!).

I realise the menus do get left behind with all the scrolling which is why there's a "top" link (as well as main and game links).  If there's other links that would be good in the footer then that's exactly what this thread is for!
Skald
 moderator, 854 posts
 Whatever it is,
 I'm against it
Sun 21 Jul 2019
at 05:27
Re: RPoL Design Update
I shall continue to live in hope, but not hold my breath then.  <grins>

I see the reasoning that I'm most likely down at the bottom of the thread, having read all the new posts and then I hit post reply ... and on the reply screen the menus are at the top with the compose message box, so I can easily open up say character sheet, game map and dice roller in separate tabs, so all the functionality is there.

On the old site I open everything I'm going to need including the post reply screen from the game thread and then switch to whichever open window I need to go to first.

So responsive layout is just a different way of working for me that'll take some getting used to.  :>

Main menu, game menu, top, post reply ... that probably covers most things.  Unless we have collapsed menu icons in both header AND footer, which would give us everything at both ends of the page !  But that might be greedy.  ;>
jase
 admin, 3649 posts
 Cogito, ergo procuro.
 Carpe stultus!
Tue 23 Jul 2019
at 13:31
Re: RPoL Design Update
I contemplated having the side menu try to stick in place but as it could sometimes be too long for the screen height I thought perhaps that would be a bad idea!  Might see if it's possible (probably with a bit of javascript) at a later stage.  For now you'll probably need to change your habits to clicking reply at the bottom and then opening up all the different pages from the compose screen.

That kind of stuff I'd probably wait until after the responsive site is finished in its first form.  Then all the outstanding feature requests before looking at any layout tweaks.

Have tweaked a more more things.  Input boxes should now use the site's font besides the "textarea" inputs (what I be using now) as that's normally better off with a fixed-width font.  Should just make the prompts for subject, bios, character name, dice roll information etc etc just a little nicer.  Slightly larger font too and increased the padding so it's not so squished.

Also changed the game search on the main menu from an old table to a div/responsive friendly layout.  Mostly the same look though as I didn't think it needed much tweaking otherwise.

As (well, rather if) I get feedback on areas that need fixing I'll concentrate on them otherwise I'm now at the stage where I'm just working my way through the site to check each screen and fix them as I go.  Main menu is obviously the first and then the signup/logon pages, create a game, game itself, viewing a thread and so on.
Imladir
 member, 6 posts
Sun 28 Jul 2019
at 17:08
Re: RPoL Design Update
Portrait selection with keyword search doesn't work unless something is entered in the free text area.
jase
 admin, 3651 posts
 Cogito, ergo procuro.
 Carpe stultus!
Fri 2 Aug 2019
at 15:09
Re: RPoL Design Update
Thanks.  Got carried away with the "required" tag in HTML5!  (c;
nauthiz
 subscriber, 615 posts
Mon 5 Aug 2019
at 09:28
Re: RPoL Design Update
So, my luck finally ran out and I accidentally broke my phone.  I figure it was about time since my streak has been going since I got my first nokia brick back in the day, which doesn't really count as they were nigh indestructible anyway.

But that has meant an opportunity to find new bugs and other issues.

I'm now using a device running Android 9.0 (Pie) and it's currently using Chrome 75.0.3770.143.  I also tested this particular issue in Firefox 68.0.

Bug Report: Chrome for Android doesn't play quite right with the "post message" screen.

When you first enter the page everything is fine.  Then when you press in the text box and begin entering text, the box expands slightly in size and covers most of the "preview/delay post" and "post message" buttons.

As seen here: https://i.imgur.com/moyz7v4.jpg

You can type normally.  The buttons themselves still work, if you press the "preview" button either the small bit that's still showing or the area of the text entry box where the button is, it will work as intended.  It does not work correctly if you have typed enough that the text entry area that covers the button now has text in it.  In that case pressing the screen just puts the cursor where you pressed, you must instead press the small bit of button poking out the bottom to make it work.

Once you have reached the "preview" screen the text box behaves normally, and the buttons are fully accessible.  Entering/deleting/etc text in the box does not seem to trigger the issue, nor does subsequent presses of the "preview" button.

When I tried to replicate this issue in Firefox I could not.  Of the two browsers only Chrome seems to have this issue.


I was running an old Windows Mobile 10 handset for the past few weeks in the interim, so I don't know if it's strictly a software/browser issue or something due to one of the updates to the site made in that time period.
Imladir
 member, 7 posts
Mon 5 Aug 2019
at 09:40
Re: RPoL Design Update
Something a bit annoying is the inconsistency in the "This Game" menu. For example:
- it's impossible to directly access private messages from The Cast menu,
- on the Cast page the link for The Cast disappeared, but on the Character Details page, the link for that page is still there.
jase
 admin, 3653 posts
 Cogito, ergo procuro.
 Carpe stultus!
Mon 5 Aug 2019
at 14:17
Re: RPoL Design Update
Thanks nauthiz.  Certainly doesn't happen in my (exact same) version of Chrome on my phone.  Is it when you click in the message area or after you type the first character?

Menus certainly need a little tweaking, Imladir.  Will see if I can do a little more.
Imladir
 member, 8 posts
Mon 5 Aug 2019
at 14:19
Re: RPoL Design Update
Thanks.

Nothing urgent there obviously.
nauthiz
 subscriber, 616 posts
Mon 5 Aug 2019
at 18:43
Re: RPoL Design Update
When I type in the first character.  Up until then it's fine.  Additionally if I delete all the text that has been entered, the text entry box returns to its normal size/position.
jase
 admin, 3656 posts
 Cogito, ergo procuro.
 Carpe stultus!
Thu 8 Aug 2019
at 05:42
Re: RPoL Design Update
Can't make sense of the textarea resizing.  There is the alert to remind you if you cancel away from a composed message that will set a javascript variable to 1... but that should not affect anything to do with the HTML.  Realised that wasn't working actually (depending on which cached version of the javascript file you had) so have updated that, who knows lets see if that fix miraculously does something!

...

Have changed a the way the HTML/CSS works a bit, hopefully not much/any difference.  HTML has this lovely way of calculating widths (and heights, but it's the width that's the kicker).  An area has margin, border, padding and finally the actual content.  If I set something to take up the page width (by making it's width 100%) then that's calculated according to the content and padding around it.  Only those two.  If I add a 1px border around this content then it's width is left border + 100% + right border.  Horray, it's width is now 100% + 2 pixels.. i.e. it's wider than the screen and we have a scrollbar or overlapping sections.

Even more fun when I try to make two boxes sit side-by-side by making their width 50% each.  If I have a border then they're actually both over 50% so they're rendered one above the other.

It's crazy and doesn't make sense.  The way around it was to use a "calc" entry in CSS which has about 98% browser compatibility.  You'd figure your border and margin and then set your width with "width: calc(100% - 2px);" or whatever you needed to shrink it by.  Change the border or margin?  Go back and edit the width as well.  Painful and for me has never been intuitive.

Anyhoo there's a CSS setting which is "box-sizing: border-box;".  Knew and forgot about it until recently.  This makes the box size calculations include the margin and border... oddly enough this is how IE6 used to do it.  The nice thing about this option is the browser compatibility is about 99%.

So... I've gone through all my horrible "calc" entries and removed them whenever possible, setting nice sensible widths of 100%, 50%, 33.3% and so on.  Now it's all much easier.

...

In amongst doing all that I fixed a bunch of other stuff.  Honest.  Problem is I can't remember what I've done...

Added Earthdawn: Age of Legend and Zombie World to the dice roller.  If you're using the responsive site you can now use these systems on the roller.  People on the traditional site can see the entries in the log file but can't use the system to make their own rolls unless they switch to r.rpol.net.

Stuff.. things, tweaked stuff.  Have had a cold for over a week so it's hard to remember!

See how stuff 'n' things are now, hopefully haven't made anything worse!
jase
 admin, 3664 posts
 Cogito, ergo procuro.
 Carpe stultus!
Thu 8 Aug 2019
at 09:50
Re: RPoL Design Update
Oh yes, updated the cast list.  Now hides the info that probably doesn't need to be seen at a glance.  Hovering/clicking shows the additional information that's hidden.. plus a few extra links now.
nauthiz
 subscriber, 618 posts
Thu 22 Aug 2019
at 00:35
Re: RPoL Design Update
Bug Report: When trying to view a game map assigned to a specific group, the following error is returned.

quote:
Missing game identifierSorry, but no game id was passed.


The map is viewable on the non-responsive site.
jase
 admin, 3683 posts
 Cogito, ergo procuro.
 Carpe stultus!
Thu 22 Aug 2019
at 01:49
Re: RPoL Design Update
The problems a simple typo causes!  Thanks.
inirlan
 member, 6 posts
Fri 23 Aug 2019
at 10:41
Re: RPoL Design Update
Reading up ASCII character sheets is much more inconvenient on mobile now. The width is far too narrow and you can't zoom out.

Outside of that. *Shrug* It's a different interface so I am going to prefer the old one at first. The drop down menu with cast, dice roller, PMs and so on is neat, but the icon really needs a small arrow or triangle, as I spent way too long looking for all those things and not realising that that icon was a drop down menu and not just the dice roller.

This message was last edited by the user at 10:43, Fri 23 Aug 2019.

jase
 admin, 3687 posts
 Cogito, ergo procuro.
 Carpe stultus!
Fri 23 Aug 2019
at 12:31
Re: RPoL Design Update
In reply to inirlan (msg # 209):

Not sure how to fix the sheet issue, they're really wide by design/necessity and mobiles aren't!

Thanks for the feedback regarding the menus, good to have a fresh perspective as I use manipulating the screen width to go into mobile view a lot of the time and that's when I see the menus collapse down and the colouring flow through... so to me it seemed obvious!  (c;
Skald
 moderator, 863 posts
 Whatever it is,
 I'm against it
Fri 23 Aug 2019
at 14:08
Re: RPoL Design Update
I think the issue with character sheets being too wide for a mobile screen is something that should be addressed in character sheet design, rather than site design ?

If anyone wants to create some mobile-friendly (ie narrow) character sheets for the more popular game systems, just send them to me over in Heaven - Gaming Resources link to another game and I'll add them to the existing character sheet list and flag them mobile friendly.

Is there a magic number of characters (non-proportional font) we should be aiming for on a mobile device that I could suggest people stick to ?  :>
Skald
 moderator, 864 posts
 Whatever it is,
 I'm against it
Fri 23 Aug 2019
at 14:25
Re: RPoL Design Update
Just a thought ... for the front page of responsive site ... would it look better if all the text was in the left hand column (ie put the "Create and GM" etc wording under the existing two text blocks under the Welcome to RolePlay onLine! heading, and have all the blocks with grey headings on the right hand side (with the sidebars to the far right).

I think it looks a bit unbalanced at the moment, and this might help - or not.  <grins>  If nothing else, it might save a bit a real estate as there's a couple of empty spots that would be eliminated, though I appreciate blank space is important, so might have to add more in by design if needs be.
jase
 admin, 3688 posts
 Cogito, ergo procuro.
 Carpe stultus!
Fri 23 Aug 2019
at 17:27
Re: RPoL Design Update
In reply to Skald (msg # 212):

Won't that make it even more lopsided?  The "Welcome" text is only about 2/3rds the height of the blocks.  The total height of the blocks is actually a little bit more than the current layout so it'll actually take up more space.

Doesn't look terrible with my quick mockup in paint but not sure it's solving any of the problems you've highlighted!  (c;
ppwhere
 member, 19 posts
Fri 23 Aug 2019
at 20:42
Re: RPoL Design Update
One of my players mentioned an interesting thing... In the new site in desktop mode you have much less space for content... For mobile mode it is great, you have a wide view but it is quite the different in desktop
On the left side character information takes around the same size but with much more padding. On the right side you have now the menu, eating up quite a lot of space, so on a smaller laptop you can see now much less information



One different problem is encoding in character descroption... I've checked one what looked nice on the "old" site, using some accented hungarian characters like αινσφőϊόű
None of these were looking nice in the new site. Interestingly they are fine here, so it is might be only a description problem

This message was last edited by the user at 20:43, Fri 23 Aug 2019.

SunRuanEr
 subscriber, 103 posts
Fri 23 Aug 2019
at 21:43
Re: RPoL Design Update
In reply to ppwhere (msg # 214):

quote:
In the new site in desktop mode you have much less space for content... For mobile mode it is great, you have a wide view but it is quite the different in desktop

I hadn't peeked at the responsive site until today, but this would be my gripe, too.

I solely view RPoL on my desktop, and on the new site, I can really only manage to get maybe half the width of my monitor for viewing of actual posts. Sizing the browser down gets smaller, but sizing it up just... doesn't past a certain point. It would be nice to be able to fully manipulate the viewable thread space to whatever size I like.
jase
 admin, 3689 posts
 Cogito, ergo procuro.
 Carpe stultus!
Sat 24 Aug 2019
at 02:00
Re: RPoL Design Update
SunRuanEr:
Sizing the browser down gets smaller, but sizing it up just... doesn't past a certain point. It would be nice to be able to fully manipulate the viewable thread space to whatever size I like.

You can with a custom theme!  If you do use it just beware that the base css gets updated a fair bit at the moment so your theme can become outdated.

We've followed typography recommendations for speed of reading and reduced eye strain... and even then we've increased beyond the recommended width by a fair bit.  Basically the longer the line gets the longer it takes to focus on the start of the next line.  Increasing line height helps with this but then you end up with longer lines but larger gaps, so no more words per page.  All this isn't really my forte which is why I followed (pretty universal) recommendations.  But  even then I must admit I wonder how well it works here as I find some content is a bit squished.

I think the width works well for reading a few paragraphs of text but if there's any tables (for example) then it can start to suffer.

Definitely don't look at the private groups screen on the GM menu!  (c;
SunRuanEr
 subscriber, 104 posts
Sat 24 Aug 2019
at 02:28
Re: RPoL Design Update
jase:
SunRuanEr:
Sizing the browser down gets smaller, but sizing it up just... doesn't past a certain point. It would be nice to be able to fully manipulate the viewable thread space to whatever size I like.

You can with a custom theme!  If you do use it just beware that the base css gets updated a fair bit at the moment so your theme can become outdated.

Awesome! Or well, awesome that there's a way to do it with a custom theme. (I have several games that really, really like to have huge, giant posts, and it's much easier to deal with them if I'm not having to scroll down for ten years to read them.) I realize that the more up-and-down rectangle of the responsive site works great with phones, but it feels like I'm just wasting valuable monitor space on the desktop the way it's set up.

Now, if I could just figure out HOW to fix that with custom themes... <.<

In all seriousness, is setting a custom theme going to be the only way to get the responsive site to read wider when it goes live? Because that doesn't seem terribly intuitive.
horus
 member, 846 posts
 Wayfarer of the
 Western Wastes
Sat 24 Aug 2019
at 03:32
Re: RPoL Design Update
In reply to SunRuanEr (msg # 217):

I'm with you on this:  is it possible we could allow for, maybe, configuring and saving "device profiles" that could be selected to accommodate different devices?

Something like:

4:3 Display
16:9 Display - Landscape
16:9 Display - Portrait
Phone/Tablet - Portrait
Phone/Tablet - Landscape

(Most tablets are 16:10, so these could also serve for the 16:10 display panels still in service.  I'm not so sure what the prevailing format is for most phones.)

Am I looking at this all crabbed?
jase
 admin, 3691 posts
 Cogito, ergo procuro.
 Carpe stultus!
Sat 24 Aug 2019
at 04:55
Re: RPoL Design Update
In reply to horus (msg # 218):

Most certainly, that's called a responsive layout.