About Teletype
Join
@onthewaytothesun
February 7, 2023

Адаптация таплинков под ПК

Часть 1. Дизайн

Видео:

Цель такого подхода к дизайну — делать все элементы взаимозаменяемыми компонентами, а также освоить принцип вложенности элементов

Часть 2. Инструмент разработчика и структура HTML-страницы

Часть 3. Каскадность стилей

Часть 4. Вспомогательный код

Важно!

Для работы скриптов нужно будет поставить библиотеку jquery (упрощатель для написания скриптов). Вставляется он либо как хтмл-блок в самый верх таплинка, либо в настройках таплинка для всех страниц сразу. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Коды для вставки внутрь секции:

Создаст две колонки в ПК-версии

<div class="oneway-left-handed"></div>

Создаст в левой колонке 1 элемент, остальные засунет в правую

<div class="oneway-left-1"></div>

Создаст в левой колонке 2 элемента, остальные засунет в правую

<div class="oneway-left-2"></div>

Создаст в левой колонке 3 элемента, остальные засунет в правую

<div class="oneway-left-3"></div>

Создаст в левой колонке 4 элемента, остальные засунет в правую

<div class="oneway-left-4"></div>

Создаст 2 колонки, в которой ВСЕГДА в ПК версии сверху будут текстовые элементы, потом картинки, потом кнопки

<div class="oneway-left-handed ordered"></div>

Создаст 4 колонки в ПК-версии, а на мобильном элементы будут вертикально 

<div class="oneway-4-columns"></div>

Создаст 4 колонки в ПК-версии, а на мобильном элементы будут прокручиваться

<div class="oneway-4-columns oneway-4-slider"></div>

Чтобы картинка в левой колонке была прижата вправо

<div class="oneway-left-image"></div>

Код стилей:

<style>
@media (max-width:1200px) {
   .oneway-column,.oneway-grid {
padding-top: 0.5rem;
 padding-bottom: 0.5rem;
  }
 .mob-columns .oneway-grid {
display: flex;
   overflow-x:scroll;
  }
  .mob-columns .oneway-grid>div {
    margin-right:2em;
    max-width:70vw;
  }
  .mob-columns .oneway-grid>div:nth-last-child(2) {
   margin-right:0; 
  }
}
@media (min-width:1200px) {
  .page-container {
    max-width: 1200px;
    width: 100%;
}
 .oneway-column {
    display:flex;
    flex-direction:column;
  }
   .ordered .oneway-column .block-text {
order:1;
  }
  .ordered .oneway-column .block-banner,.ordered .oneway-column .block-video {
    order:2;
  }
  .ordered .oneway-column .block-link {
    order:3;
  }
  
  
  .oneway-row {
    display:flex;
    align-items:center;
    justify-content:center;
       
  } 
  
  .oneway-row>div:nth-child(1) {
padding-right:15px;
  }
   .oneway-row>div:nth-child(2) {
padding-left:15px;
  }
  .oneway-row>div {
    width:50%;
  }
  .oneway-row .block-link{
  /*  max-width:400px;*/
  }
 .oneway-row .block-banner-inner {
/*    width:300px!important;
  margin-right:0;
   */
  }
  h2.is-heading.block-text {
 /* font-size: 46px!important;
line-height: 56px!important;
   margin-bottom:40px;*/
} 
  .block-text.is-textable:not(.is-headline) {
  /*  font-style: normal;
font-weight: 400;
font-size: 16px!important;
line-height: 20px!important;
color: #FFFFFF;
    margin-bottom:20px;*/
  }
  .oneway-grid {display:flex;flex-wrap:wrap;align-items:flex-start;
  justify-content:space-between;
  }
  .oneway-grid .block-banner-inner {
    width: calc(300px - 20px)!important;
  border-radius:40px;
  }
   .left-image .oneway-row .block-link::after {
   /* display:none;*/
  }
}
  .oneway-grid .block-item:first-child {
    padding-top: 0.5rem;
}
  .oneway-grid .block-item:nth-last-child(1) {
display:none;
}
</style>

Код скриптов:

<script>
  $('.ordered').closest('.blocks-section').addClass('ordered')
  $('.oneway-4-slider').closest('.blocks-section').addClass('mob-columns')
    $('.oneway-left-handed').closest('.blocks-section').addClass('left-handed')
  $('.oneway-left-image').closest('.blocks-section').addClass('left-image')
 $('.oneway-left-4').closest('.blocks-section').addClass('left-4')
  $('.oneway-left-handed').closest('.blocks-section').addClass('left-handed')
 $('.oneway-left-3').closest('.blocks-section').addClass('left-3')
   $('.oneway-left-2').closest('.blocks-section').addClass('left-2')
   $('.oneway-left-1').closest('.blocks-section').addClass('left-1')
   $('.left-4').each(function(){
$(this).find($(`.block-item:nth-child(1)`)).wrap('<div dataiparts="4" class="oneway-column"/>').parent()
  $(this).find($(`.oneway-column`)).append($(this).find($(`.block-item:nth-child(3)`)))
 $(this).find($(`.oneway-column`)).append($(this).find($(`.block-item:nth-child(2)`)))
   $(this).find($(`.oneway-column`)).append($(this).find($(`.block-item:nth-child(2)`)))
 $(this).find( $('.oneway-column')).parent().addClass('oneway-row')
  $(this).find( $('.oneway-row>.block-item')).wrapAll(`<div class="oneway-column"/>`)
})
  
  $('.left-3').each(function(){
$(this).find($(`.block-item:nth-child(1)`)).wrap('<div dataiparts="3" class="oneway-column"/>').parent()
  $(this).find($(`.oneway-column`)).append($(this).find($(`.block-item:nth-child(2)`)))
 $(this).find($(`.oneway-column`)).append($(this).find($(`.block-item:nth-child(2)`)))
 $(this).find( $('.oneway-column')).parent().addClass('oneway-row')
  $(this).find( $('.oneway-row>.block-item')).wrapAll(`<div class="oneway-column"/>`)
})
 
   $('.left-2').each(function(){
$(this).find($(`.block-item:nth-child(1)`)).wrap('<div dataiparts="2" class="oneway-column"/>').parent()
  $(this).find($(`.oneway-column`)).append($(this).find($(`.block-item:nth-child(2)`)))

 $(this).find( $('.oneway-column')).parent().addClass('oneway-row')
  $(this).find( $('.oneway-row>.block-item')).wrapAll(`<div class="oneway-column"/>`)
})
  
   $('.left-1').each(function(){
$(this).find($(`.block-item:nth-child(1)`)).wrap('<div dataiparts="1" class="oneway-column"/>').parent()

 $(this).find( $('.oneway-column')).parent().addClass('oneway-row')
  $(this).find( $('.oneway-row>.block-item')).wrapAll(`<div class="oneway-column"/>`)
})
  
    $('.oneway-4-columns').closest('.blocks-section').addClass('grid-columns')
 $('.grid-columns').each(function(){
$(this).find($('.block-item')).wrapAll('<div class="oneway-grid"/>')
})
  

</script>

Код из урока:

u {
font-weight: 700;
background: linear-gradient(91.57deg, #C0B7E8 -1.02%, #8176AF 36.25%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}



@media (min-width:1200px){
   h2.is-heading.block-text {
  font-size: 46px!important;
line-height: 56px!important;
   margin-bottom:40px;
} 
  .block-text.is-textable:not(.is-headline) {
    font-style: normal;
font-weight: 400;
font-size: 16px!important;
line-height: 20px!important;
color: #FFFFFF;
    margin-bottom:20px;
  }
  .oneway-row .block-banner-inner {
 width: 300px!important;
    margin-right:0;
}
   .oneway-row .block-banner-inner .picture-container {
filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.25));
}
 .oneway-row .block-link {
 max-width: 250px;
   margin-bottom:25px;
   position:relative;
} 
  .oneway-row .block-link::after {
content:url("data:image/svg+xml,%3Csvg width='53' height='21' viewBox='0 0 53 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_123_53)'%3E%3Cpath d='M44.0607 11.5607C44.6464 10.9749 44.6464 10.0251 44.0607 9.43934L34.5147 -0.106602C33.9289 -0.692389 32.9792 -0.692389 32.3934 -0.106602C31.8076 0.479185 31.8076 1.42893 32.3934 2.01472L40.8787 10.5L32.3934 18.9853C31.8076 19.5711 31.8076 20.5208 32.3934 21.1066C32.9792 21.6924 33.9289 21.6924 34.5147 21.1066L44.0607 11.5607ZM10 12H43V9H10V12Z' fill='%23C0B7E8'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_123_53'%3E%3Crect width='53' height='20' fill='white' transform='translate(0 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
    position:absolute;
    top:25px;
    right:-100px;

}  
  .grid-columns .picture-container {
    border-radius:40px;
    filter: drop-shadow(5px 5px 10px rgba(208, 59, 247, 0.5));
  }
  
  .left-image .oneway-row .block-banner-inner {
    margin-right: auto;
 }
  .left-image .oneway-row .block-link::after {
    display:none;
  }
  
  div[dataiparts="2"] h2.is-heading.block-text {
    margin-bottom: 10px;
}
  .block-form {
    max-width:800px;
    margin:auto;
  }
}
@onthewaytothesun
February 7, 2023, 06:49
0 views
4 reactions
0 replies
0 reposts