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">
+        <div id="side_button" class="ui sticky">
+          <div class="rotated">
             AGREGAR
-        </button>
+          </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))
 
+    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: $gris_standard;
-    background-color: rgb(0, 0, 0);
+    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;

public/assets/scripts/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))
 
+    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')
     })
   }

public/assets/styles/main.css

@@ -149,7 +149,7 @@ html {
   background-color: #cccccc;
 }
 #testimonios .testimonios .ui.card .rating .icon {
-  color: white;
+  color: yellow;
 }
 
 #contacto {
@@ -480,37 +480,44 @@ i.font-icon.chile:before {
     height: 100%;
     width: 100%;
   }
+  #columna_sticky .column {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+  }
+  #columna_sticky > .container {
+    margin-top: 1rem;
+  }
   #columna_sticky .left.column {
     pointer-events: none;
   }
-  #columna_sticky .sticky {
+  #columna_sticky #sticky_form {
     display: none;
     background-color: rgba(255, 255, 255, 0.5);
     z-index: 10;
     margin-top: 3.75rem;
     padding-top: 5.0625rem;
   }
-  #columna_sticky .sticky .row {
+  #columna_sticky #sticky_form .row {
     padding-top: 0 !important;
   }
-  #columna_sticky .sticky .column:first-child {
+  #columna_sticky #sticky_form .column:first-child {
     vertical-align: bottom;
     padding-top: 1.875rem;
     font-size: 1.1666666667rem;
   }
-  #columna_sticky .sticky .column:first-child .titulo {
+  #columna_sticky #sticky_form .column:first-child .titulo {
     font-size: 2.0833333333rem;
   }
-  #columna_sticky .sticky .column:first-child .precio {
+  #columna_sticky #sticky_form .column:first-child .precio {
     font-size: 1.3333333333rem;
   }
-  #columna_sticky .sticky .column:first-child .colores {
+  #columna_sticky #sticky_form .column:first-child .colores {
     vertical-align: center;
   }
-  #columna_sticky .sticky .column:first-child .colores .text {
+  #columna_sticky #sticky_form .column:first-child .colores .text {
     margin-right: 0.28125rem;
   }
-  #columna_sticky .sticky .column:first-child .colores .circle {
+  #columna_sticky #sticky_form .column:first-child .colores .circle {
     display: inline-block;
     width: 1.40625rem;
     height: 1.40625rem;
@@ -518,19 +525,19 @@ i.font-icon.chile:before {
     margin: auto 0.09375rem;
     cursor: pointer;
   }
-  #columna_sticky .sticky .column:first-child .colores .circle.selected {
+  #columna_sticky #sticky_form .column:first-child .colores .circle.selected {
     width: 1.59375rem;
     height: 1.59375rem;
     cursor: default;
   }
-  #columna_sticky .sticky .column:first-child .input.cantidad {
+  #columna_sticky #sticky_form .column:first-child .input.cantidad {
     width: 4.5rem;
     border: thin solid black;
     text-align: center;
     padding: 0.5rem 0.05rem;
     font-size: 0.8333333333rem;
   }
-  #columna_sticky .sticky .column:first-child .input.cantidad button {
+  #columna_sticky #sticky_form .column:first-child .input.cantidad button {
     background: none;
     border: none;
     width: 1rem;
@@ -539,7 +546,7 @@ i.font-icon.chile:before {
     cursor: pointer;
     font-weight: bold;
   }
-  #columna_sticky .sticky .column:first-child .input.cantidad input {
+  #columna_sticky #sticky_form .column:first-child .input.cantidad input {
     width: 2rem;
     background: none;
     margin: 0;
@@ -547,17 +554,88 @@ i.font-icon.chile:before {
     padding: 0;
     text-align: center;
   }
-  #columna_sticky .sticky .column:first-child .input.cantidad .button {
+  #columna_sticky #sticky_form .column:first-child .input.cantidad .button {
     border-radius: 0 !important;
     width: 100%;
   }
-  #columna_sticky .sticky .column:first-child .button {
+  #columna_sticky #sticky_form .column:first-child .button {
     width: 100%;
   }
   #columna_sticky #side_button {
-    height: 100%;
+    background-color: #333333;
-    background-color: black;
+    color: white;
+    width: 100%;
+    height: 12rem;
+    cursor: pointer;
+    padding-top: 6rem;
+  }
+  #columna_sticky #side_button .rotated {
     transform: rotate(-90deg);
+    font-size: 2rem;
+  }
+
+  #modal_sticky .column:first-child {
+    vertical-align: bottom;
+    padding-top: 1.875rem;
+    font-size: 1.1666666667rem;
+  }
+  #modal_sticky .column:first-child .titulo {
+    font-size: 2.0833333333rem;
+  }
+  #modal_sticky .column:first-child .precio {
+    font-size: 1.3333333333rem;
+  }
+  #modal_sticky .column:first-child .colores {
+    vertical-align: center;
+  }
+  #modal_sticky .column:first-child .colores .text {
+    margin-right: 0.28125rem;
+  }
+  #modal_sticky .column:first-child .colores .circle {
+    display: inline-block;
+    width: 1.40625rem;
+    height: 1.40625rem;
+    border-radius: 8000px;
+    margin: auto 0.09375rem;
+    cursor: pointer;
+  }
+  #modal_sticky .column:first-child .colores .circle.selected {
+    width: 1.59375rem;
+    height: 1.59375rem;
+    cursor: default;
+  }
+  #modal_sticky .column:first-child .input.cantidad {
+    width: 4.5rem;
+    border: thin solid black;
+    text-align: center;
+    padding: 0.5rem 0.05rem;
+    font-size: 0.8333333333rem;
+  }
+  #modal_sticky .column:first-child .input.cantidad button {
+    background: none;
+    border: none;
+    width: 1rem;
+    margin: 0;
+    padding: 0;
+    cursor: pointer;
+    font-weight: bold;
+  }
+  #modal_sticky .column:first-child .input.cantidad input {
+    width: 2rem;
+    background: none;
+    margin: 0;
+    border: 0;
+    padding: 0;
+    text-align: center;
+  }
+  #modal_sticky .column:first-child .input.cantidad .button {
+    border-radius: 0 !important;
+    width: 100%;
+  }
+  #modal_sticky .column:first-child .button {
+    width: 100%;
+    color: white;
+    background-color: #333333;
   }
 
   #menu i {
@@ -571,17 +649,18 @@ i.font-icon.chile:before {
   }
 
   .left.column {
-    width: 75%;
+    width: 75% !important;
     padding-left: 0.46875rem !important;
   }
 
   .right.column {
-    width: 25%;
+    width: 25% !important;
   }
 
   .titulo {
     padding-top: 2.34375rem;
     padding-bottom: 1.875rem;
+    font-size: 1.5rem;
   }
 
   html {
@@ -754,33 +833,33 @@ i.font-icon.chile:before {
   #columna_sticky .left.column {
     pointer-events: none;
   }
-  #columna_sticky .sticky {
+  #columna_sticky #sticky_form {
     background-color: rgba(255, 255, 255, 0.5);
     z-index: 10;
     margin-top: 2.5rem;
     padding-top: 3.375rem;
   }
-  #columna_sticky .sticky .row {
+  #columna_sticky #sticky_form .row {
     padding-top: 0 !important;
   }
-  #columna_sticky .sticky .column:first-child {
+  #columna_sticky #sticky_form .column:first-child {
     vertical-align: bottom;
     padding-top: 1.25rem;
     font-size: 1.1666666667rem;
   }
-  #columna_sticky .sticky .column:first-child .titulo {
+  #columna_sticky #sticky_form .column:first-child .titulo {
     font-size: 2.0833333333rem;
   }
-  #columna_sticky .sticky .column:first-child .precio {
+  #columna_sticky #sticky_form .column:first-child .precio {
     font-size: 1.3333333333rem;
   }
-  #columna_sticky .sticky .column:first-child .colores {
+  #columna_sticky #sticky_form .column:first-child .colores {
     vertical-align: center;
   }
-  #columna_sticky .sticky .column:first-child .colores .text {
+  #columna_sticky #sticky_form .column:first-child .colores .text {
     margin-right: 0.1875rem;
   }
-  #columna_sticky .sticky .column:first-child .colores .circle {
+  #columna_sticky #sticky_form .column:first-child .colores .circle {
     display: inline-block;
     width: 1.25rem;
     height: 1.25rem;
@@ -788,19 +867,19 @@ i.font-icon.chile:before {
     margin: auto 0.0625rem;
     cursor: pointer;
   }
-  #columna_sticky .sticky .column:first-child .colores .circle.selected {
+  #columna_sticky #sticky_form .column:first-child .colores .circle.selected {
     width: 1.375rem;
     height: 1.375rem;
     cursor: default;
   }
-  #columna_sticky .sticky .column:first-child .input.cantidad {
+  #columna_sticky #sticky_form .column:first-child .input.cantidad {
     width: 4.5rem;
     border: thin solid black;
     text-align: center;
     padding: 0.5rem 0.05rem;
     font-size: 0.8333333333rem;
   }
-  #columna_sticky .sticky .column:first-child .input.cantidad button {
+  #columna_sticky #sticky_form .column:first-child .input.cantidad button {
     background: none;
     border: none;
     width: 1rem;
@@ -809,7 +888,7 @@ i.font-icon.chile:before {
     cursor: pointer;
     font-weight: bold;
   }
-  #columna_sticky .sticky .column:first-child .input.cantidad input {
+  #columna_sticky #sticky_form .column:first-child .input.cantidad input {
     width: 2rem;
     background: none;
     margin: 0;
@@ -817,11 +896,11 @@ i.font-icon.chile:before {
     padding: 0;
     text-align: center;
   }
-  #columna_sticky .sticky .column:first-child .input.cantidad .button {
+  #columna_sticky #sticky_form .column:first-child .input.cantidad .button {
     border-radius: 0 !important;
     width: 100%;
   }
-  #columna_sticky .sticky .column:first-child .button {
+  #columna_sticky #sticky_form .column:first-child .button {
     width: 100%;
     color: white;
     background-color: #333333;