Coexistence Alpha: a responsive mobile and desktop overlay for Dreamwidth

[solarbird]

UPDATE 2018/12/4: QUESTION 1: Yes, this respects your colours; I just like green.

UPDATE 2019/2/6: QUESTION 2: Yes, this sat fallow for a while, but no longer. We have a second RC.

You Want Mobile Dreamwidth, Artie? You Got It.

Coexistence Alpha: a mobile-friendly CSS patchset for Neutral Good - v0.846 RELEASE CANDIDATE TWO
(2019/2/6)
This is a fully-responsive mobile-ready theme modification layer intended to make Dreamwidth's default style fully functional on both mobile and desktop devices wherever it can be applied. Features include journal and reading pages with near-zero horizon scrolling on mobile, including in long comment reply cascades, and more-comfortable comment creation, including on iOS.

To install: Choose style "Neutral Good" for "Practicality" in the journal style selector. Copypasta all of the linked CSS into the Advanced Seettings Custom CSS box, and save. (This may require a desktop device.) Apply "your style" to everything you can.

This build includes Navbar 2, which is mostly cosmetic but somewhat mobile-aware upgrade of the Navbar.

---

0.846rc2: issues with proto-emoji/"subject icon" functionality triggering horizontal scrolling.

0.845alpha: issues with external image size limits (to prevent horizontal scrolling) fixed.

0.844alpha: issues with qrform select box placement.

0.843alpha: some divs in RSS feeds disallow whitespace wrap, causing horizontal scrolling. I'm as surprised as you. Overridden.

0.842beta: Small calendar module cleanup on desktop views. No bugs externally reported, last three builds. We are now in beta.

0.841alpha: Previous N/Next N links given more height.

0.840alpha: Cleaned up code a lot, particularly comment handling on mobile, which gives you even more text entry room now.

0.834alpha: Individual-comment reply form (reached via inbox reply) cleanup. Small Navbar 2 button regularisation on Reading page view.

0.833alpha: Fixes a small border problem, alignment issue on Reading page.

0.832alpha: Rebuilds Navbar 2 from the top down, and adds some mobile awareness, again mostly cosmetic, but hopefully a bit more visual coherence nonetheless.

0.830alpha: Hands body font size back to user preferences, removing the hardcoded size used until now. The system default is 1em. This unit (em) is unreliable across browsers; I have changed my body type size to 14px and recommend the use of a px-based size generally. solarbird_testbed is always running the bleeding edge build or later (when code changes are in progress).

.82x fixes included Navbar 2 working better on Android browsers (Login panel is still a bit of a mess but I don't care, all that's going away in Navbar 3 anyway), comment thread depth indicators on mobile working even without subject lines, various overprint issues, and so on.

.81x fixes included user left-right selection of icon placement is honoured correctly again. As are icon sizes except on mobile comments where you're forced to "smallest" regardless. Also, the implementation was improved.

And if you see issues, please give me a screenshot and tell me your browser and OS. Thanks!

Comments

Re: need desktop to switch?

[thnidu]

Then the instructions really should include such a caveat.

. http://X-Clacks-Overhead.dw/GNU-Terry_Pratchett . http://www.gnuterrypratchett.com/

Re: need desktop to switch?

[solarbird]

I have applied an appropriate caveat. Thank you.

Re: need desktop to switch?

[thnidu]

Thank YOU.

That's no glitch... that's a secret feature.

[solarbird]

That's not just not a glitch, it's specifically a feature.

If I don't do that (and a couple of other things), then you get auto-zooming and auto-repositioning on iOS when a text field is selected. It's an awful user experience that Apple considers a feature, and I - like so many other people - work to avoid triggering it as broadly as we can.

Re: That's no glitch... that's a secret feature.

[mdlbear]

Ugh. OK.
I was viewing it on in a desktop browser; unfortunately (fixed-width) the font used in text areas is significantly larger than the body text -- I expect it's the system default, which I set to something that makes text editors and terminal windows usable. Possibly this isn't a problem for people who use the OS's default fonts.

Re: That's no glitch... that's a secret feature.

[solarbird]

If you prefer to live with the zooming/repositioning, look for and delete this code:

#qrform select, #qrform textarea, #qrform subject, #qrform body, input#subject.textbox, textarea#commenttext.textbox {
font-size: 16px;
}

Re: need desktop to switch?

[ironymaiden]

curious about your platform/browser. (I'm not doubting that you had issues, but I've been making these changes on Android/Chrome mobile all along.)

Re: need desktop to switch?

[thnidu]

As I said, this wasn't my report but a friend's. I'll ask them.

[numb3r_5ev3n]

Curent bleeding edge v0.843alpha:

[jesse_the_k]

The checkbox is labeled "Display Explicit Comment Hierarchy Indicators" on this page
http://www.dreamwidth.org/manage/settings/?cat=display

[attie]

Ooh, this is pretty great! Unfortunately I don't like the underlying theme very much (echh, small caps >.>) but I wonder if I could port it to a different one...

[solarbird]

Porting it would be a bit of a trick. But you can get rid of some of them by taking my css and deleting:

font-variant: all-small-caps;

font-variant: small-caps;

whereever you see it.

[solarbird]

However I should point out - particularly in the deep-nested-replies section - they're used for a purpose at least some places, particularly on mobile. (For vertical space.)

[attie]

I did twiddle it a bit already to override some of the small caps (on the comment interaction links) but most of the ones I object to are from the original style. I guess technically I could add more custom CSS to override them all... I'm also going to play with the colors to see if I can make comment header and body more distinct, the username doesn't stand out at all. why is site scheme not a tweakable theme ;_;

[duck]

Thank you so much! just used the comment part as the rest of my current layout looks ok on my phone.

I'm so grateful for finally disabling the zoom on IOS, again, thank you!

[solarbird]

Whatever makes it work for you, really. I just can't stand horizontal scrolling, so a lot of this theme is about stopping that. (Images and polls and tables and all sorts of things just get brutalised into working. Long words with no spaces, too. NO HORIZONTAL SCROLLING! NO! (◕△◕ ) !!!

[duck]

I know!!! horizontal scrolling and the zoom on forms drives me nuts lol, right now the site is much bearable on mobile :)

[larissa]

So I'm having a weird issue: I keep getting a flashes of unstyled content whenever I view pages in my style. I use Firefox across all my devices (Windows 10, Android phone, iPad) and it's happening on all three. Tried rebooting my desktop browser without add-ons, same thing. I'm also getting it on another journal that's using 0.843alpha.

As far as I can tell this is new -- I use DW enough that I would have noticed before now, it just started happening in the past few days. Not sure when I last updated Firefox to be sure though; I'm running 63.0.3 on desktop. I have no idea what my mobile versions are but I can look if need be.

Not sure if it's just me! Even if it is, any ideas? I'm not really sure how to prevent FOUC on a site like DW.

[solarbird]

I think Dreamwidth is being a little slow to serve up the custom CSS. I'm seeing it a lot of places too. The big influx of new users could very easily cause that - and it's not something I can affect in CSS.

What you could do if it's distracting enough is copy it to a very fast server somewhere else, and use the Custom CSS URL (right above the code box) to grab it from there, instead. That might help.

In other news, though... well. It'll take some time for that. But something bigger is coming and it'll solve this a different way. ♥

[larissa]

Wow I didn't even consider that it might be DW itself, haha. Goes to show how quiet it's been here!

I'll give that a shot. Thank you for making such a great theme - it's made DW so much easier to use for me.

[lessonsinescapology]

Thank you so much! I'm going to try it.

[janne]

Works like a charm -- and I no longer have a 50% chance of hitting "log out" instead of "post" :D Thank you.

[msilverstar]

Working for me, though I had to increase the font size because I'm old and my eyes are bad.

[solarbird]

Brilliant! Thank you!

Yeah, default sizes are pretty close to what shipped originally? But not identical and I have to use pixel heights (and not em) on mobile for reasons. Some of which are not even Apple's fault, so there y'are. It's everybody!

[solarbird]

Thanks, luv! ♥