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

[itsanooray]

"Can I get a screenshot and browser+OS info? Because that's not showing up in mine."

I was seeing the overlapping on Firefox on win 10 but I can't get a screenshot of that atm. On my galaxy android using Chrome there's no overlapping, bug there is little to no margin between the main comment content and footer links, caused by the same thing, see this:
http://imgur.com/a/5Zdbe

"I don't want to speak for Dreamwidth, as I'm not an employee or contractor for them. I'm doing this to make a fully-working implementation that can be reimplemented in S2 as a new style which behaves the same way. A reference model, as it were."

It is best practice to do mobile first, and can cut down on css code (and thus memory downloaded) because you won't be overriding as much... I see the base style you're building on is also doing min-width for its media queries so it's best to match it.

But, it might take more time for you, though, but in the end I find it worth it when I have to retrofit a sit for responsive. (I'm a front end developer and I've had many a-project retrofitting sites, so I get this pain, hah.)

"You think so? Huh. Is this an accessibility issue? I dislike the hard points but if it's an issue I can go back to them"
I do. It's not an accessibility issue insomuch a screen reader will break reading it, but it is one in terms of you're changing the expected look of something that can be confusing, especially with how small the fields now are they look like tiny buttons rather than inputs.

I think the rounded corners on the larger input fields, like in this comment box, are fine enough with the rounded corners, though, because they're larger and a lititle more clear what they are. I'm more concerned about the control strip.

"I'll look into that, thanks. I was using existing classes because they were there. :D"

I figured so! But the counter will make it less tedious and can go on infinitely, at least.

"What I wanted to do, Dreamwidth's CSS parser won't let me do, even though it's legal CSS. Something breaks and the whole custom CSS structure gets dropped. I would welcome a better suggestion that doesn't break the Dreamwidth parser - I am not happy with #> either, but it works."

I don't have a concrete idea off the top of my head and I can't play around with it atm (at work now), but just "Comment #1" would be more inuitive for the time being. I can revisit this later!

[solarbird]

Okay, first: I think I got it, try this. If it does, this was me not quite understanding enough about how comment links work. XD

The problem with something large like "Comment #" is too much space taken up on mobile. But also, it's not a comment number, it's a depth of reply in chain number, which is the information I'm trying to convey in replacement form given that the actual physical depth is no longer available. And "Reply depth: #" is also large.

I'm still thinking about it. Maybe something like ↳ if the CSS parser will let me? (I kind of doubt it will tbh.)

[talibusorabat]

That does it — thanks! This is a brilliant idea.

[solarbird]

Coexistence Alpha is now in Beta 1. If you're still using it, please upgrade. Thanks!

[solarbird]

Also - Navbar 2 is pretty much a placeholder. Here's what I'm pitching for Navbar 3 Mobile, which will be a complete overhaul. It'll be a big change on desktop too, though it will retain its current general shape.

(There are design documents involved as well as a bunch of images.)

[solarbird]

Just dropped 0.833 which is amongst other things the first mobile-aware version of Navbar 2 - and a complete re-implementation of it besides.