From 5cb2627320f0809cef721b5ef0c935ec42186556 Mon Sep 17 00:00:00 2001 From: LumaLivy <7350336+LumaLivy@users.noreply.github.com> Date: Fri, 17 Dec 2021 23:58:16 -0500 Subject: [PATCH 1/9] Photo subject proposal --- .../Pages/Layouts/BaseLayout.cshtml | 11 ++ .../Pages/Partials/PhotoPartial.cshtml | 115 +++++++++++++++++- 2 files changed, 121 insertions(+), 5 deletions(-) diff --git a/ProjectLighthouse/Pages/Layouts/BaseLayout.cshtml b/ProjectLighthouse/Pages/Layouts/BaseLayout.cshtml index 2295cea3..d4e14ade 100644 --- a/ProjectLighthouse/Pages/Layouts/BaseLayout.cshtml +++ b/ProjectLighthouse/Pages/Layouts/BaseLayout.cshtml @@ -64,6 +64,17 @@ gtag('config', '@ServerSettings.Instance.GoogleAnalyticsId'); } + +
diff --git a/ProjectLighthouse/Pages/Partials/PhotoPartial.cshtml b/ProjectLighthouse/Pages/Partials/PhotoPartial.cshtml index 33a8fbc1..af350119 100644 --- a/ProjectLighthouse/Pages/Partials/PhotoPartial.cshtml +++ b/ProjectLighthouse/Pages/Partials/PhotoPartial.cshtml @@ -1,7 +1,15 @@ @using LBPUnion.ProjectLighthouse.Types + @model LBPUnion.ProjectLighthouse.Types.Photo - + + +
+ + +

@@ -16,7 +24,104 @@

Photo contains @Model.Subjects.Count @(Model.Subjects.Count == 1 ? "person" : "people"):

-@foreach (PhotoSubject subject in Model.Subjects) -{ - @subject.User.Username -} \ No newline at end of file +
+ @foreach (PhotoSubject subject in Model.Subjects) + { + @subject.User.Username + } +
+ + + \ No newline at end of file From 390edd7286f93a0086495959e6a6af561a9bfe7e Mon Sep 17 00:00:00 2001 From: LumaLivy <7350336+LumaLivy@users.noreply.github.com> Date: Sat, 18 Dec 2021 00:19:05 -0500 Subject: [PATCH 2/9] Change timeout to page load event --- ProjectLighthouse/Pages/Partials/PhotoPartial.cshtml | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/ProjectLighthouse/Pages/Partials/PhotoPartial.cshtml b/ProjectLighthouse/Pages/Partials/PhotoPartial.cshtml index af350119..23312584 100644 --- a/ProjectLighthouse/Pages/Partials/PhotoPartial.cshtml +++ b/ProjectLighthouse/Pages/Partials/PhotoPartial.cshtml @@ -33,9 +33,8 @@ \ No newline at end of file From 28057ae0572257a275a79f84568fa2401cb8ff1c Mon Sep 17 00:00:00 2001 From: LumaLivy <7350336+LumaLivy@users.noreply.github.com> Date: Sat, 18 Dec 2021 00:19:50 -0500 Subject: [PATCH 3/9] Tidy up JS --- ProjectLighthouse/Pages/Partials/PhotoPartial.cshtml | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/ProjectLighthouse/Pages/Partials/PhotoPartial.cshtml b/ProjectLighthouse/Pages/Partials/PhotoPartial.cshtml index 23312584..4d41a79d 100644 --- a/ProjectLighthouse/Pages/Partials/PhotoPartial.cshtml +++ b/ProjectLighthouse/Pages/Partials/PhotoPartial.cshtml @@ -42,10 +42,10 @@ const image = document.getElementById("game-image-@Model.PhotoId"); hoverer.addEventListener('mouseenter', function () { - canvas.className = "photo-subjects" + canvas.className = "photo-subjects"; }); hoverer.addEventListener('mouseleave', function () { - canvas.className = "photo-subjects hide-subjects" + canvas.className = "photo-subjects hide-subjects"; }); var context = canvas.getContext('2d'); @@ -62,11 +62,11 @@ const hw = w / 2; const hh = h / 2; - const colors = ["#a5599f", "#477f84", "#5fa559", "#a5595f"]; + const colours = ["#a5599f", "#477f84", "#5fa559", "#a5595f"]; subjects.forEach((s, si) => { - const colour = colors[si % 4] + const colour = colours[si % 4]; // Bounding box const bounds = s.bounds.split(",").map(parseFloat); From df292dc156443151abd15581073cef4fd9a1c0c7 Mon Sep 17 00:00:00 2001 From: LumaLivy <7350336+LumaLivy@users.noreply.github.com> Date: Sat, 18 Dec 2021 00:28:27 -0500 Subject: [PATCH 4/9] Fix bug w/ label bg rendering bad on left overflow --- ProjectLighthouse/Pages/Partials/PhotoPartial.cshtml | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/ProjectLighthouse/Pages/Partials/PhotoPartial.cshtml b/ProjectLighthouse/Pages/Partials/PhotoPartial.cshtml index 4d41a79d..081a3bcc 100644 --- a/ProjectLighthouse/Pages/Partials/PhotoPartial.cshtml +++ b/ProjectLighthouse/Pages/Partials/PhotoPartial.cshtml @@ -6,7 +6,7 @@
+ style="position: absolute; transform: rotate(180deg)">
@@ -100,17 +100,17 @@ // Check if the label will flow off the left of the frame const overflowLeft = (bounds[2] * hw - tw) < (-hw); + // Set alignment + context.textAlign = overflowLeft ? "start" : "end"; + // Text x / y const lx = overflowLeft ? -bw + 6 : -6; const ly = overflowBottom ? -bh - 6 : 16; // Label background x / y - const lbx = overflowLeft ? -bw : -2; + const lbx = overflowLeft ? bw - tw - 12 : -2; const lby = overflowBottom ? bh : -24; - // Set alignment - context.textAlign = overflowLeft ? "start" : "end"; - // Draw background context.fillRect(lbx, lby, tw + 16, th); From d2ec5504217c7d424c04c92a0aa5fe01ca5c1aca Mon Sep 17 00:00:00 2001 From: jvyden Date: Sat, 18 Dec 2021 15:43:16 -0500 Subject: [PATCH 5/9] Fix performance on photos page --- .../Pages/Partials/PhotoPartial.cshtml | 26 +++++++++---------- ProjectLighthouse/Types/PhotoSubject.cs | 2 ++ 2 files changed, 15 insertions(+), 13 deletions(-) diff --git a/ProjectLighthouse/Pages/Partials/PhotoPartial.cshtml b/ProjectLighthouse/Pages/Partials/PhotoPartial.cshtml index 081a3bcc..761f63b8 100644 --- a/ProjectLighthouse/Pages/Partials/PhotoPartial.cshtml +++ b/ProjectLighthouse/Pages/Partials/PhotoPartial.cshtml @@ -1,14 +1,13 @@ @using LBPUnion.ProjectLighthouse.Types - @model LBPUnion.ProjectLighthouse.Types.Photo -
+ style="position: absolute; transform: rotate(180deg)"> + + style="width: 100%; height: auto; border-radius: .28571429rem;">

@@ -31,14 +30,16 @@ }
+@{ + PhotoSubject[] subjects = Model.Subjects.ToArray(); + foreach (PhotoSubject subject in subjects) subject.Username = subject.User.Username; +} } - -
diff --git a/ProjectLighthouse/StaticFiles/css/styles.css b/ProjectLighthouse/StaticFiles/css/styles.css index 53cbfaa5..08316168 100644 --- a/ProjectLighthouse/StaticFiles/css/styles.css +++ b/ProjectLighthouse/StaticFiles/css/styles.css @@ -16,3 +16,12 @@ div.statsUnderTitle > span { margin-right: 5px; } +canvas.photo-subjects { + opacity: 1; + transition: opacity 0.3s; +} + +canvas.hide-subjects { + opacity: 0; +} + From 370637ecd255ac4b11ed8cf889a3aaeffb29165e Mon Sep 17 00:00:00 2001 From: jvyden Date: Sat, 18 Dec 2021 15:49:55 -0500 Subject: [PATCH 9/9] Oh, so that's why it's in the BaseLayout. --- ProjectLighthouse/Pages/Layouts/BaseLayout.cshtml | 11 +++++++++++ ProjectLighthouse/StaticFiles/css/styles.css | 9 --------- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/ProjectLighthouse/Pages/Layouts/BaseLayout.cshtml b/ProjectLighthouse/Pages/Layouts/BaseLayout.cshtml index 2295cea3..d4e14ade 100644 --- a/ProjectLighthouse/Pages/Layouts/BaseLayout.cshtml +++ b/ProjectLighthouse/Pages/Layouts/BaseLayout.cshtml @@ -64,6 +64,17 @@ gtag('config', '@ServerSettings.Instance.GoogleAnalyticsId'); } + +
diff --git a/ProjectLighthouse/StaticFiles/css/styles.css b/ProjectLighthouse/StaticFiles/css/styles.css index 08316168..53cbfaa5 100644 --- a/ProjectLighthouse/StaticFiles/css/styles.css +++ b/ProjectLighthouse/StaticFiles/css/styles.css @@ -16,12 +16,3 @@ div.statsUnderTitle > span { margin-right: 5px; } -canvas.photo-subjects { - opacity: 1; - transition: opacity 0.3s; -} - -canvas.hide-subjects { - opacity: 0; -} -