The Appearance page doesn't display properly on small screens. The enabled themes section of the page has text that wraps very weirdly on mobile-sized screens making it difficult to read and presenting severe usability problems.
The main source of this problem is that the text is fixed to the right of a 300 pixel wide image, so screens smaller then 600 pixels start to squeeze the text into smaller and smaller space until it starts wrapping beneath the 300 pixel image.
The Appearance page uses 2 different grids. The enabled themes section has a fixed 300 pixel wide image, with a fixed 20 pixel gutter and a fluid "description" column. The disabled themes section uses a fixed 300 pixel-wide column with 20 pixel gutter, but images are scaled down to 200 pixels wide to show a submissive status with regards to enabled themes.
- We should use a single responsive, fluid grid for the entire page.
- For larger screens, use media queries to have 3, 4, or 5 columns. The enabled themes section should be limited to the first 2 columns; image in 1st column, text in 2nd column. The disabled themes section should be similar to now with images above text, but we should no longer limit the image size to 200 pixels wide.
- For smaller screens, use media queries to have 1 or 2 columns. On 2 column-sized screens, the enabled themes section will use the same layout as above. For 1 column-sized screens, an enabled theme's text will be below its image.
- Making the disabled themes use larger images (see point #2 above) means they will compete with the enabled themes for dominance. So I think we should add a light grey background to the disabled themes section. (This idea was proposed too late in the original Appearance issue.)
All of them.
|PASSED: [[SimpleTest]]: [MySQL] 55,464 pass(es).|
|PASSED: [[SimpleTest]]: [MySQL] 55,700 pass(es).|
|FAILED: [[SimpleTest]]: [MySQL] Repository checkout: failed to checkout from [git://git.drupal.org/project/drupal.git].|
|FAILED: [[SimpleTest]]: [MySQL] Failed to run tests: failed to login to test site.|