Rodrigo Rodriguez (Pragmatismo)
f2624aef94
Update dashboard CSS to use new color scheme matching visual identity, replacing CSS variables with specific color values. Improved button hover state with background transition instead of opacity. Expanded layout.js with additional application sections including dashboard, editor, player, and settings to support new navigation structure.
64 lines
2.7 KiB
HTML
64 lines
2.7 KiB
HTML
<div class="mail-layout" x-data="mailApp()" x-cloak>
|
|
<div class="panel mail-sidebar">
|
|
<div style="padding: 1rem; border-bottom: 1px solid #334155;">
|
|
<button style="width: 100%; padding: 0.75rem; background: #3b82f6; color: white; border: none; border-radius: 0.5rem; cursor: pointer; font-weight: 600;">
|
|
✏ Compose
|
|
</button>
|
|
</div>
|
|
<template x-for="folder in folders" :key="folder.name">
|
|
<div class="nav-item"
|
|
:class="{ active: currentFolder === folder.name }"
|
|
@click="currentFolder = folder.name">
|
|
<span x-text="folder.icon"></span>
|
|
<span x-text="folder.name"></span>
|
|
<span style="margin-left: auto; font-size: 0.875rem; color: #64748b;"
|
|
x-show="folder.count > 0"
|
|
x-text="folder.count"></span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<div class="panel mail-list">
|
|
<div style="padding: 1rem; border-bottom: 1px solid #334155;">
|
|
<h3 x-text="currentFolder"></h3>
|
|
</div>
|
|
<template x-for="mail in filteredMails" :key="mail.id">
|
|
<div class="mail-item"
|
|
:class="{ unread: !mail.read, selected: selectedMail?.id === mail.id }"
|
|
@click="selectMail(mail)">
|
|
<div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
|
|
<span style="font-weight: 600;" x-text="mail.from"></span>
|
|
<span class="text-xs text-gray" x-text="mail.time"></span>
|
|
</div>
|
|
<div style="font-weight: 600; margin-bottom: 0.25rem;" x-text="mail.subject"></div>
|
|
<div class="text-sm text-gray" x-text="mail.preview"></div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<div class="panel mail-content">
|
|
<template x-if="selectedMail">
|
|
<div class="mail-content-view">
|
|
<div class="mail-header">
|
|
<h2 x-text="selectedMail.subject"></h2>
|
|
<div style="display: flex; align-items: center; gap: 1rem; margin-top: 1rem;">
|
|
<div>
|
|
<div style="font-weight: 600;" x-text="selectedMail.from"></div>
|
|
<div class="text-sm text-gray" x-text="'to: ' + selectedMail.to"></div>
|
|
</div>
|
|
<div style="margin-left: auto;" class="text-sm text-gray" x-text="selectedMail.date"></div>
|
|
</div>
|
|
</div>
|
|
<div class="mail-body" x-html="selectedMail.body"></div>
|
|
</div>
|
|
</template>
|
|
<template x-if="!selectedMail">
|
|
<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #64748b;">
|
|
<div style="text-align: center;">
|
|
<div style="font-size: 4rem; margin-bottom: 1rem;">✉</div>
|
|
<p>Select a message to read</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|