solarbird: From moongazeponies on deviantart (pony-pinkie-hax)
[personal profile] solarbird
You Want Mobile Dreamwidth, Artie? You Got It:

Coexistence Alpha: a Neutral Good CSS patchset v0.842 BETA 1

As of 7 May 2017, *** WE ARE NOW IN BETA ***

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.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. [personal profile] 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.

This is still an alpha and without warranty and all that, please report bugs. Thanks.

BLEEDING EDGE CODE: v0.843alpha.

DO NOT LINK DIRECTLY TO THESE STYLESHEETS. I will make them go away, they're just temporary download points.

HELLO PLURK USERS! To answer the nr. 1 question I've seen: This layout uses YOUR COLOURS. I happen to like green, but on new accounts it is system default greyscale and your custom colour selections are respected. (My test account is [personal profile] solarbird_testbed and while it will break as I write more code, it shows the style in system default/new account colours.)

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

Date: 2017-05-01 08:43 pm (UTC)
talibusorabat: Puppy with glasses "I am who I am. Your approval is not needed." (Default)
From: [personal profile] talibusorabat
I'm having the same issue with content overlapping the bottom links, screenshot here.

I'm on Chrome right now, using MacOS 10.12.4.
Edited (to add the details i forgot) Date: 2017-05-01 08:43 pm (UTC)

Date: 2017-05-01 09:02 pm (UTC)
itsanooray: (Default)
From: [personal profile] 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:

"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!

Date: 2017-05-03 02:02 pm (UTC)
talibusorabat: Puppy with glasses "I am who I am. Your approval is not needed." (Default)
From: [personal profile] talibusorabat
That does it — thanks! This is a brilliant idea.

October 2017

12 3 4 567
8 91011 12 1314
15 161718192021

Most Popular Tags

Page Summary