sigonasr2/projectdivar
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve portable display of site, improve individual display song separation.

Browse Source
This commit is contained in:
sigonasr2 2020-08-12 19:57:27 -05:00
parent 01b111a1ac
commit f2fa1aad51
2 changed files with 53 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/App.css
View File

@ -19,6 +19,15 @@ badge-danger {exex}*/
font-size:12px;
}
.moveDown{
top:-16px;
}
.fadein{
animation-name: fadein;
animation-duration: 1s;
}
.display-tooltipside{
position:absolute;

69
frontend/src/App.js
View File

@ -328,35 +328,54 @@ function Play(p) {
if (hours<24) {return <>{hours} {"hour"+((hours!==1)?"s":"")} ago</>}
return <>{days} {"day"+((days!==1)?"s":"")} ago</>
}
function GetDateDisplay() {
function GetDateDisplay(timeStampBelow) {
var date = new Date(p.play.date);
var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]
return <>{months[date.getMonth()]+" "+date.getDate()+" "+date.getFullYear()+" "+date.getHours()+":"+((date.getMinutes()<10)?"0"+date.getMinutes():date.getMinutes())}<span className="tinytime infront">{GetDateDiff()}</span></>
return <>{months[date.getMonth()]+" "+date.getDate()+" "+date.getFullYear()+" "+date.getHours()+":"+((date.getMinutes()<10)?"0"+date.getMinutes():date.getMinutes())}<span className={"tinytime infront "+((timeStampBelow)?"moveDown":"")}>{GetDateDiff()}</span></>
}
if (p.mini) {
return (
<>
<div className={"row align-middle "+((p.play.fine==0&&p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?"pfc":(p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?"fc":"")}>
<div className="col-md-2 order-1 order-md-1 text-center border-right align-middle text-nowrap overflow-hidden">{Math.floor(p.play.score)} pts<br/>{((p.play.fine==0&&p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?<span className="badge pfc">✪PFC</span>:(p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?<span className="badge fc">★FC</span>:<></>)}<Difficulty play={p.play} song={p.song}/></div>
<div className="col-md-3 order-3 order-md-2 text-center border-right align-middle text-nowrap overflow-hidden">{GetDateDisplay()}</div>
<div className="col-md-5 order-2 order-md-3">
<div className="row">
<div className="col-12 order-1 order-md-1 col-md-6 text-center">
{p.play.cool+"/"+p.play.fine+"/"+p.play.safe+"/"+p.play.sad+"/"+p.play.worst}
</div>
<div className="col-6 order-3 order-md-2 col-md-3 text-left text-md-left">
{(p.play.mod!==null&&p.play.mod.length>0)?
<ModDisplay side={true} badge={CalculateBadge(p.play.difficulty)} diff={GetModifiedDiff(p.play.difficulty)}
hs={p.play.mod=="HS"?1:0} hd={p.play.mod=="HD"?1:0} sd={p.play.mod=="SD"?1:0}/>
:<></>
}
</div>
<div className="col-6 order-2 order-md-3 col-md-3 text-right text-md-left">
<b>{p.play.percent}%</b>
<div className="d-none d-md-block">
<div className={"row align-middle "+((p.play.fine==0&&p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?"pfc":(p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?"fc":"")}>
<div className="col-md-2 order-1 order-md-1 text-center border-right align-middle text-nowrap overflow-hidden">{Math.floor(p.play.score)} pts<br/>{((p.play.fine==0&&p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?<span className="badge pfc">✪PFC</span>:(p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?<span className="badge fc">★FC</span>:<></>)}<Difficulty play={p.play} song={p.song}/></div>
<div className="col-md-3 order-3 order-md-2 text-center border-right align-middle text-nowrap overflow-hidden">{GetDateDisplay()}</div>
<div className="col-md-5 order-2 order-md-3">
<div className="row">
<div className="col-12 order-1 order-md-1 col-md-6 text-center">
{p.play.cool+"/"+p.play.fine+"/"+p.play.safe+"/"+p.play.sad+"/"+p.play.worst}
</div>
<div className="col-6 order-3 order-md-2 col-md-3 text-left text-md-left">
{(p.play.mod!==null&&p.play.mod.length>0)?
<ModDisplay side={true} badge={CalculateBadge(p.play.difficulty)} diff={GetModifiedDiff(p.play.difficulty)}
hs={p.play.mod=="HS"?1:0} hd={p.play.mod=="HD"?1:0} sd={p.play.mod=="SD"?1:0}/>
:<></>
}
</div>
<div className="col-6 order-2 order-md-3 col-md-3 text-right text-md-left">
<b>{p.play.percent}%</b>
</div>
</div>
</div>
</div>
</div>
<div className="d-block d-small d-md-none">
{<div className="row"><div className="offset-4 col-4 text-center">{((p.play.fine==0&&p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?<span className="badge pfc">✪PFC</span>:(p.play.safe==0&&p.play.sad==0&&p.play.worst==0)?<span className="badge fc">★FC</span>:<></>)}<Difficulty play={p.play} song={p.song}/></div></div>}
<div className="row">
<div className="offset-2 col-4 text-center">
{Math.floor(p.play.score)} pts
<br/>
{p.play.cool+"/"+p.play.fine+"/"+p.play.safe+"/"+p.play.sad+"/"+p.play.worst}
</div>
<div className="col-4 text-center">
<b>{p.play.percent}%</b> <ModDisplay side={true} badge={CalculateBadge(p.play.difficulty)} diff={GetModifiedDiff(p.play.difficulty)}
hs={p.play.mod=="HS"?1:0} hd={p.play.mod=="HD"?1:0} sd={p.play.mod=="SD"?1:0}/>
<br/>
{GetDateDisplay(true)}
</div>
</div>
</div>
<hr className="mb-0"/>
</>
);
} else {
@ -650,12 +669,14 @@ function HoverSongName(p) {
var [toggle,setToggle] = useState(false)
return (
<>
<tr key={p.song.id} className="lighthover"
data-toggle="collapse" data-target={"#collapse"+p.song.id} aria-expanded="false" aria-controls="collapseExample" onClick={()=>{
<tr key={p.song.id} className="lighthover" onClick={()=>{
if (!toggle) {
setExpand(<PlayData song={p.song} username={p.username}/>)
setExpand(<tr className="fadein">
<td colSpan="6"><PlayData song={p.song} username={p.username}/></td>
</tr>)
setToggle(true)
} else {
setExpand(<></>)
setToggle(false)
}
}
@ -665,9 +686,7 @@ function HoverSongName(p) {
</td>
<PlayDetail song={p.song}/>
</tr>
<tr className="collapse" id={"collapse"+p.song.id}>
<td colSpan="6">{expand}</td>
</tr>
{expand}
</>
)
}