Itmens/lib.itmens
Itmens/lib.itmens
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

improve mobile view

Browse source
This commit is contained in:
Your Name 2023-02-04 11:36:06 -05:00 • committed by Henri Dickson
parent 6cffa069ce
commit 11e62cebef
4 changed files with 37 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
catalog/templates/item_base.html
View file

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

2
common/static/js/home.js
View file

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

54
common/static/sass/_AsideSection.sass
View file

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

16
common/templates/partial/_sidebar.html
View file

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