From 81c1537bada2c87127385d9110d48459cd1b505f Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Sun, 10 Jan 2021 18:14:11 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=92=20UserDetail=20-=20added=20basic?=
 =?UTF-8?q?=20layout=20for=20permission=20change?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #12
---
 src/components/UserDetail.svelte | 49 ++++++++++++++++++++++++++++++--
 1 file changed, 47 insertions(+), 2 deletions(-)

diff --git a/src/components/UserDetail.svelte b/src/components/UserDetail.svelte
index 06befede..0ef16f3f 100644
--- a/src/components/UserDetail.svelte
+++ b/src/components/UserDetail.svelte
@@ -178,7 +178,7 @@
         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 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
     </div>
     <div class="text-sm w-full">
-      <span class="font-medium">Groups</span>
+      <span class="font-medium">{$_('groups')}</span>
       <select
         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 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2"
         multiple>
@@ -189,7 +189,52 @@
     </div>
     <div class="text-sm w-full">
       <span class="font-medium">Permissions</span>
-      <div class="border-4 border-dashed rounded h-96 mb-4 p-5 text-lg text-center">
+      <div
+        class="border-4 border-dashed rounded h-96 mb-4 p-5 text-lg text-center">
+        <!--  -->
+        <div class="flex flex-wrap -mx-1 overflow-hidden">
+          <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
+            <button
+              type="button"
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm">&gt;</button>
+          </div>
+
+          <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
+            <button
+              type="button"
+              class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm">&lt;</button>
+          </div>
+        </div>
+        <!--  -->
+        <div class="flex flex-wrap -mx-1 overflow-hidden">
+          <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
+            <div
+              class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
+              <p
+                class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input">
+                DEMO_PERMISSION
+              </p>
+              <p
+                class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input">
+                DEMO_PERMISSION
+              </p>
+            </div>
+          </div>
+
+          <div class="my-1 px-1 w-full overflow-hidden sm:w-1/2">
+            <div
+              class="border-4 border-dashed rounded mb-4 p-5 text-lg text-center">
+              <p
+                class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input">
+                DEMO_PERMISSION
+              </p>
+              <p
+                class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 bg-gray-200 p-2 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:text-gray-300 dark:focus:shadow-outline-gray form-input">
+                DEMO_PERMISSION
+              </p>
+            </div>
+          </div>
+        </div>
         TODO: permission picker 🔒
       </div>
     </div>