Merge branch 'proarunas/fix-css-bugs' into develop

website/public/css/global-modules.styl

@@ -1,3 +1,5 @@
+@require "./variables/screen-size.styl"
+
 // Clearfix (http://css-tricks.com/snippets/css/clear-fix/)
 $clearfix
   &:after
@@ -50,7 +52,7 @@ hrpg-button-color-mixin($hrpg-button-color, highlight=false)
     else
       border-left: 1px solid darken($hrpg-button-color, 3.82%) !important
   > div
-    @media screen and (min-width:768px)
+    @media screen and (min-width: $sm-min-screen-width)
       border:1px solid darken($hrpg-button-color, 16.18%)
     h4
       color: darken($hrpg-button-color, 61.8%)
@@ -85,7 +87,7 @@ hrpg-anchor-button-color-mixin($hrpg-button-color)
   background-color: $hrpg-button-color !important
   &:active
     background-color: darken($hrpg-button-color, 61.18%) !important
-  @media screen and (min-width:768px)
+  @media screen and (min-width: $sm-min-screen-width)
     &:hover
       background-color: darken($hrpg-button-color, 2.36%) !important
 $hrpg-button-master
@@ -221,7 +223,7 @@ $hrpg-modal-dropdown
     min-width:110px
     border-radius:4px
     background-color:#fff
-    @media screen and (max-width:768px)
+    @media screen and (max-width: $xs-max-screen-width)
       position:fixed
       z-index: 1000
       top: 2%
@@ -249,12 +251,12 @@ $hrpg-modal-dropdown
       overflow: auto
       border-top-width: 1px
       border-top-style: solid
-      @media screen and (min-width:768px)
+      @media screen and (min-width: $sm-min-screen-width)
         max-height: 320px
         max-height: 62.8vh
       li
         width: 100%
-        @media screen and (max-width:768px)
+        @media screen and (max-width: $xs-max-screen-width)
           width: auto
       a
         display: inline-block
@@ -277,14 +279,14 @@ $hrpg-modal-dropdown
       transform: rotate(45deg)
 $hrpg-modal-dropdown-left
   @extend $hrpg-modal-dropdown
-  @media screen and (min-width:768px)
+  @media screen and (min-width: $sm-min-screen-width)
     div
       right: 0px
       > ul:first-child:before, > div:first-child:before, h4:before
         right: .5em
 $hrpg-modal-dropdown-right
   @extend $hrpg-modal-dropdown
-  @media screen and (min-width:768px)
+  @media screen and (min-width: $sm-min-screen-width)
     div
       left: 0px
       > ul:first-child:before, > div:first-child:before, h4:before
@@ -297,17 +299,17 @@ $hrpg-modal-controls
     margin-right: 0.618em
     margin-bottom: 0.382em
     display: inline-block
-  @media screen and (max-width:768px)
+  @media screen and (max-width: $xs-max-screen-width)
     width: 96%
     position: fixed
     bottom:2%
     right: 2%
     border: none
-  @media screen and (min-width:768px)
+  @media screen and (min-width: $sm-min-screen-width)
     display: none
 // Submenus
 $hrpg-submenu
-  @media screen and (min-width:768px)
+  @media screen and (min-width: $sm-min-screen-width)
     padding: 1em 1em 0em 1em
   margin-bottom: 1.618em
   li
@@ -327,7 +329,7 @@ hrpg-tag-color-mixin($hrpg-tag-color)
       background-color: darken($hrpg-tag-color,32.8%)
       &:before
         border-right-color: darken($hrpg-tag-color,32.8%)
-  @media screen and (min-width:768px)
+  @media screen and (min-width: $sm-min-screen-width)
     &:hover, &:hover > a, &:hover > a span
       background-color: darken($hrpg-tag-color,16.8%)
     &:hover > a:before

website/public/css/header.styl

@@ -1,3 +1,5 @@
+@require "./variables/screen-size.styl"
+
 /* header wrapper
 -------------------- */
 .header-wrap
@@ -10,7 +12,7 @@
   overflow-y: hidden
   overflow-x: auto
   // position relative
-  @media screen and (max-width:768px)  // remove padding-top when toolbar is static
+  @media screen and (max-width: $xs-max-screen-width)  // remove padding-top when toolbar is static
     padding: 0
 .toolbar.active ~ .header-wrap
   padding: 0 // remove padding when toolbar is hidden
@@ -107,7 +109,7 @@
   vertical-align: middle
   min-width:175px
   width: 75%
-  @media screen and (max-width:768px)
+  @media screen and (max-width: $xs-max-screen-width)
     padding: 1.1em 0.618em 0
   .meter-label
     float: left
@@ -169,4 +171,4 @@ header .hero-stats
 
 button.party-invite
   display: block
-  margin: 57px auto
+  margin: 57px auto

website/public/css/helpers.styl

@@ -41,23 +41,28 @@
 // .pull-right & .pull-left for specific screen sizes
 // Follows conventions for col-x-SIZE classes
 
-@media (min-width: 768px)
+@media (min-width: $sm-min-screen-width)
   .pull-left-sm
     float: left
 
   .pull-right-sm
     float: right
 
-@media (min-width: 992px)
+@media (min-width: $md-min-screen-width)
   .pull-left-md
     float: left
 
   .pull-right-md
     float: right
 
-@media (min-width: 1200px)
+@media (min-width: $lg-min-screen-width)
   .pull-left-lg
     float: left
 
   .pull-right-lg
     float: right
+
+// Making sure that the To-Dos tab always flow right on medium screens.
+@media (min-width: $sm-min-screen-width) and (max-width: $sm-max-screen-width)
+  .new-row-md
+    clear: left

website/public/css/menu.styl

@@ -1,3 +1,5 @@
+@require "./variables/screen-size.styl"
+
 // Top level navigation bar – toolbar – menu – nav
 .toolbar
   top:0
@@ -8,7 +10,7 @@
   border-bottom: 1px solid darken($color-herobox, 12%)
 .toolbar.active
   width: auto
-@media screen and (min-width:768px)
+@media screen and (min-width: $sm-min-screen-width)
   .toolbar
     position:fixed
 // Button to toggle toolbar visibility
@@ -66,7 +68,7 @@
   display: inline-block
   padding-left: 0.618em
   padding-right: 0.618em
-  @media screen and (min-width:768px)
+  @media screen and (min-width: $sm-min-screen-width)
     display: none
 .toolbar-mobile
   @extend $hrpg-button
@@ -77,7 +79,7 @@
   white-space: nowrap
   float:left;
   padding: 0.618em
-  @media screen and (max-width:768px)
+  @media screen and (max-width: $xs-max-screen-width)
     display: none
   > li
     margin-right: 0.618em
@@ -98,7 +100,7 @@
 .toolbar-bailey, .toolbar-wallet, .toolbar-options, .toolbar-subscribe
   float:right
   padding: 0.618em 0.618em 0.618em 0
-  @media screen and (max-width:768px)
+  @media screen and (max-width: $xs-max-screen-width)
     float: none
     display: inline-block
     padding: 0.618em 0.382em 0.618em 0
@@ -121,7 +123,7 @@
 .toolbar-options, .toolbar-wallet
   > li
     margin-left: 0.618em
-@media screen and (max-width:768px)
+@media screen and (max-width: $xs-max-screen-width)
   .toolbar-options
     > li
       padding-left:0em
@@ -140,7 +142,7 @@
   div
     padding-bottom: 1em
     width: 300px
-    @media screen and (max-width:768px)
+    @media screen and (max-width: $xs-max-screen-width)
       width: 96%
     .toolbar-notifs-notifs
       padding-bottom:1em
@@ -167,7 +169,7 @@
     hrpg-button-color-mixin(lighten($color-toolbar,32.8%))
 .toolbar-subscribe-button, .toolbar-controls .toolbar-subscribe-button
   @extend $hrpg-button
-@media screen and (max-width:768px)
+@media screen and (max-width: $xs-max-screen-width)
   .toolbar-toggle
     display: none
   .toolbar-mobile, .toolbar-settings, .toolbar-audio

website/public/css/npcs.styl

@@ -1,3 +1,5 @@
+@require "./variables/screen-size.styl"
+
 .npc_alex_container
   margin-bottom: 20px
 
@@ -8,7 +10,7 @@
   width:55px
   margin-right:0.618em
   position:relative
-  @media screen and (max-width:768px)
+  @media screen and (max-width: $xs-max-screen-width)
     margin-right:0px
 .npc_bailey
   float:left

website/public/css/options.styl

@@ -1,18 +1,20 @@
+@require "./variables/screen-size.styl"
+
 #main > div > div > div > .tab-content
   margin: 1.618em 0em
-  @media screen and (min-width:768px)
+  @media screen and (min-width: $sm-min-screen-width)
     border: 1px solid darken($color-options-menu, 12%)
     padding-bottom: 1.618em
 .options-menu, .options-submenu
   @extend $hrpg-submenu
   border-bottom: 1px solid darken($color-options-menu, 12%)
 .options-menu
-  @media screen and (min-width:768px)
+  @media screen and (min-width: $sm-min-screen-width)
     background-color: $color-options-menu
 
   li
     @extend $hrpg-button
-    hrpg-button-color-mixin($color-options-menu)  
+    hrpg-button-color-mixin($color-options-menu)
 
 .options-submenu
   margin-top: -1.618em
@@ -27,9 +29,9 @@
   border-bottom: 1px solid darken($color-options-menu, 12%)
   padding: .5em
 
-  @media screen and (max-width:768px)
+  @media screen and (max-width: $xs-max-screen-width)
     padding: 1em 0.618em 0 0.618em
     border: 1px solid darken($color-options-menu, 12%)
     border-top: none
-    
-  
+
+

website/public/css/shared.styl

@@ -1,3 +1,5 @@
+@require "./variables/screen-size.styl"
+
 .subscription-features
   tr
     td
@@ -90,7 +92,7 @@ li.spaced
     color: white;
     margin-right: 5px;
 
-@media (max-width: 768px)
+@media (max-width: $xs-max-screen-width)
   .container-fluid
     padding-right: 5px
     padding-left: 5px

website/public/css/tasks.styl

@@ -1,3 +1,5 @@
+@require "./variables/screen-size.styl"
+
 // 1. Set up color classes
 // ========================
 
@@ -158,12 +160,6 @@ for $stage in $stages
   .task:hover
     cursor: auto
 
-// 50% width columns with scrollbars for tablets
-@media (min-width: 768px) and (max-width: 970px)
-  .task-column
-    max-height: 18.6em
-    overflow-y: scroll
-
 // "Add new task" form
 // -----------------
 .task-add

website/public/css/variables/screen-size.styl

@@ -0,0 +1,9 @@
+// Bootstrap screen width thresholds.
+// Used for switching to different screen layout (mostly for smaller devices).
+
+$xs-max-screen-width = 767px
+$sm-min-screen-width = 768px
+$sm-max-screen-width = 991px
+$md-min-screen-width = 992px
+$lg-min-screen-width = 1200px
+

website/views/shared/tasks/index.jade

@@ -6,7 +6,7 @@ include ./task_view/mixins
 script(id='templates/habitrpg-tasks.html', type="text/ng-template")
   .tasks-lists.container-fluid
     .row
-      .col-md-3.col-sm-6(ng-repeat='list in lists', ng-class='::{"rewards-module": list.type==="reward"}')
+      .col-md-3.col-sm-6(ng-repeat='list in lists', ng-class='::{ "rewards-module": list.type==="reward", "new-row-md": list.type==="todo" }')
         .task-column(class='{{::list.type}}s')
 
           include ./task_view/graph
@@ -22,7 +22,7 @@ script(id='templates/habitrpg-tasks.html', type="text/ng-template")
           alert.alert-warning.dailiesRestingInInn(ng-if='list.type == "daily" && user.preferences.sleep && !$state.includes("options.social.challenges")')
             i.glyphicon.glyphicon-warning-sign  
             =env.t('dailiesRestingInInn')
-            
+
             button.btn-block.btn.btn-lg.btn-success(ng-click='User.user.ops.sleep({})')
               | {{env.t('innCheckOut')}}