Andrei | рефакторинг проекта (разнес статику страницы "Where to buy")

dev_10_refactoring
parent 985080f2ad
commit aa355fe5bd
  1. 169
      wp-content/themes/cosmopet/modules/author/assets/css/gp-style-desktop.css
  2. 48
      wp-content/themes/cosmopet/modules/author/assets/js/main.js
  3. 11
      wp-content/themes/cosmopet/modules/static-pages/where_to_buy/template_wtb.php
  4. 21
      wp-content/themes/cosmopet/static/css/style.css
  5. 147
      wp-content/themes/cosmopet/static/css/wtb.css
  6. 0
      wp-content/themes/cosmopet/static/js/wtb.js

@ -1,168 +1,3 @@
/* Where home */
.where-home {
padding: 162px 0 37px;
color: var(--background);
}
.authors h1{
font-size: 82px;
font-weight: bold;
line-height: 96px;
color:#fff;
margin-bottom: 41px;
text-transform: uppercase;
}
.where-home h1 {
font-size: 82px;
font-weight: bold;
line-height: 96px;
margin-bottom: 41px;
text-transform: uppercase;
}
.where-home p {
max-width: 928px;
color: #FFF;
font-size: 36px;
font-weight: bold;
line-height: 40px;
text-transform: uppercase;
}
/* Where home end */
/* Find us */
.find-us {
color: var(--background);
padding-bottom: 24px;
}
.find-us h2 {
padding: 10px 0;
font-size: 36px;
font-weight: bold;
line-height: 40px;
text-transform: uppercase;
margin-bottom: 24px;
}
.find-us ul {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 36px;
}
.find-us h3 {
font-size: 24px;
font-weight: bold;
line-height: 28px;
margin-bottom: 8px;
text-transform: uppercase;
}
.find-us p {
font-size: 24px;
font-weight: 500;
line-height: 32px;
}
/* Find us end */
/* Location */
.location {
padding-bottom: 35px;
}
.location h2 {
padding: 10px 0;
margin-bottom: 37px;
text-align: right;
font-size: 36px;
font-weight: bold;
line-height: 40px;
text-transform: uppercase;
color: var(--main_white);
}
.location iframe {
height: 783px;
width: 100%;
border-radius: 64px;
}
/* Location end */
/* Sell form */
.sell-form {
padding-bottom: 31px;
}
.sell-form__container {
background: var(--main_white);
border-radius: 64px;
padding: 64px 105px 38px;
color: var(--grey-black);
display: flex;
flex-direction: column;
gap: 48px;
}
.sell-form h2 {
font-size: 36px;
font-weight: bold;
line-height: 40px;
text-transform: uppercase;
}
.sell-form p {
text-transform: uppercase;
font-size: 24px;
font-weight: bold;
line-height: 28px;
}
.sell-form form {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.sell-form form button {
background: var(--main_black);
padding: 11px 70px;
color: var(--main_white);
text-transform: uppercase;
border-radius: 16px;
font-size: 20px;
font-weight: 600;
line-height: 24px;
border: 1px solid var(--main_black);
}
.sell-form form button:hover {
background: var(--main_white);
color: var(--main_black);
}
/* Sell form end */
/* Breadcrumb */
.breadcrumb {
padding: 20px 0 24px;
}
.breadcrumb .container {
color: var(--main_white);
font-size: 14px;
font-weight: 500;
line-height: 16px;
}
.breadcrumb a {
display: inline;
}
/* Breadcrumb end */
/* Authors */ /* Authors */
.authors { .authors {
padding-bottom: 120px; padding-bottom: 120px;
@ -310,10 +145,6 @@
} }
/* author-head end */ /* author-head end */
.home-title { .home-title {
font-size: 82px; font-size: 82px;
font-weight: bold; font-weight: bold;

@ -1,48 +0,0 @@
// const homeSwp = new Swiper('.home-swp .swiper', {
// slidesPerView: 1,
// spaceBetween: 0,
// effect: 'fade',
// loop: true,
// navigation: {
// nextEl: '.home-swp__btn-next',
// prevEl: '.home-swp__btn-prev',
// }
// })
// const textsSwp = new Swiper('.texts-swp .swiper', {
// slidesPerView: 1,
// spaceBetween: 0,
// loop: true,
// effect: 'fade',
// navigation: {
// nextEl: '.texts-swp__next',
// prevEl: '.texts-swp__prev'
// },
// pagination: {
// el: ".texts-swp__pagination",
// clickable: true,
// }
// })
// comment
// let answerbtns = document.querySelectorAll('.answer-btn');
// let answerbtnicons = document.querySelectorAll('.answer-btn svg');
// let answerblocks = document.querySelectorAll('.answer-block');
// answerbtns.forEach((answerbtn, index) => {
// answerbtn.addEventListener('click', () => {
// let answerbtnicon = answerbtnicons[index];
// let answerblock = answerblocks[index];
// answerblock.classList.toggle('active');
// answerbtnicon.classList.toggle('active');
// let buttonText = answerbtn.querySelector('span');
// if (buttonText.textContent === 'Ответ') {
// buttonText.textContent = 'Свернуть';
// } else {
// buttonText.textContent = 'ответ';
// }
// });
// });
// comment

@ -4,14 +4,15 @@ Template Name: Where to Buy
Template Post Type: page Template Post Type: page
*/ */
add_action('wp_enqueue_scripts', function() {
wp_enqueue_style('gp-front-page-style', get_template_directory_uri() . '/static/css/front-page.css');
wp_enqueue_style('gp-wtb-page-style', get_template_directory_uri() . '/static/css/wtb-page.css');
wp_enqueue_script( 'gp-wtb-page-main', get_template_directory_uri() . '/static/js/wtb-page.js', array(), null, true );
});
// Инициализация Timber // Инициализация Timber
$context = Timber::context(); $context = Timber::context();
// Подключение стилей
wp_enqueue_style('gp-wtb-style', get_template_directory_uri() . '/gp-include/assets/where-to-buy/css/gp-style-core.css?v=1.14');
wp_enqueue_style('gp-wtb-style-dt', get_template_directory_uri() . '/gp-include/assets/where-to-buy/css/gp-style-desktop.css?v=1.22');
wp_enqueue_style('gp-wtb-style-tb', get_template_directory_uri() . '/gp-include/assets/where-to-buy/css/gp-style-tablet.css?v=1.22');
wp_enqueue_style('gp-wtb-style-mb', get_template_directory_uri() . '/gp-include/assets/where-to-buy/css/gp-style-mobile.css?v=1.122');
// Получение данных маркеров из ACF // Получение данных маркеров из ACF
$locations = get_field('location_markers') ?: []; $locations = get_field('location_markers') ?: [];

@ -42,6 +42,25 @@ color: #f4f1f0;
.show-more-btn:hover { .show-more-btn:hover {
text-decoration: underline; text-decoration: underline;
} }
/* Breadcrumb */
.breadcrumb {
padding: 20px 0 24px;
}
.breadcrumb .container {
color: var(--main_white);
font-size: 14px;
font-weight: 500;
line-height: 16px;
}
.breadcrumb a {
display: inline;
}
/* Breadcrumb end */
@media (max-width: 576px) { @media (max-width: 576px) {
/* start: Scrollbar */ /* start: Scrollbar */
body::-webkit-scrollbar { body::-webkit-scrollbar {
@ -73,4 +92,4 @@ color: #f4f1f0;
height: 29px; height: 29px;
padding: 7px; padding: 7px;
} }
} }

@ -0,0 +1,147 @@
/* Where home */
.where-home {
padding: 162px 0 37px;
color: var(--background);
}
.authors h1{
font-size: 82px;
font-weight: bold;
line-height: 96px;
color:#fff;
margin-bottom: 41px;
text-transform: uppercase;
}
.where-home h1 {
font-size: 82px;
font-weight: bold;
line-height: 96px;
margin-bottom: 41px;
text-transform: uppercase;
}
.where-home p {
max-width: 928px;
color: #FFF;
font-size: 36px;
font-weight: bold;
line-height: 40px;
text-transform: uppercase;
}
/* Where home end */
/* Find us */
.find-us {
color: var(--background);
padding-bottom: 24px;
}
.find-us h2 {
padding: 10px 0;
font-size: 36px;
font-weight: bold;
line-height: 40px;
text-transform: uppercase;
margin-bottom: 24px;
}
.find-us ul {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 36px;
}
.find-us h3 {
font-size: 24px;
font-weight: bold;
line-height: 28px;
margin-bottom: 8px;
text-transform: uppercase;
}
.find-us p {
font-size: 24px;
font-weight: 500;
line-height: 32px;
}
/* Find us end */
/* Location */
.location {
padding-bottom: 35px;
}
.location h2 {
padding: 10px 0;
margin-bottom: 37px;
text-align: right;
font-size: 36px;
font-weight: bold;
line-height: 40px;
text-transform: uppercase;
color: var(--main_white);
}
.location iframe {
height: 783px;
width: 100%;
border-radius: 64px;
}
/* Location end */
/* Sell form */
.sell-form {
padding-bottom: 31px;
}
.sell-form__container {
background: var(--main_white);
border-radius: 64px;
padding: 64px 105px 38px;
color: var(--grey-black);
display: flex;
flex-direction: column;
gap: 48px;
}
.sell-form h2 {
font-size: 36px;
font-weight: bold;
line-height: 40px;
text-transform: uppercase;
}
.sell-form p {
text-transform: uppercase;
font-size: 24px;
font-weight: bold;
line-height: 28px;
}
.sell-form form {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.sell-form form button {
background: var(--main_black);
padding: 11px 70px;
color: var(--main_white);
text-transform: uppercase;
border-radius: 16px;
font-size: 20px;
font-weight: 600;
line-height: 24px;
border: 1px solid var(--main_black);
}
.sell-form form button:hover {
background: var(--main_white);
color: var(--main_black);
}
/* Sell form end */
Loading…
Cancel
Save