Skip to content

Commit

Permalink
input styling, ux
Browse files Browse the repository at this point in the history
  • Loading branch information
vphong committed Jun 9, 2017
1 parent 9617fa0 commit aaeb419
Show file tree
Hide file tree
Showing 2 changed files with 43 additions and 41 deletions.
3 changes: 0 additions & 3 deletions .vscode/settings.json
View file

This file was deleted.

81 changes: 43 additions & 38 deletions web/templates/cardstrength.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,6 @@
margin: 0px;
}

.input-group-addon {
cursor: help
}

.section.submit {
margin-bottom: 50px;
}
Expand Down Expand Up @@ -246,43 +242,52 @@ <h4>{% trans 'View' %}</h4>
<div class="container-fluid">
<div class="row" id="row-header">
<h1 class="text-center">{% trans 'Card Strength' %} <small>how good a card <i>actually</i> is</small></h1>
<div class="col-sm-4">
Hello! Here, we look at card strength by evaluating their skills.
<center>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-{% if not interfaceColor or interfaceColor == 'default' %}Smile{% else %}{{ interfaceColor }}{% endif %}"
ng-class="{active: allSIS}" ng-click="toggleAllSIS()">Equip SIS to All Cards</button>
<button type="button" class="btn btn-{% if not interfaceColor or interfaceColor == 'default' %}Smile{% else %}{{ interfaceColor }}{% endif %}"
ng-class="{active: allIdlz}" ng-click="toggleAllIdlz()">Idolize All Cards</button>
</div>
</center>
</div>

<div class="col-sm-8">
<h3 style="margin: 0"> Song Details <small>for skill analysis</small></h3>
<div class="col-xs-3">
<div class="input-group input-group-sm">
<span class="input-group-addon" data-toggle="tooltip" title="song length in notes" data-placement="bottom"><i class="flaticon-song"></i></span>
<input type="text" ng-blur="recalcSkill()" ng-keypress="onEnter($event)" ng-model="song.notes" class="form-control" placeholder="total notes">
</div>
</div>
<div class="col-xs-3">
<div class="input-group input-group-sm">
<span class="input-group-addon" data-toggle="tooltip" title="song length in seconds" data-placement="bottom"><i class="flaticon-times"></i></span>
<input type="text" ng-blur="recalcSkill()" ng-keypress="onEnter($event)" ng-model="song.seconds" class="form-control" placeholder="total seconds">
</div>
</div>
<div class="col-xs-3">
<div class="input-group input-group-sm">
<span class="input-group-addon" data-toggle="tooltip" title="percentage of perfect notes achieved" data-placement="bottom"><i class="flaticon-achievement"></i></span>
<input type="text" ng-blur="recalcSkill()" ng-keypress="onEnter($event)" ng-model="song.perfects" class="form-control" placeholder="% perfects">
</div>
<div class="col-sm-12">
<div class="col-xs-4" id="song_input">
<h4 style="margin-top: 0">Song Parameters </h4>
<div class="col-xs-6">
<div class="input-group input-group-sm">
<!-- <span class="input-group-addon" data-toggle="tooltip" title="song length in notes" data-placement="bottom"><i class="flaticon-song"></i></span> -->
<input type="text" ng-blur="recalcSkill()" ng-keypress="onEnter($event)" ng-model="song.notes" class="form-control" placeholder="total notes">
<span class="input-group-addon">total notes</span>

</div>
</div>
<div class="col-xs-">
<div class="input-group input-group-sm">
<!-- <span class="input-group-addon" data-toggle="tooltip" title="song length in seconds" data-placement="bottom"><i class="flaticon-times"></i></span> -->
<input type="text" ng-blur="recalcSkill()" ng-keypress="onEnter($event)" ng-model="song.seconds" class="form-control" placeholder="total seconds">
<span class="input-group-addon">total seconds</span>
</div>
</div>
</div>
<div class="col-xs-3">
<div class="input-group input-group-sm">
<span class="input-group-addon" data-toggle="tooltip" title="score achieved on clear" data-placement="bottom"><i class="flaticon-scoreup"></i></span>
<input type="text" ng-blur="recalcSkill()" ng-keypress="onEnter($event)" ng-model="song.points" class="form-control" placeholder="total score">
<div class="col-xs-4" id="play_input">
<h4 style="margin-top: 0"> Play Style Input </h4>
<div class="col-xs-6">
<div class="input-group input-group-sm">
<!-- <span class="input-group-addon" data-toggle="tooltip" title="percentage of perfect notes achieved" data-placement="bottom"><i class="flaticon-achievement"></i></span> -->
<input type="text" ng-blur="recalcSkill()" ng-keypress="onEnter($event)" ng-model="song.perfects" class="form-control" placeholder="% perfects">
<span class="input-group-addon">% perfects</span>
</div>
</div>
<div class="col-xs-6">
<div class="input-group input-group-sm">
<!-- <span class="input-group-addon" data-toggle="tooltip" title="score achieved on clear" data-placement="bottom"><i class="flaticon-scoreup"></i></span> -->
<input type="text" ng-blur="recalcSkill()" ng-keypress="onEnter($event)" ng-model="song.points" class="form-control" placeholder="total score">
<span class="input-group-addon">final score</span>
</div>
</div>
</div>
<div class="col-xs-4" id="options">
<h4 style="margin-top: 0">Options</h4>

<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-{% if not interfaceColor or interfaceColor == 'default' %}Smile{% else %}{{ interfaceColor }}{% endif %}"
ng-class="{active: allSIS}" ng-click="toggleAllSIS()">Equip SIS to All Cards</button>
<button type="button" class="btn btn-{% if not interfaceColor or interfaceColor == 'default' %}Smile{% else %}{{ interfaceColor }}{% endif %}"
ng-class="{active: allIdlz}" ng-click="toggleAllIdlz()">Idolize All Cards</button>
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit aaeb419

Please sign in to comment.