[tutorial] Added mobile images. Closes DemocracyOS#100.

lib/sidebar-phase-two/template.jade

@@ -9,6 +9,8 @@ mixin sidebaritem(law, item, backgroundColor, fontColor, phaseOne)
  - styles += styles != '' ? 'margin-bottom: 20px;' : ''
  - styles += styles != '' ? 'cursor: default; text-transform: uppercase' : ''
  a(href=phaseOne ? '#' : '/law/' + item.id, class =classes, style=styles)
+ - if (item.singular)
+ span.glyphicon-chevron-right
  span.title= item.mediaTitle
  span.created-by
  //- - if (item.participants.length > 0)

lib/tutorial/component.json

@@ -24,8 +24,12 @@
  "images/tutorial-paso1.gif",
  "images/tutorial-paso2.gif",
  "images/tutorial-paso3.gif",
- "images/tutorial-paso4.gif"
- ],
+ "images/tutorial-paso4.gif",
+ "images/tutorial-paso1-mobile.gif",
+ "images/tutorial-paso2-mobile.gif",
+ "images/tutorial-paso3-mobile.gif",
+ "images/tutorial-paso4-mobile.gif"
+ ],
  "styles": ["tutorial.styl"],
  "templates": ["template.jade"],
  "scripts": ["tutorial.js", "view.js"],

lib/tutorial/template.jade

@@ -13,9 +13,17 @@
  a.btn-next(href="#")
  .carousel
  .step1
+ .hidden-xs
+ .hidden-sm.hidden-md.hidden-lg
  .step2
+ .hidden-xs
+ .hidden-sm.hidden-md.hidden-lg
  .step3
+ .hidden-xs
+ .hidden-sm.hidden-md.hidden-lg
  .step4
+ .hidden-xs
+ .hidden-sm.hidden-md.hidden-lg
  .col-md-2
  .row.text-center#carousel-footer
  .col-md-2

lib/tutorial/tutorial.styl

@@ -6,27 +6,43 @@
  font-weight normal
 
 .carousel
- height 300px
 
-#carousel-footer
- padding-bottom 30px
-
- a.skip
- margin-top 20px
- cursor pointer
-
-.step1
- background url('/lib/tutorial/images/tutorial-paso1.gif') no-repeat
- background-position center
-.step2
- background url('/lib/tutorial/images/tutorial-paso2.gif') no-repeat
- background-position center
-.step3
- background url('/lib/tutorial/images/tutorial-paso3.gif') no-repeat
- background-position center
-.step4
- background url('/lib/tutorial/images/tutorial-paso4.gif') no-repeat
- background-position center
+ .step1
+ .hidden-xs
+ height 300px
+ background url('/lib/tutorial/images/tutorial-paso1.gif') no-repeat
+ background-position center
+ .hidden-sm.hidden-md.hidden-lg
+ height 443px
+ background url('/lib/tutorial/images/tutorial-paso1-mobile.gif') no-repeat
+ background-position center
+ .step2
+ .hidden-xs
+ height 300px
+ background url('/lib/tutorial/images/tutorial-paso2.gif') no-repeat
+ background-position center
+ .hidden-sm.hidden-md.hidden-lg
+ height 443px
+ background url('/lib/tutorial/images/tutorial-paso2-mobile.gif') no-repeat
+ background-position center
+ .step3
+ .hidden-xs
+ height 300px
+ background url('/lib/tutorial/images/tutorial-paso3.gif') no-repeat
+ background-position center
+ .hidden-sm.hidden-md.hidden-lg
+ height 443px
+ background url('/lib/tutorial/images/tutorial-paso3-mobile.gif') no-repeat
+ background-position center
+ .step4
+ .hidden-xs
+ height 300px
+ background url('/lib/tutorial/images/tutorial-paso4.gif') no-repeat
+ background-position center
+ .hidden-sm.hidden-md.hidden-lg
+ height 443px
+ background url('/lib/tutorial/images/tutorial-paso4-mobile.gif') no-repeat
+ background-position center
 
 .btn-prev, .btn-next
  cursor pointer
@@ -47,4 +63,12 @@
 
 .btn-next
  right 50px
- background url('/lib/tutorial/images/next.svg') no-repeat
+ background url('/lib/tutorial/images/next.svg') no-repeat
+
+#carousel-footer
+ padding-bottom 30px
+
+ a.skip
+ margin-top 20px
+ cursor pointer
+