feat: a slightly less ugly rewards panel

isekai-main
psychobunny 4 years ago
parent a7855c4cc4
commit bf0c02a71e

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

@ -16,6 +16,36 @@
> li {
border-bottom: 1px solid #ddd;
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 />';
switch (input.type) {
case 'select':
html += '<select name="' + input.name + '">';
html += '<select class="form-control" name="' + input.name + '">';
input.values.forEach(function (value) {
html += '<option value="' + value.value + '">' + value.name + '</option>';
});
break;
case 'text':
html += '<input type="text" name="' + input.name + '" />';
html += '<input type="text" class="form-control" name="' + input.name + '" />';
break;
}
html += '</label><br />';

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