<!--views/front/search.ejs-->
<link rel="stylesheet" href="/styles/front/search.css" />
<section class="Search">
<% if(data.items){ %>
<ul class="newest">
<% for(let item of data.items){ %>
<li class="item">
<a class="thumb" href="/post/<%= item.id %>">
<img src="<%= item.thumb %>" />
<% if((item.video)&&(item.video !== '[]')){ %>
<img class="play-icon" src="/images/play.png"/>
<% } %>
</a>
<div>
<a class="title" href="/post/<%= item.id %>">
<%= item.title %>
</a>
<p class="price">$<%= item.price %></p>
<p class="postdate"><%= (new Date(item.postdate)).toLocaleDateString('it-IT') %></p>
</div>
</li>
<% } %>
</ul>
<% } %>
</section>
/* static/front/search.css */
.Search .newest{
display: grid;
grid-template-columns: calc(50% - 7.5px) calc(50% - 7.5px);
grid-gap: 15px;
padding-bottom: 45px;
}
.Search .newest .item{
display: grid;
grid-template-columns: 30% auto;
grid-gap: 15px;
align-items: center;
background: var(--background);
}
.Search .newest .item .thumb{
display: block;
position: relative;
padding-top: 56.25%;
}
.Search .newest .item .thumb img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.Search .newest .item .thumb .play-icon{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 25%;
height: auto;
}
.Search .newest .item div{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 15px;
}
.Search .newest .item div .title{
color: black;
}
.Search .newest .item div .price{
color: darkred;
}
@media only screen and (max-width:600px){
.Search .newest,
.Search .newest .item{
grid-template-columns: 100%;
padding: 15px;
}
.Search .newest .item .thumb .play-icon{
width: 20%;
}
}