There is a website
$(document).ready(function() {
/*
all__buttons=document.querySelectorAll('.header__button');
[].forEach.call(all__buttons, function(selected__button){
selected__button.addEventListener('click', function(event){
event.target.style.backgroundColor='#5f3ec0';
event.target.style.color='#ffffff';
});
});
*/
$('.header__button').click(function(event){
$('.header__button').removeClass('lilac');
$(this).addClass('lilac');
event.target.style.color='#ffffff';
}
);
const getItem = `<div class="cardexample">
<div class="mobileimage">
<img class="mobiles" src="../img/mobileimage.png">
</div>
<div class="content__title">
Iphone 11, почему такой же как и Pro Max, может быть большим в 3 строки вот так
</div>
<div class="video__icon">
<span>
<button class="crashvideo">Краш видео</button>
</span>
<span>
<a href="#"><img class="youtube__icon-play" src="../img/Vector.png"></a>
</span>
<span>
<button class="crashvideo" id="ex2">Краш видео</button>
</span>
</div>
<div class="content__text">
Видео разбор с ответами на самые часто задаваемые вопросы может быть большим в 3 строки, видео разбор с ответами на самые часто задаваемые
</div>
<div class="endlink">
<a href="#">Читать далее</a>
</div>
</div>
`;
if (document.documentElement.clientWidth<640)
{
const getAllItems = () => {
let content = '';
for (let i=0; i<4; i++) {
content+=getItem;
}
return content;
}
const renderAllItems = () => {
document.getElementById('content').innerHTML=getAllItems();
}
renderAllItems();
console.log('Mobile');
}
if ((window.innerWidth>=640) && (window.innerWidth<=1023))
{
/*document.getElementsByClassName('content__article').innerHTML = getItem;*/
/*document.querySelectorAll('.content__article').forEach(i => i.innerHTML = getItem);*/
let blocks = document.querySelectorAll('.content__article');
for (let block of blocks)
{
block.innerHTML=getItem;
/*document.querySelectorAll('.content__article')[i].innerHTML = getItem;*/
}
console.log('Tablet');
}
console.log('Desktop');
}
)body {
margin: 0;
padding: 0;
}
:root {
--containerfullwidth: 768;
}
.globalcontainer {
margin-top: 0px;
margin-right: calc((39/var(--containerfullwidth)*100)*1%);
margin-bottom: 0px;
margin-left: calc((39/var(--containerfullwidth)*100)*1%);
/*height: 100%;*/
}
.header > .header__text {
position: relative;
width: 93px;
height: 24px;
left: 0;
margin-top: 129px;
margin-bottom: 20px;
font-family: TT Norms;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 100%;
/* identical to box height, or 24px */
color: #000000;
}
/*
.header__buttons {
left: 0;
top: 193px;
}
*/
.header__button {
width: 75px;
height: 30px;
border-radius: 4px;
border-color: #5f3ec0;
background-color: #fff;
margin-right: 1.75%;
display: flex;
justify-content: center;
align-items: center;
white-space: nowrap;
}
.header__buttons {
display: flex;
flex-direction: row;
align-items: center;
padding: 7px 15px 7px 0px;
overflow: hidden;
/*margin-right: 10%;*/
}
.content {
width: 100%;
}
.cardexample {
width: 100%;
}
.mobileimage img{
max-width: 100%;
height: auto;
}
.mobiles {
max-width: 100%;
}
.content__title {
font-family: TTNorms-Medium;
font-style: normal;
font-weight: bold;
font-size: 18px;
line-height: 21.6px;
margin: 0.3% 15px 0 15px;
}
.crashvideo {
width: 115px;
height: 30px;
border-radius: 4px;
margin-top: 15px;
background-color: #5f3ec0;
color: #ffffff;
}
.video__icon {
margin-left: 15px;
display: flex;
flex-direction: row;
align-items: center;
}
#ex2 {
display: none;
}
.youtube__icon-play {
margin-left: auto;
margin-right: auto;
margin-top: 20.5px;
width: 25px;
height: 18.75px;
align: center;
}
.content__text {
margin-top: 16px;
text-align: left;
margin-left: 15px;
margin-right: 90px;
font-family: TT Norms;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 150%;
/* or 22px */
/* Main text */
color: #cacaca;
}
.endlink {
margin-top: 20px;
margin-left: 15px;
margin-bottom: 20px;
font-family: TT Norms;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 100%;
color: #121212;
}
a {
text-decoration: none;
}
.endlink a {
color: #121212;
}
.endlink a:visited {
color: #800080;
}
.content {
display: grid;
grid-template-areas: 'content__parttext content__parttext'
'content__parttext content__parttext'
'content__parttext content__parttext'
'content__parttext content__parttext';
grid-template-columns: 50% 50%;
}
.content__article {
grid-area: content__parttext;
}<html>
<head>
<!-- <link rel="stylesheet" href="testsite.css">-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test Example</title>
<link rel="stylesheet" type="text/css" href="../css/mobile.css" media="screen and (min-width: 320px) and (max-width: 639px)"></link>
<link rel="stylesheet" type="text/css" href="../css/tablet.css" media="screen and (min-width: 640px) and (max-width: 1023px)"></link>
<link rel="stylesheet" type="text/css" href="../css/desktop.css" media="screen and (min-width: 1024px) and (max-width: 1920px)"></link>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="container">
<div class="globalcontainer">
<div class="header">
<div class="header__text">
Обзоры
</div>
<div class="header__buttons">
<!-- <span> -->
<button class="header__button">Все</button>
<button class="header__button">Видео</button>
<button class="header__button">Текст</button>
<button class="header__button">Обзоры</button>
<button class="header__button">Сравнения</button>
<button class="header__button">Краш видео</button>
<button class="header__button">Распаковка</button>
<!-- </span> -->
</div>
</div>
<div class="content" id="content">
<div class="content__article">
</div>
<div class="content__article">
</div>
<div class="content__article">
</div>
<div class="content__article">
</div>
<div class="content__article">
</div>
<div class="content__article">
</div>
<div class="content__article">
</div>
<div class="content__article">
</div>
</div>
</div>
<button class="show__more">Показать еще</button>
<!-- </div> -->
<div class="footer">
<div class="logo__company">
</div>
<div class="contacts">
<div class="contacts__title">
Контакты
</div>
<div class="contacts__telephones">
<div class="telephone1">
+7 (800) 333 32 24
</div>
<div class="telephone2">
+7 (812) 448 68 11
</div>
</div>
<button class="requestcall">
Заказать звонок
</button>
</div>
<div class="internetshop">
<div class="internetshop__title">
Интернет магазин
</div>
<div class="disclosure__arrow">
>
</div>
</div>
<div class="company">
<div class="company__title">
Компания
</div>
<div class="disclosure__arrow">
>
</div>
</div>
<div class="help__to__the__buyer">
<div class="help__to__the__buyer__title">
Помощь покупателю
</div>
<div class="disclosure__arrow">
>
</div>
</div>
<div class="socialnetworks__links">
<div class="socialnetworks__links__title">
Мы в соц. сетях
</div>
<div class="socialnetworks__links-images">
<div class="facebook-image">
<embed src="../img/facebook.svg">
</div>
</div>
</div>
<div class="allrights">
<div class="allrights__text">
© 2020 Все права защищены
</div>
</div>
</div>
</div>
<script type="text/javascript" src="jsactions.js"></script>
</body>
</html>
Should display as on https://www.figma.com/file/noqP1gzhrAlGAErPNBgknp/test?node-id=0%3A1. Tell me how to achieve the correct display. 8 blocks of content__article should be displayed (see html file - <div class="content__article"></div>), but 4 blocks are displayed on the output. (text ballast text ballast text ballast text ballast text ballast text ballast text ballast text ballast text ballast text ballast text ballast text ballast text ballast text ballast text ballast text ballast text ballast text ballast text ballast text ballast text ballast text ballast text ballast text ballast text ballast text ballast text ballast text ballast text ballast text ballast text ballast text ballast text ballast text ballast text ballast text ballast text ballast text ballast text ballast text ballast)
Aucun commentaire:
Enregistrer un commentaire