fix(docs): respect PROMPT.md guidelines - replace emoji icons with SVG, fix layout issues
- Replace emoji icons (📄, 📝, 🌐, 📃, ✏️) in export modal with proper SVG icons - Update CSS variables to use sentient bridge variables with fallbacks - Fix docs-main flexbox layout to display canvas and chat panel side by side - Add parent container overrides to prevent black strips from dark themes - Fix chat panel width constraints and collapsed state transitions - Update responsive breakpoints to use --header-height variable - Add !important overrides on backgrounds to ensure proper light theme
This commit is contained in:
parent
9b39088e37
commit
7b2cf282ae
8 changed files with 413 additions and 188 deletions
|
|
@ -27,7 +27,7 @@ body:not(.ai-panel-collapsed) #main-content {
|
|||
.ai-assistant-panel {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 56px; /* Below header */
|
||||
top: 40px; /* Below header - matches --header-height */
|
||||
bottom: 0;
|
||||
width: 320px;
|
||||
display: flex;
|
||||
|
|
@ -47,12 +47,22 @@ body.ai-panel-collapsed #main-content {
|
|||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* Hide on Chat app */
|
||||
/* Hide on Chat app (has its own chat interface) */
|
||||
body[data-app="chat"] .ai-assistant-panel,
|
||||
body[data-app="chat"] .ai-panel-fab {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Hide on Docs app (has its own AI chat panel) */
|
||||
body[data-app="docs"] .ai-assistant-panel,
|
||||
body[data-app="docs"] .ai-panel-fab {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body[data-app="docs"] #main-content {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
AI PANEL HEADER
|
||||
============================================================================= */
|
||||
|
|
@ -206,8 +216,16 @@ body[data-app="chat"] .ai-panel-fab {
|
|||
}
|
||||
|
||||
@keyframes ai-typing {
|
||||
0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
|
||||
30% { transform: translateY(-4px); opacity: 1; }
|
||||
0%,
|
||||
60%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 0.4;
|
||||
}
|
||||
30% {
|
||||
transform: translateY(-4px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -793,23 +793,112 @@
|
|||
<div class="modal-body">
|
||||
<div class="export-options">
|
||||
<button class="export-option" data-format="pdf">
|
||||
<div class="export-icon">📄</div>
|
||||
<div class="export-icon">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path
|
||||
d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
|
||||
/>
|
||||
<polyline points="14 2 14 8 20 8" />
|
||||
<path d="M9 15v-2h1.5a1.5 1.5 0 0 1 0 3H9" />
|
||||
<path d="M13 13h1.5a1.5 1.5 0 0 1 0 3H13v-3z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="export-label">PDF</div>
|
||||
</button>
|
||||
<button class="export-option" data-format="docx">
|
||||
<div class="export-icon">📝</div>
|
||||
<div class="export-icon">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path
|
||||
d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
|
||||
/>
|
||||
<polyline points="14 2 14 8 20 8" />
|
||||
<line x1="8" y1="13" x2="16" y2="13" />
|
||||
<line x1="8" y1="17" x2="14" y2="17" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="export-label">Word</div>
|
||||
</button>
|
||||
<button class="export-option" data-format="html">
|
||||
<div class="export-icon">🌐</div>
|
||||
<div class="export-icon">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<line x1="2" y1="12" x2="22" y2="12" />
|
||||
<path
|
||||
d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="export-label">HTML</div>
|
||||
</button>
|
||||
<button class="export-option" data-format="txt">
|
||||
<div class="export-icon">📃</div>
|
||||
<div class="export-icon">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path
|
||||
d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
|
||||
/>
|
||||
<polyline points="14 2 14 8 20 8" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="export-label">Text</div>
|
||||
</button>
|
||||
<button class="export-option" data-format="md">
|
||||
<div class="export-icon">✏️</div>
|
||||
<div class="export-icon">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path
|
||||
d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
|
||||
/>
|
||||
<polyline points="14 2 14 8 20 8" />
|
||||
<path d="M7 15l2-2 2 2" />
|
||||
<line x1="9" y1="13" x2="9" y2="17" />
|
||||
<path d="M13 13h2v4" />
|
||||
<path d="M13 15h2" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="export-label">Markdown</div>
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -393,22 +393,32 @@
|
|||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Modals */
|
||||
.modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
dialog.modal {
|
||||
display: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
dialog.modal[open] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.modal::backdrop {
|
||||
dialog.modal::backdrop {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
|
|
@ -610,7 +620,7 @@
|
|||
.send-group .dropdown-toggle {
|
||||
padding: 0.625rem 0.5rem;
|
||||
border-radius: 0 6px 6px 0;
|
||||
border-left: 1px solid rgba(255,255,255,0.2);
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.schedule-menu {
|
||||
|
|
@ -622,7 +632,7 @@
|
|||
border-radius: 8px;
|
||||
padding: 0.5rem 0;
|
||||
min-width: 240px;
|
||||
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
|
||||
display: none;
|
||||
z-index: 10;
|
||||
margin-bottom: 0.5rem;
|
||||
|
|
@ -748,7 +758,7 @@
|
|||
}
|
||||
|
||||
.toggle-switch::after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
|
|
|
|||
|
|
@ -1269,6 +1269,7 @@
|
|||
name="username"
|
||||
placeholder="username or email"
|
||||
required
|
||||
autocomplete="username"
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
|
|
@ -1340,5 +1341,5 @@
|
|||
</div>
|
||||
</dialog>
|
||||
|
||||
<link rel="stylesheet" href="mail.css" />
|
||||
<script src="mail.js"></script>
|
||||
<link rel="stylesheet" href="mail/mail.css" />
|
||||
<script src="mail/mail.js"></script>
|
||||
|
|
|
|||
|
|
@ -80,9 +80,23 @@
|
|||
function confirmSchedule() {
|
||||
var dateInput = document.getElementById("schedule-date");
|
||||
var timeInput = document.getElementById("schedule-time");
|
||||
if (dateInput && timeInput) {
|
||||
if (dateInput && timeInput && dateInput.value && timeInput.value) {
|
||||
var scheduledDate = new Date(dateInput.value + "T" + timeInput.value);
|
||||
if (isNaN(scheduledDate.getTime())) {
|
||||
if (typeof window.showNotification === "function") {
|
||||
window.showNotification(
|
||||
"Please select a valid date and time",
|
||||
"error",
|
||||
);
|
||||
}
|
||||
return;
|
||||
}
|
||||
confirmScheduleSend(scheduledDate);
|
||||
} else {
|
||||
if (typeof window.showNotification === "function") {
|
||||
window.showNotification("Please select a date and time", "error");
|
||||
}
|
||||
return;
|
||||
}
|
||||
closeScheduleModal();
|
||||
}
|
||||
|
|
@ -368,14 +382,14 @@
|
|||
}
|
||||
|
||||
function openAddAccount() {
|
||||
var modal = document.getElementById("account-modal");
|
||||
var modal = document.getElementById("add-account-modal");
|
||||
if (modal && modal.showModal) {
|
||||
modal.showModal();
|
||||
}
|
||||
}
|
||||
|
||||
function closeAddAccount() {
|
||||
var modal = document.getElementById("account-modal");
|
||||
var modal = document.getElementById("add-account-modal");
|
||||
if (modal && modal.close) {
|
||||
modal.close();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -498,7 +498,7 @@
|
|||
|
||||
.cells-container {
|
||||
position: relative;
|
||||
background: var(--sentient-bg-primary, #ffffff);
|
||||
background: var(--sentient-bg-primary);
|
||||
}
|
||||
|
||||
.cells {
|
||||
|
|
@ -514,11 +514,11 @@
|
|||
padding: 0 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-right: 1px solid var(--sentient-border, #e0e0e0);
|
||||
border-bottom: 1px solid var(--sentient-border, #e0e0e0);
|
||||
border-right: 1px solid var(--sentient-border);
|
||||
border-bottom: 1px solid var(--sentient-border);
|
||||
font-size: 13px;
|
||||
background: var(--sentient-bg-primary, #ffffff);
|
||||
color: var(--sentient-text-primary, #212121);
|
||||
background: var(--sentient-bg-primary);
|
||||
color: var(--sentient-text-primary);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
|
@ -527,7 +527,7 @@
|
|||
}
|
||||
|
||||
.cell:hover {
|
||||
background: var(--sentient-bg-hover, #f5f5f5);
|
||||
background: var(--sentient-bg-hover);
|
||||
}
|
||||
|
||||
.cell.selected {
|
||||
|
|
@ -549,12 +549,12 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
outline: 2px solid var(--sentient-accent, #4285f4);
|
||||
outline: 2px solid var(--sentient-accent);
|
||||
padding: 0 6px;
|
||||
font-size: 13px;
|
||||
font-family: inherit;
|
||||
background: var(--sentient-bg-primary, #ffffff);
|
||||
color: var(--sentient-text-primary, #212121);
|
||||
background: var(--sentient-bg-primary);
|
||||
color: var(--sentient-text-primary);
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
|
|
|
|||
|
|
@ -310,5 +310,4 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<link rel="stylesheet" href="tasks.css" />
|
||||
<script src="tasks.js"></script>
|
||||
<link rel="stylesheet" href="tasks/tasks.css" />
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue