Coexistence Alpha: a responsive mobile and desktop overlay for Dreamwidth

[solarbird]

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!

Comments

[ironymaiden]

I'm getting a 404 on the link to the CSS.

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

[solarbird]

Yes, that's it. I edited the version number in the file and in the link but not in the filename because lol what. I've fixed the link. Thanks for the extra effort!

small bugfixes if you want the absolute latest hotness

[solarbird]

Version 0.812. Cross-browser issues resolved: text entry area borders disappearing on Firefox (sometimes), subject line entry field width behaviour (crazymaking), iPhone horizontal focus shift AGAIN (also crazymaking and related to the subject entry field and also the icon selector in certain circumstances.)

(post link also updated to point to this version)

[solarbird]

agh, I'm sorry, I'm an idiot. Yeah, I upgraded the version in the file and the version in the link but not the filename. :/ So I've fixed the link and yes zaluzianskya you found the right version. Thanks for the extra effort!

[solarbird]

If you're wondering, the 0.81 to 0.811 was a bugfix in... blockquotes, I think. Trivial one but I made it.

[zaluzianskya]

Oh my gosh I love the way this handles comment threads on mobile! This is so nice and elegant.

i don't know why i keep quoting mccree when i'm a tracer main

[solarbird]

Thanks, luv!

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

thanks!

[solarbird]

I've put in a few more fixes, most notably support for user-selection of left usericon position in posts and comments. See above for the bleeding-edge link. ^_^

[solarbird]

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

Header buttons on Android Chrome

[ironymaiden]

Seeing issues on Galaxy S5. Look at the navbar. http://imgur.com/a/JdD2R

Otherwise looking good.

Re: Header buttons on Android Chrome

[solarbird]

Oh wow, a Navbar 2.0 bug! Thanks!

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

[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

[solarbird]

Nope - I'm just fishing.

Oh, a very important question: what browser? Chrome, Firefox, or that horrible thing that ships with Samsungs? :D

Re: Header buttons on Android Chrome

[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

[solarbird]

Okay, I was able to reproduce it on Firefox on iOS and after tremendous fiddling got the search bar side lined up on all available platforms. Does this version work for you specifically regarding the search panel? Nothing else has been addressed, this is difficult enough that I want to see if this part works:

0.814 alpha EXPERIMENTAL

Re: Header buttons on Android Chrome

[ironymaiden]

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

Re: Header buttons on Android Chrome

[ironymaiden]

http://imgur.com/a/Hqy3L
With my partially finished color scheme highlighting some edges.

Re: Header buttons on Android Chrome

[solarbird]

Try this, it fixes the middle panel on Firefox for iOS, so hopefully also for Android Chrome.

0.82 alpha.

Re: Header buttons on Android Chrome

[ironymaiden]

http://imgur.com/a/akJgo

really close :)

Re: Header buttons on Android Chrome

[ironymaiden]

see your username: http://imgur.com/a/oTaYa

Re: Header buttons on Android Chrome

[solarbird]

Yeah that is now listed as a known bug because that's one I don't even know what the hell. I'm going to work on that when we get back from Anna's followup at the hospital this afternoon. (The surgical splints are being removed!)

Re: Header buttons on Android Chrome

[solarbird]

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?

Re: Header buttons on Android Chrome

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

Re: Header buttons on Android Chrome

[solarbird]

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.

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

[ironymaiden]

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

[solarbird]

o rly

screenshot?

fffft, how will I test for this, idek.

[ironymaiden]

http://imgur.com/a/VqQR4

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

[jesse_the_k]

The checkbox is labeled "Display Explicit Comment Hierarchy Indicators" on this page
http://www.dreamwidth.org/manage/settings/?cat=display

[solarbird]

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.

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.

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

[solarbird]

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

[solarbird]

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

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

[solarbird]

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

[talibusorabat]

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

[solarbird]

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

[solarbird]

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

[solarbird]

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.

[solarbird]

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

[mdlbear]

Nice! About the only glitch I'm seeing is that the text in the subject and message fields isn't getting scaled down.

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

[solarbird]

That's not just not a glitch, it's specifically a feature.

If I don't do that (and a couple of other things), then you get auto-zooming and auto-repositioning on iOS when a text field is selected. It's an awful user experience that Apple considers a feature, and I - like so many other people - work to avoid triggering it as broadly as we can.

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

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

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

[solarbird]

If you prefer to live with the zooming/repositioning, look for and delete this code:

#qrform select, #qrform textarea, #qrform subject, #qrform body, input#subject.textbox, textarea#commenttext.textbox {
font-size: 16px;
}

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

[solarbird]

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. ^_^

[solarbird]

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

[zaluzianskya]

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

[solarbird]

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.

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

[solarbird]

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

[zaluzianskya]

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

With the beta css:

[numb3r_5ev3n]

Re: With the beta css:

[solarbird]

I'm pretty sure they won't include Navbar 2 in any release of this, but I wish they would.

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:

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

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

[solarbird]

480px. Yep, that's below cutoff. Though... I'm surprised 480px was shipping that recently.

(If it overlapped I would probably want to address it anyway. And if no other bugs come in I might anyway for you. ^_^ )

Re: With the beta css:

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

Re: With the beta css:

[solarbird]

No, no, I'm not asking you to change it. I'm just going, 'If this is below our minimum test resolution, then this is acceptable performance.' It doesn't overlap, it doesn't affect links, it's just a little close.

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

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

[solarbird]

...wow that is nothing like...

oh. wow. I get it.

Neutral Good on Practicality, which is the system new user default.

I entirely forgot there was Neutral Good on Drifting. That's my fault and I have modified the install directions accordingly.

Fixed install directions

[solarbird]

My install directions were not specific enough and that was my fault. There are two Neutral Goods, which I'd learned, and then forgot about. I've updated to specify which.

Re: Fixed install directions

[ossobuco]

Aha, that fixes it right up! I don't see any more issues at first glance.

Re: Fixed install directions

[solarbird]

Mom! :D

Also - oh good, I was terrified for a second there. XD

eta: tho' at the moment you appear to be on system standard Neutral Good which is not at all well behaved on mobile and has a variety of other issues I've been working to fix. If you're changing back, disregard this comment; if not, you've lost the patch and need to reapply it.

(The most immediate "tell" for most users is that posts are in smallcaps in system default, and normal mixed case as entered by the user in Coexistence Alpha. Also, journal title and subtitle should both be on the left, above your page indicator. And there are a zillion other changes too, but for some reason those are the two people find easiest to notice on desktop.)

Re: Fixed install directions

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

Re: Fixed install directions

[solarbird]

Thanks, luv! XD

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

[solarbird]

Nah, she's looking at my journal, in my style, which is correct and current.

Unfortunately, even using the MacOS versions of the same rendering engines, I have nothing that repros this. Clearly I need to define something I'm not, but I dunno how to test it. >:/

Sorry, reply posted to wrong comment. My bad.

[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?

[solarbird]

Here y'go!

The options for viewing other people's stuff in your style are here

[coraline]

oh this is great! so far as i can tell also works in "neutral evil" for those of us who prefer dark backgrounds?

[solarbird]

Oh, good. Thanks! ^_^

[gingicat]

Here by way of rosefox. Looks like it works, thank you!

(Quick question: any plans to extend this to the top navbar?)

[solarbird]

You mean, the better mobile behaviour? Because Navbar 2 is included, and there are some changes, mostly for neatness, and some which are mobile-specific.

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?

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

Re: need desktop to switch?

[solarbird]

Thanks for the report and for testing!

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?

[thnidu]

Then the instructions really should include such a caveat.

. http://X-Clacks-Overhead.dw/GNU-Terry_Pratchett . http://www.gnuterrypratchett.com/

Re: need desktop to switch?

[solarbird]

I have applied an appropriate caveat. Thank you.

Re: need desktop to switch?

[thnidu]

Thank YOU.

Re: need desktop to switch?

[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?

[thnidu]

As I said, this wasn't my report but a friend's. I'll ask them.

[numb3r_5ev3n]

Curent bleeding edge v0.843alpha:

[attie]

Ooh, this is pretty great! Unfortunately I don't like the underlying theme very much (echh, small caps >.>) but I wonder if I could port it to a different one...

[solarbird]

Porting it would be a bit of a trick. But you can get rid of some of them by taking my css and deleting:

font-variant: all-small-caps;

font-variant: small-caps;

whereever you see it.

[attie]

I did twiddle it a bit already to override some of the small caps (on the comment interaction links) but most of the ones I object to are from the original style. I guess technically I could add more custom CSS to override them all... I'm also going to play with the colors to see if I can make comment header and body more distinct, the username doesn't stand out at all. why is site scheme not a tweakable theme ;_;

[solarbird]

However I should point out - particularly in the deep-nested-replies section - they're used for a purpose at least some places, particularly on mobile. (For vertical space.)

[duck]

Thank you so much! just used the comment part as the rest of my current layout looks ok on my phone.

I'm so grateful for finally disabling the zoom on IOS, again, thank you!

[solarbird]

Whatever makes it work for you, really. I just can't stand horizontal scrolling, so a lot of this theme is about stopping that. (Images and polls and tables and all sorts of things just get brutalised into working. Long words with no spaces, too. NO HORIZONTAL SCROLLING! NO! (◕△◕ ) !!!

[duck]

I know!!! horizontal scrolling and the zoom on forms drives me nuts lol, right now the site is much bearable on mobile :)

[larissa]

So I'm having a weird issue: I keep getting a flashes of unstyled content whenever I view pages in my style. I use Firefox across all my devices (Windows 10, Android phone, iPad) and it's happening on all three. Tried rebooting my desktop browser without add-ons, same thing. I'm also getting it on another journal that's using 0.843alpha.

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.

[solarbird]

I think Dreamwidth is being a little slow to serve up the custom CSS. I'm seeing it a lot of places too. The big influx of new users could very easily cause that - and it's not something I can affect in CSS.

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

[larissa]

Wow I didn't even consider that it might be DW itself, haha. Goes to show how quiet it's been here!

I'll give that a shot. Thank you for making such a great theme - it's made DW so much easier to use for me.

[lessonsinescapology]

Thank you so much! I'm going to try it.

[janne]

Works like a charm -- and I no longer have a 50% chance of hitting "log out" instead of "post" :D Thank you.

[solarbird]

Thanks, luv! ♥

[msilverstar]

Working for me, though I had to increase the font size because I'm old and my eyes are bad.

[solarbird]

Brilliant! Thank you!

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!

[alexseanchai]

♥!

Record keeping

[solarbird]

[Deleted/no longer relevant elements from the post above]

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 solarbird_testbed and while it will break as I write more code, it shows the style in system default/new account colours.)

Re: Record keeping

[marahmarie]

You want an Alpha tester? I have mobile screen shots (not logged in, but if you really want a good trawl through the code I can log in and take some more; mostly all that should change are the sidebar links, inline commenting becoming available and not much else, from what I can see). Taken on Fx latest on Android/Samsung Galaxy 6.

So far it all looks pretty damn tight. :)

Re: Record keeping

[marahmarie]

Off-hand the only things I can see in the above OS/phone/browser are:

1) when the smiley face on comment forms next to comment subject fields is clicked the dropdown icons/emoji table stretches the page out, so yeah, horizontal scrolling's needed, which also obscures the username/password fields but that can be reigned in

2) most of your entry and comment titles wrap to two or three lines. There's enough space to stretch them out a bit more - if desired

2a) more minorly, entry and comment titles aren't clearing the entry/comment usericons. That might be intended, to save space, so I'm only mentioning it in case it's not (they don't bump though, they just don't clear)

3) the expander for cuts isn't aligning at all

Also, I took my screencaps in portrait, not landscape mode as I've got the phone locked against landscape but I can change that if you want landscape, too.

I also have Chrome and Samsung browsers on my phone, if you want some variety.

Re: Record keeping

[solarbird]

First: did you install the RC (linked in the post up top) or the old Alpha?

That said, I haven't even played with the emoji thing and honestly forgot about it. I'll give that a look.

To address a couple of issues - items 2 and 2a are intentional, because of interactions with other elements which aren't even always visible. The only safe way I've found to handle it is to scrunch up tight (forcing more subject wrapping, as you've seen), or make fonts smaller, but if I make the fonts smaller, it triggers iOS's zooming all over the place when you're selecting items, and avoiding that nonsense is a design axiom.

So I'm not fond but it's the compromise set I've chosen.

I'm not sure what you're talking about with item 3 - post that screencap? Thanks.

Re: Record keeping

[marahmarie]

First: did you install the RC (linked in the post up top) or the old Alpha?

Nope, I visited the test journal: https://solarbird-testbed.dreamwidth.org/

I'm not sure what you're talking about with item 3 - post that screencap? Thanks.

Didn't take one, but I will. Reading through your other replies and will get this all together.

Re: Record keeping

[marahmarie]

OK, for my phone I'll have to throw RC2 up somewhere to test it because it's not on the testbed yet. I might need to create a new testing account as style-tester tests my current design while style-test runs an old Alis Dee design for archival purposes so ...yeah.

I did take a peek in Firefox on my laptop, though, and the comment icon table is looking much better (though on desktop the comment form tables are still resulting in horizontal scrolls under 320px. I do Horrible Design Things like @media(max-width:2000000px){
body{overflow-x:hidden} (actually in my source) just to avoid these issues and also try to get everything working down to 280px or so before cut-offs/scrolls are pretty much inevitable because it's more fuss to get things right much tinier (not that it can't be done; I'm a bit lazy is all)).

Will get back to you...

Re: Record keeping - screen shots yay!

[marahmarie]

(created another testbed @ https://style-testing.dreamwidth.org/ using 2.0; screen caps taken while logged into DW on Galaxy S6 Android 7.0/Firefox 65.0)

Underlying code that might want fiddling with on the following:

-- https://marahmarie.dreamwidth.org/file/452443.png and https://marahmarie.dreamwidth.org/file/453818.png
(on full-size comment forms OpenID username/pass field stretches out, forcing horizontal scroll)
-- https://marahmarie.dreamwidth.org/file/452935.png (entry tags next to green + sign don't completely align right)
-- https://marahmarie.dreamwidth.org/file/453129.png (every element of logged-in inline comment forms except Post and More Options buttons is centering; not sure if that's desired)
-- https://marahmarie.dreamwidth.org/file/458187.jpg (lj-cut image is top-aligned, if it's at all aligned; this might be desired, so just pointing it out)

The oinking you did so far on comment icon tables is looking great:
-- https://marahmarie.dreamwidth.org/file/453488.png

One thing on that; if you don't like the way Dreamwidth makes the icon images different sizes, which makes the table a bit ragged looking, you can smooth it out in the comment form and the resulting comment title on the entry page with something like this: #subjectIconList img{height:14px;width:14px} (comment form) .comment-subjecticon img{height:14px;width:14px} (comment title on entry page)

A search of #subjectIconList and .comment-subjecticon in my source (on this journal, not the testbed) will show the latest changes I've made to that.

Re: Record keeping

[solarbird]

oh my gods in heaven it's a hardcoded table

...I've got an idea. I can't really fix it but I can reduce the damage.

Re: Record keeping

[solarbird]

OKAY. This is the best I can do with the icons, I'm afraid, but it works really far down in width - below my cutoff point. See how this works with the quasi-emojis. (Item one on your list - subject icons, I guess?) (This is a feature I'd love to yoink.)

Release Candidate 2.

Re: Record keeping

[marahmarie]

I'll check out your RC2 in just a sec.

And I've already yoinked it, if you want to take a peek (four year old code of mine, updated just the other day): https://marahmarie.dreamwidth.org/443790.html

(I have breakpoints set for it, too, if you want to check through the source - I exposed the icon table altogether so people don't have to click the icon by the comment title field just to find it)

Re: Record keeping

[marahmarie]

Also, I'm really glad you're doing this because we need at least one good, modernized responsive design. I can write responsive CSS but because my design's customized I can't go, "Here everyone, just use this code" because my breakpoints won't work for anyone else.

[kate_nepveu]

thank you so much for this! it is really contributing hugely to my increased use of DW.

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!

[solarbird]

...that thing with the buttons doesn't repro on my devices. How annoying.

[kate_nepveu]

Then it might be an old-ish phone thing--it's doing it in Firefox too--I have a first-generation Pixel! Don't worry about it. Thanks again!

[ateanalenn]

This is such a great customization! I don't even really use DW on mobile, but I love the rounded angles for the desktop version, this is great!
And it does make my journal look so much nicer on mobile, thank you!

[runpunkrun]

Hi! Thanks for all your hard work on this layout. Is it possible to choose another style/color scheme for Practicality or does it have to be "Neutral Good"?

[solarbird]

I've only been testing against Neutral Good, but I am told Neutral Evil works fine, and I don't see why it wouldn't, given that's just a colour set.

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.

[runpunkrun]

Hi, it's me again. I was just getting up the guts to try this layout on one of the comms I run, but I can't get to the CSS on your website. I get "unable to connect" instead.

[solarbird]

Huh. That's odd. It's showing as working for me. You're sure you grabbed the RC2 version at the top of the post?

[runpunkrun]

Yeah, the link at the top of the post. I tried it in another browser, and I still get unable to connect/connection refused errors. Things must be wrong on my end, but I don't see how; your site doesn't seem to be blocked by my firewall, and the rest of the internet is working.

Would it be possible for you to send the css to my email? I'm runpunkrun at the gmails.

[solarbird]

...bizarre.

I've sent a copy directly. Good luck!

[runpunkrun]

Thank you!