diff options
| author | toasted-nutbread <toasted-nutbread@users.noreply.github.com> | 2021-02-26 18:15:04 -0500 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-02-26 18:15:04 -0500 |
| commit | b994414b14b224c02359b5e31f6994653a3d4458 (patch) | |
| tree | 64c28b1ea3070af7ba97b253ee3c7ba8fb114719 /ext/settings.html | |
| parent | 782b945905c948b9a0495aa85524ad1a92c7bd97 (diff) | |
Improve Anki card type selection (#1445)
* Update separator line styles
* Add tabs
* Add support for radio select
* Remove old select
* Move out of scroll region
* Fix missing line
Diffstat (limited to 'ext/settings.html')
| -rw-r--r-- | ext/settings.html | 27 |
1 files changed, 16 insertions, 11 deletions
diff --git a/ext/settings.html b/ext/settings.html index 62117c3c..3c77b164 100644 --- a/ext/settings.html +++ b/ext/settings.html @@ -2549,20 +2549,25 @@ </div> </div> </div> - <div class="modal-body anki-card" id="anki-card-primary" data-anki-card-type="terms" data-anki-card-menu="anki-card-terms-field-menu"> - <div class="settings-item"><div class="settings-item-inner"> - <div class="settings-item-left"> - <div class="settings-item-label">Card type</div> - <div class="settings-item-description">Different types of definition can have separate settings.</div> + <div> + <div class="tabs-container"> + <div class="tabs"> + <label class="tab"> + <input type="radio" name="anki-card-primary-type" data-value="terms" data-anki-card-menu="anki-card-terms-field-menu" checked> + <div class="tab-inner"><span class="tab-label">Terms</span></div> + </label> + <label class="tab"> + <input type="radio" name="anki-card-primary-type" data-value="kanji" data-anki-card-menu="anki-card-kanji-field-menu"> + <div class="tab-inner"><span class="tab-label">Kanji</span></div> + </label> </div> - <div class="settings-item-right"> - <select id="anki-card-primary-type"> - <option value="terms" data-anki-card-menu="anki-card-terms-field-menu" selected>Terms</option> - <option value="kanji" data-anki-card-menu="anki-card-kanji-field-menu">Kanji</option> - </select> + <div class="tabs-right" hidden> + <button class="icon-button" data-menu-position="below left" id="anki-card-primary-type-menu-button"><span class="icon-button-inner"><span class="icon" data-icon="kebab-menu"></span></span></button> </div> - </div></div> + </div> <div class="modal-separator-line"></div> + </div> + <div class="modal-body anki-card" id="anki-card-primary" data-anki-card-type="terms" data-anki-card-menu="anki-card-terms-field-menu"> <div class="settings-item"><div class="settings-item-inner"> <div class="settings-item-left"> <div class="settings-item-label">Deck</div> |