add labelledby attribute and update styling

This commit is contained in:
Cristi Ciobanu 2024-10-22 15:39:36 +02:00
parent bca0e67561
commit aea5e5df92
3 changed files with 32 additions and 14 deletions

View File

@ -0,0 +1,12 @@
.onlyShowLatestFromChannel {
display: inline-flex;
div:nth-child(2) {
margin-inline-start: 1em;
inline-size: 68px;
input {
margin-block-end: 0;
}
}
}

View File

@ -32,23 +32,28 @@
:compact="true"
@change="updateHideWatchedSubs"
/>
<ft-toggle-switch
:label="$t('Settings.Subscription Settings.Limit the number of videos displayed for each channel')"
:default-value="onlyShowLatestFromChannel"
:compact="true"
@change="updateOnlyShowLatestFromChannel"
/>
<ft-input
v-if="onlyShowLatestFromChannel"
:placeholder="'1'"
:show-action-button="false"
input-type="number"
:value="onlyShowLatestFromChannelNumber"
@input="updateOnlyShowLatestFromChannelNumber"
/>
<div class="onlyShowLatestFromChannel">
<ft-toggle-switch
:id="'onlyShowLatestFromChannel'"
:label="onlyShowLatestFromChannel ? $t('Settings.Subscription Settings.Limit the number of videos displayed for each channel to') : $t('Settings.Subscription Settings.Limit the number of videos displayed for each channel')"
:default-value="onlyShowLatestFromChannel"
:compact="true"
@change="updateOnlyShowLatestFromChannel"
/>
<ft-input
v-if="onlyShowLatestFromChannel"
:placeholder="'1'"
:show-action-button="false"
input-type="number"
:value="onlyShowLatestFromChannelNumber"
:aria-labelledby="'onlyShowLatestFromChannel'"
@input="updateOnlyShowLatestFromChannelNumber"
/>
</div>
</div>
</div>
</ft-settings-section>
</template>
<script src="./subscription-settings.js" />
<style lang="scss" src="./subscription-settings.scss" />

View File

@ -475,6 +475,7 @@ Settings:
Fetch Feeds from RSS: Fetch Feeds from RSS
Fetch Automatically: Fetch Feed Automatically
Limit the number of videos displayed for each channel: Limit the number of videos displayed for each channel
Limit the number of videos displayed for each channel to: Limit the number of videos displayed for each channel to
Confirm Before Unsubscribing: Confirm Before Unsubscribing
Distraction Free Settings:
Distraction Free Settings: Distraction Free