This commit is contained in:
2024-12-04 10:54:28 +01:00
4 changed files with 3230 additions and 3116 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -8,8 +8,7 @@ $cTextLight: #3a3a3a;
$cGray: #f6f6f6; $cGray: #f6f6f6;
$cGrayLight: #eceff1; $cGrayLight: #eceff1;
$cComment: #c3c3c3; $cComment: #c3c3c3;
$fJosefin: 'Josefin Sans', $fJosefin: 'Josefin Sans', sans-serif;
sans-serif;
@import '_mixins'; @import '_mixins';
@keyframes fade_in_show { @keyframes fade_in_show {
@@ -105,7 +104,7 @@ input:-webkit-autofill:active {
.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled).active,
.show>.btn-success.dropdown-toggle { .show > .btn-success.dropdown-toggle {
background: $cBlue; background: $cBlue;
border: none; border: none;
} }
@@ -118,7 +117,7 @@ input:-webkit-autofill:active {
.btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled):active:focus,
.btn-success:not(:disabled):not(.disabled).active:focus, .btn-success:not(:disabled):not(.disabled).active:focus,
.show>.btn-success.dropdown-toggle:focus { .show > .btn-success.dropdown-toggle:focus {
box-shadow: none; box-shadow: none;
} }
@@ -570,18 +569,18 @@ input:-webkit-autofill:active {
display: flex; display: flex;
margin-left: -15px; margin-left: -15px;
>li { > li {
@include respond-between(sm, md) { @include respond-between(sm, md) {
&#link-5 { &#link-5 {
display: none; display: none;
} }
} }
>i { > i {
display: none; display: none;
} }
>a { > a {
font-family: $fJosefin; font-family: $fJosefin;
color: $cText; color: $cText;
font-size: 22px; font-size: 22px;
@@ -606,14 +605,14 @@ input:-webkit-autofill:active {
} }
&:hover { &:hover {
>ul { > ul {
display: flex; display: flex;
animation: fade_in_show 0.5s; animation: fade_in_show 0.5s;
flex-wrap: wrap; flex-wrap: wrap;
} }
} }
>ul { > ul {
left: 0; left: 0;
width: 100%; width: 100%;
display: none; display: none;
@@ -622,7 +621,7 @@ input:-webkit-autofill:active {
background: #fff; background: #fff;
@include transition; @include transition;
>li { > li {
width: calc(100% / 4); width: calc(100% / 4);
margin-bottom: 25px; margin-bottom: 25px;
@@ -645,7 +644,7 @@ input:-webkit-autofill:active {
} }
} }
>a { > a {
font-weight: 600; font-weight: 600;
font-size: 16px; font-size: 16px;
} }
@@ -683,7 +682,6 @@ input:-webkit-autofill:active {
@include respond-above(xxl) { @include respond-above(xxl) {
.product-mini { .product-mini {
&:nth-child(11), &:nth-child(11),
&:nth-child(12) { &:nth-child(12) {
display: none; display: none;
@@ -1329,10 +1327,10 @@ input:-webkit-autofill:active {
&.level-0 { &.level-0 {
padding: 0 0 15px 0; padding: 0 0 15px 0;
>li { > li {
padding-bottom: 10px; padding-bottom: 10px;
>a { > a {
font-family: $fJosefin; font-family: $fJosefin;
font-weight: 600; font-weight: 600;
letter-spacing: -1px; letter-spacing: -1px;
@@ -1753,7 +1751,8 @@ ul.pager {
text-align: right; text-align: right;
} }
._input {} ._input {
}
} }
.product-message { .product-message {
@@ -2109,10 +2108,12 @@ ul.pager {
opacity: 1; opacity: 1;
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
background-image: linear-gradient(to right, background-image: linear-gradient(
to right,
#000, #000,
#000 50%, #000 50%,
rgba(0, 0, 0, 0.3) 50%); rgba(0, 0, 0, 0.3) 50%
);
background-size: 200% 100%; background-size: 200% 100%;
background-position: 100%; background-position: 100%;
transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1); transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
@@ -2205,7 +2206,7 @@ ul.pager {
.basket-options { .basket-options {
padding-top: 25px; padding-top: 25px;
>.content { > .content {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
@@ -2612,7 +2613,7 @@ ul.pager {
font-size: 13px; font-size: 13px;
} }
>* { > * {
width: 100%; width: 100%;
} }
@@ -3029,8 +3030,8 @@ ul.pager {
max-width: 600px; max-width: 600px;
} }
>.container { > .container {
>.row { > .row {
.col-xl-4 { .col-xl-4 {
order: 1; order: 1;
} }
@@ -3055,8 +3056,8 @@ ul.pager {
#main-menu { #main-menu {
#menu-container-1 { #menu-container-1 {
ul.level-0 { ul.level-0 {
>li { > li {
>ul { > ul {
padding: 25px; padding: 25px;
} }
} }
@@ -3090,7 +3091,7 @@ ul.pager {
} }
.basket-summary-address { .basket-summary-address {
>.basket-address-form { > .basket-address-form {
.left { .left {
.addresses { .addresses {
.address { .address {
@@ -3375,7 +3376,6 @@ ul.pager {
} }
.pager { .pager {
.first, .first,
.last { .last {
display: none; display: none;
@@ -3864,3 +3864,84 @@ div[class^='products-box-'] {
} }
} }
} }
// ******************
.form-control {
&.form-control-phone {
display: flex;
flex-direction: row;
align-items: center;
&:has(> .form-control-input:focus) {
color: #495057;
background-color: #fff;
border-color: #80bdff;
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
&:hover {
&[tooltip] {
position: relative;
}
&[tooltip]:before {
content: '';
display: none;
content: '';
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #343a40;
position: absolute;
top: 30px;
left: 85px;
z-index: 8;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
}
&[tooltip]:after {
display: none;
content: attr(tooltip);
position: absolute;
top: 35px;
left: 50px;
padding: 5px 8px;
background: #343a40;
color: #fff;
z-index: 9;
font-size: 0.75em;
// height: 18px;
line-height: 18px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
white-space: nowrap;
word-wrap: normal;
}
&[tooltip]:hover:before,
&[tooltip]:hover:after {
display: block;
}
}
.form-control-phone-code {
display: flex;
align-items: center;
gap: 10px;
span {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
}
}
.form-control-input {
border: none;
height: calc(2.25rem - 2px);
&:focus {
border: none;
outline: none;
box-shadow: none;
}
}
}
}

View File

@@ -70,7 +70,21 @@
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<input type="text" id="phone" name="phone" class="form-control" required placeholder="<?= ucfirst( \S::lang( 'telefon' ) );?>" value="<?= htmlspecialchars( $address_current['phone'] );?>"> <div class="form-control form-control-phone" tooltip="Wprowadź numer w formacie: 123456789">
<div class="form-control-phone-code">
<img src="/images/system/lang_pl.png" alt="">
<span>+48</span>
</div>
<input
type="tel"
id="phone"
name="phone"
class="form-control form-control-input"
required
placeholder="<?= ucfirst(\S::lang('telefon')); ?>"
value="<?= htmlspecialchars($address_current['phone']); ?>"
pattern="[0-9]{9}">
</div>
</div> </div>
<div class="form-group"> <div class="form-group">
<div class="row"> <div class="row">
@@ -95,6 +109,25 @@
<? if ( $this -> client ):?></div><? endif;?> <? if ( $this -> client ):?></div><? endif;?>
</div> </div>
<script class="footer"> <script class="footer">
$(document).ready(function () {
function validatePhone() {
var phone = $('#phone');
var phonePattern = /^[0-9]{9}$/;
if (!phone.val() || !phonePattern.test(phone.val())) {
$('#order-send').prop('disabled', true);
} else {
$('#order-send').prop('disabled', false);
}
}
$('#phone').on('input', function () {
validatePhone();
});
validatePhone();
});
$( function() $( function()
{ {
$( 'body' ).on( click_event, '.addresses .address .btn-select', function(e) $( 'body' ).on( click_event, '.addresses .address .btn-select', function(e)