Added truncation to custom theme setting description (#17044)

no issue

Added truncation to custom theme setting description to prevent overly
long custom setting descriptions from diminishing the settings UX
This commit is contained in:
Michael Barrett 2023-06-16 13:14:43 +01:00 committed by GitHub
parent e13fcd3272
commit 721d7202a0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 5 additions and 5 deletions

View File

@ -12,7 +12,7 @@
</div>
</div>
{{#if @setting.description}}
<div class="gh-setting-desc" style="margin-top: 1px">{{@setting.description}}</div>
<div class="gh-setting-desc" style="margin-top: 1px">{{truncate @setting.description 100}}</div>
{{/if}}
</div>
</div>

View File

@ -4,7 +4,7 @@
{{humanize-setting-key @setting.key}}
</label>
{{#if @setting.description}}
<div class="gh-setting-desc">{{@setting.description}}</div>
<div class="gh-setting-desc">{{truncate @setting.description 100}}</div>
{{/if}}
{{#if this.isInvalid}}
<div class="gh-setting-error {{if (is-empty @setting.description) "mt3"}}">Enter a color in hex format</div>

View File

@ -11,7 +11,7 @@
<div class="gh-setting-error" data-test-error="icon">{{or error.context error.message}}</div>
{{/each}}
{{#if @setting.description}}
<div class="gh-setting-desc" style="margin-top: 8px">{{@setting.description}}</div>
<div class="gh-setting-desc" style="margin-top: 8px">{{truncate @setting.description 100}}</div>
{{/if}}
</div>
<div class="gh-setting-action gh-uploadbutton-container flex flex-column items-stretch">

View File

@ -15,7 +15,7 @@
{{svg-jar "arrow-down-small"}}
</span>
{{#if @setting.description}}
<div class="gh-setting-desc">{{@setting.description}}</div>
<div class="gh-setting-desc">{{truncate @setting.description 100}}</div>
{{/if}}
</div>
</div>

View File

@ -13,7 +13,7 @@
{{on "blur" this.triggerOnChange}}
/>
{{#if @setting.description}}
<div class="gh-setting-desc">{{@setting.description}}</div>
<div class="gh-setting-desc">{{truncate @setting.description 100}}</div>
{{/if}}
</div>
</div>