Volume Badges WIP
This commit is contained in:
parent
e2a6f2ec08
commit
c5c0a94395
|
@ -12,3 +12,35 @@
|
|||
* > p:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
.volume-item {
|
||||
&:not(.user-have-it) {
|
||||
.badges { display: none; }
|
||||
|
||||
&:hover .badges {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&
|
||||
|
||||
.badges {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: -10px;
|
||||
.badge {
|
||||
@size: 34px;
|
||||
|
||||
border: #FFF 3px solid;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
font-size: @size/1.5;
|
||||
height: @size;
|
||||
line-height: (@size)-3px;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
width: @size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -44,14 +44,39 @@
|
|||
<div class="row">
|
||||
{% for volume in item.volumes.all %}
|
||||
<div class="col-sm-3">
|
||||
<div class="well text-center">
|
||||
<div class="well text-center volume-item user-have-it">
|
||||
<div class="badges">
|
||||
<span class="badge badge-success">
|
||||
<i class="glyphicon glyphicon-ok"></i>
|
||||
</span>
|
||||
<span class="badge badge-warning">
|
||||
<i class="glyphicon glyphicon-star"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div><strong>{% trans "Volume" %} {{ volume.number }}</strong></div>
|
||||
<img src="{% thumbnail volume.cover 150x150 %}" class="max-width-80" />
|
||||
<button class="btn btn-primary btn-xs">{% trans "Details" %}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% for volume in item.volumes.all %}
|
||||
<div class="col-sm-3">
|
||||
<div class="well text-center volume-item">
|
||||
<div class="badges">
|
||||
<span class="badge">
|
||||
<i class="glyphicon glyphicon-ok"></i>
|
||||
</span>
|
||||
<span class="badge">
|
||||
<i class="glyphicon glyphicon-star"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div><strong>{% trans "Volume" %} {{ volume.number }}</strong></div>
|
||||
<img src="{% thumbnail volume.cover 150x150 %}" class="max-width-80" />
|
||||
<button class="btn btn-primary btn-xs">{% trans "Details" %}</button>
|
||||
</div>
|
||||
<br />
|
||||
<button class="btn btn-primary btn-xs">{% trans "I have it!" %}</button>
|
||||
<button class="btn btn-warning btn-xs">{% trans "I want it!" %}</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
|
Reference in New Issue