Tweak the styling of the abbreviation editor

Removes the big white block of the input fields.
This commit is contained in:
ridiculousfish 2015-06-13 22:56:45 -07:00
parent 5c6143d8e9
commit 7b34aaa432
2 changed files with 19 additions and 7 deletions

View File

@ -29,6 +29,8 @@ body {
border-right: none; border-right: none;
padding-bottom: 15px; padding-bottom: 15px;
padding-top: 15px; padding-top: 15px;
padding-left: 8px;
padding-right: 8px;
font-size: 17pt; font-size: 17pt;
text-align: center; text-align: center;
width: 15%; width: 15%;
@ -232,12 +234,22 @@ body {
border-bottom: #444 dotted 1px; border-bottom: #444 dotted 1px;
} }
.abbreviation_actions { .abbreviation_actions {
width: 5em; width: 8em;
text-align: right; text-align: right;
border-bottom: #444 dotted 1px; border-bottom: #444 dotted 1px;
} }
.abbreviation_input {
background-color: #111;
border: solid 1px #777;
height: 1.5em;
color: white;
font: inherit;
padding: 3px;
margin: 0;
}
/* The CSS we apply when a table row is filtered */ /* The CSS we apply when a table row is filtered */
.data_table_row_filtered { .data_table_row_filtered {
display: none; display: none;

View File

@ -5,17 +5,17 @@
<table class="data_table"> <table class="data_table">
<tbody> <tbody>
<tr class="data_table_row" ng-repeat="abbreviation in abbreviations | filterAbbreviations:query" ng-click="editAbbreviation(abbreviation)"> <tr class="data_table_row" ng-repeat="abbreviation in abbreviations | filterAbbreviations:query" ng-click="editAbbreviation(abbreviation)">
<td ng-class="{ data_table_cell: true }" style="text-align: right; padding-right: 30px;"> <td ng-class="{ data_table_cell: true }" style="text-align: right; padding-right: 30px;">
<span ng-hide="abbreviation.editable">{{ abbreviation.word }}</span> <span ng-hide="abbreviation.editable">{{ abbreviation.word }}</span>
<span ng-show="abbreviation.editable"><input ng-model="abbreviation.word"></span> <span ng-show="abbreviation.editable"><input ng-model="abbreviation.word" class="abbreviation_input" style="text-align: right; min-width: 10em;"></span>
</td> </td>
<td ng-class="{ data_table_cell: true }" style="text-align: left; padding-right: 30px;"> <td ng-class="{ data_table_cell: true }" style="text-align: left; padding-right: 30px;">
<span ng-hide="abbreviation.editable">{{ abbreviation.phrase }}</span> <span ng-hide="abbreviation.editable">{{ abbreviation.phrase }}</span>
<span ng-show="abbreviation.editable"><input ng-model="abbreviation.phrase"></span> <span ng-show="abbreviation.editable"><input ng-model="abbreviation.phrase" class="abbreviation_input" style="text-align: left; min-width: 22em;"></span>
</td> </td>
<td ng-class="{ data_table_cell: true }" class="abbreviation_actions"> <td ng-class="{ data_table_cell: true }" class="abbreviation_actions">
<span ng-show="abbreviation.editable && abbreviation.word && abbreviation.phrase" ng-click="saveAbbreviation(abbreviation)">Save</span> <span ng-show="abbreviation.editable && abbreviation.word && abbreviation.phrase" ng-click="saveAbbreviation(abbreviation)"><span class="save_button" style="margin: inherit;">Save</span></span>
<a ng-show="abbreviation.word" ng-click="removeAbbreviation(abbreviation)"><img alt="Delete" src="delete.png"></a> <a ng-show="abbreviation.word" ng-click="removeAbbreviation(abbreviation)"><img alt="Delete" src="delete.png" style="vertical-align: text-bottom"></a>
</td> </td>
</tr> </tr>
</tbody> </tbody>