Use explicit flex styles for grid-tools element
and so, must ensure children of grid-tools are atomic elements
This commit is contained in:
Lance Edgar
parent
23e6eef604
commit
bfe6b5bc25
|
|
@ -25,6 +25,11 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.grid-tools {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.grid-wrapper .grid-header td.tools {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
|
||||
<div class="grid-tools-wrapper">
|
||||
% if tools:
|
||||
<div class="grid-tools field buttons is-grouped is-pulled-right">
|
||||
<div class="grid-tools">
|
||||
## TODO: stop using |n filter
|
||||
${tools|n}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -43,150 +43,152 @@
|
|||
|
||||
## download search results
|
||||
% if master.results_downloadable and master.has_perm('download_results'):
|
||||
<b-button type="is-primary"
|
||||
icon-pack="fas"
|
||||
icon-left="download"
|
||||
@click="showDownloadResultsDialog = true"
|
||||
:disabled="!total">
|
||||
Download Results
|
||||
</b-button>
|
||||
<div>
|
||||
<b-button type="is-primary"
|
||||
icon-pack="fas"
|
||||
icon-left="download"
|
||||
@click="showDownloadResultsDialog = true"
|
||||
:disabled="!total">
|
||||
Download Results
|
||||
</b-button>
|
||||
|
||||
${h.form(url('{}.download_results'.format(route_prefix)), ref='download_results_form')}
|
||||
${h.csrf_token(request)}
|
||||
<input type="hidden" name="fmt" :value="downloadResultsFormat" />
|
||||
<input type="hidden" name="fields" :value="downloadResultsFieldsIncluded" />
|
||||
${h.end_form()}
|
||||
${h.form(url('{}.download_results'.format(route_prefix)), ref='download_results_form')}
|
||||
${h.csrf_token(request)}
|
||||
<input type="hidden" name="fmt" :value="downloadResultsFormat" />
|
||||
<input type="hidden" name="fields" :value="downloadResultsFieldsIncluded" />
|
||||
${h.end_form()}
|
||||
|
||||
<b-modal :active.sync="showDownloadResultsDialog">
|
||||
<div class="card">
|
||||
<b-modal :active.sync="showDownloadResultsDialog">
|
||||
<div class="card">
|
||||
|
||||
<div class="card-content">
|
||||
<p>
|
||||
There are
|
||||
<span class="is-size-4 has-text-weight-bold">
|
||||
{{ total.toLocaleString('en') }} ${model_title_plural}
|
||||
</span>
|
||||
matching your current filters.
|
||||
</p>
|
||||
<p>
|
||||
You may download this set as a single data file if you like.
|
||||
</p>
|
||||
<br />
|
||||
<div class="card-content">
|
||||
<p>
|
||||
There are
|
||||
<span class="is-size-4 has-text-weight-bold">
|
||||
{{ total.toLocaleString('en') }} ${model_title_plural}
|
||||
</span>
|
||||
matching your current filters.
|
||||
</p>
|
||||
<p>
|
||||
You may download this set as a single data file if you like.
|
||||
</p>
|
||||
<br />
|
||||
|
||||
<b-notification type="is-warning" :closable="false"
|
||||
v-if="downloadResultsFormat == 'xlsx' && total >= 1000">
|
||||
Excel downloads for large data sets can take a long time to
|
||||
generate, and bog down the server in the meantime. You are
|
||||
encouraged to choose CSV for a large data set, even though
|
||||
the end result (file size) may be larger with CSV.
|
||||
</b-notification>
|
||||
<b-notification type="is-warning" :closable="false"
|
||||
v-if="downloadResultsFormat == 'xlsx' && total >= 1000">
|
||||
Excel downloads for large data sets can take a long time to
|
||||
generate, and bog down the server in the meantime. You are
|
||||
encouraged to choose CSV for a large data set, even though
|
||||
the end result (file size) may be larger with CSV.
|
||||
</b-notification>
|
||||
|
||||
<div style="display: flex; justify-content: space-between">
|
||||
<div style="display: flex; justify-content: space-between">
|
||||
|
||||
<div>
|
||||
<b-field label="Format">
|
||||
<b-select v-model="downloadResultsFormat">
|
||||
% for key, label in master.download_results_supported_formats().items():
|
||||
<option value="${key}">${label}</option>
|
||||
% endfor
|
||||
</b-select>
|
||||
</b-field>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
<div v-show="downloadResultsFieldsMode != 'choose'"
|
||||
class="has-text-right">
|
||||
<p v-if="downloadResultsFieldsMode == 'default'">
|
||||
Will use DEFAULT fields.
|
||||
</p>
|
||||
<p v-if="downloadResultsFieldsMode == 'all'">
|
||||
Will use ALL fields.
|
||||
</p>
|
||||
<br />
|
||||
<div>
|
||||
<b-field label="Format">
|
||||
<b-select v-model="downloadResultsFormat">
|
||||
% for key, label in master.download_results_supported_formats().items():
|
||||
<option value="${key}">${label}</option>
|
||||
% endfor
|
||||
</b-select>
|
||||
</b-field>
|
||||
</div>
|
||||
|
||||
<div class="buttons is-right">
|
||||
<b-button type="is-primary"
|
||||
v-show="downloadResultsFieldsMode != 'default'"
|
||||
@click="downloadResultsUseDefaultFields()">
|
||||
Use Default Fields
|
||||
</b-button>
|
||||
<b-button type="is-primary"
|
||||
v-show="downloadResultsFieldsMode != 'all'"
|
||||
@click="downloadResultsUseAllFields()">
|
||||
Use All Fields
|
||||
</b-button>
|
||||
<b-button type="is-primary"
|
||||
v-show="downloadResultsFieldsMode != 'choose'"
|
||||
@click="downloadResultsFieldsMode = 'choose'">
|
||||
Choose Fields
|
||||
</b-button>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
<div v-show="downloadResultsFieldsMode == 'choose'">
|
||||
<div style="display: flex;">
|
||||
<div>
|
||||
<b-field label="Excluded Fields">
|
||||
<b-select multiple native-size="8"
|
||||
expanded
|
||||
v-model="downloadResultsExcludedFieldsSelected"
|
||||
ref="downloadResultsExcludedFields">
|
||||
<option v-for="field in downloadResultsFieldsExcluded"
|
||||
:key="field"
|
||||
:value="field">
|
||||
{{ field }}
|
||||
</option>
|
||||
</b-select>
|
||||
</b-field>
|
||||
</div>
|
||||
<div>
|
||||
<br /><br />
|
||||
<b-button style="margin: 0.5rem;"
|
||||
@click="downloadResultsExcludeFields()">
|
||||
<
|
||||
</b-button>
|
||||
<br />
|
||||
<b-button style="margin: 0.5rem;"
|
||||
@click="downloadResultsIncludeFields()">
|
||||
>
|
||||
</b-button>
|
||||
</div>
|
||||
<div>
|
||||
<b-field label="Included Fields">
|
||||
<b-select multiple native-size="8"
|
||||
expanded
|
||||
v-model="downloadResultsIncludedFieldsSelected"
|
||||
ref="downloadResultsIncludedFields">
|
||||
<option v-for="field in downloadResultsFieldsIncluded"
|
||||
:key="field"
|
||||
:value="field">
|
||||
{{ field }}
|
||||
</option>
|
||||
</b-select>
|
||||
</b-field>
|
||||
<div v-show="downloadResultsFieldsMode != 'choose'"
|
||||
class="has-text-right">
|
||||
<p v-if="downloadResultsFieldsMode == 'default'">
|
||||
Will use DEFAULT fields.
|
||||
</p>
|
||||
<p v-if="downloadResultsFieldsMode == 'all'">
|
||||
Will use ALL fields.
|
||||
</p>
|
||||
<br />
|
||||
</div>
|
||||
|
||||
<div class="buttons is-right">
|
||||
<b-button type="is-primary"
|
||||
v-show="downloadResultsFieldsMode != 'default'"
|
||||
@click="downloadResultsUseDefaultFields()">
|
||||
Use Default Fields
|
||||
</b-button>
|
||||
<b-button type="is-primary"
|
||||
v-show="downloadResultsFieldsMode != 'all'"
|
||||
@click="downloadResultsUseAllFields()">
|
||||
Use All Fields
|
||||
</b-button>
|
||||
<b-button type="is-primary"
|
||||
v-show="downloadResultsFieldsMode != 'choose'"
|
||||
@click="downloadResultsFieldsMode = 'choose'">
|
||||
Choose Fields
|
||||
</b-button>
|
||||
</div>
|
||||
|
||||
<div v-show="downloadResultsFieldsMode == 'choose'">
|
||||
<div style="display: flex;">
|
||||
<div>
|
||||
<b-field label="Excluded Fields">
|
||||
<b-select multiple native-size="8"
|
||||
expanded
|
||||
v-model="downloadResultsExcludedFieldsSelected"
|
||||
ref="downloadResultsExcludedFields">
|
||||
<option v-for="field in downloadResultsFieldsExcluded"
|
||||
:key="field"
|
||||
:value="field">
|
||||
{{ field }}
|
||||
</option>
|
||||
</b-select>
|
||||
</b-field>
|
||||
</div>
|
||||
<div>
|
||||
<br /><br />
|
||||
<b-button style="margin: 0.5rem;"
|
||||
@click="downloadResultsExcludeFields()">
|
||||
<
|
||||
</b-button>
|
||||
<br />
|
||||
<b-button style="margin: 0.5rem;"
|
||||
@click="downloadResultsIncludeFields()">
|
||||
>
|
||||
</b-button>
|
||||
</div>
|
||||
<div>
|
||||
<b-field label="Included Fields">
|
||||
<b-select multiple native-size="8"
|
||||
expanded
|
||||
v-model="downloadResultsIncludedFieldsSelected"
|
||||
ref="downloadResultsIncludedFields">
|
||||
<option v-for="field in downloadResultsFieldsIncluded"
|
||||
:key="field"
|
||||
:value="field">
|
||||
{{ field }}
|
||||
</option>
|
||||
</b-select>
|
||||
</b-field>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- card-content -->
|
||||
</div> <!-- card-content -->
|
||||
|
||||
<footer class="modal-card-foot">
|
||||
<b-button @click="showDownloadResultsDialog = false">
|
||||
Cancel
|
||||
</b-button>
|
||||
<once-button type="is-primary"
|
||||
@click="downloadResultsSubmit()"
|
||||
icon-pack="fas"
|
||||
icon-left="fas fa-download"
|
||||
:disabled="!downloadResultsFieldsIncluded.length"
|
||||
text="Download Results">
|
||||
</once-button>
|
||||
</footer>
|
||||
</div>
|
||||
</b-modal>
|
||||
<footer class="modal-card-foot">
|
||||
<b-button @click="showDownloadResultsDialog = false">
|
||||
Cancel
|
||||
</b-button>
|
||||
<once-button type="is-primary"
|
||||
@click="downloadResultsSubmit()"
|
||||
icon-pack="fas"
|
||||
icon-left="fas fa-download"
|
||||
:disabled="!downloadResultsFieldsIncluded.length"
|
||||
text="Download Results">
|
||||
</once-button>
|
||||
</footer>
|
||||
</div>
|
||||
</b-modal>
|
||||
</div>
|
||||
% endif
|
||||
|
||||
## download rows for search results
|
||||
|
|
|
|||
Loading…
Reference in a new issue