a
/
gosora
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improved the level UI on the Account Dashboard. 

The new level UI shouldn't be broken on the other themes now.
This commit is contained in:
Azareal 2018-10-11 19:50:48 +10:00
parent 96a5a9e872
commit c451358156
6 changed files with 46 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
templates/account_own_edit.html
View File

@ -21,8 +21,16 @@
</div> </div>
<div id="dash_right" class="coldyn_item"> <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">{{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> <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> </div>
</div> </div>

2
templates/level_list.html
View File

@ -6,7 +6,7 @@
{{range .Levels}} {{range .Levels}}
<div class="rowblock"> <div class="rowblock">
<div class="rowitem passive rowmsg level_{{.Status}}"> <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 class="progressWrap"{{if eq .Status "inprogress"}} style="width: {{.Percentage}}%;"{{end}}>
<div>Score: {{.Score}}</div> <div>Score: {{.Score}}</div>
</div> </div>

8
themes/cosora/public/main.css
View File

@ -884,6 +884,14 @@ textarea {
background-color: hsl(81, 60%, 95%); 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) { @element .topic_left .rowtopic and (min-width: 160px) {
$this, $this span, $this + .parent_forum { $this, $this span, $this + .parent_forum {
float: left; float: left;

8
themes/nox/public/main.css
View File

@ -876,8 +876,9 @@ input[type=checkbox]:checked + label .sel {
margin-left: auto; margin-left: auto;
} }
/* CSS behaves in stupid ways, so we need to be very specific about this */ /* 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) { .rowblock:not(.topic_list):not(.rowhead):not(.opthead) .rowitem.level_inprogress:not(.post_item),
padding: 0px; .coldyn_item .rowitem.level_inprogress {
padding: 0px !important;
} }
.level_inprogress > div { .level_inprogress > div {
display: flex; display: flex;
@ -888,6 +889,9 @@ input[type=checkbox]:checked + label .sel {
width: 100%; width: 100%;
background-color: rgb(68, 93, 68) !important; background-color: rgb(68, 93, 68) !important;
} }
.level_inprogress .levelBit {
display: inline;
}
.level_inprogress .progressWrap { .level_inprogress .progressWrap {
width: 100%; width: 100%;
padding-left: 0px; padding-left: 0px;

18
themes/shadow/public/main.css
View File

@ -911,10 +911,9 @@ input[type=checkbox]:checked + label.poll_option_label .sel {
#profile_right_lane { #profile_right_lane {
width: calc(100% - 245px); width: calc(100% - 245px);
} }
#profile_right_lane .rowitem { #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 .colstack_item .formrow.real_first_child, #profile_right_lane .colstack_item .formrow:first-child {
margin-top: 5px; margin-top: 5px;
} }
.simple .user_tag { .simple .user_tag {
@ -931,7 +930,6 @@ input[type=checkbox]:checked + label.poll_option_label .sel {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
.ip_search_block input { .ip_search_block input {
background-color: var(--input-background-color); background-color: var(--input-background-color);
border: 1px solid var(--input-border-color); border: 1px solid var(--input-border-color);
@ -941,18 +939,24 @@ input[type=checkbox]:checked + label.poll_option_label .sel {
padding: 4px; padding: 4px;
padding-bottom: 3px; padding-bottom: 3px;
} }
.ip_search_input { .ip_search_input {
font-size: 15px; font-size: 15px;
width: 100%; width: 100%;
margin-left: 0px; margin-left: 0px;
} }
.ip_search_search { .ip_search_search {
font-size: 14px; font-size: 14px;
margin-left: 8px; margin-left: 8px;
} }
.level_complete, .level_future, .level_inprogress {
display: flex;
}
.progressWrap {
margin-left: auto;
width: auto !important;
}
.colstack_grid { .colstack_grid {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);

11
themes/tempra-simple/public/main.css
View File

@ -951,4 +951,15 @@ input[type=checkbox]:checked + label.poll_option_label .sel {
margin-top: -5px; 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" }} {{template "media.partial.css" }}