Dashboard: Card-Menü für Sessions und Agents
- Session-Cards: Menü mit 'Chat öffnen' und 'Bearbeiten' - Agent-Cards: Menü mit 'Bearbeiten' - Drei-Punkte-Trigger (ellipsis-v) erscheint bei Hover - Click-outside schließt offene Menüs - Card overflow auf visible geändert für Dropdown-Anzeige
This commit is contained in:
1 parent
5037c7d24e
commit
92b1c8a9bc
2 files changed
+126
-4
No files matched your search
@@ -21,11 +21,12 @@
|
||||
}
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
background: var(--f3-bg);
|
||||
border: var(--border-width) solid var(--f3-border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
overflow: visible;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
@@ -42,6 +43,7 @@
|
||||
aspect-ratio: 1;
|
||||
background: var(--f2-bg);
|
||||
overflow: hidden;
|
||||
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
||||
}
|
||||
|
||||
.card-image img {
|
||||
@@ -99,6 +101,66 @@
|
||||
padding: var(--button-padding);
|
||||
}
|
||||
|
||||
/* Card Menu */
|
||||
|
||||
.card-menu {
|
||||
position: absolute;
|
||||
top: var(--badge-spacing);
|
||||
right: var(--badge-spacing);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.card-menu-trigger {
|
||||
opacity: 0;
|
||||
transition: opacity .15s;
|
||||
padding: .15em .45em;
|
||||
font-size: var(--font-size);
|
||||
background: var(--f3-bg);
|
||||
border: var(--border-width) solid var(--f3-border);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.card:hover .card-menu-trigger {
|
||||
opacity: var(--semi-transparent);
|
||||
}
|
||||
|
||||
.card-menu-trigger:hover {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.card-menu-dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
margin-top: .3em;
|
||||
background: var(--f3-bg);
|
||||
border: var(--border-width) solid var(--f3-border);
|
||||
border-radius: var(--border-radius);
|
||||
min-width: 10em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
padding-block: calc(var(--badge-spacing) / 2) var(--badge-spacing);
|
||||
}
|
||||
|
||||
.card-menu-dropdown[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card-menu-item {
|
||||
border: none;
|
||||
border-radius: unset;
|
||||
text-align: left;
|
||||
padding: var(--menu-item-padding);
|
||||
background: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.card-menu-item:not(:disabled):hover {
|
||||
background: var(--f2-bg);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.card-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
Reference in new issue
Block a user