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

improve mark visual

Browse source
This commit is contained in:
Your Name 2023-06-04 12:37:37 -04:00 • committed by Henri Dickson
parent 2ac1671988
commit af5d13b9d9
2 changed files with 47 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
common/static/scss/_mark.scss
View file

@ -2,6 +2,26 @@
width: unset !important;
}
.mark-line {
margin-bottom: var(--pico-spacing);
>div:last-child {
margin-top: calc(-0.3rem * var(--pico-line-height));
text-align: right;
}
}
@media (max-width: 768px) {
.mark-line {
>div,
>div:last-child {
margin-top: unset;
text-align: center;
}
}
}
.tag-input {
display: -webkit-box;
display: -ms-flexbox;

52
journal/templates/mark2.html
View file

@ -22,7 +22,7 @@
<div class="add-to-list-modal__body">
<form method="post" action="{% url 'journal:mark' item.uuid %}">
{% csrf_token %}
<div class="grid">
<div class="grid mark-line">
<div>
<fieldset>
{% for k, v in shelf_types %}
@ -40,32 +40,34 @@
</fieldset>
</div>
<div>
<fieldset>
<span class="rating-editor {% if shelf_type == 'wishlist' %}hidden{% endif %}" _="on mousemove(currentTarget, offsetX) set current_value to Math.round((10 * offsetX) / currentTarget.offsetWidth) set star_div to the
<div/>
in me set star_div.style.width to (current_value * 10) + '%' set @data-tooltip to current_value or '未评分' add .yellow to star_div end on click(currentTarget, offsetX) set current_value to Math.round((10 * offsetX) / currentTarget.offsetWidth) set star_div to the
<div/>
in me set star_input to the
<input/>
in me set star_div.style.width to (current_value * 10) + '%' set @data-tooltip to current_value or '未评分' set star_input.value to current_value end on mouseleave(currentTarget) set star_div to the
<div/>
in me set star_input to the
<input/>
in me set current_value to star_input.value set star_div.style.width to (current_value * 10) + '%' set @data-tooltip to current_value or '未评分' remove .yellow from star_div end">
{{ mark.rating_grade|rating_star }}
<input type="hidden"
name="rating_grade"
id="id_rating"
value="{{ mark.rating_grade | default:0 }}">
</span>
</fieldset>
<span class="rating-editor {% if shelf_type == 'wishlist' %}hidden{% endif %}" _="on mousemove(currentTarget, offsetX) set current_value to Math.round((10 * offsetX) / currentTarget.offsetWidth) set star_div to the
<div/>
in me set star_div.style.width to (current_value * 10) + '%' set @data-tooltip to current_value or '未评分' add .yellow to star_div end on click(currentTarget, offsetX) set current_value to Math.round((10 * offsetX) / currentTarget.offsetWidth) set star_div to the
<div/>
in me set star_input to the
<input/>
in me set star_div.style.width to (current_value * 10) + '%' set @data-tooltip to current_value or '未评分' set star_input.value to current_value end on mouseleave(currentTarget) set star_div to the
<div/>
in me set star_input to the
<input/>
in me set current_value to star_input.value set star_div.style.width to (current_value * 10) + '%' set @data-tooltip to current_value or '未评分' remove .yellow from star_div end">
{{ mark.rating_grade|rating_star }}
<input type="hidden"
name="rating_grade"
id="id_rating"
value="{{ mark.rating_grade | default:0 }}">
</span>
</div>
</div>
<textarea name="text"
rows="4"
autofocus
placeholder="提示： 善用 &gt;!文字!&lt; 标记可隐藏剧透； 超过360字可能无法分享到联邦网络实例时间线。"
id="id_text">{{ mark.comment_text|default:"" }}</textarea>
<div>
<fieldset>
<textarea name="text"
rows="5"
autofocus
placeholder="提示： 善用 &gt;!文字!&lt; 标记可隐藏剧透； 超过360字可能无法分享到联邦网络实例时间线。"
id="id_text">{{ mark.comment_text|default:"" }}</textarea>
</fieldset>
</div>
<div class="mark-modal__tag">
<div class="tag-input">
<input name="tags" type="text" placeholder="回车增加标签" id="id_tags" value="">