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: Record keeping

[solarbird]

First: did you install the RC (linked in the post up top) or the old Alpha?

That said, I haven't even played with the emoji thing and honestly forgot about it. I'll give that a look.

To address a couple of issues - items 2 and 2a are intentional, because of interactions with other elements which aren't even always visible. The only safe way I've found to handle it is to scrunch up tight (forcing more subject wrapping, as you've seen), or make fonts smaller, but if I make the fonts smaller, it triggers iOS's zooming all over the place when you're selecting items, and avoiding that nonsense is a design axiom.

So I'm not fond but it's the compromise set I've chosen.

I'm not sure what you're talking about with item 3 - post that screencap? Thanks.

Re: Record keeping

[marahmarie]

First: did you install the RC (linked in the post up top) or the old Alpha?

Nope, I visited the test journal: https://solarbird-testbed.dreamwidth.org/

I'm not sure what you're talking about with item 3 - post that screencap? Thanks.

Didn't take one, but I will. Reading through your other replies and will get this all together.

Re: Record keeping

[marahmarie]

OK, for my phone I'll have to throw RC2 up somewhere to test it because it's not on the testbed yet. I might need to create a new testing account as style-tester tests my current design while style-test runs an old Alis Dee design for archival purposes so ...yeah.

I did take a peek in Firefox on my laptop, though, and the comment icon table is looking much better (though on desktop the comment form tables are still resulting in horizontal scrolls under 320px. I do Horrible Design Things like @media(max-width:2000000px){
body{overflow-x:hidden} (actually in my source) just to avoid these issues and also try to get everything working down to 280px or so before cut-offs/scrolls are pretty much inevitable because it's more fuss to get things right much tinier (not that it can't be done; I'm a bit lazy is all)).

Will get back to you...

Re: Record keeping - screen shots yay!

[marahmarie]

(created another testbed @ https://style-testing.dreamwidth.org/ using 2.0; screen caps taken while logged into DW on Galaxy S6 Android 7.0/Firefox 65.0)

Underlying code that might want fiddling with on the following:

-- https://marahmarie.dreamwidth.org/file/452443.png and https://marahmarie.dreamwidth.org/file/453818.png
(on full-size comment forms OpenID username/pass field stretches out, forcing horizontal scroll)
-- https://marahmarie.dreamwidth.org/file/452935.png (entry tags next to green + sign don't completely align right)
-- https://marahmarie.dreamwidth.org/file/453129.png (every element of logged-in inline comment forms except Post and More Options buttons is centering; not sure if that's desired)
-- https://marahmarie.dreamwidth.org/file/458187.jpg (lj-cut image is top-aligned, if it's at all aligned; this might be desired, so just pointing it out)

The oinking you did so far on comment icon tables is looking great:
-- https://marahmarie.dreamwidth.org/file/453488.png

One thing on that; if you don't like the way Dreamwidth makes the icon images different sizes, which makes the table a bit ragged looking, you can smooth it out in the comment form and the resulting comment title on the entry page with something like this: #subjectIconList img{height:14px;width:14px} (comment form) .comment-subjecticon img{height:14px;width:14px} (comment title on entry page)

A search of #subjectIconList and .comment-subjecticon in my source (on this journal, not the testbed) will show the latest changes I've made to that.