Merge branch 'develop' into webpacker

RefugeRestrooms · Jun 14, 2018 · 5dcd722 · 5dcd722
2 parents fa0af01 + 3566c1a
commit 5dcd722
Show file tree

Hide file tree

Showing 11 changed files with 133 additions and 165 deletions.
diff --git a/.ruby-version b/.ruby-version
@@ -1 +1 @@
-2.3.1
+2.3.7
diff --git a/Dockerfile b/Dockerfile
@@ -1,4 +1,5 @@
-FROM ruby:2.3.1
+FROM ruby:2.3.7
+RUN apt-get update -qq && apt-get install -y build-essential libpq-dev nodejs
 ENV PHANTOM_JS=2.1.1
 
 # Add the apt repository for yarn

diff --git a/Gemfile b/Gemfile
@@ -1,5 +1,5 @@
 source 'https://rubygems.org'
-ruby '2.3.1'
+ruby '2.3.7'
 
 gem 'rails', '5.1.4'
 gem 'pg'

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -413,7 +413,7 @@ DEPENDENCIES
   webpacker (~> 3.5)
 
 RUBY VERSION
-   ruby 2.3.1p112
+   ruby 2.3.7p456
 
 BUNDLED WITH
    1.15.3
diff --git a/app/assets/stylesheets/_mobile.scss b/app/assets/stylesheets/_mobile.scss
@@ -30,26 +30,6 @@
         left: 35%;
     }
 
-    // Restrooms List
-    .restrooms-list {
-        .listItemImage {
-            width: 95px;
-            height: 95px;
-        }
-        .listItemImage img {
-            width: 90%;
-            height: 90%;
-        }
-        .itemInfo {
-        position: absolute;
-        top: 10px;
-        bottom: 10px;
-        left: 130px;
-        right: 95px;
-        overflow: none;
-    }
-    }
-
     // Show restroom page
     // Item
     .showPageItem {
@@ -78,40 +58,6 @@
         font-size: 0.7rem;
     }
 
-    // Restrooms List
-    .restrooms-list {
-        .listItemImage {
-            width: 60px;
-            height: 60px;
-            margin: 15px 10px;
-            margin-top: 20px;
-        }
-        .itemInfo {
-            left: 90px;
-            right: 85px;
-        }
-        .itemName a{
-            position: relative;
-            font-size: 16px;
-            width: 100%;
-        }
-        .itemExtraInfo {
-            top: 0;
-        }
-        .itemDistance {
-            font-size: 12px;
-            padding-bottom: 0;
-        }
-        .itemRating {
-            font-size: 14px;
-            width: 120px;
-        }
-        .itemExtraInfo {
-        position: absolute;
-        top: 20px;
-        right: 15px;
-    }
-    }
     #mapArea {
         height: 200px;
     }

diff --git a/app/assets/stylesheets/framework_and_overrides.scss b/app/assets/stylesheets/framework_and_overrides.scss
@@ -34,3 +34,9 @@ header {
     width: auto;
     display: inline;
 }
+
+// Removes the negative margin applied by Bootstrap
+.row {
+  margin-left: auto;
+  margin-right: auto;
+}
diff --git a/app/assets/stylesheets/restrooms/main.scss b/app/assets/stylesheets/restrooms/main.scss
@@ -1,100 +1,7 @@
-#mapContainer, #list {
+#mapContainer{
     overflow: hidden;
 }
 
-// Restrooms List
-.restrooms-list {
-    width: 100%;
-
-    // List Item
-    .listItem {
-        position: relative;
-        width: 100%;
-        border-bottom: 1px solid #e1e1e1;
-        background: $secondary-background;
-        min-height: 13em;
-        float: none;
-    }
-    .listItemTemplate {
-        display: none;
-    }
-    // Image
-    .listItemImage {
-        position: relative;
-        width: 110px;
-        height: 110px;
-        margin: 15px 0 15px 9px;
-        border-radius: $rounded-corners;
-        background: #41326b asset-url("ToiletLogo.png") 50% 50% no-repeat;
-        display: inline-block;
-    }
-    .listItemImage img {
-        width: 90%;
-        height: 90%;
-    }
-    // Info
-    .itemInfo {
-        position: absolute;
-        top: 10px;
-        bottom: 10px;
-        left: 150px;
-        right: 95px;
-        overflow: none;
-    }
-    .itemName a{
-        position: relative;
-        font-size: 24px;
-        width: 100%;
-    }
-    .itemStreet {
-        position: relative;
-        width: 100%;
-        font-size: 1.3rem;
-    }
-    .itemDistance {
-        position: relative;
-        color: #676767;
-        text-align: right;
-        font-size: 15px;
-        font-family: Arial;
-        padding: 5px 0;
-    }
-    .itemRating {
-        width: 150px;
-        background: #41326b;
-        border-radius: $rounded-corners;
-        color: #FFF;
-        text-align: center;
-        font-family: Arial;
-        font-size: 15px;
-        margin-top: 10px;
-        padding: 11px 0;
-        max-width: 100%;
-    }
-
-    // ADA / Gender Neutral Filters
-    .itemExtraInfo {
-        position: absolute;
-        top: 20px;
-        right: 10px;
-        text-align: right;
-    }
-    .unisexRestroom {
-        width: 45px;
-        height: 43px;
-        display: inline-block;
-    }
-    .ADARestroom {
-        width: 44px;
-        height: 47px;
-        display: inline-block;
-    }
-    .unisexRestroom img, .ADARestroom img {
-        width: 100%;
-        height: 100%;
-    }
-}
-
 // Restroom Page
 // Item - Restroom header
 .showPageItem {

diff --git a/app/assets/stylesheets/restrooms/restroom-list.scss b/app/assets/stylesheets/restrooms/restroom-list.scss
@@ -0,0 +1,107 @@
+// Restrooms List
+.restrooms-list {
+  display: block;
+  padding: 0;
+  list-style: none;
+
+  .listItem {
+    display: block;
+    width: 100%;
+    padding-bottom: 1em;
+    margin-bottom: 1em;
+    border-bottom: 1px solid $gray;
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .listItemImage {
+    display: inline-block;
+    vertical-align: top;
+    float: left;
+    margin: 0.25em 1%;
+    width: 8%;
+    height: 8vw;
+    background: #41326b asset-url("ToiletLogo.png") 50% 50% no-repeat;
+    background-size: 60%;
+    border-radius: $rounded-corners;
+  }
+
+  .itemInfo {
+    display: inline-block;
+    vertical-align: top;
+    float: left;
+    width: 58%;
+    margin: 0 1%;
+
+    a {
+      font-size: 15px;
+    }
+
+    .itemStreet {
+      margin-bottom: 0.5em;
+      font-size: 14px;
+    }
+
+    .itemRating {
+      width: 60%;
+      min-width: 105px;
+      max-width: 150px;
+      border-radius: $rounded-corners;
+      color: #FFF;
+      text-align: center;
+      font-family: $font-stack;
+      font-size: 14px;
+      padding: 0.5em;
+      margin: 0;
+    }
+  }
+
+  .itemExtraInfo {
+    display: inline-block;
+    vertical-align: top;
+    float: right;
+    width: 27%;
+    margin: 0 0.5%;
+
+    .itemDistance {
+      font-size: 12px;
+      padding-bottom: 1em;
+      text-align: right;
+    }
+  }
+
+  .itemIcons {
+    text-align: right;
+
+    > * {
+      display: inline-block;
+    }
+  }
+
+
+  @include tablet {
+    .listItemImage {
+      width: 55px;
+      height: 55px;
+    }
+  }
+
+  @include desktop {
+    .listItemImage {
+      width: 55px;
+      height: 55px;
+    }
+    .itemInfo {
+      margin: 0 0.5%;
+      .itemName {
+        a {
+          font-size: 18px;
+        }
+      }
+      .itemStreet {
+        font-size: 15px;
+      }
+    }
+  }
+}
diff --git a/app/assets/stylesheets/sass/_screen_sizes.sass b/app/assets/stylesheets/sass/_screen_sizes.sass
@@ -2,9 +2,9 @@ $tablet-width: 768px
 $desktop-width: 1024px
 
 @mixin tablet
-  @media (min-width: #{$tablet-width}) and (max-width: #{$fa-desktop-width - 1px})
+  @media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px})
     @content
 
 @mixin desktop
   @media (min-width: #{$desktop-width})
-    @content
+    @content
diff --git a/app/views/restrooms/_restroom.html.haml b/app/views/restrooms/_restroom.html.haml
@@ -2,7 +2,7 @@
 - accessible_class = restroom.accessible? ? '' : 'not_accessible'
 - changing_table_class = restroom.changing_table? ? '' : 'no_changing_table'
 
-%div{ class: "listItem #{unisex_class} #{accessible_class} #{changing_table_class}",
+%li{ class: "listItem clearfix #{unisex_class} #{accessible_class} #{changing_table_class}",
           data: { id: restroom.id} }
   .listItemImage
     / image tag goes here
@@ -27,12 +27,13 @@
         miles /
         = miles_to_kilometers(restroom.distance).round(2)
         kilometers
-    - if restroom.unisex?
-      .unisexRestroom{:title => t("restroom.type.unisex")}
-        %i.fa.fa-transgender-alt.fa-3x
-    - if restroom.accessible?
-      .ADARestroom{:title => t("restroom.accessible")}
-        %i.fa.fa-wheelchair.fa-3x
-    - if restroom.changing_table?
-      .changingTable{:title => t("restroom.changing_table")}
-        %i.fa.fa-child.fa-3x
+    .itemIcons
+      - if restroom.unisex?
+        .unisexRestroom{:title => t("restroom.type.unisex")}
+          %i.fa.fa-transgender-alt.fa-2x
+      - if restroom.accessible?
+        .ADARestroom{:title => t("restroom.accessible")}
+          %i.fa.fa-wheelchair.fa-2x
+      - if restroom.changing_table?
+        .changingTable{:title => t("restroom.changing_table")}
+          %i.fa.fa-child.fa-2x
diff --git a/app/views/restrooms/index.html.haml b/app/views/restrooms/index.html.haml
@@ -23,7 +23,7 @@
           #mapArea
   .row
     .col-sm-12.headroom
-      #list.restrooms-list
+      %ul{:class => "restrooms-list", :id => "list"}
         = render @restrooms
         = paginate @restrooms
 / .row