ProVM/stand
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

v2.3.0-rc3

Browse Source
This commit is contained in:
Aldarien
2021-01-31 17:38:55 -03:00
parent c6dabb0627
commit afa90fb4bc
13 changed files with 292 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
assets/html/0021_sticky.html
View File

@ -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>

49
assets/js/main.js
View File

@ -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')
})
}

5
assets/sass/_phone.scss
View File

@ -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 {

2
assets/sass/common/_testimonios.scss
View File

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

76
assets/sass/phone/_sticky.scss
View File

@ -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;
}
}
}

2
assets/sass/wide/_sticky.scss
View File

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

49
public/assets/scripts/main.js
View File

@ -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')
})
}

2
public/assets/scripts/main.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
public/assets/scripts/maps/main.min.js.map
View File

File diff suppressed because one or more lines are too long

145
public/assets/styles/main.css
View File

@ -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: black;
background-color: #333333;
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;

2
public/assets/styles/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
public/assets/styles/maps/main.min.css.map
View File

File diff suppressed because one or more lines are too long

2
public/index.html
View File

File diff suppressed because one or more lines are too long