From c45135815681f5e52a8c9c707367428f0aecf536 Mon Sep 17 00:00:00 2001
From: Azareal <azareal@users.noreply.github.com>
Date: Thu, 11 Oct 2018 19:50:48 +1000
Subject: [PATCH] Improved the level UI on the Account Dashboard. The new level
 UI shouldn't be broken on the other themes now.

---
 templates/account_own_edit.html      | 10 +++++++++-
 templates/level_list.html            |  2 +-
 themes/cosora/public/main.css        |  8 ++++++++
 themes/nox/public/main.css           |  8 ++++++--
 themes/shadow/public/main.css        | 18 +++++++++++-------
 themes/tempra-simple/public/main.css | 11 +++++++++++
 6 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/templates/account_own_edit.html b/templates/account_own_edit.html
index d819b6da..e4577e02 100644
--- a/templates/account_own_edit.html
+++ b/templates/account_own_edit.html
@@ -21,8 +21,16 @@
 		</div>
 		<div id="dash_right" class="coldyn_item">
 			<div class="rowitem">{{if not .MFASetup}}<a href="/user/edit/mfa/setup/">{{lang "account_dash_2fa_setup"}}</a>{{else}}<a href="/user/edit/mfa/">{{lang "account_dash_2fa_manage"}}</a>{{end}} <span class="dash_security">{{lang "account_dash_security_notice"}}</span></div>
-			<div class="rowitem">
+			<!--<div class="rowitem">
 				<a href="/user/levels/">{{level .CurrentUser.Level}}: [{{.CurrentScore}} / {{.NextScore}}]</a> <span class="account_soon">{{lang "account_coming_soon"}}</span>
+			</div>-->
+			<div class="rowitem level_inprogress">
+				<div class="levelBit">
+					<a href="/user/levels/">{{level .CurrentUser.Level}}</a>
+				</div>
+				<div class="progressWrap" style="width: 180%;">
+					<div>{{.CurrentScore}} / {{.NextScore}}</div>
+				</div>
 			</div>
 		</div>
 		</div>
diff --git a/templates/level_list.html b/templates/level_list.html
index 1bb2ac41..0922da94 100644
--- a/templates/level_list.html
+++ b/templates/level_list.html
@@ -6,7 +6,7 @@
 	{{range .Levels}}
 	<div class="rowblock">
 		<div class="rowitem passive rowmsg level_{{.Status}}">
-			<div>{{level .Level}}</div>
+			<div class="levelBit">{{level .Level}}</div>
 			<div class="progressWrap"{{if eq .Status "inprogress"}} style="width: {{.Percentage}}%;"{{end}}>
 				<div>Score: {{.Score}}</div>
 			</div>
diff --git a/themes/cosora/public/main.css b/themes/cosora/public/main.css
index 2e169bcd..ec802bbf 100644
--- a/themes/cosora/public/main.css
+++ b/themes/cosora/public/main.css
@@ -884,6 +884,14 @@ textarea {
 	background-color: hsl(81, 60%, 95%);
 }
 
+.level_complete, .level_future, .level_inprogress {
+	display: flex;
+}
+.progressWrap {
+	margin-left: auto;
+	width: auto !important;
+}
+
 @element .topic_left .rowtopic and (min-width: 160px) {
 	$this, $this span, $this + .parent_forum {
 		float: left;
diff --git a/themes/nox/public/main.css b/themes/nox/public/main.css
index 22091f94..db1890fb 100644
--- a/themes/nox/public/main.css
+++ b/themes/nox/public/main.css
@@ -876,8 +876,9 @@ input[type=checkbox]:checked + label .sel {
 	margin-left: auto;
 }
 /* CSS behaves in stupid ways, so we need to be very specific about this */
-.rowblock:not(.topic_list):not(.rowhead):not(.opthead) .rowitem.level_inprogress:not(.post_item) {
-	padding: 0px;
+.rowblock:not(.topic_list):not(.rowhead):not(.opthead) .rowitem.level_inprogress:not(.post_item),
+.coldyn_item .rowitem.level_inprogress {
+	padding: 0px !important;
 }
 .level_inprogress > div {
 	display: flex;
@@ -888,6 +889,9 @@ input[type=checkbox]:checked + label .sel {
 	width: 100%;
 	background-color: rgb(68, 93, 68) !important;
 }
+.level_inprogress .levelBit {
+	display: inline;
+}
 .level_inprogress .progressWrap {
 	width: 100%;
 	padding-left: 0px;
diff --git a/themes/shadow/public/main.css b/themes/shadow/public/main.css
index 25ed83f8..67917062 100644
--- a/themes/shadow/public/main.css
+++ b/themes/shadow/public/main.css
@@ -911,10 +911,9 @@ input[type=checkbox]:checked + label.poll_option_label .sel {
 #profile_right_lane {
 	width: calc(100% - 245px);
 }
-#profile_right_lane .rowitem {
-	margin-top: 5px;
-}
-#profile_right_lane .colstack_item .formrow.real_first_child, #profile_right_lane .colstack_item .formrow:first-child {
+#profile_right_lane .rowitem,
+#profile_right_lane .colstack_item .formrow.real_first_child,
+#profile_right_lane .colstack_item .formrow:first-child {
 	margin-top: 5px;
 }
 .simple .user_tag {
@@ -931,7 +930,6 @@ input[type=checkbox]:checked + label.poll_option_label .sel {
 	display: flex;
 	flex-direction: row;
 }
-
 .ip_search_block input {
 	background-color: var(--input-background-color);
 	border: 1px solid var(--input-border-color);
@@ -941,18 +939,24 @@ input[type=checkbox]:checked + label.poll_option_label .sel {
 	padding: 4px;
 	padding-bottom: 3px;
 }
-
 .ip_search_input {
 	font-size: 15px;
 	width: 100%;
 	margin-left: 0px;
 }
-
 .ip_search_search {
 	font-size: 14px;
 	margin-left: 8px;
 }
 
+.level_complete, .level_future, .level_inprogress {
+	display: flex;
+}
+.progressWrap {
+	margin-left: auto;
+	width: auto !important;
+}
+
 .colstack_grid {
 	display: grid;
 	grid-template-columns: repeat(3, 1fr);
diff --git a/themes/tempra-simple/public/main.css b/themes/tempra-simple/public/main.css
index 8605ac25..edfebba1 100644
--- a/themes/tempra-simple/public/main.css
+++ b/themes/tempra-simple/public/main.css
@@ -951,4 +951,15 @@ input[type=checkbox]:checked + label.poll_option_label .sel {
 	margin-top: -5px;
 }
 
+.level_complete, .level_future, .level_inprogress {
+	display: flex;
+}
+#profile_left_pane .level_hideable, .levelBit .level_hideable {
+	display: inline;
+}
+.progressWrap {
+	margin-left: auto;
+	width: auto !important;
+}
+
 {{template "media.partial.css" }}