From 66616c9574f3d64efe90e669b2f8bfc115fa419c Mon Sep 17 00:00:00 2001
From: Neil Lalonde <neillalonde@gmail.com>
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 54cdef400..c075e15e3 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 b17f9d947..7229d221b 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; }
+ }
}
}