liz/PluralKit
liz/PluralKit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(dashboard): fix broken styling on lists

Browse Source
This commit is contained in:
Jake Fulmine 2022-11-26 14:25:10 +01:00
parent c574ad6ecf
commit a62b6d53e2
2 changed files with 21 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
dashboard/src/components/list/ListView.svelte
View File

@ -109,11 +109,11 @@
</script> </script>
{#if !openByDefault && (settings && settings.accessibility ? (!settings.accessibility.expandedcards && !settings.accessibility.pagelinks) : true)} {#if !openByDefault && (settings && settings.accessibility ? (!settings.accessibility.expandedcards && !settings.accessibility.pagelinks) : true)}
<div class="mb-3"> <div class="mb-3 accordion">
{#each list as item, index (item.uuid)} {#each list as item, index (item.uuid)}
<Card> <Card style="border-radius: 0;">
<h2 class="accordion-header"> <h2 class="accordion-header">
<button class="w-100 accordion-button collapsed card-header" id={`${itemType}-card-${indexStart + index}`} on:click={() => toggleCard(item.uuid)} on:keydown={(e) => skipToNextItem(e, indexStart + index)}> <button class="w-100 accordion-button collapsed bg-transparent" id={`${itemType}-card-${indexStart + index}`} on:click={() => toggleCard(item.uuid)} on:keydown={(e) => skipToNextItem(e, indexStart + index)}>
<CardsHeader {item} {sortBy} {searchBy}> <CardsHeader {item} {sortBy} {searchBy}>
<div slot="icon" style="cursor: pointer;" id={`${itemType}-copy-${item.id}-${indexStart + index}`} on:click|stopPropagation={() => copyShortLink(indexStart + index, item.id)} on:keydown={(e) => copyShortLink(indexStart + index, item.id, e)} tabindex={0} > <div slot="icon" style="cursor: pointer;" id={`${itemType}-copy-${item.id}-${indexStart + index}`} on:click|stopPropagation={() => copyShortLink(indexStart + index, item.id)} on:keydown={(e) => copyShortLink(indexStart + index, item.id, e)} tabindex={0} >
{#if isPublic || item.privacy.visibility === "public"} {#if isPublic || item.privacy.visibility === "public"}
@ -131,7 +131,7 @@
</button> </button>
</h2> </h2>
<Collapse isOpen={isOpen[item.uuid]}> <Collapse isOpen={isOpen[item.uuid]}>
<CardBody> <CardBody class="border-top">
{#if itemType === "member"} {#if itemType === "member"}
<MemberBody on:update on:deletion bind:isPublic groups={groups} member={item} /> <MemberBody on:update on:deletion bind:isPublic groups={groups} member={item} />
{:else if itemType === "group"} {:else if itemType === "group"}
@ -175,8 +175,8 @@
{:else} {:else}
<div class="my-3"> <div class="my-3">
{#each list as item, index (item.id + index)} {#each list as item, index (item.id + index)}
<Card> <Card style="border-radius: 0;">
<a class="accordion-button collapsed" style="text-decoration: none;" href={getItemLink(item)} id={`${itemType}-card-${indexStart + index}`} on:keydown={(e) => skipToNextItem(e, indexStart + index)} use:link > <a class="accordion-button collapsed bg-transparent" style="text-decoration: none;" href={getItemLink(item)} id={`${itemType}-card-${indexStart + index}`} on:keydown={(e) => skipToNextItem(e, indexStart + index)} use:link >
<CardsHeader {item}> <CardsHeader {item}>
<div slot="icon" style="cursor: pointer;" id={`${itemType}-copy-${item.id}-${indexStart + index}`} on:click|stopPropagation={() => copyShortLink(indexStart + index, item.id)} on:keydown|stopPropagation={(e) => copyShortLink(indexStart + index, item.id, e)} tabindex={0} > <div slot="icon" style="cursor: pointer;" id={`${itemType}-copy-${item.id}-${indexStart + index}`} on:click|stopPropagation={() => copyShortLink(indexStart + index, item.id)} on:keydown|stopPropagation={(e) => copyShortLink(indexStart + index, item.id, e)} tabindex={0} >
{#if isPublic || item.privacy.visibility === "public"} {#if isPublic || item.privacy.visibility === "public"}

15
dashboard/styles/generic.scss
View File

@ -116,6 +116,21 @@ code {
z-index: initial !important; z-index: initial !important;
} }
.accordion .card {
border-bottom-width: 0;
}
.accordion .card:first-child {
border-top-left-radius: calc(0.375rem - 1px) !important;
border-top-right-radius: calc(0.375rem - 1px) !important;
}
.accordion .card:last-child {
border-bottom-left-radius: calc(0.375rem - 1px) !important;
border-bottom-right-radius: calc(0.375rem - 1px) !important;
border-bottom-width: 1px;
}
// svelecte styling // svelecte styling
.svelecte-control .sv-control { .svelecte-control .sv-control {
border-color: $gray-transparent !important; // overwrite border-color: $gray-transparent !important; // overwrite