From 00f5c1b0b2b95abcd4123cc6111f99aad3d64b49 Mon Sep 17 00:00:00 2001 From: snowsunny Date: Sun, 7 Jul 2019 20:04:34 +0900 Subject: [PATCH] fix option page layout --- novels-reader-crx/html/options.html | 192 +++++++++++++++------------- src/pug/options.pug | 164 +++++++++++++----------- 2 files changed, 193 insertions(+), 163 deletions(-) diff --git a/novels-reader-crx/html/options.html b/novels-reader-crx/html/options.html index 21daa40..a63e354 100644 --- a/novels-reader-crx/html/options.html +++ b/novels-reader-crx/html/options.html @@ -47,125 +47,145 @@

web page reader for syosetu.com

-
※設定後、ページを更新すると設定が反映されます。 +
+

※設定後、小説ページに戻りページを再読み込みすると設定が反映されます。

-
+
-
音声設定
-
※最小値、最大値についてですがOS毎に挙動が違います…音声が正しく再生されない場合はより初期値に近い値を設定してみて下さい。
-
-
- -
- +
+
音声設定
+
※最小値、最大値についてですがOS毎に挙動が違います…音声が正しく再生されない場合はより初期値に近い値を設定してみて下さい。
+
+
+
+ +
+ +
+

初期値: 1.0, 最小値: 0.1, 最大値: 10.0

+
-

初期値: 1.0, 最小値: 0.1, 最大値: 10.0

-
-
-
-
- -
- +
+
+ +
+ +
+

声の高さを設定出来ます。 初期値: 1.0, 最小値: 0, 最大値: 2.0

+
-

声の高さを設定出来ます。 初期値: 1.0, 最小値: 0, 最大値: 2.0

-
-
-
-
- -
- +
+
+ +
+ +
+

声の音量を設定出来ます。 初期値: 1.0, 最小値: 0, 最大値: 1.0

+
-

声の音量を設定出来ます。 初期値: 1.0, 最小値: 0, 最大値: 1.0

-
-
-
ハイライト設定
-
-
-
- -
- +
ハイライト設定
+
+
+
+ +
+ +
+

初期値: #fff

+
-

初期値: #fff

-
-
-
-
- -
- +
+
+ +
+ +
+

初期値: #498fd9

+
-

初期値: #498fd9

-
-
-
-
-
-
- +
+
+
+
+ +
+
-
-
読み上げ文章設定
-
-
-
-
-
-
-
- +
+
読み上げ文章設定
+
+
+
+
+
+
+
+ +
+
-
-
-
自動再生設定
-
-
-
-
- +
自動再生設定
+
+
+
+
+ +
+
-
+
+
+
+
ルビ辞書設定
+
+
+
+

対象文字を設定されたルビで読み替える辞書を設定出来ます。「ルビ対象文字::ルビ」のフォーマットで設定して下さい。複数設定する場合は下記の様に改行で区切って下さい。

※ルビの優先度は「無視するルビ ＞ 小説ページのルビ ＞ ユーザー辞書 ＞ 小説別辞書」となっています。

// ルビ対象文字::ルビ
本気::マジ
強敵::友

// 先頭に「//」を付ける事で、その行全てをコメントにします。
 // ルビ対象文字には正規表現を使う事が出来ます。
// 下記の例は「*」のみの文を空白で読み替えます。
^\*+$::
-
ユーザー辞書
+
+
+
ユーザー辞書

無視するルビ（正規表現）

強調表現等で使わるルビを無視する為の設定を、正規表現で記述出来ます。
例：「^・+$」を設定すると「・」のみのルビを無視します。
-
小説別辞書
+
+
+
+
+
小説別辞書
diff --git a/src/pug/options.pug b/src/pug/options.pug index 20fdbab..b549d5b 100644 --- a/src/pug/options.pug +++ b/src/pug/options.pug @@ -42,88 +42,95 @@ html section.section .container - | ※設定後、ページを更新すると設定が反映されます。 + p.has-text-danger.is-size-5(style='font-weight: bold') ※設定後、小説ページに戻りページを再読み込みすると設定が反映されます。 .columns - .column.is-half + .column form.options - .title 音声設定 - .subtitle(style='font-size: 1rem') ※最小値、最大値についてですがOS毎に挙動が違います…音声が正しく再生されない場合はより初期値に近い値を設定してみて下さい。 .columns - .column - .field - label.label 速度 - .control - input.input(name='rate' type='number', step='0.1', min='0.1', max='10', placeholder='例: 1') - p.help 初期値: 1.0, 最小値: 0.1, 最大値: 10.0 - .column - .field - label.label ピッチ - .control - input.input(name='pitch' type='number', step='0.1', min='0', max='2', placeholder='例: 1') - p.help 声の高さを設定出来ます。 初期値: 1.0, 最小値: 0, 最大値: 2.0 - .column - .field - label.label 音量 - .control - input.input(name='volume' type='number', step='0.01', min='0', max='1', placeholder='例: 1') - p.help 声の音量を設定出来ます。 初期値: 1.0, 最小値: 0, 最大値: 1.0 + .column.is-half + .title 音声設定 + .subtitle(style='font-size: 1rem') ※最小値、最大値についてですがOS毎に挙動が違います…音声が正しく再生されない場合はより初期値に近い値を設定してみて下さい。 + .columns + .column + .field + label.label 速度 + .control + input.input(name='rate' type='number', step='0.1', min='0.1', max='10', placeholder='例: 1') + p.help 初期値: 1.0, 最小値: 0.1, 最大値: 10.0 + .column + .field + label.label ピッチ + .control + input.input(name='pitch' type='number', step='0.1', min='0', max='2', placeholder='例: 1') + p.help 声の高さを設定出来ます。 初期値: 1.0, 最小値: 0, 最大値: 2.0 + .column + .field + label.label 音量 + .control + input.input(name='volume' type='number', step='0.01', min='0', max='1', placeholder='例: 1') + p.help 声の音量を設定出来ます。 初期値: 1.0, 最小値: 0, 最大値: 1.0 - .title ハイライト設定 - .columns - .column - .field - label.label テキストカラー - .control - input.input(name='textColor' type='text', placeholder='例: #fff') - p.help 初期値: #fff - .column - .field - label.label 背景カラー - .control - input.input(name='backgroundColor' type='text', placeholder='例: #498fd9') - p.help 初期値: #498fd9 - .columns - .column - .field - .control - label.checkbox - input(name='autoScroll' type='checkbox') - | 再生箇所に自動でスクロールする + .title ハイライト設定 + .columns + .column + .field + label.label テキストカラー + .control + input.input(name='textColor' type='text', placeholder='例: #fff') + p.help 初期値: #fff + .column + .field + label.label 背景カラー + .control + input.input(name='backgroundColor' type='text', placeholder='例: #498fd9') + p.help 初期値: #498fd9 + .columns + .column + .field + .control + label.checkbox + input(name='autoScroll' type='checkbox') + | 再生箇所に自動でスクロールする - .title 読み上げ文章設定 - .columns - .column - .field - .control - label.checkbox - input(name='title' type='checkbox') - | 題名 - br - label.checkbox - input(name='foreword' type='checkbox') - | 前書き - br - label.checkbox - input(name='body' type='checkbox') - | 本文 - br - label.checkbox - input(name='afterword' type='checkbox') - | 後書き + .column.is-half + .title 読み上げ文章設定 + .columns + .column + .field + .control + label.checkbox + input(name='title' type='checkbox') + | 題名 + br + label.checkbox + input(name='foreword' type='checkbox') + | 前書き + br + label.checkbox + input(name='body' type='checkbox') + | 本文 + br + label.checkbox + input(name='afterword' type='checkbox') + | 後書き - .title 自動再生設定 - .columns - .column - .field - label.checkbox - input(name='autoPlay' type='checkbox') - | 自動で再生する - br - label.checkbox - input(name='autoMoveNext' type='checkbox') - | 「次の話」がある場合、自動で移動する - .column.is-half + .title 自動再生設定 + .columns + .column + .field + label.checkbox + input(name='autoPlay' type='checkbox') + | 自動で再生する + br + label.checkbox + input(name='autoMoveNext' type='checkbox') + | 「次の話」がある場合、自動で移動する + hr + .columns + .column .title ルビ辞書設定 + .columns + .column.is-half .content p 対象文字を設定されたルビで読み替える辞書を設定出来ます。「ルビ対象文字::ルビ」のフォーマットで設定して下さい。複数設定する場合は下記の様に改行で区切って下さい。 p @@ -142,7 +149,8 @@ html | // 下記の例は「*」のみの文を空白で読み替えます。 br | ^\*+$:: - .title.sub ユーザー辞書 + .column.is-half + .title.sub(style='margin-top: 0px') ユーザー辞書 textarea.textarea.dictionary(data-id='user') p(style='margin:10px 0px 10px') b 無視するルビ（正規表現） @@ -152,7 +160,9 @@ html br | 例：「^・+$」を設定すると「・」のみのルビを無視します。 input.input.dictionary(data-id='userIgnoreRubies') - .title.sub 小説別辞書 + .columns + .column + .title 小説別辞書 form.options .columns .column