diff --git a/nise-frontend/src/app/view-score/view-score.component.css b/nise-frontend/src/app/view-score/view-score.component.css index 1905efc..892452e 100644 --- a/nise-frontend/src/app/view-score/view-score.component.css +++ b/nise-frontend/src/app/view-score/view-score.component.css @@ -1,21 +1,119 @@ -/* Flex container */ .flex-container { display: flex; flex-wrap: wrap; justify-content: center; - gap: 20px; /* Adjust the gap between items as needed */ + gap: 20px; } -/* Flex items - default to full width to stack on smaller screens */ .flex-container > div { flex: 0 0 100%; - box-sizing: border-box; /* To include padding and border in the element's total width and height */ + box-sizing: border-box; } -/* Responsive columns */ -@media (min-width: 768px) { /* Adjust the breakpoint as needed */ +@media (min-width: 768px) { .flex-container > div { flex: 0 0 15%; max-width: 20%; } } + +.link-list a { + padding: 20px; +} + +.link-list a:hover { + color: white; + background-color: rgba(47, 47, 47, 0.46); +} + +.score-info { + flex-direction: row; + padding-left: 40px; + padding-right: 40px; +} + +.score-info__cover::after { + background-color: rgba(23, 26, 28, 0.75); + content: ""; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; +} + +.score-info { + align-items: center; + background-position: 50%; + background-repeat: no-repeat; + background-size: cover; + display: flex; + flex-direction: column; + min-height: 200px; + padding: 10px 0; + position: relative; +} + +.stats-container { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + width: 100%; + padding: 10px 20px; + box-sizing: border-box; + border-radius: 4px; +} + +.stat { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + padding: 10px 0; +} + +.stat span:first-child { + font-weight: bold; + font-size: 16px; +} + +.stat span:last-child { + font-size: 14px; + color: #999; +} + + + +.score-info a { + color: white; +} + +.score-player__score { + font-size: 35px; +} + +.score-info__item--player { + flex: 1; + color: white; +} + +.score-info__item { + flex: none; + margin: 10px; + position: relative; +} + +.beatmapset-cover::before { + background-image: var(--bg); + background-position: 50%; + background-size: cover; + border-radius: inherit; + content: ""; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 100%; + filter: grayscale(100%); +} diff --git a/nise-frontend/src/app/view-score/view-score.component.html b/nise-frontend/src/app/view-score/view-score.component.html index f0a6c5b..afc6642 100644 --- a/nise-frontend/src/app/view-score/view-score.component.html +++ b/nise-frontend/src/app/view-score/view-score.component.html @@ -13,90 +13,115 @@ -
-
-
- - Beatmap Cover -
-

- {{ this.replayData.beatmap_title }} by {{ this.replayData.beatmap_artist }} -

- ★{{ this.replayData.beatmap_star_rating | number: '1.0-2' }} {{ this.replayData.beatmap_version }} -
- +
+ +
+
+
- -
- -
- +
+
+
+
+ {{ mod }} +
+
+ {{ this.replayData.score | number }} +
+
+
+ Played by {{ this.replayData.username }} osu!web +
+ Submitted on {{ this.replayData.date }} +
+
+
-

- {{ this.replayData.score | number }} Played at: {{ this.replayData.date }} -

+
+ + + Open in osu!web + + + + Open in CircleGuard + + + + Open in Replay Viewer + + +
+ +
+
+

+ {{ this.replayData.beatmap_title }} by {{ this.replayData.beatmap_artist }} +

+ ★{{ this.replayData.beatmap_star_rating | number: '1.0-2' }} {{ this.replayData.beatmap_version }} +
- +
+
+ Accuracy + {{ calculateAccuracy(this.replayData) | number: '1.2-2' }}% +
+
+ Max Combo + {{ this.replayData.max_combo }}x perfect +
+
+ PP + {{ this.replayData.pp }} +
+
+
+
+ 300x + {{ this.replayData.count_300 }} +
+
+ 100x + {{ this.replayData.count_100 }} +
+
+ 50x + {{ this.replayData.count_50 }} +
+
+ Miss + {{ this.replayData.count_miss }} +
+
+
+
+ cvUR + {{ this.replayData.ur | number: '1.2-2' }} +
+
+ Adj. cvUR + {{ this.replayData.adjusted_ur | number: '1.2-2' }} +
+
+ Frametime + {{ this.replayData.frametime | number: '1.0-2' }}ms +
+
+ Edge Hits + {{ this.replayData.hits }} +
+
+ Snaps + {{ this.replayData.snaps }} +
+
-
-
    -
  • - Max combo: {{ this.replayData.max_combo }}x - perfect -
    • -
  • Accuracy: {{ calculateAccuracy(this.replayData) | number: '1.2-2' }}%
    • -
  • 300x: {{ this.replayData.count_300 }}
    • -
  • 100x: {{ this.replayData.count_100 }}
    • -
  • 50x: {{ this.replayData.count_50 }}
    • -
  • Misses: {{ this.replayData.count_miss }}
    • - -
-
-
- - -
- -
-

cvUR

-
{{ this.replayData.ur | number: '1.2-2' }}
-
-
-

Adj. cvUR

-
{{ this.replayData.adjusted_ur | number: '1.2-2' }}
-
-
-

Frametime

-
{{ this.replayData.frametime | number: '1.0-2' }}ms
-
-
-

Edge Hits

-
{{ this.replayData.hits }}
-
-
-

Snaps

-
{{ this.replayData.snaps }}
-
-
- -
-

Heads up!

-

The average cvUR for this beatmap is {{ this.replayData.average_ur | number: '1.0-2' }}

@@ -139,6 +164,10 @@

# nerd stats

+
+

Heads up!

+

The average cvUR for this beatmap is {{ this.replayData.average_ur | number: '1.0-2' }}

+
diff --git a/nise-frontend/src/assets/style.css b/nise-frontend/src/assets/style.css index 26d98c1..5dedcc4 100644 --- a/nise-frontend/src/assets/style.css +++ b/nise-frontend/src/assets/style.css @@ -277,7 +277,7 @@ fieldset button:not(:last-child) { .badge-list .badge { font-weight: bold; font-style: italic; - padding: 2px 2px 2px 6px; + padding: 2px 2px 2px 10px; } @@ -290,6 +290,12 @@ fieldset p label { margin-right: 100px !important; } +.badge.mod { + font-style: normal; + color: #474b56; + background-color: #fecb21; +} + .badge { padding: 3px; background-color: rgba(255, 255, 255, 0.05); @@ -300,7 +306,7 @@ fieldset p label { .badge-green { font-size: 12px; border-color: rgba(150, 187, 150, 0.98); - color: rgba(150, 187, 150, 0.98); + color: rgba(150, 187, 150, 0.98) !important; } fieldset p { diff --git a/nise-frontend/src/corelib/components/osu-grade/osu-grade.component.css b/nise-frontend/src/corelib/components/osu-grade/osu-grade.component.css index 2f2d46c..0e1204b 100644 --- a/nise-frontend/src/corelib/components/osu-grade/osu-grade.component.css +++ b/nise-frontend/src/corelib/components/osu-grade/osu-grade.component.css @@ -1,5 +1,5 @@ .badge { - padding: 2px 5px 2px 2px; + padding: 4px 10px 4px 4px; border-radius: 4px; color: white; filter: grayscale(40%);