solarbird | Coexistence Alpha: a responsive mobile and desktop overlay for Dreamwidth

Current Mood: ambitious

Entry tags:

Coexistence Alpha: a responsive mobile and desktop overlay for Dreamwidth

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!

Threaded | Top-Level Comments Only

o rly

screenshot?

fffft, how will I test for this, idek.

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) 2017-05-01 20:43 (UTC)

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

I really love this! Great job! I especially love the forum/disqus style comment numbering for longer threads to remove horizontal scrolling.

Anyway I don't have any concrit, just wanted to let you know it looks good from an iPhone 6.

Also people on the unofficial Dreamwidth account on Plurk are being directed here but a lot of different mobile users posted directly in that plurk that it looked good for them so here's a link to it.

Okay, I'm seeing it on Vivaldi, which uses the Chrome rendering engine. Thanks!

I think I got it - try this. This was me not quite understanding enough about how comment links work. XD

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.)

Thanks! And thank you for the link.

I've dropped a quickfix for a problem affecting Chrome users, and users of Firefox on Windows 10. (Tho' really I'm surprised it wasn't affecting more users given what it was...) See above for the updated link. ^_^

http://imgur.com/a/VqQR4

I know that setting was a check box somewhere...

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.)

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

0.833 is a newly mobile-aware reimplementation of Navbar 2 and it's testing decently in the browsers I have - give it a shot?

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.

Alignment issues largely solved. I have a set of screenshots for you when I get a stable internet connection. The three buttons on the Reading page each have their own text style. Was that intentional? (Please don't use all caps, it's an accessibility issue.)

Noted on the allcaps, removed. It was an attempt to make it more visible on OS X Firefox without hurting Safari or other views.

Button styles regularised on Reading page Navbar in 0.834.

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

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

For some reason, the beta code completely wrecks the following custom CSS I added to my layout:

/* COMMENTS */

.comment .header
  {
    background-color: #EFEFEF!important;
  }

.comment-depth-odd .comment .header
  {
    background-color: #DFDFDF!important;
  }

.comment .header {
   text-align: left;
   margin-bottom: -30px;
   margin-left: 0px;
   padding-bottom: 20px;
   padding-left: 10px;
   padding-top: 10px;
   height: 50px;
}

.has-userpic .comment .header {
   text-align: left !important;
   margin-bottom: -35px !important;
   margin-left: 0px;
   border-left: 135px #DFDFDF !important;
   padding-bottom: 20px !important;
   padding-left: 120px !important;
   padding-top: 15px !important;
   height: 66px !important;
}

.comment-poster .comment-from-text {
   display: none;
}

.comment-poster .anonymous {
   padding-left: 10px;
}

@media screen and (max-width: 45em) { 
.has-userpic .comment-poster .ljuser {
   margin-left: 50px;
}
}

.comment-content {
   border: none;
   margin-top: 10px !important;
}

.has-userpic .comment-content {
   margin-top: 0px !important;
}

.comment .poster-ip {
   float: right;
   font-size: 9px;
   margin-top: -100px !important;
   margin-right: 10px;
}

.comment .edittime {
   margin-top: 10px;
}

.comment-content li {
   margin-left: 30px;
}

.has-userpic .comment .userpic {
   margin-top: -48px !important;
   height: 100px !important;
}

.comment-poster .ljuser:after {
  content: "";
  display: table;
  clear:both;
}

.comment {
  padding: 10px;
}

.comment-wrapper {
  padding: 0;
}

(The result of this code being to hackily mimic the way comment headers appear on sitescheme.)

Edited 2017-05-07 23:10 (UTC)

That... does not surprise me? You are overriding a lot of things I'm setting, and results will not be likely be predictable on newer code. Once this migrates to S2, this sort of thing will be both a lot easier to do, and will be more reliable.

HOWEVER, I threw your mods on my testbed account, and it behaved reasonably. Not perfectly, but easily enough that fixes should be trivial.

I suggest you try your mod code again against the beta code stack, but making sure you've added it at the very bottom of the CSS window, well after everything else.

Also, two of your class modifications up at the top are indented; this may not matter in true standard CSS, but may be confusing the Dreamwidth parser. I unindented both. (They're the first two.)

I did these two things and it's about 95% working on my testbed account.

Yeah, I am Super Lazy with indenting. I copied that bit of code from elsewhere and never bothered to fix it.

And I guess that was the issue, because now everything is hunky dory! Thanks.

Excellent! Thanks and please report bugs in the base code. (Only my code. Not yours. ^_^ )

I haven't run into a single problem with your base code, so. \o/

Threaded | Top-Level Comments Only

Page 2 of 6

Coexistence Alpha: a responsive mobile and desktop overlay for Dreamwidth

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

Re: Header buttons on Android Chrome

no subject

Re: Header buttons on Android Chrome

Re: Header buttons on Android Chrome

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

With the beta css: