improve mobile view
This commit is contained in:
parent
6cffa069ce
commit
11e62cebef
4 changed files with 37 additions and 45 deletions
|
@ -100,16 +100,6 @@
|
|||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if item.contents %}
|
||||
<div class="entity-desc" id="contents">
|
||||
<h5 class="entity-desc__title">{% trans '目录' %}</h5>
|
||||
<p class="entity-desc__content">{{ item.contents | linebreaksbr }}</p>
|
||||
<div class="entity-desc__unfold-button entity-desc__unfold-button--hidden">
|
||||
<a href="javascript:void(0);">展开全部</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% block content %}
|
||||
{% if item.contents %}
|
||||
<div class="entity-desc" id="contents">
|
||||
|
|
|
@ -118,7 +118,7 @@ $(document).ready( function() {
|
|||
const button = $(".relation-dropdown__button");
|
||||
button.data("collapse", !button.data("collapse"));
|
||||
button.children('.icon-arrow').toggleClass("icon-arrow--expand");
|
||||
button.siblings('.relation-dropdown__body').toggleClass("relation-dropdown__body--expand");
|
||||
$('.relation-dropdown__body').toggleClass("relation-dropdown__body--expand");
|
||||
}
|
||||
$(".relation-dropdown__button").on('click', onClickDropdownButton);
|
||||
|
||||
|
|
|
@ -25,12 +25,12 @@ $aside-section-padding-mobile: 24px 25px 10px 25px
|
|||
& &__label
|
||||
font-size: 1.2em
|
||||
margin-bottom: 8px
|
||||
|
||||
|
||||
& &__button
|
||||
line-height: unset;
|
||||
height: unset;
|
||||
padding: 4px 15px;
|
||||
margin: 5px;
|
||||
margin: 5px;
|
||||
|
||||
.action-panel
|
||||
margin-bottom: 20px
|
||||
|
@ -54,7 +54,7 @@ $aside-section-padding-mobile: 24px 25px 10px 25px
|
|||
// width: 100%
|
||||
|
||||
.mark-panel
|
||||
margin-bottom: 20px
|
||||
margin-bottom: 20px
|
||||
|
||||
& &__status
|
||||
font-weight: bold
|
||||
|
@ -67,9 +67,9 @@ $aside-section-padding-mobile: 24px 25px 10px 25px
|
|||
float: right
|
||||
& form
|
||||
display: inline
|
||||
|
||||
|
||||
& &__time
|
||||
color: $color-light
|
||||
color: $color-light
|
||||
margin-bottom: 10px
|
||||
|
||||
& &__content
|
||||
|
@ -137,7 +137,7 @@ $aside-section-padding-mobile: 24px 25px 10px 25px
|
|||
& > a
|
||||
&:hover
|
||||
color: $color-secondary
|
||||
|
||||
|
||||
& &__related-user-avatar
|
||||
background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7")
|
||||
width: 48px
|
||||
|
@ -146,7 +146,7 @@ $aside-section-padding-mobile: 24px 25px 10px 25px
|
|||
height: unset
|
||||
width: 60%
|
||||
max-width: 96px
|
||||
|
||||
|
||||
|
||||
& &__related-user-name
|
||||
color: inherit
|
||||
|
@ -154,7 +154,7 @@ $aside-section-padding-mobile: 24px 25px 10px 25px
|
|||
text-overflow: ellipsis
|
||||
// display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-line-clamp: 2;
|
||||
|
||||
$panel-padding : 0
|
||||
|
||||
|
@ -167,10 +167,10 @@ $panel-padding : 0
|
|||
padding-left: $panel-padding
|
||||
|
||||
& &__report-list
|
||||
|
||||
|
||||
& &__report
|
||||
margin: 2px 0
|
||||
|
||||
|
||||
& &__user-link
|
||||
margin: 0 2px
|
||||
|
||||
|
@ -189,7 +189,7 @@ $panel-padding : 0
|
|||
border: 2px dashed #00a1cc
|
||||
padding: 6px 9px
|
||||
form
|
||||
margin: 0
|
||||
margin: 0
|
||||
|
||||
@media (max-width: $large-devices)
|
||||
border: unset
|
||||
|
@ -204,7 +204,7 @@ $panel-padding : 0
|
|||
text-align: center
|
||||
font-size: 12px
|
||||
cursor: help
|
||||
|
||||
|
||||
& &__checkbox
|
||||
display: inline-block
|
||||
margin-right: 10px
|
||||
|
@ -253,7 +253,7 @@ $panel-padding : 0
|
|||
border-top: $color-tertiary 1px dashed
|
||||
.index:not(:last-of-type)
|
||||
margin-right: 8px
|
||||
|
||||
|
||||
& &__fail-urls
|
||||
margin-top: 10px
|
||||
li
|
||||
|
@ -262,7 +262,7 @@ $panel-padding : 0
|
|||
// padding: 4px
|
||||
max-height: 100px
|
||||
overflow-y: auto
|
||||
|
||||
|
||||
|
||||
.relation-dropdown
|
||||
& &__button
|
||||
|
@ -291,14 +291,14 @@ $panel-padding : 0
|
|||
& &__title
|
||||
margin-bottom: 10px
|
||||
margin-top: 5px
|
||||
|
||||
|
||||
& &__info-wrapper
|
||||
&--horizontal
|
||||
margin-left: 20px
|
||||
|
||||
|
||||
& &__img-wrapper
|
||||
flex-basis: 100px
|
||||
|
||||
|
||||
|
||||
// Small devices (landscape phones, 576px and up)
|
||||
@media (max-width: $small-devices)
|
||||
|
@ -339,11 +339,11 @@ $panel-padding : 0
|
|||
|
||||
.aside-section-wrapper
|
||||
padding: $aside-section-padding-mobile
|
||||
|
||||
|
||||
margin-top: 20px
|
||||
// &:not(:first-child)
|
||||
&:not(:last-child)
|
||||
margin-right: 20px
|
||||
margin-right: 20px
|
||||
&--collapse
|
||||
padding: $aside-section-padding-mobile !important
|
||||
margin-top: 0
|
||||
|
@ -351,8 +351,8 @@ $panel-padding : 0
|
|||
&:first-child
|
||||
margin-right: 0
|
||||
&--no-margin
|
||||
margin: 0
|
||||
|
||||
margin: 0
|
||||
|
||||
.action-panel
|
||||
flex-direction: row
|
||||
& &__button-group
|
||||
|
@ -380,16 +380,16 @@ $panel-padding : 0
|
|||
|
||||
& &__button > .icon-arrow--expand
|
||||
transform: rotate(-180deg)
|
||||
|
||||
& &__button + &__body--expand
|
||||
max-height: 2000px
|
||||
transition: max-height 1s ease-in
|
||||
|
||||
& &__body
|
||||
background-color: $color-bright
|
||||
max-height: 0
|
||||
transition: max-height 1s ease-out
|
||||
overflow: hidden
|
||||
overflow: hidden
|
||||
|
||||
& &__body--expand
|
||||
max-height: 2000px
|
||||
transition: max-height 1s ease-in
|
||||
|
||||
.entity-card
|
||||
flex-direction: row
|
||||
|
@ -397,4 +397,4 @@ $panel-padding : 0
|
|||
margin-left: 30px
|
||||
// Extra large devices (large desktops, 1200px and up)
|
||||
@media (max-width: $x-large-devices)
|
||||
pass
|
||||
pass
|
||||
|
|
|
@ -27,13 +27,15 @@
|
|||
</a>
|
||||
{% endif %}
|
||||
</p>
|
||||
<p class="user-profile__bio mast-brief">{{ user.mastodon_account.note|bleach:"a,p,span,br" }}</p>
|
||||
|
||||
{% if request.user != user %}
|
||||
<a href="{% url 'users:report' %}?user_id={{ user.id }}"
|
||||
class="user-profile__report-link">{% trans '投诉用户' %}</a>
|
||||
{% endif %}
|
||||
|
||||
<div class="relation-dropdown">
|
||||
<div class="relation-dropdown__body">
|
||||
<p class="user-profile__bio mast-brief">{{ user.mastodon_account.note|bleach:"a,p,span,br" }}</p>
|
||||
{% if request.user != user %}
|
||||
<a href="{% url 'users:report' %}?user_id={{ user.id }}"
|
||||
class="user-profile__report-link">{% trans '投诉用户' %}</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue