add frontend source display

This commit is contained in:
doubaniux 2020-11-28 18:18:13 +01:00
parent 98634c4687
commit 5ddc5960ae
20 changed files with 119 additions and 14 deletions

View file

@ -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 %}

View file

@ -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 %}

View file

@ -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">

View file

@ -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>

View file

@ -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

View file

@ -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>

View file

@ -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) {

File diff suppressed because one or more lines are too long

View 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

View file

@ -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

View file

@ -24,6 +24,7 @@
@import Footer
@import Icon
@import Modal
@import Label
// boofilsic modules
@import MainSection

View file

@ -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 %}

View file

@ -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 %}>

View file

@ -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 %}

View file

@ -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">

View file

@ -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 %}

View file

@ -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 %}

View file

@ -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 %}

View file

@ -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 %}

View file

@ -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">