projekte
/
oho
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added category and "to my list" button to search result item

This commit is contained in:
bmen 2019-04-18 17:21:03 +02:00
parent 28714227c5
commit b63878f0ce
2 changed files with 45 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
index.html
View File

@ -77,6 +77,8 @@
<div class="search-results-item"> <div class="search-results-item">
<div class="search-results-item-img"> <div class="search-results-item-img">
<a href="detail.html"><img src="img/thumb01.jpg" /></a> <a href="detail.html"><img src="img/thumb01.jpg" /></a>
<div class="to-my-list"><a href="#">To my list</a></div>
<div class="category">class: <a href="#">DIY</a></div>
</div> </div>
<div class="search-results-item-info"> <div class="search-results-item-info">
<h2><span>Aserradero portatil Bolport Rm100</span></h2> <h2><span>Aserradero portatil Bolport Rm100</span></h2>
@ -114,6 +116,8 @@
<div class="search-results-item"> <div class="search-results-item">
<div class="search-results-item-img"> <div class="search-results-item-img">
<a href="detail.html"><img src="img/thumb02.jpg" /></a> <a href="detail.html"><img src="img/thumb02.jpg" /></a>
<div class="to-my-list"><a href="#">To my list</a></div>
<div class="category">class: <a href="#">DIY</a></div>
</div> </div>
<div class="search-results-item-info"> <div class="search-results-item-info">
<h2><span>Aserradero portatil Bolport Rm100</span></h2> <h2><span>Aserradero portatil Bolport Rm100</span></h2>
@ -151,6 +155,8 @@
<div class="search-results-item"> <div class="search-results-item">
<div class="search-results-item-img"> <div class="search-results-item-img">
<a href="detail.html"><img src="img/thumb03.jpg" /></a> <a href="detail.html"><img src="img/thumb03.jpg" /></a>
<div class="to-my-list"><a href="#">To my list</a></div>
<div class="category">class: <a href="#">DIY</a></div>
</div> </div>
<div class="search-results-item-info"> <div class="search-results-item-info">
<h2><span>Aserradero portatil Bolport Rm100</span></h2> <h2><span>Aserradero portatil Bolport Rm100</span></h2>
@ -188,6 +194,8 @@
<div class="search-results-item"> <div class="search-results-item">
<div class="search-results-item-img"> <div class="search-results-item-img">
<a href="detail.html"><img src="img/thumb04.jpg" /></a> <a href="detail.html"><img src="img/thumb04.jpg" /></a>
<div class="to-my-list"><a href="#">To my list</a></div>
<div class="category">class: <a href="#">DIY</a></div>
</div> </div>
<div class="search-results-item-info"> <div class="search-results-item-info">
<h2><span>Aserradero portatil Bolport Rm100</span></h2> <h2><span>Aserradero portatil Bolport Rm100</span></h2>
@ -225,6 +233,8 @@
<div class="search-results-item"> <div class="search-results-item">
<div class="search-results-item-img"> <div class="search-results-item-img">
<a href="detail.html"><img src="img/thumb05.jpg" /></a> <a href="detail.html"><img src="img/thumb05.jpg" /></a>
<div class="to-my-list"><a href="#">To my list</a></div>
<div class="category">class: <a href="#">DIY</a></div>
</div> </div>
<div class="search-results-item-info"> <div class="search-results-item-info">
<h2><span>Aserradero portatil Bolport Rm100</span></h2> <h2><span>Aserradero portatil Bolport Rm100</span></h2>
@ -262,6 +272,8 @@
<div class="search-results-item"> <div class="search-results-item">
<div class="search-results-item-img"> <div class="search-results-item-img">
<a href="detail.html"><img src="img/thumb06.jpg" /></a> <a href="detail.html"><img src="img/thumb06.jpg" /></a>
<div class="to-my-list"><a href="#">To my list</a></div>
<div class="category">class: <a href="#">DIY</a></div>
</div> </div>
<div class="search-results-item-info"> <div class="search-results-item-info">
<h2><span>Aserradero portatil Bolport Rm100</span></h2> <h2><span>Aserradero portatil Bolport Rm100</span></h2>
@ -299,6 +311,8 @@
<div class="search-results-item"> <div class="search-results-item">
<div class="search-results-item-img"> <div class="search-results-item-img">
<a href="detail.html"><img src="img/thumb07.jpg" /></a> <a href="detail.html"><img src="img/thumb07.jpg" /></a>
<div class="to-my-list"><a href="#">To my list</a></div>
<div class="category">class: <a href="#">DIY</a></div>
</div> </div>
<div class="search-results-item-info"> <div class="search-results-item-info">
<h2><span>Aserradero portatil Bolport Rm100</span></h2> <h2><span>Aserradero portatil Bolport Rm100</span></h2>

31
style.css
View File

@ -381,6 +381,37 @@ body > .row ~ .row {
.search-results-item .search-results-item-img { .search-results-item .search-results-item-img {
border-top-left-radius:7px; border-top-left-radius:7px;
border-top-right-radius:7px; border-top-right-radius:7px;
position: relative;
}
.search-results-item .search-results-item-img .to-my-list,
.search-results-item .search-results-item-img .category {
display: none;
position: absolute;
right:0;
width:auto;
padding:6px 10px;
}
.search-results-item:hover .search-results-item-img .to-my-list,
.search-results-item:hover .search-results-item-img .category {
display: inline-block;
}
.search-results-item .search-results-item-img .to-my-list {
top:0;
background:#002b3e;
border-top-right-radius:7px;
border-bottom-left-radius:7px;
}
.search-results-item .search-results-item-img .category {
bottom:3px;
background:#fff;
border-radius: none;
}
.search-results-item .search-results-item-img .to-my-list a {
color:#fff;
font-weight: bold;
}
.search-results-item .search-results-item-img .category a {
font-weight: bold;
} }
.search-results-item .search-results-item-img img { .search-results-item .search-results-item-img img {
-webkit-clip-path:inset(33px 0 33px 0); -webkit-clip-path:inset(33px 0 33px 0);