Admin settings and plugin sidebar broken on mobile pages


(Alan Tan) #1

Tested against v1.4.0.beta4 +13.


(Jeff Atwood) #2

@pjh also opened a bug on this. Is this a new regression @neil?


(Neil Lalonde) #3

Yeah that CSS is really broken. I started trying to fix it, but got lost fast. Will need to git bisect it to find the commit that broke it.


(Simon Cossar) #4

The admin css might be easier to deal with if it was done with a ‘mobile-first’ approach - find the most logical way to stack all of the items in a single column for narrow screens, and then, at a certain breakpoint, expand into the two columns.


(Jeff Atwood) #5

Admin stuff is not a priority for mobile. And if I rotate my phone to landscape it works fine.


(Simon Cossar) #6

A quick fix to make it less weird is to add a clearfix to .admin-controls and get rid of the height: 35px

.admin-controls {
  //height: 35px;
  @include clearfix;
}

Then float the search control to the left for small screens:

  @media (max-width: 700px) {
    .admin-controls .search {
      float: left;
      width: 100%;
    }
  }

That keeps the admin-nav to the left of the screen. (Right now it’s not clearing the floated ‘Clear’ button.)

To get the .admin-detail section to share the screen with the admin-nav you need to get rid of the padding-left on the .admin-detail section or set it to a percentage of the total screen width.

This works and still gives a left margin:

@media (max-width: 700px) {
  .admin-detail {
    padding-left: 0;
    float: right;
    border-left: none;
  }
}

You can gain a bit of room on narrow screens by moving the setting-label to the top of the input box:

    @media (max-width: 700px) {
      .setting-label {
        float: none;
      }

If you float the reset button to the right it will stay off of the input box

@media (max-width: 700px) {
  .btn[title="reset"] {
    float: right;
  }
}

That all gives you something like this. It could be made a bit better.

I can make a PR if no one is working on it.


(Sam Saffron) #7

Sure, something is way better than totally broken UI here.


(Alan Tan) #8

Just wanted to highlight that for the profile page, the above is how the sidebar looks on mobile. I think we should standardize it and perhaps make the arrow point downwards on mobile instead? :smiley_cat:


(Jeff Atwood) #9

Yeah down glyph for mobile would be a nice tweak! Great idea.


(Alan Tan) #10