From 2cc9b3e1ede47bb1a4b598afc260d0bc06ed0902 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Sun, 24 Jan 2021 18:38:16 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=91=80=20ImportRunnerModal=20-=20layout?=
 =?UTF-8?q?=20cleanup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #13
---
 src/components/ImportRunnerModal.svelte | 228 ++++++++++++------------
 1 file changed, 115 insertions(+), 113 deletions(-)

diff --git a/src/components/ImportRunnerModal.svelte b/src/components/ImportRunnerModal.svelte
index 3576c453..7d46bafe 100644
--- a/src/components/ImportRunnerModal.svelte
+++ b/src/components/ImportRunnerModal.svelte
@@ -159,123 +159,125 @@
                 <path
                   d="M9.83 8.79L8 9.456V13H6V8.05h.015l5.268-1.918c.244-.093.51-.14.782-.131a2.616 2.616 0 0 1 2.427 1.82c.186.583.356.977.51 1.182A4.992 4.992 0 0 0 19 11v2a6.986 6.986 0 0 1-5.402-2.547l-.581 3.297L15 15.67V23h-2v-5.986l-2.05-1.987-.947 4.298-6.894-1.215.348-1.97 4.924.868L9.83 8.79zM13.5 5.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" /></svg>
             </div>
-            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
-              <h3 class="text-lg leading-6 font-medium text-gray-900">
+            <div class="mt-3 text-center sm:mt-0 sm:ml-2 sm:text-left w-full">
+              <h3 class="text-lg leading-6 font-bold mt-2 text-gray-900">
                 {$_('runner-import')}
               </h3>
-              {#if json_output.length === 0}
-                <div class="mt-2 mb-6">
-                  <p class="text-sm text-gray-500">
-                    {$_('please-provide-the-required-csv-xlsx-file')}
-                  </p>
-                </div>
-                <div class="overflow-hidden relative mt-4 mb-4">
-                  <input
-                    accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
-                    bind:files
-                    type="file" />
-                </div>
-              {/if}
-              {#if json_output.length > 0}
-                {#if opened_from === 'OrgOverview'}
-                  <p>{$_('import__target-organization')}</p>
-                  <select
-                    name="team"
-                    bind:value={selected_org}
-                    class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">
-                    {#each passed_orgs as o}
-                      <option value={o.id}>{o.name}</option>
-                    {/each}
-                  </select>
-                  <p>{$_('bitte-bestaetige-diese-laeufer-fuer-den-import')}</p>
-                {/if}
-                {#if opened_from === 'OrgDetail'}
-                  <p>
-                    {$_('runnerimport_verify_runners_org', {
-                      values: { org_name: passed_org.name },
-                    })}
-                  </p>
-                {/if}
-                <input
-                  type="search"
-                  bind:value={searchvalue}
-                  placeholder={$_('datatable.search')}
-                  aria-label={$_('datatable.search')}
-                  class="p-2 w-full" />
-                <div class="relative w-full mt-4 mb-4">
-                  <table
-                    class="divide-y divide-gray-200 w-full overflow-x-scroll">
-                    <thead class="bg-gray-50">
-                      <tr>
-                        <th
-                          scope="col"
-                          class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                          {$_('csv_import__firstname')}
-                        </th>
-                        <th
-                          scope="col"
-                          class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                          {$_('csv_import__middlename')}
-                        </th>
-                        <th
-                          scope="col"
-                          class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                          {$_('csv_import__lastname')}
-                        </th>
-                        {#if opened_from !== 'TeamDetail'}
-                          <th
-                            scope="col"
-                            class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                            {$_('csv_import__team')}
-                          </th>
-                        {/if}
-                      </tr>
-                    </thead>
-                    <tbody class="divide-y divide-gray-200">
-                      {#each json_output as runner}
-                        {#if Object.values(runner)
-                          .toString()
-                          .toLowerCase()
-                          .includes(searchvalue)}
-                          <tr>
-                            <td class="px-6 py-4 whitespace-nowrap">
-                              {runner[`${$_('csv_import__firstname')}`]}
-                            </td>
-                            <td class="px-6 py-4 whitespace-nowrap">
-                              {runner[`${$_('csv_import__middlename')}`] || ''}
-                            </td>
-                            <td class="px-6 py-4 whitespace-nowrap">
-                              {runner[`${$_('csv_import__lastname')}`]}
-                            </td>
-                            {#if opened_from !== 'TeamDetail'}
-                              <td class="px-6 py-4 whitespace-nowrap">
-                                {runner[`${$_('csv_import__team')}`] || runner[`${$_('csv_import__class')}`] || '---'}
-                              </td>
-                            {/if}
-                          </tr>
-                        {/if}
-                      {/each}
-                    </tbody>
-                  </table>
-                  <button
-                    on:click={importAction}
-                    type="button"
-                    class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
-                    {$_('import-runners')}
-                  </button>
-                  <button
-                    on:click={() => {
-                      json_output = [];
-                      cancelModal();
-                    }}
-                    type="button"
-                    class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
-                    {$_('cancel')}
-                  </button>
-                </div>
-              {/if}
             </div>
           </div>
+          <div class="mt-5 text-center sm:mt-0 sm:ml-2 sm:text-left w-full">
+            {#if json_output.length === 0}
+              <div class="mt-2 mb-6">
+                <p class="text-sm text-gray-500">
+                  {$_('please-provide-the-required-csv-xlsx-file')}
+                </p>
+              </div>
+              <div class="overflow-hidden relative mt-4 mb-4">
+                <input
+                  accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+                  bind:files
+                  type="file" />
+              </div>
+            {/if}
+            {#if json_output.length > 0}
+              {#if opened_from === 'OrgOverview'}
+                <p>{$_('import__target-organization')}</p>
+                <select
+                  name="team"
+                  bind:value={selected_org}
+                  class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2">
+                  {#each passed_orgs as o}
+                    <option value={o.id}>{o.name}</option>
+                  {/each}
+                </select>
+                <p>{$_('bitte-bestaetige-diese-laeufer-fuer-den-import')}</p>
+              {/if}
+              {#if opened_from === 'OrgDetail'}
+                <p>
+                  {$_('runnerimport_verify_runners_org', {
+                    values: { org_name: passed_org.name },
+                  })}
+                </p>
+              {/if}
+              <input
+                type="search"
+                bind:value={searchvalue}
+                placeholder={$_('datatable.search')}
+                aria-label={$_('datatable.search')}
+                class="p-2 w-full" />
+              <div class="relative w-full mt-4 mb-4">
+                <table
+                  class="divide-y divide-gray-200 w-full overflow-x-scroll">
+                  <thead class="bg-gray-50">
+                    <tr>
+                      <th
+                        scope="col"
+                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        {$_('csv_import__firstname')}
+                      </th>
+                      <th
+                        scope="col"
+                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        {$_('csv_import__middlename')}
+                      </th>
+                      <th
+                        scope="col"
+                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                        {$_('csv_import__lastname')}
+                      </th>
+                      {#if opened_from !== 'TeamDetail'}
+                        <th
+                          scope="col"
+                          class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
+                          {$_('csv_import__team')}
+                        </th>
+                      {/if}
+                    </tr>
+                  </thead>
+                  <tbody class="divide-y divide-gray-200">
+                    {#each json_output as runner}
+                      {#if Object.values(runner)
+                        .toString()
+                        .toLowerCase()
+                        .includes(searchvalue)}
+                        <tr>
+                          <td class="px-6 py-4 whitespace-nowrap">
+                            {runner[`${$_('csv_import__firstname')}`]}
+                          </td>
+                          <td class="px-6 py-4 whitespace-nowrap">
+                            {runner[`${$_('csv_import__middlename')}`] || ''}
+                          </td>
+                          <td class="px-6 py-4 whitespace-nowrap">
+                            {runner[`${$_('csv_import__lastname')}`]}
+                          </td>
+                          {#if opened_from !== 'TeamDetail'}
+                            <td class="px-6 py-4 whitespace-nowrap">
+                              {runner[`${$_('csv_import__team')}`] || runner[`${$_('csv_import__class')}`] || '---'}
+                            </td>
+                          {/if}
+                        </tr>
+                      {/if}
+                    {/each}
+                  </tbody>
+                </table>
+                <button
+                  on:click={importAction}
+                  type="button"
+                  class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
+                  {$_('import-runners')}
+                </button>
+                <button
+                  on:click={() => {
+                    json_output = [];
+                    cancelModal();
+                  }}
+                  type="button"
+                  class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm">
+                  {$_('cancel')}
+                </button>
+              </div>
+            {/if}
+          </div>
         </div>
       </div>
     </div>