Merge branch 'feature/13-runner-management' of https://git.odit.services/lfk/frontend into feature/13-runner-management

ref #13

src/components/ImportRunnerModal.svelte

@@ -159,52 +159,55 @@
                 <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">
+            <div class="mt-3 text-center sm:mt-0 sm:ml-2 sm:text-left w-full">
-              <h3 class="text-lg leading-6 font-medium text-gray-900">
+              <h3 class="text-lg leading-6 font-bold mt-2 text-gray-900">
                 {$_('runner-import')}
               </h3>
-              {#if json_output.length === 0}
+            </div>
-                <div class="mt-2 mb-6">
+          </div>
-                  <p class="text-sm text-gray-500">
+          <div class="mt-5 text-center sm:mt-0 sm:ml-2 sm:text-left w-full">
-                    {$_('please-provide-the-required-csv-xlsx-file')}
+            {#if json_output.length === 0}
-                  </p>
+              <div class="mt-2 mb-6">
-                </div>
+                <p class="text-sm text-gray-500">
-                <div class="overflow-hidden relative mt-4 mb-4">
+                  {$_('please-provide-the-required-csv-xlsx-file')}
-                  <input
+                </p>
-                    accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+              </div>
-                    bind:files
+              <div class="overflow-hidden relative mt-4 mb-4">
-                    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"
+                  accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
-                  bind:value={searchvalue}
+                  bind:files
-                  placeholder={$_('datatable.search')}
+                  type="file" />
-                  aria-label={$_('datatable.search')}
+              </div>
-                  class="p-2 w-full" />
+            {/if}
-                <div class="relative w-full mt-4 mb-4">
+            {#if json_output.length > 0}
-                  <table
+              {#if opened_from === 'OrgOverview'}
-                    class="divide-y divide-gray-200 w-full overflow-x-scroll">
+                <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">
+                <div class="w-full overflow-x-auto">
+                  <table class="divide-y divide-gray-200 w-full">
                     <thead class="bg-gray-50">
                       <tr>
                         <th
@@ -257,24 +260,24 @@
                       {/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}
+                <button
-            </div>
+                  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>