From f2fa1aad51e2fec976657855e9da4020dcd8b512 Mon Sep 17 00:00:00 2001
From: sigonasr2 <sigonasr2@gmail.com>
Date: Wed, 12 Aug 2020 19:57:27 -0500
Subject: [PATCH] Improve portable display of site, improve individual display
 song separation.

---
 frontend/src/App.css |  9 ++++++
 frontend/src/App.js  | 69 ++++++++++++++++++++++++++++----------------
 2 files changed, 53 insertions(+), 25 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 00354c4..efbc5cc 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -19,6 +19,15 @@ badge-danger {exex}*/
 	font-size:12px;
 }
 
+.moveDown{
+	top:-16px;
+}
+
+.fadein{
+  animation-name: fadein;
+  animation-duration: 1s;
+}
+
 
 .display-tooltipside{
 	position:absolute;
diff --git a/frontend/src/App.js b/frontend/src/App.js
index ffd8c89..f705c82 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -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}
 		</>
 	)
 }