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

Merge branch 'develop' of http://git.provm.cl/ProVM/stand into develop

Browse Source
This commit is contained in:
FTP
2021-02-01 03:20:06 +00:00
parent d9e492fb40 afa90fb4bc
commit 429a6ac9ee
15 changed files with 351 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
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,6 +48,11 @@
</div>
</form>
</div>
<div id="side_button" class="ui sticky">
<div class="rotated">
AGREGAR
</div>
</div>
</div>
</div>
</div>

2
assets/html/009_contacto.html
View File

@ -31,7 +31,7 @@
</a>
</div>
<div class="segment">
<a href="http://facebook.com/stand" target="_blank">
<a href="https://www.facebook.com/StAnd-105399181257587" target="_blank">
<i class="ui icons">
<i class="large circle icon"></i>
<i class="facebook f icon"></i>

45
assets/html/014_modal_sticky.html Normal file
View File

@ -0,0 +1,45 @@
<div class="ui modal" id="modal_sticky">
<form class="ui form">
<div class="ui grid">
<div class="row">
<div class="ten wide column">
<div class="titulo">
STAND
</div>
<div class="precio">$ 5.990</div>
<div class="colores">
<input type="hidden" name="color" value="azul" />
<span class="text">COLOR</span>
<br />
<div class="white circle"></div>
<div class="black circle"></div>
<div class="blue circle"></div>
<div class="petrol circle"></div>
<div class="cyan circle"></div>
<div class="green circle"></div>
<div class="yellow circle"></div>
<div class="orange circle"></div>
<div class="red circle"></div>
</div>
<div class="input cantidad">
<button class="minus" type="button">
<i class="minus icon"></i>
</button><input type="text" name="cantidad" value="0" /><button class="plus" type="button">
<i class="plus icon"></i>
</button>
</div>
</div>
<div class="six wide column">
<div class="ui image">
<img src="./assets/images/fotos/azul/left.jpg" />
</div>
</div>
</div>
<div class="row">
<div class="sixteen wide column">
<button class="ui button">AGREGAR AL CARRO</button>
</div>
</div>
</div>
</form>
</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;
}
}
}

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

@ -1,14 +1,23 @@
#columna_sticky {
display: none;
position: absolute;
top: (map.get($heights, 'cabezal'))+rem;
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);
z-index: 10;
@ -67,4 +76,68 @@
}
}
}
#side_button {
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;
}
}
}

5
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;
@ -68,4 +68,7 @@
}
}
}
#side_button {
display: none;
}
}

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

151
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 {
@ -475,42 +475,49 @@ i.font-icon.chile:before {
}
#columna_sticky {
display: none;
position: absolute;
top: 25rem;
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,13 +554,89 @@ 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 {
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 {
font-size: 1.5rem;
@ -566,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 {
@ -749,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;
@ -783,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;
@ -804,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;
@ -812,15 +896,18 @@ 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;
}
#columna_sticky #side_button {
display: none;
}
#menu i {
font-size: 2rem;

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