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
changes
sigonasr2 5 years ago
parent 01b111a1ac
commit f2fa1aad51
2 changed files with 53 additions and 25 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 9
      frontend/src/App.css
  2. 69
      frontend/src/App.js

9
frontend/src/App.css
Unescape 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
Unescape 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}
</>
)
}

Write Preview
Loading…
Cancel
Save