fixing some more visual bugs

sebadob · Jul 13, 2023 · 459bdbd · 459bdbd
1 parent cadaa40
commit 459bdbd
Show file tree

Hide file tree

Showing 14 changed files with 196 additions and 144 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/src/components/admin/clients/ClientTile.svelte b/frontend/src/components/admin/clients/ClientTile.svelte
@@ -8,7 +8,6 @@
     import ClientDelete from "./ClientDelete.svelte";
     import ClientBranding from "./ClientBranding.svelte";
 
-    export let idx = 0;
     export let client = {};
     export let onSave;
 
@@ -32,7 +31,7 @@
 
 </script>
 
-<ExpandContainer bind:idx bind:show={expandContainer}>
+<ExpandContainer bind:show={expandContainer}>
     <div class="header" slot="header">
         <Tooltip text="Client ID">
             <div class="data font-mono">

diff --git a/frontend/src/components/admin/clients/Clients.svelte b/frontend/src/components/admin/clients/Clients.svelte
@@ -68,9 +68,19 @@
 
     <ClientTileAddNew onSave={onSave}/>
 
-    {#each resClients as client, i (client.id)}
-        <ClientTile idx={i} bind:client onSave={onSave}/>
-    {/each}
+    <div id="clients">
+        {#each resClients as client (client.id)}
+            <div>
+                <ClientTile bind:client onSave={onSave}/>
+            </div>
+        {/each}
+    </div>
 
     <div style="height: 20px"></div>
 </div>
+
+<style>
+    #clients div:nth-of-type(2n + 1) {
+        background: var(--col-ghigh);
+    }
+</style>
diff --git a/frontend/src/components/admin/groups/GroupTile.svelte b/frontend/src/components/admin/groups/GroupTile.svelte
@@ -6,7 +6,6 @@
     import GroupConfig from "./GroupConfig.svelte";
     import GroupDelete from "./GroupDelete.svelte";
 
-    export let idx = 0;
     export let group = {};
     export let onSave;
 
@@ -28,7 +27,7 @@
 
 </script>
 
-<ExpandContainer bind:idx bind:show={expandContainer}>
+<ExpandContainer bind:show={expandContainer}>
     <div class="header" slot="header">
         <Tooltip text="Group ID">
             <div class="data font-mono">

diff --git a/frontend/src/components/admin/groups/Groups.svelte b/frontend/src/components/admin/groups/Groups.svelte
@@ -62,9 +62,19 @@
 
     <GroupTileAddNew onSave={onSave}/>
 
-    {#each resGroups as group, i (group.id)}
-        <GroupTile idx={i} bind:group onSave={onSave}/>
-    {/each}
+    <div id="groups">
+        {#each resGroups as group (group.id)}
+            <div>
+                <GroupTile bind:group onSave={onSave}/>
+            </div>
+        {/each}
+    </div>
 
     <div style="height: 20px"></div>
 </div>
+
+<style>
+    #groups div:nth-of-type(2n + 1) {
+        background: var(--col-ghigh);
+    }
+</style>
diff --git a/frontend/src/components/admin/roles/RoleTile.svelte b/frontend/src/components/admin/roles/RoleTile.svelte
@@ -6,7 +6,6 @@
     import RoleConfig from "./RoleConfig.svelte";
     import RoleDelete from "./RoleDelete.svelte";
 
-    export let idx = 0;
     export let role = {};
     export let onSave;
 
@@ -28,7 +27,7 @@
 
 </script>
 
-<ExpandContainer bind:idx bind:show={expandContainer}>
+<ExpandContainer bind:show={expandContainer}>
     <div class="header" slot="header">
         <Tooltip text="Role ID">
             <div class="data font-mono">

diff --git a/frontend/src/components/admin/roles/Roles.svelte b/frontend/src/components/admin/roles/Roles.svelte
@@ -62,9 +62,19 @@
 
     <RoleTileAddNew onSave={onSave}/>
 
-    {#each resRoles as role, i (role.id)}
-        <RoleTile idx={i} bind:role onSave={onSave}/>
-    {/each}
+    <div id="roles">
+        {#each resRoles as role (role.id)}
+            <div>
+                <RoleTile bind:role onSave={onSave}/>
+            </div>
+        {/each}
+    </div>
 
     <div style="height: 20px"></div>
 </div>
+
+<style>
+    #roles div:nth-of-type(2n + 1) {
+        background: var(--col-ghigh);
+    }
+</style>
diff --git a/frontend/src/components/admin/scopes/ScopeTile.svelte b/frontend/src/components/admin/scopes/ScopeTile.svelte
@@ -6,7 +6,6 @@
     import ScopeConfig from "./ScopeConfig.svelte";
     import ScopeDelete from "./ScopeDelete.svelte";
 
-    export let idx = 0;
     export let attrs;
     export let scope = {};
     export let onSave;
@@ -29,7 +28,7 @@
 
 </script>
 
-<ExpandContainer bind:idx bind:show={expandContainer}>
+<ExpandContainer bind:show={expandContainer}>
     <div class="header" slot="header">
         <Tooltip text="Scope ID">
             <div class="data font-mono">

diff --git a/frontend/src/components/admin/scopes/Scopes.svelte b/frontend/src/components/admin/scopes/Scopes.svelte
@@ -75,9 +75,19 @@
 
     <ScopeTileAddNew onSave={onSave}/>
 
-    {#each resScopes as scope, i (scope.id)}
-        <ScopeTile idx={i} bind:attrs bind:scope onSave={onSave}/>
-    {/each}
+    <div id="scopes">
+        {#each resScopes as scope (scope.id)}
+            <div>
+                <ScopeTile bind:attrs bind:scope onSave={onSave}/>
+            </div>
+        {/each}
+    </div>
 
     <div style="height: 20px"></div>
 </div>
+
+<style>
+    #scopes div:nth-of-type(2n + 1) {
+        background: var(--col-ghigh);
+    }
+</style>
diff --git a/frontend/src/components/admin/userAttr/Attr.svelte b/frontend/src/components/admin/userAttr/Attr.svelte
@@ -54,9 +54,19 @@
 
     <UserAttrTileAddNew onSave={onSave}/>
 
-    {#each resAttr as attr, i (attr.name)}
-        <UserAttrTile idx={i} bind:attr onSave={onSave}/>
-    {/each}
+    <div id="attrs">
+        {#each resAttr as attr (attr.name)}
+            <div>
+                <UserAttrTile bind:attr onSave={onSave}/>
+            </div>
+        {/each}
+    </div>
 
     <div style="height: 20px"></div>
 </div>
+
+<style>
+    #attrs div:nth-of-type(2n + 1) {
+        background: var(--col-ghigh);
+    }
+</style>
diff --git a/frontend/src/components/admin/userAttr/AttrTile.svelte b/frontend/src/components/admin/userAttr/AttrTile.svelte
@@ -6,7 +6,6 @@
     import UserAttrConfig from "./AttrConfig.svelte";
     import UserAttrDelete from "./AttrDelete.svelte";
 
-    export let idx = 0;
     export let attr = {};
     export let onSave;
 
@@ -28,7 +27,7 @@
 
 </script>
 
-<ExpandContainer bind:idx bind:show={expandContainer}>
+<ExpandContainer bind:show={expandContainer}>
     <div class="header" slot="header">
         <Tooltip text="Custom Attribute Name">
             <div class="data">

diff --git a/frontend/src/components/admin/users/UserTile.svelte b/frontend/src/components/admin/users/UserTile.svelte
@@ -9,7 +9,6 @@
     import UserForceLogout from "./UserForceLogout.svelte";
     import UserAttr from "./UserAttr.svelte";
 
-    export let idx = 0;
     export let user = {};
     export let onSave;
 
@@ -34,7 +33,7 @@
 
 </script>
 
-<ExpandContainer bind:idx bind:show={expandContainer}>
+<ExpandContainer bind:show={expandContainer}>
     <div class="header" slot="header">
         <Tooltip text="User ID">
             <div class="data font-mono">

diff --git a/frontend/src/components/admin/users/Users.svelte b/frontend/src/components/admin/users/Users.svelte
@@ -90,7 +90,17 @@
 
     <UserTileAddNew onSave={onSave}/>
 
-    {#each resUsers as user, i (user.id)}
-        <UserTile idx={i} bind:user onSave={onSave}/>
-    {/each}
+    <div id="users">
+        {#each resUsers as user (user.id)}
+            <div>
+                <UserTile bind:user onSave={onSave}/>
+            </div>
+        {/each}
+    </div>
 </div>
+
+<style>
+    #users div:nth-of-type(2n + 1) {
+        background: var(--col-ghigh);
+    }
+</style>
diff --git a/frontend/src/lib/ExpandContainer.svelte b/frontend/src/lib/ExpandContainer.svelte
@@ -10,7 +10,6 @@
     let isHover = false;
     let element;
     let bodyElement;
-    let background = idx % 2 === 0 ? 'var(--col-ghigh)' : 'var(--col-bg)';
     let borderLeft = idx % 2 === 0 ? '2px solid var(--col-acnt)' : '2px solid var(--col-acnta)';
 
     const rotate = spring(0, {
@@ -55,7 +54,6 @@
 
 <div
         class="container"
-        style:background
         style:border-left={show ? borderLeft : 'none'}
         bind:this={element}
 >