Responsive index page. Relates to #90, #85, #71.

eurucamp · Aug 13, 2013 · f2197ca · f2197ca
1 parent 1415fa7
commit f2197ca
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 18 deletions.
diff --git a/app/assets/stylesheets/partials/_layout.sass b/app/assets/stylesheets/partials/_layout.sass
@@ -1,7 +1,4 @@
 #container
-  // locking width
-  width: $column * 5
-  margin: 0 auto
-  //+outer-container
+  +outer-container
   padding: 0 $padding
   position: relative
diff --git a/app/assets/stylesheets/partials/activities/_filters.sass b/app/assets/stylesheets/partials/activities/_filters.sass
@@ -2,8 +2,7 @@ form.filters
   @extend %clearfix
   border-radius: 3px
   overflow: hidden
-  float: left
-  padding: 0 0 4.5em 0
+  padding: 0 0 2.5em 0
 
   label
     background: lighten($extra-light-gray, 5)
@@ -14,6 +13,8 @@ form.filters
     border: none
     display: block
     padding: 0.75em 1em
+    margin: 0 0 1px 0
+    text-align: left
     +transition(all 0.5s)
 
     &.participant,
@@ -31,15 +32,16 @@ form.filters
     &.participant:before
       color: $green
 
-    &.owner:before
-      color: $yellow
+    &.owner
+      border-radius: 0 0 3px 3px
+
+      &:before
+        color: $yellow
 
     &.search
       background: none
-      position: absolute
-      top: 4em
-      left: 0
       padding: 0
+      margin-top: 1em
       width: 100%
 
       &:hover
@@ -97,23 +99,31 @@ form.filters
       display: none
 
 
-  +media($tablet-lite)
+  +media($tablet-lite-plus)
     border-radius: none
     overflow: visible
+    float: left
+    padding: 0 0 4.5em 0
 
     label
       display: inline-block
-      margin-right: 1px
+      margin: 0 1px 0 0
 
       strong
         float: none
 
+      &:first-child
+        border-radius: 3px 0 0 3px
+
       &.owner
         border-radius: 0 3px 3px 0
         margin: 0
 
-      &:first-child
-        border-radius: 3px 0 0 3px
+      &.search
+        position: absolute
+        top: 4em
+        margin-top: 0
+        left: 0
 
     button
       margin: 0 0 0 0.5em

diff --git a/app/assets/stylesheets/partials/activities/_index.sass b/app/assets/stylesheets/partials/activities/_index.sass
@@ -12,9 +12,13 @@ a#new-activity
 
   iframe
     margin: 2em 0 0
-    height: 600px
+    height: 400px
     border: none
 
+  +media($tablet-lite)
+    iframe
+      height: 600px
+
 #activities
   clear: both
   @extend %clearfix
@@ -26,7 +30,6 @@ a#new-activity
 
   li
     display: block
-    +span-columns(2)
     margin: 0 0 2px 0
     text-align: center
 
@@ -199,3 +202,18 @@ a#new-activity
         opacity: 1
         +transform(scale(1))
         +transition(all 0.15s ease-out 0.15s)
+
+
+  +media($smartphone-portrait)
+    li
+      +span-columns(2)
+
+
+  +media($tablet-lite)
+    li
+      +span-columns(2)
+
+  +media($tablet-portrait-plus)
+    li
+      +span-columns(2)
+
diff --git a/app/views/partials/_layout_head.html.haml b/app/views/partials/_layout_head.html.haml
@@ -3,7 +3,7 @@
 %title= title(Settings.seo.title)
 %meta{content: Settings.seo.description, name: "description"}
 %meta{content: Settings.seo.author, name: "author"}
-//%meta(content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport")
+%meta(content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport")
 
 = csrf_meta_tags