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

Use explicit flex styles for grid-tools element

Browse source 
and so, must ensure children of grid-tools are atomic elements
This commit is contained in:
Lance Edgar 2024-04-25 15:41:06 -05:00
parent 23e6eef604
commit bfe6b5bc25
3 changed files with 138 additions and 131 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
tailbone/static/css/grids.css
View file

@ -25,6 +25,11 @@
margin: 0; margin: 0;
} }
.grid-tools {
display: flex;
gap: 0.5rem;
}
.grid-wrapper .grid-header td.tools { .grid-wrapper .grid-header td.tools {
margin: 0; margin: 0;
padding: 0; padding: 0;

2
tailbone/templates/grids/complete.mako
View file

@ -28,7 +28,7 @@
<div class="grid-tools-wrapper"> <div class="grid-tools-wrapper">
% if tools: % if tools:
<div class="grid-tools field buttons is-grouped is-pulled-right"> <div class="grid-tools">
## TODO: stop using |n filter ## TODO: stop using |n filter
${tools|n} ${tools|n}
</div> </div>

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

@ -43,150 +43,152 @@
## download search results ## download search results
% if master.results_downloadable and master.has_perm('download_results'): % if master.results_downloadable and master.has_perm('download_results'):
<b-button type="is-primary" <div>
icon-pack="fas" <b-button type="is-primary"
icon-left="download" icon-pack="fas"
@click="showDownloadResultsDialog = true" icon-left="download"
:disabled="!total"> @click="showDownloadResultsDialog = true"
Download Results :disabled="!total">
</b-button> Download Results
</b-button>
${h.form(url('{}.download_results'.format(route_prefix)), ref='download_results_form')} ${h.form(url('{}.download_results'.format(route_prefix)), ref='download_results_form')}
${h.csrf_token(request)} ${h.csrf_token(request)}
<input type="hidden" name="fmt" :value="downloadResultsFormat" /> <input type="hidden" name="fmt" :value="downloadResultsFormat" />
<input type="hidden" name="fields" :value="downloadResultsFieldsIncluded" /> <input type="hidden" name="fields" :value="downloadResultsFieldsIncluded" />
${h.end_form()} ${h.end_form()}
<b-modal :active.sync="showDownloadResultsDialog"> <b-modal :active.sync="showDownloadResultsDialog">
<div class="card"> <div class="card">
<div class="card-content"> <div class="card-content">
<p> <p>
There are There are
<span class="is-size-4 has-text-weight-bold"> <span class="is-size-4 has-text-weight-bold">
{{ total.toLocaleString('en') }} ${model_title_plural} {{ total.toLocaleString('en') }} ${model_title_plural}
</span> </span>
matching your current filters. matching your current filters.
</p> </p>
<p> <p>
You may download this set as a single data file if you like. You may download this set as a single data file if you like.
</p> </p>
<br /> <br />
<b-notification type="is-warning" :closable="false" <b-notification type="is-warning" :closable="false"
v-if="downloadResultsFormat == 'xlsx' && total >= 1000"> v-if="downloadResultsFormat == 'xlsx' && total >= 1000">
Excel downloads for large data sets can take a long time to Excel downloads for large data sets can take a long time to
generate, and bog down the server in the meantime. You are generate, and bog down the server in the meantime. You are
encouraged to choose CSV for a large data set, even though encouraged to choose CSV for a large data set, even though
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; justify-content: space-between"> <div style="display: flex; justify-content: space-between">
<div> <div>
<b-field label="Format"> <b-field label="Format">
<b-select v-model="downloadResultsFormat"> <b-select v-model="downloadResultsFormat">
% for key, label in master.download_results_supported_formats().items(): % for key, label in master.download_results_supported_formats().items():
<option value="${key}">${label}</option> <option value="${key}">${label}</option>
% endfor % endfor
</b-select> </b-select>
</b-field> </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> </div>
<div class="buttons is-right"> <div>
<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 v-show="downloadResultsFieldsMode != 'choose'"
<div style="display: flex;"> class="has-text-right">
<div> <p v-if="downloadResultsFieldsMode == 'default'">
<b-field label="Excluded Fields"> Will use DEFAULT fields.
<b-select multiple native-size="8" </p>
expanded <p v-if="downloadResultsFieldsMode == 'all'">
v-model="downloadResultsExcludedFieldsSelected" Will use ALL fields.
ref="downloadResultsExcludedFields"> </p>
<option v-for="field in downloadResultsFieldsExcluded" <br />
:key="field" </div>
:value="field">
{{ field }} <div class="buttons is-right">
</option> <b-button type="is-primary"
</b-select> v-show="downloadResultsFieldsMode != 'default'"
</b-field> @click="downloadResultsUseDefaultFields()">
</div> Use Default Fields
<div> </b-button>
<br /><br /> <b-button type="is-primary"
<b-button style="margin: 0.5rem;" v-show="downloadResultsFieldsMode != 'all'"
@click="downloadResultsExcludeFields()"> @click="downloadResultsUseAllFields()">
&lt; Use All Fields
</b-button> </b-button>
<br /> <b-button type="is-primary"
<b-button style="margin: 0.5rem;" v-show="downloadResultsFieldsMode != 'choose'"
@click="downloadResultsIncludeFields()"> @click="downloadResultsFieldsMode = 'choose'">
&gt; Choose Fields
</b-button> </b-button>
</div> </div>
<div>
<b-field label="Included Fields"> <div v-show="downloadResultsFieldsMode == 'choose'">
<b-select multiple native-size="8" <div style="display: flex;">
expanded <div>
v-model="downloadResultsIncludedFieldsSelected" <b-field label="Excluded Fields">
ref="downloadResultsIncludedFields"> <b-select multiple native-size="8"
<option v-for="field in downloadResultsFieldsIncluded" expanded
:key="field" v-model="downloadResultsExcludedFieldsSelected"
:value="field"> ref="downloadResultsExcludedFields">
{{ field }} <option v-for="field in downloadResultsFieldsExcluded"
</option> :key="field"
</b-select> :value="field">
</b-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
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>
</div> </div>
</div> </div> <!-- card-content -->
</div> <!-- card-content -->
<footer class="modal-card-foot"> <footer class="modal-card-foot">
<b-button @click="showDownloadResultsDialog = false"> <b-button @click="showDownloadResultsDialog = false">
Cancel Cancel
</b-button> </b-button>
<once-button type="is-primary" <once-button type="is-primary"
@click="downloadResultsSubmit()" @click="downloadResultsSubmit()"
icon-pack="fas" icon-pack="fas"
icon-left="fas fa-download" icon-left="fas fa-download"
:disabled="!downloadResultsFieldsIncluded.length" :disabled="!downloadResultsFieldsIncluded.length"
text="Download Results"> text="Download Results">
</once-button> </once-button>
</footer> </footer>
</div> </div>
</b-modal> </b-modal>
</div>
% endif % endif
## download rows for search results ## download rows for search results