betterplace_explorer 0.0.1.pre.alpha26 → 0.0.1.pre.alpha27

data/app/assets/stylesheets/betterplace_explorer/_explorer.sass

@@ -1,2 +1,5 @@
 .betterplace-explorer
   height: $betterplace_explorer_height
+
+  +phone
+    margin: 0 10px

data/app/assets/stylesheets/betterplace_explorer/_location_input.sass

@@ -1,21 +1,27 @@
 .bpe--location-input
   background: white
-  position: absolute
-  top: 0
-  left: 0
-  z-index: 100
-  width:  $betterplace_explorer_sidebar_width / 2
-  height: $betterplace_explorer_location_input_height
   border-bottom: 1px solid $light-grey
 
+  +desktop
+    position: absolute
+    top: 0
+    left: 0
+    z-index: 100
+    width:  $betterplace_explorer_sidebar_width / 2
+    height: $betterplace_explorer_location_input_height
+
 .bpe--location-input--input
   display: block
-  margin: 17px 20px
   padding: 10px 30px 10px 10px
-  width: $betterplace_explorer_sidebar_width / 2 - 17px
   box-shadow: none
   border: 1px solid $light-grey
   border-radius: 4px
+  width: $betterplace_explorer_sidebar_width / 2 - 17px
+  margin: 17px 20px
+
+  +phone
+    width: 100%
+    margin: 10px 0
 
   .browser-edge &,
   .browser-msie &
@@ -23,12 +29,16 @@
 
 .bpe--location-input--reset
   position: absolute
-  right: 8px
-  top: 14px
   z-index: 1000
   font-size: 3rem
   font-weight: 100
   cursor: pointer
+  right: 8px
+  top: 14px
+
+  +phone
+    right: 20px
+    top: 8px
 
   .browser-edge &,
   .browser-msie &

data/app/assets/stylesheets/betterplace_explorer/_mixins.sass

@@ -0,0 +1,7 @@
+@mixin phone
+  @media only screen and (max-width: $betterplace_explorer_mobile_breakpoint)
+    @content
+
+@mixin desktop
+  @media only screen and (min-width: $betterplace_explorer_mobile_breakpoint + 1px)
+    @content

data/app/assets/stylesheets/betterplace_explorer/_pagination.sass

@@ -1,19 +1,26 @@
 .bpe--pagination
-  position: absolute
-  left: $betterplace_explorer_sidebar_width / 2
-  top:  $betterplace_explorer_location_input_height / 4
-  width: $betterplace_explorer_sidebar_width / 2
-  height: $betterplace_explorer_location_input_height / 4 * 3
-  border-bottom: 1px solid $light-grey
-  padding-right: 35px
+
+  +desktop
+    position: absolute
+    left: $betterplace_explorer_sidebar_width / 2
+    top:  $betterplace_explorer_location_input_height / 4
+    width: $betterplace_explorer_sidebar_width / 2
+    height: $betterplace_explorer_location_input_height / 4 * 3
+    padding-right: 35px
+    border-bottom: 1px solid $light-grey
+
+  +phone
+    margin: 10px 0
 
   .bpe--pagination--current-page
     display: inline-block
     width: calc(100% - 36px * 2 - 2px)
-    text-align: right
     padding-right: 10px
     font-weight: bold
 
+    +desktop
+      text-align: right
+
   .bpe--pagination--pager
     list-style-type: none
     margin: 0

data/app/assets/stylesheets/betterplace_explorer/_variables.sass

@@ -13,3 +13,4 @@ $very-dark-grey:  #3f3f3f
 $betterplace_explorer_height:                100vh !default
 $betterplace_explorer_sidebar_width:         650px !default
 $betterplace_explorer_location_input_height:  75px !default
+$betterplace_explorer_mobile_breakpoint:     767px !default

data/app/assets/stylesheets/betterplace_explorer/_volunteering.sass

@@ -1,10 +1,8 @@
 .bpe--volunteering
-  display: flex
   margin-bottom: 20px
   border: 1px solid $light-grey
 
   .bpe--map &
-    flex-direction: column
     border: 0
     margin-bottom: 0
 
@@ -13,14 +11,36 @@
       text-decoration: underline
 
 .bpe--volunteering--body
-  flex-grow: 1
   padding-top: 10px
   font-size: 14px
 
+  small
+    font-size: 12px
+
+  .bpe--volunteering-list &
+    display: inline-block
+    vertical-align: top
+    width: 50%
+
   .bpe--map &
     padding: 10px
 
-  p:first-child:before
+  h4
+    font-weight: 400
+
+    +phone
+      font-size: 14px
+      hyphens: auto
+      -webkit-hyphens: auto
+
+.bpe--volunteering--carrier-name
+
+  +phone
+    text-overflow: ellipsis
+    white-space: nowrap
+    overflow: hidden
+
+  &:before
     content: ''
     display: inline-block
     margin-right: 5px
@@ -31,11 +51,13 @@
     background-size: contain
     background-repeat: no-repeat
 
-  h4
-    font-weight: 400
-
 .bpe--volunteering--image
-  margin-right: 10px
+
+  .bpe--volunteering-list &
+    display: inline-block
+    vertical-align: top
+    width: 46%
+    margin-right: 4%
 
   .bpe--map &
     width: 210px

data/app/assets/stylesheets/betterplace_explorer/_volunteering_list.sass

@@ -1,12 +1,14 @@
 .bpe--volunteering-list
-  position: absolute
-  top: $betterplace_explorer_location_input_height
-  left: 0
-  width: $betterplace_explorer_sidebar_width
-  height: $betterplace_explorer_height
-  overflow-x: hidden
-  overflow-y: scroll
-  padding: 20px
+
+  +desktop
+    position: absolute
+    top: $betterplace_explorer_location_input_height
+    left: 0
+    width: $betterplace_explorer_sidebar_width
+    height: $betterplace_explorer_height
+    overflow-x: hidden
+    overflow-y: scroll
+    padding: 20px
 
   &.loading:before
     content: ''

data/app/assets/stylesheets/betterplace_explorer.sass

@@ -1,4 +1,5 @@
 @import betterplace_explorer/variables
+@import betterplace_explorer/mixins
 
 @import betterplace_explorer/explorer
 @import betterplace_explorer/location_input

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: betterplace_explorer
 version: !ruby/object:Gem::Version
-  version: 0.0.1.pre.alpha26
+  version: 0.0.1.pre.alpha27
 platform: ruby
 authors:
 - betterplace developers
@@ -22,6 +22,7 @@ files:
 - app/assets/stylesheets/betterplace_explorer/_explorer.sass
 - app/assets/stylesheets/betterplace_explorer/_location_input.sass
 - app/assets/stylesheets/betterplace_explorer/_map.sass
+- app/assets/stylesheets/betterplace_explorer/_mixins.sass
 - app/assets/stylesheets/betterplace_explorer/_pagination.sass
 - app/assets/stylesheets/betterplace_explorer/_variables.sass
 - app/assets/stylesheets/betterplace_explorer/_volunteering.sass