add frontend source display
This commit is contained in:
parent
98634c4687
commit
5ddc5960ae
20 changed files with 119 additions and 14 deletions
|
@ -36,7 +36,11 @@
|
|||
</div>
|
||||
<div class="entity-card__info-wrapper entity-card__info-wrapper--horizontal">
|
||||
|
||||
<h5 class="entity-card__title"><a href="{% url 'books:retrieve' book.id %}">{{ book.title }}</a></h5>
|
||||
<h5 class="entity-card__title"><a href="{% url 'books:retrieve' book.id %}">{{ book.title }}</a>
|
||||
<a href="{{ book.source_url }}">
|
||||
<span class="source-label source-label__{{ book.source_site }}">{{ book.get_source_site_display }}</span>
|
||||
</a>
|
||||
</h5>
|
||||
<div>{% if book.isbn %}{% trans 'ISBN:' %}{{ book.isbn }}{% endif %}</div>
|
||||
<div>{% if book.author %}{% trans '作者:' %}
|
||||
{% for author in book.author %}
|
||||
|
|
|
@ -40,6 +40,9 @@
|
|||
<a href="{% url 'books:retrieve' book.id %}">
|
||||
<h5 class="entity-card__title">
|
||||
{{ book.title }}
|
||||
<a href="{{ book.source_url }}">
|
||||
<span class="source-label source-label__{{ book.source_site }}">{{ book.get_source_site_display }}</span>
|
||||
</a>
|
||||
</h5>
|
||||
</a>
|
||||
{% if book.rating %}
|
||||
|
|
|
@ -50,6 +50,9 @@
|
|||
<div class="entity-detail__info">
|
||||
<h5 class="entity-detail__title">
|
||||
{{ book.title }}
|
||||
<a href="{{ book.source_url }}">
|
||||
<span class="source-label source-label__{{ book.source_site }}">{{ book.get_source_site_display }}</span>
|
||||
</a>
|
||||
</h5>
|
||||
|
||||
<div class="entity-detail__fields">
|
||||
|
|
|
@ -106,7 +106,11 @@
|
|||
<a href="{% url 'books:retrieve' book.id %}"><img src="{{ book.cover.url }}" alt="" class="entity-card__img"></a>
|
||||
</div>
|
||||
<div class="entity-card__info-wrapper">
|
||||
<h5 class="entity-card__title"><a href="{% url 'books:retrieve' book.id %}">{{ book.title }}</a></h5>
|
||||
<h5 class="entity-card__title"><a href="{% url 'books:retrieve' book.id %}">{{ book.title }}</a>
|
||||
<a href="{{ book.source_url }}">
|
||||
<span class="source-label source-label__{{ book.source_site }}">{{ book.get_source_site_display }}</span>
|
||||
</a>
|
||||
</h5>
|
||||
|
||||
{% if book.isbn %}
|
||||
<div>ISBN: {{ book.isbn }}</div>
|
||||
|
|
|
@ -37,6 +37,9 @@
|
|||
<div class="review-head">
|
||||
<h5 class="review-head__title">
|
||||
{{ review.title }}
|
||||
<a href="{{ book.source_url }}">
|
||||
<span class="source-label source-label__{{ book.source_site }}">{{ book.get_source_site_display }}</span>
|
||||
</a>
|
||||
</h5>
|
||||
{% if review.is_private %}
|
||||
<span class="icon-lock"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><svg
|
||||
|
|
|
@ -92,7 +92,11 @@
|
|||
class="entity-card__img"></a>
|
||||
</div>
|
||||
<div class="entity-card__info-wrapper">
|
||||
<h5 class="entity-card__title"><a href="{% url 'books:retrieve' book.id %}">{{ book.title }}</a></h5>
|
||||
<h5 class="entity-card__title"><a href="{% url 'books:retrieve' book.id %}">{{ book.title }}</a>
|
||||
<a href="{{ book.source_url }}">
|
||||
<span class="source-label source-label__{{ book.source_site }}">{{ book.get_source_site_display }}</span>
|
||||
</a>
|
||||
</h5>
|
||||
|
||||
{% if book.isbn %}
|
||||
<div>ISBN: {{ book.isbn }}</div>
|
||||
|
|
|
@ -1112,6 +1112,33 @@ select::placeholder {
|
|||
}
|
||||
}
|
||||
|
||||
.source-label {
|
||||
display: inline;
|
||||
background: transparent;
|
||||
border-radius: .3rem;
|
||||
border-style: solid;
|
||||
border-width: .1rem;
|
||||
line-height: 1.2rem;
|
||||
font-size: 1.1rem;
|
||||
margin: 3px;
|
||||
padding: 1px 3px;
|
||||
padding-top: 2px;
|
||||
font-weight: lighter;
|
||||
letter-spacing: 0.1rem;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
.source-label.source-label__in-site {
|
||||
border-color: #00a1cc;
|
||||
color: #00a1cc;
|
||||
}
|
||||
|
||||
.source-label.source-label__douban {
|
||||
border-color: #319840;
|
||||
color: #319840;
|
||||
}
|
||||
|
||||
.main-section-wrapper {
|
||||
padding: 32px 48px 32px 36px;
|
||||
background-color: #f7f7f7;
|
||||
|
@ -1532,8 +1559,7 @@ select::placeholder {
|
|||
}
|
||||
|
||||
.tag-collection {
|
||||
position: relative;
|
||||
left: -3px;
|
||||
margin-left: -9px;
|
||||
}
|
||||
|
||||
.tag-collection .tag-collection__tag {
|
||||
|
@ -1609,6 +1635,7 @@ select::placeholder {
|
|||
}
|
||||
.entity-detail .entity-detail__fields {
|
||||
width: unset;
|
||||
margin-left: unset;
|
||||
}
|
||||
.dividing-line {
|
||||
margin-top: 24px;
|
||||
|
@ -1626,6 +1653,9 @@ select::placeholder {
|
|||
.review-head .review-head__actions {
|
||||
float: unset;
|
||||
}
|
||||
.tag-collection {
|
||||
margin-left: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
|
|
2
common/static/css/boofilsic.min.css
vendored
2
common/static/css/boofilsic.min.css
vendored
File diff suppressed because one or more lines are too long
29
common/static/sass/_Label.sass
Normal file
29
common/static/sass/_Label.sass
Normal file
|
@ -0,0 +1,29 @@
|
|||
// source label name should match the enum value in `common.models.SourceSiteEnum`
|
||||
|
||||
$douban-color: #319840
|
||||
$in-site-color: $color-primary
|
||||
|
||||
.source-label
|
||||
display: inline
|
||||
background: transparent
|
||||
border-radius: .3rem
|
||||
border-style: solid
|
||||
border-width: .1rem
|
||||
line-height: 1.2rem
|
||||
font-size: 1.1rem
|
||||
margin: 3px
|
||||
padding: 1px 3px
|
||||
padding-top: 2px;
|
||||
font-weight: lighter;
|
||||
letter-spacing: 0.1rem;
|
||||
|
||||
position: relative;
|
||||
top: -1px;
|
||||
|
||||
&.source-label__in-site
|
||||
border-color: $in-site-color
|
||||
color: $in-site-color
|
||||
&.source-label__douban
|
||||
border-color: $douban-color
|
||||
color: $douban-color
|
||||
&.source-label__amazon
|
|
@ -352,9 +352,7 @@ $mark-review-padding-wider: 6px 0
|
|||
|
||||
// tag list
|
||||
.tag-collection
|
||||
$tag-margin: 3px
|
||||
position: relative
|
||||
left: -$tag-margin
|
||||
margin-left: -9px
|
||||
& &__tag
|
||||
position: relative;
|
||||
display: block;
|
||||
|
@ -406,6 +404,7 @@ $mark-review-padding-wider: 6px 0
|
|||
max-width: 170px;
|
||||
& &__fields
|
||||
width: unset
|
||||
margin-left: unset
|
||||
|
||||
.entity-marks
|
||||
& &__mark-list
|
||||
|
@ -433,6 +432,9 @@ $mark-review-padding-wider: 6px 0
|
|||
float: unset
|
||||
& &__actions
|
||||
float: unset
|
||||
|
||||
.tag-collection
|
||||
margin-left: -3px
|
||||
// Medium devices (tablets, 768px and up)
|
||||
@media (max-width: $medium-devices)
|
||||
pass
|
||||
|
|
|
@ -24,6 +24,7 @@
|
|||
@import Footer
|
||||
@import Icon
|
||||
@import Modal
|
||||
@import Label
|
||||
|
||||
// boofilsic modules
|
||||
@import MainSection
|
||||
|
|
|
@ -64,10 +64,14 @@
|
|||
{% else %}
|
||||
{{ book.title }}
|
||||
{% endif %}
|
||||
|
||||
</a>
|
||||
{% if not request.GET.c or request.GET.c != 'movie' and request.GET.c != 'book'%}
|
||||
<span class="entity-list__entity-category">[{{item.verbose_category_name}}]</span>
|
||||
{% endif %}
|
||||
<a href="{{ book.source_url }}">
|
||||
<span class="source-label source-label__{{ book.source_site }}">{{ book.get_source_site_display }}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% if book.rating %}
|
||||
|
@ -161,7 +165,9 @@
|
|||
{% if not request.GET.c or request.GET.c != 'movie' and request.GET.c != 'book'%}
|
||||
<span class="entity-list__entity-category">[{{item.verbose_category_name}}]</span>
|
||||
{% endif %}
|
||||
|
||||
<a href="{{ movie.source_url }}">
|
||||
<span class="source-label source-label__{{ movie.source_site }}">{{ movie.get_source_site_display }}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{% if movie.rating %}
|
||||
|
|
|
@ -49,7 +49,9 @@
|
|||
{{ movie.title }} {{ movie.orig_title }}
|
||||
{% if movie.year %}({{ movie.year }}){% endif %}
|
||||
{% endif %}
|
||||
</a></h5>
|
||||
</a>
|
||||
<a href="{{ movie.source_url }}"><a href="{{ movie.source_url }}"><span class="source-label source-label__{{ movie.source_site }}">{{ movie.get_source_site_display }}</span></a></a>
|
||||
</h5>
|
||||
<div>{% if movie.director %}{% trans '导演:' %}
|
||||
{% for director in movie.director %}
|
||||
<span {% if forloop.counter > 5 %}style="display: none;" {% endif %}>
|
||||
|
|
|
@ -49,6 +49,7 @@
|
|||
{{ movie.title }} {{ movie.orig_title }}
|
||||
{% if movie.year %}({{ movie.year }}){% endif %}
|
||||
{% endif %}
|
||||
<a href="{{ movie.source_url }}"><span class="source-label source-label__{{ movie.source_site }}">{{ movie.get_source_site_display }}</span></a>
|
||||
</h5>
|
||||
</a>
|
||||
{% if movie.rating %}
|
||||
|
|
|
@ -72,6 +72,7 @@
|
|||
{% if movie.year %}({{ movie.year }}){% endif %}
|
||||
</span>
|
||||
{% endif %}
|
||||
<a href="{{ movie.source_url }}"><span class="source-label source-label__{{ movie.source_site }}">{{ movie.get_source_site_display }}</span></a>
|
||||
</h5>
|
||||
|
||||
<div class="entity-detail__fields">
|
||||
|
|
|
@ -117,7 +117,9 @@
|
|||
{{ movie.title }} {{ movie.orig_title }}
|
||||
{% if movie.year %}({{ movie.year }}){% endif %}
|
||||
{% endif %}
|
||||
</a></h5>
|
||||
</a>
|
||||
<a href="{{ movie.source_url }}"><span class="source-label source-label__{{ movie.source_site }}">{{ movie.get_source_site_display }}</span></a>
|
||||
</h5>
|
||||
|
||||
<div>{% if movie.director %}{% trans '导演:' %}
|
||||
{% for director in movie.director %}
|
||||
|
|
|
@ -96,7 +96,9 @@
|
|||
{{ movie.title }} {{ movie.orig_title }}
|
||||
{% if movie.year %}({{ movie.year }}){% endif %}
|
||||
{% endif %}
|
||||
</a></h5>
|
||||
</a>
|
||||
<a href="{{ movie.source_url }}"><span class="source-label source-label__{{ movie.source_site }}">{{ movie.get_source_site_display }}</span></a>
|
||||
</h5>
|
||||
|
||||
<div>{% if movie.director %}{% trans '导演:' %}
|
||||
{% for director in movie.director %}
|
||||
|
|
|
@ -103,7 +103,9 @@
|
|||
{{ movie.title }} {{ movie.orig_title }}
|
||||
{% if movie.year %}({{ movie.year }}){% endif %}
|
||||
{% endif %}
|
||||
</a></h5>
|
||||
</a>
|
||||
<a href="{{ movie.source_url }}"><span class="source-label source-label__{{ movie.source_site }}">{{ movie.get_source_site_display }}</span></a>
|
||||
</h5>
|
||||
|
||||
<div>{% if movie.director %}{% trans '导演:' %}
|
||||
{% for director in movie.director %}
|
||||
|
|
|
@ -54,6 +54,9 @@
|
|||
<a href="{% url 'books:retrieve' mark.book.id %}" class="entity-list__entity-link">
|
||||
{{ mark.book.title }}
|
||||
</a>
|
||||
<a href="{{ mark.book.source_url }}">
|
||||
<span class="source-label source-label__{{ mark.book.source_site }}">{{ mark.book.get_source_site_display }}</span>
|
||||
</a>
|
||||
</div>
|
||||
{% comment %}
|
||||
<!-- {% if mark.book.rating %}
|
||||
|
|
|
@ -64,6 +64,9 @@
|
|||
{% if mark.movie.year %}({{ mark.movie.year }}){% endif %}
|
||||
{% endif %}
|
||||
</a>
|
||||
<a href="{{ mark.movie.source_url }}">
|
||||
<span class="source-label source-label__{{ mark.movie.source_site }}">{{ mark.movie.get_source_site_display }}</span>
|
||||
</a>
|
||||
</div>
|
||||
<span class="entity-list__entity-info entity-list__entity-info--full-length">
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue