rattail/tailbone
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Improve layout for "download results" modal

Browse source
This commit is contained in:
Lance Edgar 2020-08-22 16:11:29 -05:00
parent 922cbe4451
commit 5af26a57f6
1 changed files with 49 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

98
tailbone/templates/master/index.mako
View file

@ -184,9 +184,9 @@
the end result (file size) may be larger with CSV. the end result (file size) may be larger with CSV.
</b-notification> </b-notification>
<div style="display: flex;"> <div style="display: flex; justify-content: space-between">
<div style="flex-grow: 1;"> <div>
<b-field horizontal label="Format"> <b-field horizontal label="Format">
<b-select v-model="downloadResultsFormat"> <b-select v-model="downloadResultsFormat">
% for key, label in six.iteritems(master.download_results_supported_formats()): % for key, label in six.iteritems(master.download_results_supported_formats()):
@ -197,6 +197,7 @@
</div> </div>
<div> <div>
<div v-show="downloadResultsFieldsMode != 'choose'" <div v-show="downloadResultsFieldsMode != 'choose'"
class="has-text-right"> class="has-text-right">
<p v-if="downloadResultsFieldsMode == 'default'"> <p v-if="downloadResultsFieldsMode == 'default'">
@ -205,9 +206,10 @@
<p v-if="downloadResultsFieldsMode == 'all'"> <p v-if="downloadResultsFieldsMode == 'all'">
Will use ALL fields. Will use ALL fields.
</p> </p>
<br />
</div> </div>
<br />
<div class="buttons"> <div class="buttons is-right">
<b-button type="is-primary" <b-button type="is-primary"
v-show="downloadResultsFieldsMode != 'default'" v-show="downloadResultsFieldsMode != 'default'"
@click="downloadResultsUseDefaultFields()"> @click="downloadResultsUseDefaultFields()">
@ -224,55 +226,53 @@
Choose Fields Choose Fields
</b-button> </b-button>
</div> </div>
</div>
</div> <div v-show="downloadResultsFieldsMode == 'choose'">
<br /> <div style="display: flex;">
<div>
<b-field label="Excluded Fields">
<b-select multiple native-size="8"
expanded
ref="downloadResultsExcludedFields">
<option v-for="field in downloadResultsFieldsAvailable"
v-if="!downloadResultsFieldsIncluded.includes(field)"
:key="field"
:value="field">
{{ field }}
</option>
</b-select>
</b-field>
</div>
<div>
<br /><br />
<b-button style="margin: 0.5rem;"
@click="downloadResultsExcludeFields()">
&lt;
</b-button>
<br />
<b-button style="margin: 0.5rem;"
@click="downloadResultsIncludeFields()">
&gt;
</b-button>
</div>
<div>
<b-field label="Included Fields">
<b-select multiple native-size="8"
expanded
ref="downloadResultsIncludedFields">
<option v-for="field in downloadResultsFieldsIncluded"
:key="field"
:value="field">
{{ field }}
</option>
</b-select>
</b-field>
</div>
</div>
</div>
<div v-show="downloadResultsFieldsMode == 'choose'">
<div style="display: flex;">
<div>
<b-field label="Excluded Fields">
<b-select multiple native-size="8"
expanded
ref="downloadResultsExcludedFields">
<option v-for="field in downloadResultsFieldsAvailable"
v-if="!downloadResultsFieldsIncluded.includes(field)"
:key="field"
:value="field">
{{ field }}
</option>
</b-select>
</b-field>
</div>
<div>
<br /><br />
<b-button style="margin: 0.5rem;"
@click="downloadResultsExcludeFields()">
&lt;
</b-button>
<br />
<b-button style="margin: 0.5rem;"
@click="downloadResultsIncludeFields()">
&gt;
</b-button>
</div>
<div>
<b-field label="Included Fields">
<b-select multiple native-size="8"
expanded
ref="downloadResultsIncludedFields">
<option v-for="field in downloadResultsFieldsIncluded"
:key="field"
:value="field">
{{ field }}
</option>
</b-select>
</b-field>
</div>
</div> </div>
</div> </div>
</div> <!-- card-content --> </div> <!-- card-content -->
<footer class="modal-card-foot"> <footer class="modal-card-foot">