We are getting seriously close to a finished product here.
Issue: some external images were staying large and forcing horizontal scrolling on some phones. Fixed.
This is the latest drop of Coexistence Alpha, a unified mobile and desktop style for Dreamwidth. many more details here, including instructions on how to use the style.
UPDATE 2019/2/6: QUESTION 2: Yes, this sat fallow for a while, but no longer. We have a second RC.
Coexistence Alpha: a mobile-friendly CSS patchset for Neutral Good - v0.846 RELEASE CANDIDATE TWO
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.
( Revision history and bleeding edge code (there may be an RC3) )
If you are a Coexistence Alpha user, please upgrade to this version and report bugs! If you aren't: do you want mobile-friendly Dreamwidth? This is how to get it. Installation instructions and bug reporting belong at the link above. Thanks.
(0.83 work will include getting those $*#&(@$*!!! text entry boxes and buttons in Navbar 2 lined up everywhere, even Chrome on Android, That Monster, some other related work, and trying to figure out how to handle warring-comment-numbers on comments in accessibility mode on mobile.)
Seriously, nested comment chains are trivially readable and replyable on mobile with this applied. Horizontal scrolling? I mock your horizontal scrolling. It honours user customisation through the settings panels now (including left and right user icon positioning, which the first alpha didn't) and I just dropped a bunch of Navbar 2 fixes for Android browers so hopefully that's better now too. And comment depth markers on mobile now work on comments without subject lines.
If I could just stick Navbar 3 on this, goddamn. But I can't, that requires more changes than I can do just in CSS.
The base style REQUIRED is Neutral Good. That's the default "new user" style and is why I went at that one first. This is an extension (and something of a rewrite) of that style, entirely in CSS. It fixes many bugs on desktop, and gives you a functional mobile view of your reading list and your journal. It makes NO attempt to address system style issues on mobile.
The CSS overlay which you need to copy and paste into the "custom css" pane of the advanced style customisation interface is here:
This will ALSO get you Navbar 2, the upgrade of Navbar I've been running for a while. (Yes, you can still disable it.) It will NOT get you Navbar 3, so you won't have the mobile version you see in the screenshots in my previous post. But the navbar will be better looking on desktop, and no worse on mobile.
THIS IS AN ALPHA RELEASE, only tested so far against Safari and Firefox. Please report bugs.
(Except for the one where replying to an extant comment in single-entry view causes iOS to autozoom still. I know about that one and I'll fix it. But other than that. Comments are particularly rough at the moment tbh.)
eta: Version 0.7 alpha replaced with version 0.8 alpha, same link. Abovementioned bug fixed, several other bugs fixed, more cleanup, vitally improved handling of cascading comment threads on mobile, a few other things.
And will get broken as I continue to fuck with it. But still. Everything but Navbar 3 is real and live; these are otherwise-unedited iPhone screencaps.
But what about "Trending tags" instead on general reading? And "View popular feeds" if filtered to RSS feeds, which is exposed functionality? They already have the functionality for "Trending tags."
And maybe have "Trending tags" show up often - say, at individual post view unless it's an RSS feed individual post view, in which case, again, "View popular feeds".
Because one of the problems people have on Dreamwidth is finding activity. This would help.
Maybe "Latest posts sitewide" could show up somewhere, too. Like... at journal views. Where you're already looking at some individual's latest posts, here's latest posts across all of Dreamwidth.
eta: I'm actually kind of thinking now "latest posts sitewide" on the Reading page(s), and "trending tags" on individual journals and journal entries - basically swapping the ideas I'd had before. Because 'trending tags' might also be relevant when composing, and 'latest posts site-wide' goes well with 'latest posts from people I read.'
(The link is temporary but it's fine for now, it's to a dropbox directory.)
These versions can't be done with custom CSS on the existing platform, they require actual code changes in the back end. But as far as I can tell, it should all be UI code changes, pretty simple stuff.
Some functionality changes, in addition to a few new links:
- getting rid of dropdown-plus-button to trigger a view reload on the reading view filter, and just having the dropdown selector do it directly
- prev message/next message arrows (when in single-post views)
- prev page/next page arrows (when in journal or reading page views)
I've asked whether the style selector needs to be a set of top-level links or whether it could also be an action-on-selection dropdown, like reading view filter. Right now I'm showing it the old way.
Anyway, I don't really consider these really final but they do accomplish the general task of dividing into three consistent groups (user/login, current location, exploration) and adding some basic functionality (like prev/next) that really is kind of implied by "navbar," and so on.
The background gradient is just the standard system gradient and could be replaceable with anything.
eta: My thoughts are on mobile are that the three cells remain, but one is displayed at a time, and the other two are reached by swiping. Default to the middle pane, simplify the relationship permutation text for space, display a few fewer options perhaps.
eta2: Yeah, I may've gone a little nuts. Here's a run at mobile view mockups. 640x60 because iPhone 5 is 640 pixels on the short axis and Dreamwidth likes things 60 pixels high. Stupid science-related memetic disorder.
eta3: One bit of feedback I got from someone who does this regularly is that having Help on the far right is an industry standard, so I need to swap "Help" and "Home" in desktop. Also, despite the lack of space for it, I need some kind of visual indicator of swipe on the mobile bar (which I knew but was kind of hoping I'd get away without), which means we're talking chevrons for that since that's well understood.
eta4: This is getting long, so a new post: Trending tags.
A/B comparison (another journal, current navbar vs. my style applied navbar)
Navbar, journal view
Navbar, reading page
Here's the DW custom stylesheet I wrote to do it. This has only been tested on Firefox and Mobile Safari, but I'm not doing anything super-surprising so I don't anticipate a lot of problems? But the navbar is mostly made with tables (kill me) so my CSS has to work with that which can produce some creaky results.
Hm, does this work?
aw yeah 100% works
(works on dreamwidth anyway, probably not lj, sorry, but the link at top should work regardless)
(ps: anyone seeing this on lj, i uploaded a pharah icon but only on dreamwidth ^_^ )