Danbooru

Read the rules before proceeding!

Topic: [Prototype] Mobile Layout (CSS)

Posted under General

BrokenEagle98

Intro

I've been working on developing CSS code that will make the Danbooru mobile layout work a bit differently, and hopefully a bit better. My goal was to optimize the view for the portrait display, i.e. holding the phone upright instead of sideways.

The below was tested using a Samsung Galaxy 6 and Chrome web browser, using various different viewport settings.

Code

Individually pick your viewport settings at https://mydevice.io/devices/ , or just copy/paste the entire section.

Edits:

Updated by BrokenEagle98

  • ID: 131602
  • Permalink
  • Gollgagh

    Thanks for starting to work on this; the usability has needed work since the layout was introduced.

    Would it be possible to move the "resize to window" button closer to the image and/or (I'm guessing this would require scripts) make it so that images start out resized on page load?

  • ID: 131611
  • Permalink
  • BrokenEagle98

    Gollgagh said:

    Would it be possible to move the "resize to window" button closer to the image and/or (I'm guessing this would require scripts) make it so that images start out resized on page load?

    There is already an option for this in user settings (highlighted in red):

    https://drive.google.com/open?id=0B39jDgCtzVHuU0NFUGYwc3U1Nk0

    Although, I do think that I would want this resize setting to be on for my mobile device using the mobile layout, but off for my laptop/desktop using the desktop layout. Does anyone else think so...?

    Updated by BrokenEagle98

  • ID: 131615
  • Permalink
  • Gollgagh

    BrokenEagle98 said:

    Although, I do think that I would want this resize setting to be on for my mobile device using the mobile layout, but off for my laptop/desktop using the desktop layout. Does anyone else think so...?

    Yeah, sorry, that's what I was trying to get at.

  • ID: 131619
  • Permalink
  • BrokenEagle98

    Gollgagh said:

    Yeah, sorry, that's what I was trying to get at.

    Ah, got it. Thanks for the feedback BTW. Created issue #3074.

  • ID: 131623
  • Permalink
  • BrokenEagle98

    @Gollgagh and others interested...

    Just as a notice, issue #3074 has been partially fixed, so the image will now automatically resize with the mobile layout.

    Also, I've been busy with other items, but I plan to update the Mobile Layout CSS hopefully by the end of the week. It's mostly just fixing the CSS for Moderators/Admins so that they wouldn't need to modify which sections are commented.

  • ID: 132257
  • Permalink
  • BrokenEagle98

    It's a bit late, but I updated the OP with the latest CSS code.

  • ID: 132560
  • Permalink
  • BrokenEagle98

    I found the overlap caused frequently by the DanbooruBot and my own bot's comments to be a bit annoying, so I added a fix that will control the overflow and add a scroll bar as necessary. It does require using settings tailored to a particular viewport, so I went through all of the settings at https://mydevice.io/devices/ and added them to a separate section.

    They can either be copied en masse, or individually tailored. It doesn't matter, since they'll only fire when the screen is a certain width. Also, some settings won't work just yet with Danbooru's mobile layout since that fires with a pixel size less than 660, but they were included for completeness in case that ever changes.

  • ID: 133192
  • Permalink
  • <<
  • 1
  • >>