Skip to content

Commit cc5179a

Browse files
untuntuntunt
committed
Improve UI
1 parent b9b6511 commit cc5179a

File tree

1 file changed

+156
-58
lines changed

1 file changed

+156
-58
lines changed

‎site/beta.html

Lines changed: 156 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width" />
6-
<title>查字</title>
6+
<title>切韻音系字音查詢</title>
77
<script type="module">
88
import TshetUinh from 'https://cdn.jsdelivr.net/npm/[email protected]/dist/tshet-uinh.esm.min.js';
99
import {
@@ -300,60 +300,75 @@
300300
</script>
301301

302302
<template id="template-app">
303-
<h1>查字<span class="beta-note">測試版</span></h1>
304-
<form @submit.prevent="doQuery()">
303+
<h1>切韻音系字音查詢<span class="beta-note">測試版</span></h1>
304+
<form class="query-form" @submit.prevent="doQuery()">
305305
<input
306306
type="text"
307307
class="query"
308-
placeholder="輸入要查的單字"
308+
placeholder="輸入單個字"
309309
v-model.trim="input"
310310
@focus="$event.target.select()"
311311
/>
312-
<input type="submit" value="檢索" />
313-
<label>
314-
檢索異體字：<select v-model="variantOption" @change="doQuery()">
315-
<option value="no">不檢索異體字</option>
316-
<option value="fallback">僅原字無檢索結果時檢索異體字</option>
312+
<input type="submit" class="submit-button" value="查詢" />
313+
<div class="variant-option">
314+
<label for="variant-select">異體字選項：</label>
315+
<select id="variant-select" v-model="variantOption" @change="doQuery()">
317316
<option value="yes">檢索異體字</option>
317+
<option value="fallback">僅原字檢索不到時檢索異體字</option>
318+
<option value="no">不檢索異體字</option>
318319
</select>
319-
</label>
320+
</div>
320321
</form>
321322
<rhyme-list ref="rhymeList" @query="doQuery"></rhyme-list>
322-
<p v-if="!activeQuery">（請輸入要查的字並點擊「檢索」，或點擊《廣韻》卷目以瀏覽）</p>
323-
<p v-else-if="result.length">檢索結果（{{result.length}} 筆）：</p>
324-
<p v-else>（無檢索結果）</p>
325-
<ul>
326-
<li v-for="條目 in result" :key="keyForEntry(條目)">
327-
<result-entry :條目 :is小韻query :href-for字 @query="doQuery"></result-entry>
328-
</li>
329-
</ul>
323+
<div class="result">
324+
<p v-if="!activeQuery">（請輸入要查詢的<strong>單個</strong>字並點擊「查詢」，或點擊《廣韻》卷目以瀏覽《廣韻》小韻）</p>
325+
<p v-else-if="result.length">
326+
<template v-if="is小韻query">小韻轄字</template>
327+
<template v-else>查詢結果</template>（{{result.length}} 條）：
328+
</p>
329+
<p v-else>
330+
<template v-if="is小韻query">（無此小韻）</template>
331+
<template v-else>（未找到結果）</template>
332+
</p>
333+
<ul>
334+
<li v-for="條目 in result" :key="keyForEntry(條目)">
335+
<result-entry :條目 :is小韻query :href-for字 @query="doQuery"></result-entry>
336+
</li>
337+
</ul>
338+
</div>
330339
</template>
331340

332341
<template id="template-rhyme-list">
333342
<div class="rhyme-list">
334343
<p>
335-
瀏覽《廣韻》：<a
336-
v-for="{ 卷目, 原書小韻號, isCurrent } in 卷選單"
337-
:class="{ current: isCurrent }"
338-
:href="isCurrent ? null : hrefFor小韻(原書小韻號)"
339-
@click.prevent="isCurrent || $emit('query', `@${原書小韻號}`)"
340-
>{{ 卷目 }}</a>
344+
<span class="heading">瀏覽《廣韻》：</span>
345+
<span>
346+
<a
347+
v-for="{ 卷目, 原書小韻號, isCurrent } in 卷選單"
348+
:href="isCurrent ? null : hrefFor小韻(原書小韻號)"
349+
@click.prevent="isCurrent || $emit('query', `@${原書小韻號}`)"
350+
>{{ 卷目 }}</a>
351+
</span>
341352
</p>
342353
<p v-if="韻選單">
343-
韻目：<a
344-
v-for="{ 韻目, 原書小韻號, isCurrent } in 韻選單"
345-
:class="{ current: isCurrent }"
346-
:href="isCurrent ? null : hrefFor小韻(原書小韻號)"
347-
@click.prevent="isCurrent || $emit('query', `@${原書小韻號}`)"
348-
>{{ 韻目 }}</a>
354+
<span class="heading">韻目：</span>
355+
<span>
356+
<a
357+
v-for="{ 韻目, 原書小韻號, isCurrent } in 韻選單"
358+
:href="isCurrent ? null : hrefFor小韻(原書小韻號)"
359+
@click.prevent="isCurrent || $emit('query', `@${原書小韻號}`)"
360+
>{{ 韻目 }}</a>
361+
</span>
349362
</p>
350363
<p v-if="小韻選單">
351-
小韻：<a
352-
v-for="{ 首字, 原書小韻號, isCurrent } in 小韻選單"
353-
:class="{ current: isCurrent }"
354-
:href="isCurrent ? null : hrefFor小韻(原書小韻號)"
355-
@click.prevent="isCurrent || $emit('query', `@${原書小韻號}`)"
356-
>{{ 首字 }}</a>
364+
<span class="heading">小韻：</span>
365+
<span>
366+
<a
367+
v-for="{ 首字, 原書小韻號, isCurrent } in 小韻選單"
368+
:href="isCurrent ? null : hrefFor小韻(原書小韻號)"
369+
@click.prevent="isCurrent || $emit('query', `@${原書小韻號}`)"
370+
>{{ 首字 }}</a>
371+
</span>
357372
</p>
358373
</div>
359374
</template>
@@ -366,77 +381,160 @@ <h1>查字<span class="beta-note">測試版</span></h1>
366381
:href="hrefFor字(字頭校正或原貌(條目))"
367382
@click.prevent="$emit('query', 字頭校正或原貌(條目))"
368383
>{{ 條目.字頭 }}</a>
384+
<span class="spacing">&nbsp;</span>
369385
<span class="pronunciation position">{{ 條目.音韻地位.描述 }}</span>
386+
<span class="spacing">&nbsp;</span>
370387
<span class="pronunciation tupa">{{ tupa }}</span>
388+
<span class="spacing">&nbsp;</span>
371389
<span v-if="條目.反切" class="pronunciation fanqie"
372-
>{{ 條目.反切 ? (條目.反切 + (條目.來源 === '廣韻' ? '切': '反')) : ''}}</span>
390+
>{{ 條目.反切 ? (條目.反切 + (條目.來源 === '廣韻' ? '切' : '反')) : ''}}</span>
373391
<span v-if="條目.直音" class="pronunciation zhiyin">音{{ 條目.直音 }}</span>
374392
</p>
375-
<p v-if="條目.字頭說明" class="headword-note">{{ 條目.字頭說明 }}</p>
376393
<p v-if="條目.釋義" class="note">{{ 條目.釋義 }}</p>
394+
<p v-if="條目.字頭說明" class="headword-note">{{ 條目.字頭說明 }}</p>
377395
<p class="cite">
378396
<a
379397
v-if="條目.來源 === '廣韻'"
380398
:href="is小韻query ? null : hrefFor小韻(原書小韻號)"
381399
@click.prevent="$emit('query', `@${原書小韻號}`)"
382400
>{{條目.來源}} {{條目.韻目}}韻 {{條目.小韻號}} {{小韻首字}}小韻
383401
</a>
384-
<template v-else>{{條目.來源}} {{條目.韻目}}韻 {{條目.小韻號}}小韻</template>
402+
<template v-else>{{條目.來源}} {{條目.韻目}}韻</template>
385403
</p>
386404
<p v-if="showDebug" style="color: darkgray">is小韻query: {{ is小韻query }}; {{ 條目 }}</p>
387405
</article>
388406
</template>
389407

390408
<style>
391-
a:link, a:visited {
392-
color: #4477cc;
409+
:root {
410+
--link-color: #2277cc;
411+
--link-hover-color: #777f88;
412+
--headword-note-color: #bb0000;
413+
}
414+
body {
415+
margin: 0;
416+
}
417+
#app {
418+
max-width: 50rem;
419+
margin: 0 auto;
420+
padding: 1rem;
421+
}
422+
@media screen and (max-width: 20rem) {
423+
#app {
424+
padding: 0.5rem;
425+
}
426+
}
427+
#app > * {
428+
margin: 1.5rem 0 0;
429+
}
430+
#app > :first-child {
431+
margin: 0;
432+
}
433+
434+
a {
435+
color: initial;
393436
text-decoration: none;
394437
}
395-
a:link:hover {
396-
color: #717a8a;
438+
a[href] {
439+
color: var(--link-color);
440+
}
441+
a[href]:hover {
442+
color: var(--link-hover-color);
397443
text-decoration: underline;
398444
}
399-
a.headword:is(:link, :visited) {
445+
a.headword {
400446
color: initial;
401447
}
402-
a.headword:link:hover {
403-
color: #4477cc;
448+
a.headword:hover {
449+
color: var(--link-color);
450+
}
451+
.tupa {
452+
font-style: italic;
404453
}
405454

406455
.beta-note {
407-
font-size: 40%;
456+
font-size: 0.5em;
457+
margin-left: 0.25em;
408458
}
409459

460+
.query-form {
461+
display: flex;
462+
align-items: center;
463+
flex-wrap: wrap;
464+
gap: 0.5rem;
465+
}
466+
input, select {
467+
font-size: 1rem;
468+
}
410469
input.query {
411-
width: 8rem;
470+
width: 6rem;
471+
}
472+
input.submit-button {
473+
margin-right: 0.5rem;
474+
}
475+
.variant-option {
476+
display: flex;
477+
flex-wrap: wrap;
478+
row-gap: 0.25rem;
412479
}
413480

481+
.rhyme-list p {
482+
margin: 0.5rem 0;
483+
display: flex;
484+
}
485+
.rhyme-list p .heading {
486+
white-space: nowrap;
487+
}
414488
.rhyme-list a {
415489
padding: 0 0.125rem;
416490
}
417-
.rhyme-list a.current {
491+
.rhyme-list a:not([href]) {
418492
font-weight: 600;
419493
}
420494

495+
.result > p {
496+
margin: 0;
497+
}
498+
.result > ul {
499+
list-style: none;
500+
padding-left: 0;
501+
margin: 0;
502+
}
421503
.result-item {
422504
padding: 0.7rem 0;
423505
}
424-
.result-item p {
425-
margin: 0.3rem 0;
506+
.result-item > p {
507+
margin: 0.3rem 0 0;
508+
}
509+
.result-item > p:first-child,
510+
.result-item > p.note + p.headword-note {
511+
margin: 0;
426512
}
427513
.result-item .headword {
428514
font-size: 2rem;
429-
line-height: 0;
430-
margin-right: 0.5rem;
515+
line-height: 1;
516+
}
517+
.result-item .headword ~ * {
518+
display: inline-block;
519+
}
520+
.result-item .headword + .spacing {
521+
word-spacing: 0.125rem;
522+
}
523+
.result-item .pronunciation + .spacing {
524+
word-spacing: 0.15rem;
525+
}
526+
.result-item .tupa + .spacing {
527+
word-spacing: 0.25rem;
431528
}
432529
.result-item .headword-note {
433-
font-size: 0.75rem;
530+
font-size: 0.875rem;
531+
color: var(--headword-note-color);
434532
}
435-
.result-item .pronunciation {
436-
margin-left: 0.5rem;
533+
.result-item .cite {
534+
word-spacing: 0.125rem;
437535
}
438-
.tupa {
439-
font-style: italic;
536+
.result-item .cite a:not([href]) {
537+
color: var(--link-hover-color);
440538
}
441539
</style>
442540
</head>

0 commit comments

Comments
 (0)