Mobile-specific CSS


  • Discourse touched me in a no-no place

    Continuing the discussion from drop a train on 'em, Edgar!:

    @PJH said:

    That reminds me - I probably need to get the title attribute sorted for a on mobile as I did for abbr...

    For this post:

    Desktop:

    Mobile:

    (Though the fortuitous, and unexpected, appearance of </> on mobile has possibly rendered this less of an improvement than it otherwise might have been...)

    I expect problems with this on mobile somewhere, given what I got part way though the change..



  • What's the point of the "go to the quoted post" link? There's already an arrow, and the length of it breaks the layout with longer usernames.

    Also, I started to have problems where all text will get forced into a column about half of the screen wide, but that might just be Discourse fucking around.



  • @Maciejasjmj said:

    What's the point of the "go to the quoted post" link?

    I'm guessing it's something that looks like a link, so you'll think to click (tap) it. I don't mobile, so GTFOML.



  • @Maciejasjmj said:

    What's the point of the "go to the quoted post" link?

    It looks like a side effect of whatever @PJH did to reveal the title attribute on abbreviations is that it also does it on navigation links.



  • It looks like you already made your css selector more specific to solve the header button link issue. You could also filter it out of quote control links like:

    .cooked a[title]:after {
        content: " [" attr(title) "]";
    }
    
    .cooked .quote-controls a[title]:after {
        content: "";
    }
    


  • @hungrier said:

    It looks like a side effect of whatever @PJH did to reveal the title attribute on abbreviations is that it also does it on navigation links.

    Odd, that didn't break before. I think. But yeah, @PJH, might want to exclude the .back from that rule.


  • Discourse touched me in a no-no place

    @monkeyArms said:

    ```
    .cooked .quote-controls a[title]:after {
    content: "";
    }

    
    Ta - that's sorted it.

  • :belt_onion:

    Wait, so @PJH didn't mean to show that "go to the quoted post"?
    @monkeyArms said:

    It looks like you already made your css selector more specific to solve the header button link issue. You could also filter it out of quote control links like:

    .cooked a[title]:after {
        content: " [" attr(title) "]";
    }
    
    .cooked .quote-controls a[title]:after {
        content: "";
    }
    

    NOOOOOOO0000000ooooooo! I really liked that DiscoFeature!

    I don't know about you guys, but on my mobile browser that little arrow is untouchable and any attempts will open and close the quote box...



  • The position of "Dismiss Posts" and "Dismiss Topics" is reversed in the mobile view, at least on my Windows Phone 8.1. Someone might blindly hit the left-most button expecting to Dismiss Posts and get Atwood's shitty idiot Dismiss Topics feature nobody wanted instead.


  • BINNED

    @blakeyrat said:

    Atwood's shitty idiot Dismiss Topics feature nobody wanted instead

    Atwood wanted that. What possible reason could you have for wanting anything else?


  • Discourse touched me in a no-no place

    @JBert said:

    Wait, so @PJH didn't mean to show that "go to the quoted post"?

    No, but...

    @JBert said:

    I don't know about you guys, but on my mobile browser that little arrow is untouchable and any attempts will open and close the quote box...

    WORKSFORME. Screenshot and I'll see what I can do?

    @blakeyrat said:

    The position of "Dismiss Posts" and "Dismiss Topics" is reversed in the mobile view, at least on my Windows Phone 8.1.

    Never used them so never noticed. Will look but might be a bit more difficult to hack the CSS on that one.



  • @PJH said:

    might be a bit more difficult to hack the CSS on that one

    Don't think so, this should work in the mobile CSS:

    button.dismiss-read {
        float: right;
    }
    

    Only able to test in the Chrome mobile emulator, but it looks like it works and sets the buttons in the same order as on Desktop mode.


  • :belt_onion:

    @PJH said:

    @JBert said:
    Wait, so @PJH didn't mean to show that "go to the quoted post"?

    No, but...

    @JBert said:

    I don't know about you guys, but on my mobile browser that little arrow is untouchable and any attempts will open and close the quote box...

    WORKSFORME. Screenshot and I'll see what I can do?

    It actually looks like the desktop version, it's just that the area on which you can tap to go to the replied post is very small. The "show quoted post" area seems to include the area around it.

    All of it is invible though, and I don't know if my Firefox for Android has some developer mode to show the size of elements-with-links.


Log in to reply
 

Looks like your connection to What the Daily WTF? was lost, please wait while we try to reconnect.