From 66616c9574f3d64efe90e669b2f8bfc115fa419c Mon Sep 17 00:00:00 2001 From: Neil Lalonde Date: Thu, 19 Dec 2013 16:51:18 -0500 Subject: [PATCH] Categories page is even better on Nexus 7 (and probably iPad mini) --- .../stylesheets/common/foundation/mixins.scss | 16 +++------- app/assets/stylesheets/mobile/topic-list.scss | 31 +++++++++++++++---- 2 files changed, 30 insertions(+), 17 deletions(-) diff --git a/app/assets/stylesheets/common/foundation/mixins.scss b/app/assets/stylesheets/common/foundation/mixins.scss index 54cdef40066..c075e15e3df 100644 --- a/app/assets/stylesheets/common/foundation/mixins.scss +++ b/app/assets/stylesheets/common/foundation/mixins.scss @@ -41,17 +41,11 @@ } } -@mixin portrait { - @media only screen and (max-width : 320px) { - @content; - } -} - -@mixin landscape { - @media only screen and (min-width : 321px) { - @content; - } -} +@mixin mobile-portrait { @media only screen and (max-width : 320px) { @content; } } +@mixin not-mobile-portrait { @media only screen and (min-width : 321px) { @content; } } +@mixin mobile-landscape { @media only screen and (min-width : 321px) and (max-width : 959px) { @content; } } +@mixin not-tablet-landscape { @media only screen and (max-width : 959px) { @content; } } +@mixin tablet-landscape { @media only screen and (min-width : 960px) { @content; } } // CSS3 properties // -------------------------------------------------- diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss index b17f9d9472d..7229d221be9 100644 --- a/app/assets/stylesheets/mobile/topic-list.scss +++ b/app/assets/stylesheets/mobile/topic-list.scss @@ -50,7 +50,7 @@ border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; - tbody tr { + > tbody > tr { background-color: $white; &:nth-child(even) { background-color: darken($white, 4%); @@ -167,19 +167,23 @@ display: inline-block; margin-top: 1px; } + .category-description { + margin-top: 8px; + } .featured-users { - @include portrait { + @include mobile-portrait { margin-bottom: 10px; padding-top: 8px; clear: left; } - @include landscape { + @include not-mobile-portrait { float: right; } } .latest { - @include portrait { width: 150px; } - @include landscape { width: 270px; } + @include mobile-portrait { width: 150px; } + @include mobile-landscape { width: 270px; } + @include tablet-landscape { width: 450px; } .featured-topic { margin: 8px 0; a.last-posted-at, a.last-posted-at:visited { @@ -188,7 +192,22 @@ } } .stats { - display: none; + @include not-tablet-landscape { display: none; } + @include tablet-landscape { min-width: 80px; } + } + td.stats { + .unit { + font-size: 11px; + } + } + table.categoryStats { + td { + padding: 2px; + vertical-align: bottom; + line-height: 17px; + &.value { text-align: right; } + &.unit { text-align: left; } + } } }