feat: a slightly less ugly rewards panel

isekai-main
psychobunny 4 years ago
parent a7855c4cc4
commit bf0c02a71e

@ -8,8 +8,6 @@
"delete": "Delete", "delete": "Delete",
"enable": "Enable", "enable": "Enable",
"disable": "Disable", "disable": "Disable",
"control-panel": "Rewards Control",
"new-reward": "New Reward",
"alert.delete-success": "Successfully deleted reward", "alert.delete-success": "Successfully deleted reward",
"alert.no-inputs-found": "Illegal reward - no inputs found!", "alert.no-inputs-found": "Illegal reward - no inputs found!",

@ -16,6 +16,36 @@
> li { > li {
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
margin-bottom: 20px; margin-bottom: 20px;
&:last-child {
border-bottom: 0;
}
}
}
.rewards { width: 100%; }
.well {
border-radius: 2px;
border-width: 2px;
color: #333;
&.if-block {
border-color: @brand-primary;
}
&.this-block {
border-color: @brand-warning;
}
&.then-block {
border-color: @brand-success;
}
&.reward-block {
border-color: @brand-success;
background-color: lighten(@brand-success, 15%);
color: #fff;
a, select, input { color: #fff; }
select > option { color: #333; }
width: 100%;
min-height: 110px;
} }
} }
} }

@ -95,13 +95,13 @@ define('admin/extend/rewards', [], function () {
html += '<label for="' + input.name + '">' + input.label + '<br />'; html += '<label for="' + input.name + '">' + input.label + '<br />';
switch (input.type) { switch (input.type) {
case 'select': case 'select':
html += '<select name="' + input.name + '">'; html += '<select class="form-control" name="' + input.name + '">';
input.values.forEach(function (value) { input.values.forEach(function (value) {
html += '<option value="' + value.value + '">' + value.name + '</option>'; html += '<option value="' + value.value + '">' + value.name + '</option>';
}); });
break; break;
case 'text': case 'text':
html += '<input type="text" name="' + input.name + '" />'; html += '<input type="text" class="form-control" name="' + input.name + '" />';
break; break;
} }
html += '</label><br />'; html += '</label><br />';

@ -1,52 +1,61 @@
<div id="rewards" class="row">
<div class="col-lg-9"> <div id="rewards">
<div class="panel panel-default">
<div class="panel-heading">[[admin/extend/rewards:rewards]]</div>
<div class="panel-body">
<ul id="active"> <ul id="active">
{{{ each active }}} {{{ each active }}}
<li data-rid="{active.rid}" data-id="{active.id}"> <li data-rid="{active.rid}" data-id="{active.id}">
<div class="row">
<div class="col-xs-12 col-sm-12 col-lg-8">
<form class="main inline-block"> <form class="main inline-block">
<div class="well inline-block"> <div class="well inline-block if-block">
<label for="condition">[[admin/extend/rewards:condition-if-users]]</label><br /> <label for="condition">[[admin/extend/rewards:condition-if-users]]</label><br />
<select name="condition" data-selected="{active.condition}"> <select class="form-control" name="condition" data-selected="{active.condition}">
{{{ each conditions }}} {{{ each conditions }}}
<option value="{conditions.condition}">{conditions.name}</option> <option value="{conditions.condition}">{conditions.name}</option>
{{{ end }}} {{{ end }}}
</select> </select>
</div> </div>
<div class="well inline-block"> <div class="well inline-block this-block">
<label for="condition">[[admin/extend/rewards:condition-is]]</label><br /> <label for="condition">[[admin/extend/rewards:condition-is]]</label><br />
<select name="conditional" data-selected="{active.conditional}"> <div class="row">
<div class="col-xs-6">
<select class="form-control" name="conditional" data-selected="{active.conditional}">
{{{ each conditionals }}} {{{ each conditionals }}}
<option value="{conditionals.conditional}">{conditionals.name}</option> <option value="{conditionals.conditional}">{conditionals.name}</option>
{{{ end }}} {{{ end }}}
</select> </select>
<input type="text" name="value" value="{active.value}" />
</div> </div>
<div class="well inline-block"> <div class="col-xs-6">
<input class="form-control" type="text" name="value" value="{active.value}" />
</div>
</div>
</div>
<div class="well inline-block then-block">
<label for="condition">[[admin/extend/rewards:condition-then]]</label><br /> <label for="condition">[[admin/extend/rewards:condition-then]]</label><br />
<select name="rid" data-selected="{active.rid}"> <select class="form-control" name="rid" data-selected="{active.rid}">
<!-- BEGIN ../../rewards --> <!-- BEGIN ../../rewards -->
<option value="{rewards.rid}">{rewards.name}</option> <option value="{rewards.rid}">{rewards.name}</option>
<!-- END ../../rewards --> <!-- END ../../rewards -->
</select> </select>
</div> </div>
</form> </form>
</div>
<div class="col-xs-12 col-sm-12 col-lg-4">
<form class="rewards inline-block"> <form class="rewards inline-block">
<div class="inputs well inline-block"></div> <div class="inputs well inline-block reward-block"></div>
</form> </form>
<div class="clearfix"></div> </div>
</div>
<div class="pull-right"> <div class="pull-left">
<div class="panel-body inline-block"> <div class="panel-body inline-block">
<form class="main"> <form class="main">
<label for="claimable">[[admin/extend/rewards:max-claims]]</label><br /> <label for="claimable">[[admin/extend/rewards:max-claims]] <small>[[admin/extend/rewards:zero-infinite]]</small></label><br />
<input type="text" name="claimable" value="{active.claimable}" placeholder="1" /> <input class="form-control" type="text" name="claimable" value="{active.claimable}" placeholder="1" />
<small>[[admin/extend/rewards:zero-infinite]]</small>
</form> </form>
</div> </div>
</div>
<div class="pull-right">
<div class="panel-body inline-block"> <div class="panel-body inline-block">
<button class="btn btn-danger delete">[[admin/extend/rewards:delete]]</button> <button class="btn btn-danger delete">[[admin/extend/rewards:delete]]</button>
<!-- IF active.disabled --> <!-- IF active.disabled -->
@ -61,16 +70,13 @@
{{{ end }}} {{{ end }}}
</ul> </ul>
</div> </div>
</div>
</div>
<div class="col-lg-3 acp-sidebar"> <div class="floating-button">
<div class="panel panel-default"> <button id="new" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" >
<div class="panel-heading">[[admin/extend/rewards:control-panel]]</div> <i class="material-icons">add</i>
<div class="panel-body"> </button>
<button class="btn btn-success btn-md" id="new">[[admin/extend/rewards:new-reward]]</button>
<button class="btn btn-primary btn-md" id="save">[[global:save_changes]]</button> <button id="save" class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored primary">
</div> <i class="material-icons">save</i>
</div> </button>
</div>
</div> </div>
Loading…
Cancel
Save