mirror of
https://github.com/sudoxnym/habitica-self-host.git
synced 2026-08-01 03:30:25 +00:00
replace customizer table markup with figure & menu elements. CSS to match. Lots of minor UX tweaks.
This commit is contained in:
Zachary Kain
parent
675b506ff5
commit
5132dacdf0
4 changed files with 94 additions and 52 deletions
|
|
@ -10,20 +10,53 @@
|
|||
margin-top: 6px;
|
||||
border-top: 1px solid darkgrey;
|
||||
text-align: center
|
||||
line-height: 2
|
||||
|
||||
|
||||
menu
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
|
||||
table.customize td
|
||||
padding: 10px
|
||||
.customize-menu
|
||||
padding: 0;
|
||||
width: 70%;
|
||||
list-style: none;
|
||||
padding-bottom: 10px
|
||||
|
||||
table.customize td div
|
||||
cursor: pointer
|
||||
-webkit-transition: 0.5s ease-out
|
||||
-moz-transition: 0.5s ease-out
|
||||
transition: 0.5s ease-out
|
||||
menu:before
|
||||
content: attr(label);
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
line-height: 2
|
||||
|
||||
table.customize td div:active
|
||||
.customize-option
|
||||
border: 1px solid grey;
|
||||
background-color: hsl(0, 0%, 93%);
|
||||
margin-bottom: 10px
|
||||
|
||||
cursor: pointer;
|
||||
-webkit-transition: background-color 0.5s ease-out
|
||||
-moz-transition: background-color 0.5s ease-out
|
||||
transition: background-color 0.5s ease-out
|
||||
|
||||
.customize-option:active
|
||||
background-color: rgb(255, 242, 204);
|
||||
-webkit-transition: none
|
||||
-moz-transition: none
|
||||
transition: none
|
||||
transition: none
|
||||
|
||||
.customize-option:not(:last-of-type)
|
||||
margin-right: 10px
|
||||
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.avatar-window {
|
||||
float: none;
|
||||
margin-bottom: 1em
|
||||
}
|
||||
|
||||
.customize-menu {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -80,13 +80,11 @@
|
|||
|
||||
|
||||
// narrower spriting for customize modal
|
||||
.customize
|
||||
.customize-menu
|
||||
// shared option-box styles
|
||||
[class^="f_hair"], [class^="f_skin"], [class^="f_armor"], .f_head_0
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: grey;
|
||||
border: 1px solid black;
|
||||
|
||||
// head
|
||||
.f_head_0
|
||||
|
|
@ -116,6 +114,6 @@
|
|||
|
||||
// starting armor
|
||||
.f_armor_0_v2
|
||||
background-position: -2817px -35px;
|
||||
background-position: -2819px -38px;
|
||||
.f_armor_0_v1
|
||||
background-position: -2907px -35px;
|
||||
background-position: -2909px -38px;
|
||||
|
|
@ -70,13 +70,11 @@
|
|||
|
||||
|
||||
// narrower spriting for customize modal
|
||||
.customize
|
||||
.customize-menu
|
||||
// shared option-box styles
|
||||
[class^="m_hair"], [class^="m_skin"], .m_head_0
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: grey;
|
||||
border: 1px solid black;
|
||||
|
||||
// head
|
||||
.m_head_0
|
||||
|
|
|
|||
|
|
@ -139,46 +139,59 @@ do a find for the string after "→"
|
|||
<!-- $customizations-modal -->
|
||||
<app:myModal modalId="customizations-modal" header="Customize">
|
||||
{#with _user.preferences}
|
||||
|
||||
<!-- user avatar preview -->
|
||||
<figure class="avatar-window">
|
||||
<app:avatar profile={_user} />
|
||||
<figcaption class="char-name">{username(_user.auth)}</figcaption>
|
||||
</figure>
|
||||
|
||||
<!-- user avatar preview -->
|
||||
<figure class="avatar-window">
|
||||
<app:avatar profile={_user} />
|
||||
<figcaption class="char-name">{username(_user.auth)}</figcaption>
|
||||
</figure>
|
||||
|
||||
|
||||
<table class='customize'>
|
||||
<tr>Change Gender:</tr>
|
||||
<tr>
|
||||
<td><div class='m_head_0' x-bind='click:customizeGender' data-value='m'></div>Male</td>
|
||||
<td><div class='f_head_0' x-bind='click:customizeGender' data-value='f'></div>Female</td>
|
||||
</tr></table>
|
||||
<!-- customization options -->
|
||||
<menu type="list">
|
||||
<!-- gender -->
|
||||
<li class="customize-menu">
|
||||
<menu label="Gender">
|
||||
<button type="button" class="m_head_0 customize-option" data-value="m" x-bind="click:customizeGender"></button>
|
||||
<button type="button" class="f_head_0 customize-option" data-value="f" x-bind="click:customizeGender"></button>
|
||||
</menu>
|
||||
</li>
|
||||
|
||||
<table class='customize'><tr>
|
||||
<td><div class='{.gender}_hair_blond' x-bind="click:customizeHair" data-value='blond'></div></td>
|
||||
<td><div class='{.gender}_hair_black' x-bind="click:customizeHair" data-value='black'></div></td>
|
||||
<td><div class='{.gender}_hair_brown' x-bind="click:customizeHair" data-value='brown'></div></td>
|
||||
<td><div class='{.gender}_hair_white' x-bind="click:customizeHair" data-value='white'></div></td>
|
||||
</tr></table>
|
||||
<!-- hair -->
|
||||
<li class="customize-menu">
|
||||
<menu label="Hair">
|
||||
<button type="button" class="{.gender}_hair_blond customize-option" data-value="blond" x-bind="click:customizeHair"></button>
|
||||
<button type="button" class="{.gender}_hair_black customize-option" data-value="black" x-bind="click:customizeHair"></button>
|
||||
<button type="button" class="{.gender}_hair_brown customize-option" data-value="brown" x-bind="click:customizeHair"></button>
|
||||
<button type="button" class="{.gender}_hair_white customize-option" data-value="white" x-bind="click:customizeHair"></button>
|
||||
</menu>
|
||||
</li>
|
||||
|
||||
<table class='customize'><tr>
|
||||
<td><div class='{.gender}_skin_dead' x-bind="click:customizeSkin" data-value='dead'></div></td>
|
||||
<td><div class='{.gender}_skin_orc' x-bind="click:customizeSkin" data-value='orc'></div></td>
|
||||
<td><div class='{.gender}_skin_asian' x-bind="click:customizeSkin" data-value='asian'></div></td>
|
||||
<td><div class='{.gender}_skin_black' x-bind="click:customizeSkin" data-value='black'></div></td>
|
||||
<td><div class='{.gender}_skin_white' x-bind="click:customizeSkin" data-value='white'></div></td>
|
||||
</tr></table>
|
||||
<!-- skin -->
|
||||
<li class="customize-menu">
|
||||
<menu label="Skin">
|
||||
<button type="button" class='{.gender}_skin_dead customize-option' data-value="dead" x-bind="click:customizeSkin"></button>
|
||||
<button type="button" class='{.gender}_skin_orc customize-option' data-value="orc" x-bind="click:customizeSkin"></button>
|
||||
<button type="button" class='{.gender}_skin_asian customize-option' data-value="asian" x-bind="click:customizeSkin"></button>
|
||||
<button type="button" class='{.gender}_skin_black customize-option' data-value="black" x-bind="click:customizeSkin"></button>
|
||||
<button type="button" class='{.gender}_skin_white customize-option' data-value="white" x-bind="click:customizeSkin"></button>
|
||||
</menu>
|
||||
</li>
|
||||
</menu>
|
||||
|
||||
{#if equal(_user.preferences.gender, 'f')} <!-- Sorry boys -->
|
||||
<table class='customize'><tr>
|
||||
<td><div class='f_armor_0_v1' x-bind="click:customizeArmorSet" data-value='v1'></div></td>
|
||||
<td><div class='f_armor_0_v2' x-bind="click:customizeArmorSet" data-value='v2'></div></td>
|
||||
</tr></table>
|
||||
<menu type="list">
|
||||
<li class="customize-menu">
|
||||
<menu label="Clothing">
|
||||
<button type="button" class="f_armor_0_v1 customize-option" data-value="v1" x-bind="click:customizeArmorSet"></button>
|
||||
<button type="button" class="f_armor_0_v2 customize-option" data-value="v2" x-bind="click:customizeArmorSet"></button>
|
||||
</menu>
|
||||
</li>
|
||||
</menu>
|
||||
{/}
|
||||
{/}
|
||||
<@footer>
|
||||
<button data-dismiss="modal" class="btn btn-success">Ok</button>
|
||||
</@footer>
|
||||
{/}
|
||||
<@footer>
|
||||
<button data-dismiss="modal" class="btn btn-success">Ok</button>
|
||||
</@footer>
|
||||
</app:myModal>
|
||||
|
||||
<alerts:>
|
||||
|
|
|
|||
Loading…
Reference in a new issue