[tutorial] Added skip buttons for last slide and mobile version. Closes

DemocracyOS#102
Legislatura · Nov 25, 2014 · 5906c9f · 5906c9f
1 parent ae70de1
commit 5906c9f
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 12 deletions.
diff --git a/lib/tutorial/template.jade b/lib/tutorial/template.jade
@@ -14,19 +14,22 @@
         .carousel
           .step1
             .hidden-xs
+              .btn.btn-sm.skip.pull-right Saltar tutorial &gt;&gt;
             .hidden-sm.hidden-md.hidden-lg
+              .btn.btn-sm.skip Saltar tutorial &gt;&gt;
           .step2
             .hidden-xs
+              .btn.btn-sm.skip.pull-right Saltar tutorial &gt;&gt;
             .hidden-sm.hidden-md.hidden-lg
+              .btn.btn-sm.skip Saltar tutorial &gt;&gt;
           .step3
             .hidden-xs
+              .btn.btn-sm.skip.pull-right Saltar tutorial &gt;&gt;
             .hidden-sm.hidden-md.hidden-lg
+              .btn.btn-sm.skip Saltar tutorial &gt;&gt;
           .step4
             .hidden-xs
+              button.btn.btn-lg.btn-primary.skip Ver los proyectos
             .hidden-sm.hidden-md.hidden-lg
-      .col-md-2
-    .row.text-center#carousel-footer
-      .col-md-2
-      .col-md-8
-        a.skip.pull-right Saltar tutorial &gt;&gt;
-      .col-md-2
+              button.btn.btn-md.btn-primary.skip Ver los proyectos
+      .col-md-2
diff --git a/lib/tutorial/tutorial.styl b/lib/tutorial/tutorial.styl
@@ -6,12 +6,28 @@
     font-weight normal
 
 .carousel
+  .btn-lg.skip
+    position absolute
+    bottom 5
+    right 30
+  .btn-sm.skip
+    position absolute
+    bottom 5
+    right 30
+  .btn-md.skip
+    position relative
+    top 470px
+  .hidden-md
+    .skip
+      top 470px
+      position relative
 
   .step1
     .hidden-xs
       height 300px
       background url('/lib/tutorial/images/tutorial-paso1.gif') no-repeat
       background-position center
+      position relative
     .hidden-sm.hidden-md.hidden-lg
       height 443px
       background url('/lib/tutorial/images/tutorial-paso1-mobile.gif') no-repeat
@@ -21,6 +37,7 @@
       height 300px
       background url('/lib/tutorial/images/tutorial-paso2.gif') no-repeat
       background-position center
+      position relative
     .hidden-sm.hidden-md.hidden-lg
       height 443px
       background url('/lib/tutorial/images/tutorial-paso2-mobile.gif') no-repeat
@@ -30,15 +47,18 @@
       height 300px
       background url('/lib/tutorial/images/tutorial-paso3.gif') no-repeat
       background-position center
+      position relative
     .hidden-sm.hidden-md.hidden-lg
       height 443px
       background url('/lib/tutorial/images/tutorial-paso3-mobile.gif') no-repeat
       background-position center
+      position relative
   .step4
     .hidden-xs
       height 300px
       background url('/lib/tutorial/images/tutorial-paso4.gif') no-repeat
       background-position center
+      position relative
     .hidden-sm.hidden-md.hidden-lg
       height 443px
       background url('/lib/tutorial/images/tutorial-paso4-mobile.gif') no-repeat
@@ -66,9 +86,4 @@
   background url('/lib/tutorial/images/next.svg') no-repeat
 
 #carousel-footer
-  padding-bottom 30px
-
-  a.skip
-    margin-top 20px
-    cursor pointer
-
+  padding-bottom 30px