v2.3.0-rc3

assets/html/0021_sticky.html

@@ -3,7 +3,7 @@
     <div class="ui grid">
       <div class="left column" id="column"></div>
       <div class="right column">
-        <div class="ui sticky">
+        <div id="sticky_form" class="ui sticky">
           <form class="ui form">
             <div class="ui grid">
               <div class="row">
@@ -48,9 +48,11 @@
             </div>
           </form>
         </div>
-        <button id="side_button">
-          AGREGAR
-        </button>
+        <div id="side_button" class="ui sticky">
+          <div class="rotated">
+            AGREGAR
+          </div>
+        </div>
       </div>
     </div>
   </div>

assets/js/main.js

@@ -441,6 +441,43 @@ let testimonios = {
   }
 }
 
+let sticky_button = {
+  elem: $('#columna_sticky #side_button'),
+  setup: function() {
+    $('#modal_sticky').modal()
+    this.elem.click((e) => {
+      $('#modal_sticky').modal('show')
+    })
+    this.elem.sticky({
+      context: '#column'
+    })
+  }
+}
+
+let modal_sticky_form = {
+  elem: $('#modal_sticky form'),
+  color: null,
+  amount: null,
+  setup: function() {
+    this.amount = new Amount($('#modal_sticky form .input input[name="cantidad"]'))
+    this.color = new Colors($('#modal_sticky form .colores'), true)
+
+    this.elem.submit((e) => {
+      e.preventDefault()
+      this.submit()
+      this.elem.parent('#modal_sticky').modal('hide')
+      return false
+    })
+  },
+  submit: function() {
+    carro.add(this.elem.find('[name="cantidad"]').val(), this.elem.find('[name="color"]').val())
+    this.color.change_color('blue')
+    this.amount.n = 0
+    this.amount.print()
+    this.elem.trigger('reset')
+  }
+}
+
 let sticky = {
   elem: $('#columna_sticky'),
   setup: function() {
@@ -455,9 +492,14 @@ let sticky = {
 
     this.elem.find('.sticky .precio').html('$ ' + format(valor))
 
-    $('#columna_sticky .sticky').sticky({
-      context: '#column'
-    })
+    if ($('#columna_sticky .sticky').css('display') != 'none') {
+      $('#columna_sticky .sticky').sticky({
+        context: '#column'
+      })
+    } else {
+      sticky_button.setup()
+      modal_sticky_form.setup()
+    }
   }
 }
 
@@ -477,6 +519,7 @@ let image = {
       p.modal.find('.image').append(
         $('<img />').attr('src', img)
       )
+      p.modal.find('.image img').css('width', '100%')
       p.modal.modal('show')
     })
   }

assets/sass/_phone.scss

@@ -11,16 +11,17 @@
 @import 'phone/nav';
 
 .left.column {
-  width: 75%;
+  width: 75% !important;
   padding-left: rem(5) !important;
 }
 .right.column {
-  width: 25%;
+  width: 25% !important;
 }
 
 .titulo {
   padding-top: rem(25);
   padding-bottom: rem(20);
+  font-size: 1.5rem;
 }
 
 html {

assets/sass/common/_testimonios.scss

@@ -5,7 +5,7 @@
 
       .rating {
         .icon {
-          color: white;
+          color: yellow;
         }
       }
     }

assets/sass/phone/_sticky.scss

@@ -4,10 +4,19 @@
   height: 100%;
   width: 100%;
 
+  .column {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+  }
+
+  &>.container {
+    margin-top: 1rem;
+  }
+
   .left.column {
     pointer-events: none;
   }
-  .sticky {
+  #sticky_form {
     display: none;
     background-color: rgba(255, 255, 255, .5);
 
@@ -68,8 +77,67 @@
     }
   }
   #side_button {
-    height: 100%;
-    background-color: rgb(0, 0, 0);
-    transform: rotate(-90deg);
+    background-color: $gris_standard;
+    color: rgb(255, 255, 255);
+    width: 100%;
+    height: 12rem;
+    cursor: pointer;
+
+    padding-top: 6rem;
+
+    .rotated {
+      transform: rotate(-90deg);
+      font-size: 2rem;
+    }
+  }
+}
+#modal_sticky {
+  .column:first-child {
+    vertical-align: bottom;
+    padding-top: rem(20);
+
+    .titulo {
+      font-size: font_size(25);
+    }
+    .precio {
+      font-size: font_size(16);
+    }
+    font-size: font_size(14);
+
+    @include colors;
+    .input.cantidad {
+      width: 4.5rem;
+      border: thin solid rgb(0, 0, 0);
+      text-align: center;
+      padding: .5rem 0.05rem;
+      font-size: font_size(10);
+
+      button {
+        background: none;
+        border: none;
+        width: 1rem;
+        margin: 0;
+        padding: 0;
+        cursor: pointer;
+        font-weight: bold;
+      }
+      input {
+        width: 2rem;
+        background: none;
+        margin: 0;
+        border: 0;
+        padding: 0;
+        text-align: center;
+      }
+      .button {
+        border-radius: 0 !important;
+        width: 100%;
+      }
+    }
+    .button {
+      width: 100%;
+      color: $blanco;
+      background-color: $gris_standard;
+    }
   }
 }

assets/sass/wide/_sticky.scss

@@ -7,7 +7,7 @@
   .left.column {
     pointer-events: none;
   }
-  .sticky {
+  #sticky_form {
     background-color: rgba(255, 255, 255, .5);
 
     z-index: 10;