refactor: redesign book detail page to match journal mockup styling
- Replace Pico CSS with index-style custom CSS variables - Redesign layout: back breadcrumb, info table, shelf/status selects - Update spine-book-model: add shelf_name, format_icon/label, tags_display, date display fields, rating display, status/shelf options - Remove unused fields: meta, progress_label, formats array - Update spine-book-model-test.el: 23 tests cover all new fields - Add --text-danger CSS variable for remove button
This commit is contained in:
+135
-78
@@ -5,100 +5,157 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="color-scheme" content="light dark" />
|
||||
<title>Spine — {{title}}</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2.1.1/css/pico.min.css" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tabler-icons/3.31.0/iconfont/tabler-icons.min.css" />
|
||||
<style>
|
||||
.book { max-width: 560px; margin-inline: auto; }
|
||||
.book hgroup { margin-bottom: .4rem; }
|
||||
.book hgroup h3 { margin-bottom: .1rem; }
|
||||
.book hgroup p { color: var(--pico-muted-color); margin: 0; }
|
||||
.cover { width: 44px; height: 60px; border-radius: var(--pico-border-radius);
|
||||
background: var(--pico-primary-background); color: var(--pico-primary-inverse);
|
||||
display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.pill { padding: .1rem .5rem; border-radius: var(--pico-border-radius); font-size: .75rem; font-weight: 500; }
|
||||
.pill.want { background: #e6f1fb; color: #0c447c; }
|
||||
.pill.reading { background: #faeeda; color: #854f0b; }
|
||||
.pill.read { background: #e1f5ee; color: #085041; }
|
||||
.formats { margin-bottom: 1.1rem; }
|
||||
.formats button { --pico-font-size: .85rem; }
|
||||
.seclabel { font-size: .72rem; letter-spacing: .03em; color: var(--pico-muted-color);
|
||||
text-transform: none; margin-bottom: .6rem; }
|
||||
.thread { border-left: 2px solid var(--pico-muted-border-color); padding-left: .9rem; margin-bottom: .9rem; }
|
||||
.entry { margin-bottom: .8rem; }
|
||||
.entry:last-child { margin-bottom: 0; }
|
||||
.edate { font-size: .75rem; color: var(--pico-muted-color); margin-bottom: .15rem; }
|
||||
.etext { font-size: .9rem; line-height: 1.5; }
|
||||
.avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
|
||||
background: var(--pico-primary-background); color: var(--pico-primary-inverse);
|
||||
display: flex; align-items: center; justify-content: center; font-size: .75rem; }
|
||||
.compose, .recform { margin-bottom: 0; }
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.pill.want { background: #14304a; color: #b5d4f4; }
|
||||
.pill.reading { background: #3a2c12; color: #fac775; }
|
||||
.pill.read { background: #103a30; color: #9fe1cb; }
|
||||
:root {
|
||||
--bg-page: #efeee9; --bg-primary: #ffffff; --bg-secondary: #f5f4ef;
|
||||
--text-primary: #1d1d1b; --text-secondary: #5f5e5a; --text-tertiary: #8a8980;
|
||||
--bg-info: #e6f1fb; --text-info: #0c447c; --border-info: #378add;
|
||||
--bg-warning: #faeeda; --text-warning: #854f0b;
|
||||
--bg-success: #e1f5ee; --text-success: #085041;
|
||||
--text-danger: #c62828;
|
||||
--border-tertiary: rgba(0,0,0,0.12); --border-secondary: rgba(0,0,0,0.22);
|
||||
--radius-md: 8px; --radius-lg: 12px;
|
||||
--sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg-page: #161615; --bg-primary: #232321; --bg-secondary: #1c1c1a;
|
||||
--text-primary: #ededeb; --text-secondary: #a8a79f; --text-tertiary: #76756d;
|
||||
--bg-info: #14304a; --text-info: #b5d4f4; --border-info: #378add;
|
||||
--bg-warning: #3a2c12; --text-warning: #fac775;
|
||||
--bg-success: #103a30; --text-success: #9fe1cb;
|
||||
--text-danger: #ef9a9a;
|
||||
--border-tertiary: rgba(255,255,255,0.14); --border-secondary: rgba(255,255,255,0.24);
|
||||
}
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body { margin: 0; background: var(--bg-page); color: var(--text-primary);
|
||||
font-family: var(--sans); padding: 28px 16px; }
|
||||
.wrap { max-width: 600px; margin: 0 auto; }
|
||||
.surface { background: var(--bg-secondary); border-radius: var(--radius-lg); padding: 1.25rem; }
|
||||
.card { background: var(--bg-primary); border: 0.5px solid var(--border-tertiary);
|
||||
border-radius: var(--radius-lg); padding: 1.1rem 1.25rem; }
|
||||
.cover { width: 48px; height: 66px; border-radius: var(--radius-md); background: var(--bg-info);
|
||||
display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||||
.pill { padding: 2px 9px; border-radius: var(--radius-md); font-size: 12px; }
|
||||
.pill.want { background: var(--bg-info); color: var(--text-info); }
|
||||
.pill.reading { background: var(--bg-warning); color: var(--text-warning); }
|
||||
.pill.read { background: var(--bg-success); color: var(--text-success); }
|
||||
.tag { background: var(--bg-secondary); padding: 1px 7px; border-radius: var(--radius-md); margin-left: 4px; font-size: 12px; }
|
||||
.tt { font-size: 12px; color: var(--text-tertiary); }
|
||||
input, select, button { font-family: var(--sans); font-size: 13px; }
|
||||
input, select { height: 34px; padding: 0 8px; border: 0.5px solid var(--border-secondary);
|
||||
border-radius: var(--radius-md); background: var(--bg-primary); color: var(--text-primary); width: 100%; }
|
||||
input::placeholder { color: var(--text-tertiary); }
|
||||
button { height: auto; padding: 2px 4px; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main class="container">
|
||||
<article class="book">
|
||||
<p><a href="{{back_url}}" style="font-size:.85rem;">← Back to shelf</a></p>
|
||||
<div class="wrap">
|
||||
<div class="surface">
|
||||
<div class="card">
|
||||
|
||||
<div style="display: flex; gap: 14px; align-items: flex-start; margin-bottom: 1rem;">
|
||||
<div class="cover"><i class="ti {{cover_icon}}" style="font-size: 22px;" aria-hidden="true"></i></div>
|
||||
<div style="flex: 1; min-width: 0;">
|
||||
<hgroup>
|
||||
<h3>{{title}}</h3>
|
||||
<p>{{author}}</p>
|
||||
</hgroup>
|
||||
{{#status_class}}
|
||||
<span class="pill {{status_class}}">{{status_label}}</span>
|
||||
{{/status_class}}
|
||||
{{#meta}}
|
||||
<span class="muted" style="color: var(--pico-muted-color); font-size: .85rem; margin-left: .5rem;">{{meta}}</span>
|
||||
{{/meta}}
|
||||
<div style="display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-tertiary); margin-bottom: 14px;">
|
||||
<a href="{{back_url}}" style="color: var(--text-tertiary); text-decoration: none; display: flex; align-items: center; gap: 8px;">
|
||||
<i class="ti ti-arrow-left" style="font-size: 16px;" aria-hidden="true"></i>
|
||||
<i class="ti ti-folder" style="font-size: 15px;" aria-hidden="true"></i>
|
||||
<span>{{shelf_name}}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="formats" role="group">
|
||||
{{#formats}}
|
||||
<button class="{{^active}}secondary outline{{/active}}"><i class="ti {{icon}}" style="font-size: 15px; vertical-align: -2px; margin-right: 5px;" aria-hidden="true"></i>{{label}}</button>
|
||||
{{/formats}}
|
||||
</div>
|
||||
<div style="display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px;">
|
||||
<div class="cover"><i class="ti {{cover_icon}}" style="font-size: 24px; color: var(--text-info);" aria-hidden="true"></i></div>
|
||||
<div style="flex: 1; min-width: 0;">
|
||||
<p style="font-weight: 500; font-size: 18px; margin: 0 0 2px;">{{title}}</p>
|
||||
<p style="font-size: 14px; color: var(--text-secondary); margin: 0 0 8px;">{{author}}</p>
|
||||
{{#status_class}}
|
||||
<span class="pill {{status_class}}">{{status_label}}</span>
|
||||
{{/status_class}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px;">
|
||||
<div>
|
||||
<label style="font-size: 13px; color: var(--text-secondary); display: block; margin-bottom: 4px;">
|
||||
<i class="ti ti-folder" style="font-size: 14px; vertical-align: -2px; margin-right: 4px;" aria-hidden="true"></i>Shelf
|
||||
</label>
|
||||
<select>
|
||||
{{#shelf_options}}
|
||||
<option{{#selected}} selected{{/selected}}>{{name}}</option>
|
||||
{{/shelf_options}}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label style="font-size: 13px; color: var(--text-secondary); display: block; margin-bottom: 4px;">
|
||||
<i class="ti ti-bookmark" style="font-size: 14px; vertical-align: -2px; margin-right: 4px;" aria-hidden="true"></i>Status
|
||||
</label>
|
||||
<select>
|
||||
{{#status_options}}
|
||||
<option{{#selected}} selected{{/selected}}>{{name}}</option>
|
||||
{{/status_options}}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="border-top: 0.5px solid var(--border-tertiary); padding-top: 14px; margin-bottom: 16px;">
|
||||
<table style="width: 100%; font-size: 13px; border-collapse: collapse;">
|
||||
{{#format_label}}
|
||||
<tr><td style="color: var(--text-secondary); padding: 4px 0; width: 38%;">Format</td>
|
||||
<td style="text-align: right; padding: 4px 0;"><i class="ti {{format_icon}}" style="font-size: 15px; vertical-align: -2px; margin-right: 5px; color: var(--text-tertiary);" aria-hidden="true"></i>{{format_label}}</td></tr>
|
||||
{{/format_label}}
|
||||
{{#tags_display}}
|
||||
<tr><td style="color: var(--text-secondary); padding: 4px 0;">Tags</td>
|
||||
<td style="text-align: right; padding: 4px 0;">{{{tags_display}}}</td></tr>
|
||||
{{/tags_display}}
|
||||
{{#added_display}}
|
||||
<tr><td style="color: var(--text-secondary); padding: 4px 0;">Added</td>
|
||||
<td style="text-align: right; padding: 4px 0;">{{added_display}}</td></tr>
|
||||
{{/added_display}}
|
||||
{{#started_display}}
|
||||
<tr><td style="color: var(--text-secondary); padding: 4px 0;">Started</td>
|
||||
<td style="text-align: right; padding: 4px 0;">{{started_display}}</td></tr>
|
||||
{{/started_display}}
|
||||
<tr><td style="color: var(--text-secondary); padding: 4px 0;">Finished</td>
|
||||
<td style="text-align: right; padding: 4px 0;{{^finished_display}} color: var(--text-tertiary);{{/finished_display}}">{{finished_display}}</td></tr>
|
||||
<tr><td style="color: var(--text-secondary); padding: 4px 0;">Rating</td>
|
||||
<td style="text-align: right; padding: 4px 0;{{^has_rating}} color: var(--text-tertiary);{{/has_rating}}">{{rating_display}}</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{{#notes}}
|
||||
<p class="seclabel">Reading log</p>
|
||||
<div class="thread">
|
||||
{{#notes}}
|
||||
<div class="entry">
|
||||
<div class="edate">{{date}}</div>
|
||||
<div class="etext">{{text}}</div>
|
||||
<div style="border-top: 0.5px solid var(--border-tertiary); padding-top: 14px; margin-bottom: 16px;">
|
||||
<p style="font-size: 13px; color: var(--text-tertiary); margin: 0 0 10px;">Reading log</p>
|
||||
{{#notes}}
|
||||
<div style="display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px;">
|
||||
<span style="font-size: 12px; color: var(--text-tertiary); white-space: nowrap; padding-top: 1px;">{{date}}</span>
|
||||
<span style="flex: 1; font-size: 14px; line-height: 1.5;">{{text}}</span>
|
||||
</div>
|
||||
{{/notes}}
|
||||
<div style="display: flex; gap: 8px;">
|
||||
<input type="text" placeholder="Add a note…" style="flex: 1;" />
|
||||
<button style="width: auto; padding: 0 12px; border: 0.5px solid var(--border-secondary); border-radius: var(--radius-md);"><i class="ti ti-plus" style="font-size: 15px; vertical-align: -2px; margin-right: 4px;" aria-hidden="true"></i>Log note</button>
|
||||
</div>
|
||||
</div>
|
||||
{{/notes}}
|
||||
</div>
|
||||
{{/notes}}
|
||||
|
||||
<div class="compose" role="group">
|
||||
<input type="text" placeholder="Add a note…" />
|
||||
<button><i class="ti ti-plus" style="font-size: 15px; vertical-align: -2px; margin-right: 4px;" aria-hidden="true"></i>Log note</button>
|
||||
</div>
|
||||
{{#recommendation}}
|
||||
<div style="border-top: 0.5px solid var(--border-tertiary); padding-top: 14px; margin-bottom: 4px;">
|
||||
<p style="font-size: 13px; color: var(--text-tertiary); margin: 0 0 10px;">On your radar</p>
|
||||
<div style="display: flex; align-items: flex-start; gap: 10px;">
|
||||
<div style="width: 30px; height: 30px; border-radius: 50%; background: var(--bg-info); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text-info); flex-shrink: 0;">{{initials}}</div>
|
||||
<div style="font-size: 14px; line-height: 1.5;"><span style="font-weight: 500;">{{by}}</span><br />"{{note}}"</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/recommendation}}
|
||||
|
||||
<hr />
|
||||
<div style="border-top: 0.5px solid var(--border-tertiary); padding-top: 12px; margin-top: 14px; display: flex; justify-content: space-between; align-items: center;">
|
||||
<button style="color: var(--text-danger); font-size: 13px;"><i class="ti ti-trash" style="font-size: 14px; vertical-align: -2px; margin-right: 3px;" aria-hidden="true"></i>Remove</button>
|
||||
<button style="color: var(--text-secondary); font-size: 13px;"><i class="ti ti-external-link" style="font-size: 14px; vertical-align: -2px; margin-right: 3px;" aria-hidden="true"></i>Open in Emacs</button>
|
||||
</div>
|
||||
|
||||
{{#recommendation}}
|
||||
<p class="seclabel">On your radar</p>
|
||||
<div style="display: flex; align-items: flex-start; gap: 10px; margin-bottom: 1rem;">
|
||||
<div class="avatar">{{initials}}</div>
|
||||
<div style="font-size: .9rem; line-height: 1.5;"><strong>{{by}}</strong><br />"{{note}}"</div>
|
||||
</div>
|
||||
{{/recommendation}}
|
||||
<div class="recform" role="group">
|
||||
<input type="text" placeholder="Recommended by…" style="flex: 0 0 34%;" />
|
||||
<input type="text" placeholder="Why it's on your radar…" />
|
||||
<button aria-label="Save recommendation"><i class="ti ti-check" style="font-size: 16px;" aria-hidden="true"></i></button>
|
||||
</div>
|
||||
|
||||
</article>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user