diff options
Diffstat (limited to 'ext/mixed')
| -rw-r--r-- | ext/mixed/css/display.css | 31 | ||||
| -rw-r--r-- | ext/mixed/css/search.css | 5 | ||||
| -rw-r--r-- | ext/mixed/js/display.js | 37 |
3 files changed, 42 insertions, 31 deletions
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css index 24d143fc..67017306 100644 --- a/ext/mixed/css/display.css +++ b/ext/mixed/css/display.css @@ -36,7 +36,11 @@ --spinner-size-no-units: 32; --action-button-size-no-units: 16; - --entry-padding: 0.72em; + --list-margin: 0.72em; + --main-content-vertical-padding: 0em; + --main-content-horizontal-padding: 0em; + --entry-horizontal-padding: 0.72em; + --entry-vertical-padding: 0.72em; --sidebar-width-no-units: 40; --sidebar-width: calc(1em * (var(--sidebar-width-no-units) / var(--font-size-no-units))); @@ -178,7 +182,7 @@ body { } ol, ul { margin-top: 0; - margin-bottom: var(--entry-padding); + margin-bottom: var(--list-padding); } #spinner { position: fixed; @@ -245,6 +249,7 @@ a { } .content-body-inner { width: 100%; + padding: var(--main-content-vertical-padding) var(--main-content-horizontal-padding); } @@ -371,22 +376,20 @@ button.sidebar-button.danger:hover .sidebar-button-icon { /* Search page */ +#query-parser-container { + padding-left: var(--entry-horizontal-padding); + padding-right: var(--entry-horizontal-padding); + padding-bottom: 0.25em; + border-bottom: var(--expression-thin-border-size) solid var(--light-border-color); +} #query-parser-content { margin-top: 0.5em; font-size: var(--query-parser-font-size); white-space: pre-wrap; } -#query-parser-content:not(:empty) { - padding-bottom: 0.25em; - border-bottom: var(--expression-thin-border-size) solid var(--light-border-color); -} #query-parser-content[data-term-spacing=true] .query-parser-term { margin-right: 0.2em; } -:root[data-yomichan-page=float] #query-parser-container { - padding-left: var(--entry-padding); - padding-right: var(--entry-padding); -} /* Action buttons */ @@ -516,12 +519,8 @@ button.action-button { /* Entries */ .entry { - padding-top: var(--entry-padding); - padding-bottom: var(--entry-padding); -} -:root[data-yomichan-page=float] .entry { - padding-left: var(--entry-padding); - padding-right: var(--entry-padding); + padding: var(--entry-vertical-padding) var(--entry-horizontal-padding); + position: relative; } .term-expression .kanji-link { border-bottom: var(--expression-thin-border-size) dashed var(--dark-border-color); diff --git a/ext/mixed/css/search.css b/ext/mixed/css/search.css index 997c089f..d9024172 100644 --- a/ext/mixed/css/search.css +++ b/ext/mixed/css/search.css @@ -17,9 +17,11 @@ /* Variables */ :root { + --main-content-horizontal-padding: 0.72em; + --entry-horizontal-padding: 0; + --padding: 10px; --main-content-size: 700px; - --main-content-padding: 10px; --shadow-color: rgba(0, 0, 0, 0.185); --shadow-vertical: 0 1px 4px 0 var(--shadow-color), 0 2px 2px 0 var(--shadow-color); @@ -231,7 +233,6 @@ label.toggle { /* Content layout */ .content-body-inner { width: var(--main-content-size); - padding: 0 var(--main-content-padding); max-width: 100%; box-sizing: border-box; margin: 0 auto; diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js index 7068d424..715b3f3d 100644 --- a/ext/mixed/js/display.js +++ b/ext/mixed/js/display.js @@ -76,7 +76,6 @@ class Display extends EventDispatcher { this._queryParserContainer = document.querySelector('#query-parser-container'); this._queryParser = new QueryParser({ getOptionsContext: this.getOptionsContext.bind(this), - progressIndicatorVisible: this._progressIndicatorVisible, documentUtil: this._documentUtil }); this._mode = null; @@ -154,7 +153,7 @@ class Display extends EventDispatcher { set queryParserVisible(value) { this._queryParserVisible = value; - this._updateQueryParserVisibility(); + this._updateQueryParser(); } get mode() { @@ -466,7 +465,7 @@ class Display extends EventDispatcher { const fullVisible = urlSearchParams.get('full-visible'); this._queryParserVisibleOverride = (fullVisible === null ? null : (fullVisible !== 'false')); - this._updateQueryParserVisibility(); + this._updateQueryParser(); this._closePopups(); this._setEventListenersActive(false); @@ -862,7 +861,7 @@ class Display extends EventDispatcher { async _setContentTermsOrKanji(token, isTerms, urlSearchParams, eventArgs) { let source = urlSearchParams.get('query'); if (!source) { - this._setQueryParserText(''); + this._setFullQuery(''); return false; } @@ -890,7 +889,7 @@ class Display extends EventDispatcher { source = this.postProcessQuery(source); let full = urlSearchParams.get('full'); full = (full === null ? source : this.postProcessQuery(full)); - this._setQueryParserText(full); + this._setFullQuery(full); this._setTitleText(source); let {definitions} = content; @@ -990,11 +989,27 @@ class Display extends EventDispatcher { } } - _setQueryParserText(text) { - if (this._fullQuery === text) { return; } + _setFullQuery(text) { this._fullQuery = text; - if (!this._isQueryParserVisible()) { return; } - this._queryParser.setText(text); + this._updateQueryParser(); + } + + _updateQueryParser() { + const text = this._fullQuery; + const visible = this._isQueryParserVisible(); + this._queryParserContainer.hidden = !visible || text.length === 0; + if (visible && this._queryParser.text !== text) { + this._setQueryParserText(text); + } + } + + async _setQueryParserText(text) { + const overrideToken = this._progressIndicatorVisible.setOverride(true); + try { + await this._queryParser.setText(text); + } finally { + this._progressIndicatorVisible.clearOverride(overrideToken); + } } _setTitleText(text) { @@ -1366,10 +1381,6 @@ class Display extends EventDispatcher { ); } - _updateQueryParserVisibility() { - this._queryParserContainer.hidden = !this._isQueryParserVisible(); - } - _closePopups() { yomichan.trigger('closePopups'); } |