![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
solarbirdUPDATE 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!
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
(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!
no subject
Date: 2017-04-30 02:26 am (UTC)no subject
Date: 2017-04-30 02:44 am (UTC)(Edit): Looks like this is the proper URL? (OP, sorry if you didn't want people poking around in the directory structure.)
no subject
Date: 2017-04-30 03:09 am (UTC)no subject
Date: 2017-04-30 05:47 am (UTC)no subject
Date: 2017-04-30 05:48 am (UTC)i don't know why i keep quoting mccree when i'm a tracer main
Date: 2017-04-30 05:52 am (UTC)no subject
Date: 2017-04-30 05:54 am (UTC)small bugfixes if you want the absolute latest hotness
Date: 2017-04-30 09:14 am (UTC)(post link also updated to point to this version)
no subject
Date: 2017-04-30 01:09 pm (UTC)thanks!
Date: 2017-04-30 08:38 pm (UTC)Header buttons on Android Chrome
Date: 2017-05-01 12:01 am (UTC)Otherwise looking good.
Re: Header buttons on Android Chrome
Date: 2017-05-01 12:52 am (UTC)Questions:
1) Anything custom running in the CSS? Did you modify it at all?
2) What (if any) non-default style settings do you have set outside of CSS edits?
I don't have a Galaxy device but I'll see what I can find to trigger the behaviour.
Navbar 2 is a placeholder, really. You might be interested in the Navbar 3 project for mobile and for Desktop. These will require code changes on the server side but Denise is actively interested.
Re: Header buttons on Android Chrome
Date: 2017-05-01 01:44 am (UTC)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:52 am (UTC)Oh, a very important question: what browser? Chrome, Firefox, or that horrible thing that ships with Samsungs? :D
Re: Header buttons on Android Chrome
Date: 2017-05-01 01:58 am (UTC)I also have a Samsung tablet and it has the same issues.
Re: Header buttons on Android Chrome
Date: 2017-05-01 03:57 am (UTC)0.814 alpha EXPERIMENTAL
Re: Header buttons on Android Chrome
Date: 2017-05-01 04:04 am (UTC)Looking better: http://imgur.com/a/gzUFC
Re: Header buttons on Android Chrome
Date: 2017-05-01 04:24 am (UTC)With my partially finished color scheme highlighting some edges.
Re: Header buttons on Android Chrome
Date: 2017-05-01 07:17 am (UTC)0.82 alpha.
Re: Header buttons on Android Chrome
Date: 2017-05-01 06:43 pm (UTC)really close :)
Re: Header buttons on Android Chrome
Date: 2017-05-01 07:00 pm (UTC)Re: Header buttons on Android Chrome
Date: 2017-05-01 07:03 pm (UTC)no subject
Date: 2017-05-01 08:14 pm (UTC)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.
no subject
Date: 2017-05-01 08:23 pm (UTC)This reminds me: I have accessibility settings on for comments. The two nesting indicators both display.
no subject
Date: 2017-05-01 08:33 pm (UTC)Can I get a screenshot and browser+OS info? Because that's not showing up in mine.
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.
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.
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.
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.
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'll look into that, thanks. I was using existing classes because they were there. :D
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.
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.