From 5af26a57f6652f2e1ac7824b7ee99472b8c33b40 Mon Sep 17 00:00:00 2001
From: Lance Edgar <lance@edbob.org>
Date: Sat, 22 Aug 2020 16:11:29 -0500
Subject: [PATCH] Improve layout for "download results" modal

---
 tailbone/templates/master/index.mako | 98 ++++++++++++++--------------
 1 file changed, 49 insertions(+), 49 deletions(-)

diff --git a/tailbone/templates/master/index.mako b/tailbone/templates/master/index.mako
index 6ff9c4fe..a2078907 100644
--- a/tailbone/templates/master/index.mako
+++ b/tailbone/templates/master/index.mako
@@ -184,9 +184,9 @@
                   the end result (file size) may be larger with CSV.
                 </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-select v-model="downloadResultsFormat">
                         % for key, label in six.iteritems(master.download_results_supported_formats()):
@@ -197,6 +197,7 @@
                   </div>
 
                   <div>
+
                     <div v-show="downloadResultsFieldsMode != 'choose'"
                          class="has-text-right">
                       <p v-if="downloadResultsFieldsMode == 'default'">
@@ -205,9 +206,10 @@
                       <p v-if="downloadResultsFieldsMode == 'all'">
                         Will use ALL fields.
                       </p>
+                      <br />
                     </div>
-                    <br />
-                    <div class="buttons">
+
+                    <div class="buttons is-right">
                       <b-button type="is-primary"
                                 v-show="downloadResultsFieldsMode != 'default'"
                                 @click="downloadResultsUseDefaultFields()">
@@ -224,55 +226,53 @@
                         Choose Fields
                       </b-button>
                     </div>
-                  </div>
 
-                </div>
-                <br />
+                    <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 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> <!-- card-content -->
 
               <footer class="modal-card-foot">