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-04-30 02:26 am (UTC)
ironymaiden: (banana)
From: [personal profile] ironymaiden
I'm getting a 404 on the link to the CSS.

Date: 2017-04-30 02:44 am (UTC)
zaluzianskya: (Default)
From: [personal profile] zaluzianskya
Same; I'd love to test it out.

(Edit): Looks like this is the proper URL? (OP, sorry if you didn't want people poking around in the directory structure.)
Edited Date: 2017-04-30 02:47 am (UTC)

Date: 2017-04-30 03:09 am (UTC)
zaluzianskya: (egg cuddles)
From: [personal profile] zaluzianskya
Oh my gosh I love the way this handles comment threads on mobile! This is so nice and elegant.

Date: 2017-04-30 01:09 pm (UTC)
saga: (Default)
From: [personal profile] saga
Yo!!!! The comments are SO GOOD, I feel like if all DW layouts just fixed it up in their original CSS base codes with your codes, we'd be set.

Header buttons on Android Chrome

Date: 2017-05-01 12:01 am (UTC)
ironymaiden: (banana)
From: [personal profile] ironymaiden
Seeing issues on Galaxy S5. Look at the navbar. http://imgur.com/a/JdD2R

Otherwise looking good.

Re: Header buttons on Android Chrome

Date: 2017-05-01 01:44 am (UTC)
ironymaiden: (Default)
From: [personal profile] ironymaiden

1) No modifications. 2) At this point I had not done anything other than select Neutral Good and add the CSS. Anything specific to check in the wizard?

Re: Header buttons on Android Chrome

Date: 2017-05-01 01:58 am (UTC)
ironymaiden: (penguin)
From: [personal profile] ironymaiden
*cough* as per the subject, Chrome :)
I also have a Samsung tablet and it has the same issues.

Re: Header buttons on Android Chrome

Date: 2017-05-01 04:04 am (UTC)
ironymaiden: (Default)
From: [personal profile] ironymaiden

Looking better: http://imgur.com/a/gzUFC

Re: Header buttons on Android Chrome

Date: 2017-05-01 04:24 am (UTC)
ironymaiden: (aha)
From: [personal profile] ironymaiden
http://imgur.com/a/Hqy3L
With my partially finished color scheme highlighting some edges.

Re: Header buttons on Android Chrome

Date: 2017-05-04 03:56 pm (UTC)
ironymaiden: (banana)
From: [personal profile] ironymaiden
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.)

Date: 2017-05-01 08:14 pm (UTC)
itsanooray: (Default)
From: [personal profile] itsanooray
I could only take a quick look but issues and suggestions I have:
1) On some of the comment chains on this page, some content text is overlapping with footer links. A clear fix is needed due to your floats.

2) If DW is aiming for best practices involving responsive design, the CSS should be done mobile-first, since you're using max-width on media queries this is desktop-first css.

3) I wouldn't add border-radius to inputs, it makes them not look like an input, and in areas like in the control strip where you shrunk the size it makes the type very claustrophobic.

4) your idea for how you're handling the comment threads is interesting, however, instead of specifying a number for every comment depth in the css look into the css counter-increment property, it will auto count and spit out numbers for you.

I would also look into styling it so it's a little more clear what you were going for. I didn't notice the numbers at first and "#>" doesn't mean much, especially if it's your first time coming to a dw journal and you're on a phone.

I apologize if some of these suggestions were things you were going to work or approve on, haha.

I'm really glad someone is tackling this officially! Just having the viewport declared by default would make me a happy camper.

Date: 2017-05-01 08:23 pm (UTC)
ironymaiden: (Default)
From: [personal profile] ironymaiden

This reminds me: I have accessibility settings on for comments. The two nesting indicators both display.

Date: 2017-05-02 03:20 am (UTC)
ironymaiden: (Default)
From: [personal profile] ironymaiden
http://imgur.com/a/VqQR4

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

Date: 2017-05-14 06:08 pm (UTC)
jesse_the_k: Photo of baby wearing huge black glasses  (eyeglasses baby)
From: [personal profile] jesse_the_k
The checkbox is labeled "Display Explicit Comment Hierarchy Indicators" on this page
http://www.dreamwidth.org/manage/settings/?cat=display

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

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.

Date: 2017-05-13 03:27 pm (UTC)
mdlbear: the positively imaginary half of a cubic mandelbrot set (Default)
From: [personal profile] mdlbear
Nice! About the only glitch I'm seeing is that the text in the subject and message fields isn't getting scaled down.

Re: That's no glitch... that's a secret feature.

Date: 2017-05-13 10:57 pm (UTC)
mdlbear: the positively imaginary half of a cubic mandelbrot set (Default)
From: [personal profile] mdlbear
Ugh. OK.
I was viewing it on in a desktop browser; unfortunately (fixed-width) the font used in text areas is significantly larger than the body text -- I expect it's the system default, which I set to something that makes text editors and terminal windows usable. Possibly this isn't a problem for people who use the OS's default fonts.

Date: 2017-05-01 10:16 pm (UTC)
amber: ⌠ ART ⊹ Panda&Girl ⌡ (Default)
From: [personal profile] amber
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.

Date: 2017-05-07 11:10 pm (UTC)
zaluzianskya: (Default)
From: [personal profile] zaluzianskya
For some reason, the beta code completely wrecks the following custom CSS I added to my layout:



(The result of this code being to hackily mimic the way comment headers appear on sitescheme.)
Edited Date: 2017-05-07 11:10 pm (UTC)

Date: 2017-05-07 11:38 pm (UTC)
zaluzianskya: (Default)
From: [personal profile] zaluzianskya
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.

Date: 2017-05-07 11:39 pm (UTC)
zaluzianskya: (Default)
From: [personal profile] zaluzianskya
I haven't run into a single problem with your base code, so. \o/

Re: With the beta css:

Date: 2017-05-09 03:15 am (UTC)
numb3r_5ev3n: Mettaton NEO from Undertale (Default)
From: [personal profile] numb3r_5ev3n
OK, I'm actually not sure it's possible to change this phone's resolution, though I will research this.

Re: With the beta css:

Date: 2017-05-09 03:20 am (UTC)
numb3r_5ev3n: Mettaton NEO from Undertale (Default)
From: [personal profile] numb3r_5ev3n
The Tribute 2 features LTE, a quad-core processor, 1 GB of RAM, and 8 GB of expandable storage space. It also sports a 4.5-inch IPS screen with 480 x 854 pixels. The phone is powered by 1900 mAh battery and has a 5 MP rear camera paired with a 1.3 MP front-facing camera.Jun 29, 2015

Re: With the beta css:

Date: 2017-05-09 11:56 am (UTC)
numb3r_5ev3n: Mettaton NEO from Undertale (Default)
From: [personal profile] numb3r_5ev3n
Thanks! Though really I want to be able to upgrade soon. This was Sprint's starter phone last year. It has great specs for a starter phone, but MTP connection is almost impossible, the audio jack is shorting out, and I haven't been able to get app bloat under 4GB.
Edited Date: 2017-05-09 12:22 pm (UTC)

Date: 2017-05-08 04:59 am (UTC)
ossobuco: Legion from Mass Effect 2 (Default)
From: [personal profile] ossobuco
Hello! So I've installed the beta and am viewing it in Google Chrome on Win10, and I'm seeing user icons for all posts sitting too high, out of their little boxes and almost flush with the entries' subject box (this is only true for entries, not for the icon in the Profile sidebar bit). When using DW's little icons for the Subscribe/Post/Message/etc links in the Profile sidebar thing, I see them aligned to the right of the icon box rather than centered below it. Finally, it looks like the "Link" and "Reply" links are positioned slightly lower than the other links at the bottom of journal entries. Screenshot for all three issues:

Date: 2017-05-08 05:10 am (UTC)
ossobuco: Legion from Mass Effect 2 (Default)
From: [personal profile] ossobuco
The issues with entries' user icons and the Subscribe/Post/etc icons under Profile repro in both Dolphin and Safari on my iPhone (10.3.1).

Re: Fixed install directions

Date: 2017-05-08 05:56 am (UTC)
ossobuco: Ana Amari from Overwatch; Arabic reads "I will protect you" (ana protect)
From: [personal profile] ossobuco
Aha, that fixes it right up! I don't see any more issues at first glance.

Re: Fixed install directions

Date: 2017-05-08 06:27 am (UTC)
ossobuco: Ana Amari from Overwatch; Arabic reads "I will protect you" (ana protect)
From: [personal profile] ossobuco
(ALL MY FEELINGS about beautiful sniper mom!!)

You're totally right, I didn't re-enter the custom CSS at all, haha... I've done it now and everything still looks good on PC/Chrome and iOS/Dolphin. It's my bedtime now but I'll try to fiddle with it more during the week!

Date: 2017-05-09 12:29 pm (UTC)
numb3r_5ev3n: Mettaton NEO from Undertale (Default)
From: [personal profile] numb3r_5ev3n
You may have the other theme using "Neutral Good" - there are two. The apps runs best on Neutral Good for Practicality. The other one has the issue with the icons being offset.

Date: 2017-05-11 09:51 pm (UTC)
wrog: (Default)
From: [personal profile] wrog
Copypasta all of this into the Advanced Seettings Custom CSS box, and save. Apply "your style" to everything you can.

Not finding this. I'm assuming you're referring to this page but I''m not finding a box to paste CSS into.

Is this a "Layer" or a "Style"? (going to either of those pages doesn't yield a box either).

Is this something that only paying members can do?
Edited Date: 2017-05-11 09:52 pm (UTC)

Date: 2017-05-12 03:29 pm (UTC)
coraline: (Default)
From: [personal profile] coraline
oh this is great! so far as i can tell also works in "neutral evil" for those of us who prefer dark backgrounds?

Date: 2017-05-13 12:38 pm (UTC)
gingicat: the hands of Doctor Who #10, Martha Jones, and Jack Harkness clasped together with the caption "All for One" (all for one)
From: [personal profile] gingicat
Here by way of [personal profile] rosefox. Looks like it works, thank you!

(Quick question: any plans to extend this to the top navbar?)
Edited (added a question) Date: 2017-05-13 12:43 pm (UTC)

need desktop to switch?

Date: 2017-05-13 03:44 pm (UTC)
thnidu: A maze. www.promrds.com/chapter9/mazegenerator.htm (maze)
From: [personal profile] thnidu
One of my friends boosted this at 2017-05-13 08:44 and added:

I tried it out myself. I found that I had to go to a desktop computer in order to copy-paste the CSS code, but now I can look back and forth and see that it scales properly depending on whether I'm on desktop or mobile.
Edited Date: 2017-05-13 03:45 pm (UTC)

Re: need desktop to switch?

Date: 2017-05-13 08:10 pm (UTC)
thnidu: my familiar. "Beanie Baby" -type dragon, red with white wings (Default)
From: [personal profile] thnidu
Thank YOU.

Re: need desktop to switch?

Date: 2017-05-14 01:23 am (UTC)
ironymaiden: (DW friends)
From: [personal profile] ironymaiden
curious about your platform/browser. (I'm not doubting that you had issues, but I've been making these changes on Android/Chrome mobile all along.)

Re: need desktop to switch?

Date: 2017-05-14 03:01 am (UTC)
thnidu: my familiar. "Beanie Baby" -type dragon, red with white wings (Default)
From: [personal profile] thnidu
As I said, this wasn't my report but a friend's. I'll ask them.

Date: 2017-05-14 05:24 am (UTC)
numb3r_5ev3n: Mettaton NEO from Undertale (Default)
From: [personal profile] numb3r_5ev3n
Curent bleeding edge v0.843alpha:



August 2017

S M T W T F S
  12 3 4 5
67 8 910 1112
1314 1516171819
20212223242526
2728293031  

Most Popular Tags