Up to Main Index                             Up to Journal for March, 2016

                     JOURNAL FOR TUESDAY 15TH MARCH, 2016
______________________________________________________________________________

SUBJECT: A cry for help...
   DATE: Tue 15 Mar 19:41:16 GMT 2016

People have been asking for me to make a few tweaks to the site. In fact they
have been asking for a long time. I've tried twice to make changes. Each time
it required either JavaScript, JQuery or worked beautifully only to fall apart
in browser X or on device Y.

I've had another go - with just the layout and mobile changes. No JavaScript
or other funky stuff, just a tiny bit of CSS. I've tested on what I can:


  - Chrome (v49.0.2623.87 64bit) on Linux
  - Chrome (v49.0.2623.91 32bit) on Android (Lollipop), MOTO E, 2nd Gen
  - Chrome (v49.0.2623.91 32bit) on Android (Marshmallow), Nexus 7, 2013
  - Safari (v9537.53) on iOS 7.1.2, iPhone 4
  - Chrome (v49.0.2623.87 m) on Windows 10
  - IE8 on Windows 7
  - IE9 on Windows 7
  - IE11 on Windows 10
  - Edge on Windows 10
  - Firefox (v45.0) on Windows 10


Now for my cry for help :) If you have something not listed above please goto:


  Layout test page: test.html


Glaring omissions from my current list of testing include iPads and newer
iPhones. The page should look like the home page. On the desktop it should now
be centered. On mobile it may be centered depending on screen size or device
orientation. For small screens it should be the width of the device - and may
need zooming - but the left/right edges should not be cut off by default. For
small smartphone screens it seems to work particularly well in landscape mode.

If you get anything weird when visiting the above page please can you email
me: diddymus@wolfmud.org and let me know. Screenshots of weirdness are greatly
appreciated along with the browser and it's version. Device details are also
useful, but only if you feel comfortable handing them out :)

If it works for you great! You can still email me to let me know so I can add
to the list of tested browsers and devices.

For those of you who don't know: Centering a block of plain text, using a
monospace font all while while preserving whitespace and line breaks - using
<pre/> tags - is a pain. Especially when the ch CSS unit is broken or
unsupported - otherwise it would be easy. Also, when on mobile, the page
should fit the width of the device, centering if it's a big tablet or long
phone in landscape mode. Trying to force a font to a specific size, using CSS
calc or JavaScript to work out exact sizes of pages and/or divs etc. - messy
as hell.

My (current) final solution adds the following meta tag:


  <meta name="viewport" content="width=device-width">


As well as a little CSS:


  body {
    text-align: center;
  }
  pre {
    display: inline-block;
    text-align: left;
  }


In the end it's short, sweet and simple :)

If all goes well I'll roll out the changes to the whole site soon. In the
meantime, while waiting for responses, I'll get back to loading zones from
files in WolfMUD.

--
Diddymus


  Up to Main Index                             Up to Journal for March, 2016