Zergling_man/thedesk
Zergling_man/thedesk
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Tag trending design

Browse Source
This commit is contained in:
cutls 2019-11-27 20:53:34 +09:00
parent 87aee3764b
commit ed8dc492c5
2 changed files with 59 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
app/css/master.css
View File

@ -461,6 +461,35 @@ textarea {
.contributor img { .contributor img {
width: 1rem; width: 1rem;
} }
.tagComp{
display: grid;
grid-template-columns: 60px 80px 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas: "svg toot user" "svg toot tag" "svg toots tag";
border-top: dotted 0.5px var(--gray);
padding: 5px
}
.tagCompSvg {
grid-area: svg;
}
.tagCompToot {
grid-area: toot;
text-align: center;
}
.tagCompToots {
grid-area: toots;
text-align: center;
}
.tagCompUser {
grid-area: user;
}
.tagCompTag {
grid-area: tag;
padding-top: 10px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
/*スクロールバー*/ /*スクロールバー*/
::-webkit-scrollbar { ::-webkit-scrollbar {

92
app/js/tl/src.js
View File

@ -216,6 +216,9 @@ function moreTs(tlid, q) {
function graphDraw(tag, acct_id) { function graphDraw(tag, acct_id) {
var tags = '' var tags = ''
var his = tag.history var his = tag.history
return graphDrawCore(his, tag)
}
function graphDrawCore(his, tag){
var max = Math.max.apply(null, [ var max = Math.max.apply(null, [
his[0].uses, his[0].uses,
his[1].uses, his[1].uses,
@ -232,36 +235,32 @@ function graphDraw(tag, acct_id) {
var two = 50 - (his[2].uses / max) * 50 var two = 50 - (his[2].uses / max) * 50
var one = 50 - (his[1].uses / max) * 50 var one = 50 - (his[1].uses / max) * 50
var zero = 50 - (his[0].uses / max) * 50 var zero = 50 - (his[0].uses / max) * 50
if (max === 0) { return `<div class="tagComp">
tags = <div class="tagCompSvg">
`<br><br><svg version="1.1" viewbox="0 0 60 50" width="60" height="50"></svg> <svg version="1.1" viewbox="0 0 60 50" width="60" height="50">
<span style="font-size:200%">${his[0].uses}</span> <g>
toot(s)&nbsp; <path d="M0,${six} L10,${five} 20,${four} 30,${three} 40,${two} 50,${one} 60,${zero} 61,61 0,61"
<a onclick=\"tl('tag','${escapeHTML(tag.name)}','${acct_id}','add')" class="pointer"> style="stroke: #0f8c0c;fill: rgba(13,113,19,.25); stroke-width: 1;">
#${escapeHTML(tag.name)} </path>
</a>&nbsp;` + </g>
his[0].accounts + </svg>
lang.lang_src_people </div>
} else { <div class="tagCompToot">
tags = <span style="font-size:200%">${his[0].uses}</span>
`<br><br> </div>
<svg version="1.1" viewbox="0 0 60 50" width="60" height="50"> <div class="tagCompToots">
<g> toot
<path d="M0,${six} L10,${five} 20,${four} 30,${three} 40,${two} 50,${one} 60,${zero}" </div>
style="stroke: #0f8c0c;fill: rgba(13,113,19,.25); stroke-width: 1;"> <div class="tagCompTag">
</path> <a onclick="tl('tag','${escapeHTML(tag.name)}','${acct_id}','add')" class="pointer" title="${escapeHTML(tag.name)}">
</g> #${escapeHTML(tag.name)}
</svg> </a>
<span style="font-size:200%">${his[0].uses}</span> </div>
toot&nbsp; <div class="tagCompUser">
<a onclick="tl('tag','${escapeHTML(tag.name)}','${acct_id}','add')" class="pointer"> ${his[0].accounts}
#${escapeHTML(tag.name)} ${lang.lang_src_people}
</a>&nbsp;` + </div>
his[0].accounts + </div>`
lang.lang_src_people
}
return tags
} }
/* /*
<svg version="1.1" viewbox="0 0 50 300" width="100%" height="50"> <svg version="1.1" viewbox="0 0 50 300" width="100%" height="50">
@ -303,38 +302,7 @@ function trend() {
Object.keys(json).forEach(function(keye) { Object.keys(json).forEach(function(keye) {
var tag = json[keye] var tag = json[keye]
var his = tag.history var his = tag.history
var max = Math.max.apply(null, [ tags = graphDrawCore(his, tag)
his[0].uses,
his[1].uses,
his[2].uses,
his[3].uses,
his[4].uses,
his[5].uses,
his[6].uses
])
var six = 50 - (his[6].uses / max) * 50
var five = 50 - (his[5].uses / max) * 50
var four = 50 - (his[4].uses / max) * 50
var three = 50 - (his[3].uses / max) * 50
var two = 50 - (his[2].uses / max) * 50
var one = 50 - (his[1].uses / max) * 50
var zero = 50 - (his[0].uses / max) * 50
tags =
`<svg version="1.1" viewbox="0 0 60 50" width="60" height="50">
<g>
<path d="M0,${six} L10,${five} 20,${four} 30,${three} 40,${two} 50,${one} 60,${zero}"
style="stroke: #0f8c0c;fill: rgba(13,113,19,.25); stroke-width: 1;">
</path>
</g>
</svg>
<span style="font-size:200%">${his[0].uses}</span>
toot&nbsp;
<a onclick="tl('tag','${escapeHTML(tag.name)}','${acct_id}','add')" class="pointer">
#${escapeHTML(tag.name)}
</a>&nbsp;` +
his[0].accounts +
lang.lang_src_people +
'<br><br>'
$('#src-contents').append(tags) $('#src-contents').append(tags)
}) })