Add live visitor monitoring
This commit is contained in:
+79
-1
@@ -61,7 +61,7 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
|
||||
height: 100vh;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-columns: 330px minmax(0, 1fr);
|
||||
grid-template-columns: 330px minmax(0, 1fr) 320px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.sidebar {
|
||||
@@ -358,6 +358,83 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
.visitor-panel {
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
border-left: 1px solid var(--line);
|
||||
background: var(--panel);
|
||||
}
|
||||
.visitor-panel header {
|
||||
padding: 14px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
.visitor-panel h2 { margin: 0; font-size: 18px; }
|
||||
.visitor-panel header span { color: var(--muted); font-size: 12px; }
|
||||
.visitor-list {
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
.visitor-card {
|
||||
padding: 12px 14px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
background: white;
|
||||
}
|
||||
.visitor-card-head {
|
||||
display: grid;
|
||||
grid-template-columns: 34px minmax(0, 1fr) 10px;
|
||||
gap: 9px;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.visitor-card-head strong,
|
||||
.visitor-card-head small {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.visitor-card-head small { color: var(--muted); font-size: 12px; margin-top: 2px; }
|
||||
.visitor-avatar {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 8px;
|
||||
background: #eaf6f1;
|
||||
color: var(--brand);
|
||||
font-weight: 800;
|
||||
font-size: 13px;
|
||||
}
|
||||
.online-dot {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 50%;
|
||||
background: #2f9e44;
|
||||
box-shadow: 0 0 0 4px rgb(47 158 68 / 14%);
|
||||
}
|
||||
.visitor-card dl {
|
||||
display: grid;
|
||||
grid-template-columns: 68px minmax(0, 1fr);
|
||||
gap: 5px 8px;
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
.visitor-card dt { color: var(--muted); }
|
||||
.visitor-card dd {
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.visitor-card a { color: var(--ink); text-decoration: none; }
|
||||
.visitor-card a:hover { color: var(--brand); text-decoration: underline; }
|
||||
.message {
|
||||
max-width: min(680px, 86%);
|
||||
padding: 10px 12px;
|
||||
@@ -599,4 +676,5 @@ pre {
|
||||
.app { height: auto; min-height: 100vh; grid-template-columns: 1fr; overflow: visible; }
|
||||
.sidebar { height: 42vh; border-right: 0; border-bottom: 1px solid var(--line); }
|
||||
.conversation { height: 58vh; }
|
||||
.visitor-panel { display: none; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user