Add mobile view for rank

This commit is contained in:
Sebastien 2019-01-02 15:00:51 +01:00
parent b454ed8199
commit 0722a4b689

View File

@ -29,6 +29,14 @@
color: #fbcf40;
font-size: 12px;
}
.collapsible{
border-color: #fbcf40;
border-left: none;
border-right: none;
}
.collapsible-header{
border-color: #fbcf40;
}
</style>
@ -47,6 +55,11 @@
<main>
<!--/*@thymesVar id="stack" type="net.Broken.Tools.UserManager.Stats.GuildStatsPack"*/-->
<th:block th:if="${stack != null}">
<div class="row" style="margin-bottom: 0">
<div class="col l6 offset-l3 m10 offset-m1 s10 offset-s1 card-panel grey darken-4 white-text">
<h4 class="center" style="font-weight: bold"><span th:text="${guild_name}" th:remove="tag"></span><br/>Stats </h4>
</div>
</div>
<div class="row">
<div class="card-panel col l6 offset-l3 m10 offset-m1 s10 offset-s1 grey darken-4 white-text">
<div class="row" style="margin-bottom: 0">
@ -190,6 +203,47 @@
</div>
<div class="col s10 offset-s1 hide-on-med-and-up card-panel grey darken-4 white-text">
<h3 class="center"><b>Ranking</b></h3>
<ul class="collapsible popout" >
<th:block th:each="stat : ${stack.ranking}">
<li>
<div class="collapsible-header grey darken-3 valign-wrapper"> <span th:text="${stat.rank + '. '}" style="font-weight: bold"></span><img th:src="${stat.avatarUrl}" class="circle" style="max-height: 40px; margin: 0 10px 0 10px"/> <span th:text="${stat.userName}"></span><span class="badge new green" data-badge-caption="xp " th:text="${stat.total}">4</span></div>
<div class="collapsible-body grey darken-2">
<table class="centered">
<thead>
<tr>
<th>Vocal Time</th>
<th>Message Count</th>
</tr>
</thead>
<tbody>
<tr>
<td> <span th:text="${T(net.Broken.Tools.TimeConvertor).sToTime(stat.voiceTime).get(0)}"
th:remove="tag"></span> <span>H</span>
<span th:text="${T(net.Broken.Tools.TimeConvertor).sToTime(stat.voiceTime).get(1)}"
th:remove="tag"></span> <span>M</span>
<span th:text="${T(net.Broken.Tools.TimeConvertor).sToTime(stat.voiceTime).get(2)}"
th:remove="tag"></span> <span>S</span></td>
<td th:text="${stat.messageCount}"></td>
</tr>
</tbody>
</table>
</div>
</li>
</th:block>
</ul>
</div>
</div>
</th:block>
@ -204,6 +258,12 @@
<script th:src="@{/js/materialize.js}"></script>
<script th:src="@{/js/navabar.js}"></script>
<script th:src="@{/js/js.cookie.js}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.collapsible');
var instances = M.Collapsible.init(elems);
});
</script>
<!--<script th:src="@{/js/rank.js}"></script>-->
<script th:src="@{/js/fontawesome.js}"></script>