![[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)
From:small bugfixes if you want the absolute latest hotness
From:(no subject)
From:(no subject)
From:no subject
Date: 2017-04-30 03:09 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 01:09 pm (UTC)thanks!
Date: 2017-04-30 08:38 pm (UTC)(no subject)
From: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
From:Re: Header buttons on Android Chrome
From:Re: Header buttons on Android Chrome
From:Re: Header buttons on Android Chrome
From:Re: Header buttons on Android Chrome
From:Re: Header buttons on Android Chrome
From:Re: Header buttons on Android Chrome
From:Re: Header buttons on Android Chrome
From:Re: Header buttons on Android Chrome
From:Re: Header buttons on Android Chrome
From:Re: Header buttons on Android Chrome
From:Re: Header buttons on Android Chrome
From:Re: Header buttons on Android Chrome
From: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)
From:(no subject)
From:(no subject)
From:(no subject)
From:(no subject)
From:(no subject)
From:(no subject)
From:(no subject)
From:(no subject)
From:(no subject)
From:(no subject)
From:(no subject)
From:(no subject)
From:(no subject)
From:(no subject)
From:That's no glitch... that's a secret feature.
From:Re: That's no glitch... that's a secret feature.
From:Re: That's no glitch... that's a secret feature.
From:no subject
Date: 2017-05-01 10:16 pm (UTC)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.
no subject
Date: 2017-05-02 02:59 am (UTC)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. ^_^
(no subject)
From:no subject
Date: 2017-05-07 11:10 pm (UTC)(The result of this code being to hackily mimic the way comment headers appear on sitescheme.)
no subject
Date: 2017-05-07 11:35 pm (UTC)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.
(no subject)
From:(no subject)
From:(no subject)
From:With the beta css:
Date: 2017-05-08 04:14 am (UTC)Re: With the beta css:
Date: 2017-05-08 06:08 am (UTC)That said - what's the resolution of your phone's screen? If it's 640px or more on the short side, I've got a revision note to make - I'd really better shrink the user icon a little to fix that adjacency between it an the H in "Home." But if it's <640px, that's below the operational minimum spec I set, and it'll do.
Re: With the beta css:
From:Re: With the beta css:
From:Re: With the beta css:
From:Re: With the beta css:
From:Re: With the beta css:
From:no subject
Date: 2017-05-08 04:59 am (UTC)no subject
Date: 2017-05-08 05:10 am (UTC)(no subject)
From:Fixed install directions
From:Re: Fixed install directions
From:Re: Fixed install directions
From:Re: Fixed install directions
From:Re: Fixed install directions
From:(no subject)
From:(no subject)
From:no subject
Date: 2017-05-11 09:51 pm (UTC)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?
no subject
Date: 2017-05-12 12:51 am (UTC)The options for viewing other people's stuff in your style are here
no subject
Date: 2017-05-12 03:29 pm (UTC)no subject
Date: 2017-05-12 03:37 pm (UTC)no subject
Date: 2017-05-13 12:38 pm (UTC)(Quick question: any plans to extend this to the top navbar?)
no subject
Date: 2017-05-13 06:08 pm (UTC)But that aside, there is are plans; I have a project called Navbar 3, which includes Navbar 3 for Mobile. Navbar 3 is a set of swipeable panels. Here are screenshots and a design document, which is all that exists so far, but Denise is heavily interested. Here are docs and screenshots for the desktop version.
need desktop to switch?
Date: 2017-05-13 03:44 pm (UTC)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.
Re: need desktop to switch?
Date: 2017-05-13 06:09 pm (UTC)Yes, in Beta, I consider it acceptable to require a visit to a desktop to install. (I don't have any ability to change that anyway. :/ )
Re: need desktop to switch?
From:Re: need desktop to switch?
From:Re: need desktop to switch?
From:Re: need desktop to switch?
From:Re: need desktop to switch?
From:no subject
Date: 2017-05-14 05:24 am (UTC)no subject
Date: 2018-12-05 07:33 am (UTC)no subject
Date: 2018-12-05 10:00 am (UTC)font-variant: all-small-caps;
font-variant: small-caps;
whereever you see it.
(no subject)
From:(no subject)
From:no subject
Date: 2018-12-08 12:05 am (UTC)I'm so grateful for finally disabling the zoom on IOS, again, thank you!
no subject
Date: 2018-12-08 05:21 am (UTC)(no subject)
From:no subject
Date: 2018-12-11 03:04 am (UTC)As far as I can tell this is new -- I use DW enough that I would have noticed before now, it just started happening in the past few days. Not sure when I last updated Firefox to be sure though; I'm running 63.0.3 on desktop. I have no idea what my mobile versions are but I can look if need be.
Not sure if it's just me! Even if it is, any ideas? I'm not really sure how to prevent FOUC on a site like DW.
no subject
Date: 2018-12-11 04:10 am (UTC)What you could do if it's distracting enough is copy it to a very fast server somewhere else, and use the Custom CSS URL (right above the code box) to grab it from there, instead. That might help.
In other news, though... well. It'll take some time for that. But something bigger is coming and it'll solve this a different way. ♥
(no subject)
From:no subject
Date: 2018-12-20 03:14 pm (UTC)no subject
Date: 2019-01-21 10:54 pm (UTC)no subject
Date: 2019-01-28 04:56 am (UTC)no subject
Date: 2019-01-28 03:00 am (UTC)no subject
Date: 2019-01-28 04:56 am (UTC)Yeah, default sizes are pretty close to what shipped originally? But not identical and I have to use pixel heights (and not em) on mobile for reasons. Some of which are not even Apple's fault, so there y'are. It's everybody!
no subject
Date: 2019-02-01 12:10 am (UTC)Record keeping
Date: 2019-02-01 12:27 am (UTC)This is still an alpha and without warranty and all that, please report bugs. Thanks.
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
Re: Record keeping
Date: 2019-02-05 04:23 am (UTC)So far it all looks pretty damn tight. :)
Re: Record keeping
From:Re: Record keeping
From:Re: Record keeping
From:Re: Record keeping
From:Re: Record keeping - screen shots yay!
From:Re: Record keeping
From:Re: Record keeping
From:Re: Record keeping
From:Re: Record keeping
From:no subject
Date: 2019-02-07 03:37 am (UTC)two things:
first, for anyone else who has the thing set where on reading pages, the comment count gets appended to the comment link, you need to add this to the custom CSS so that it will change color when visited:
ul.entry-interaction-links a:visited, ul.entry-management-links a:visited { color: (your color here); }
this appears to be a thing in the base style here.
second, is it possible to force the comment buttons to be as wide as their text? this is what I'm seeing on mobile replying to a top-level comment in Chrome on Android https://photos.app.goo.gl/hLnF5Tfq5WNXKCeS9
thanks so much!
no subject
Date: 2019-02-07 07:42 am (UTC)(no subject)
From:no subject
Date: 2019-05-11 04:32 pm (UTC)And it does make my journal look so much nicer on mobile, thank you!
no subject
Date: 2019-07-08 06:17 pm (UTC)no subject
Date: 2019-07-08 06:20 pm (UTC)Please feel free to try it with others and report back!
Also, be aware that functionality is not as optimal as it could be right now, because the latest code drop from Dreamwidth official broke several things. I'm intending to work on that this week.
(no subject)
From:(no subject)
From:(no subject)
From:(no subject)
From:(no subject)
From: