Turn icons into Bootstrap badges in deckoptions

This commit is contained in:
Henrik Giesel 2021-05-27 22:01:14 +02:00
parent 23f65f1a95
commit c586107fea
5 changed files with 13 additions and 18 deletions

View file

@ -23,9 +23,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<div {id} class="row gx-0"> <div {id} class="row gx-0">
<div class="col-8"> <div class="col-8">
<span {label}{#if renderedTooltip}<HelpPopup html={renderedTooltip} />{/if}
>{label}{#if renderedTooltip}<HelpPopup html={renderedTooltip} />{/if}</span
>
</div> </div>
<div class="col-3"> <div class="col-3">
@ -39,6 +37,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
{#each warnings as warning} {#each warnings as warning}
{#if warning} {#if warning}
<div class="row alert alert-warning" in:slide out:slide>{warning}</div> <div class="col-12 alert alert-warning" in:slide out:slide>{warning}</div>
{/if} {/if}
{/each} {/each}

View file

@ -34,7 +34,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</script> </script>
<div class="container"> <div class="container">
<p>{tr.deckConfigDailyLimits()}</p> <h2>{tr.deckConfigDailyLimits()}</h2>
<SpinBox <SpinBox
label={tr.schedulingNewCardsday()} label={tr.schedulingNewCardsday()}

View file

@ -20,13 +20,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
}); });
</script> </script>
<span bind:this={ref} title={html}> <span bind:this={ref} class="badge" title={html}>
{@html infoCircle} {@html infoCircle}
</span> </span>
<style> <style>
span :global(svg) { span :global(svg) {
vertical-align: text-bottom; vertical-align: -0.125rem;
opacity: 0.3; opacity: 0.3;
} }
</style> </style>

View file

@ -49,23 +49,19 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</script> </script>
{#if modified} {#if modified}
<div <span
class="img-div"
on:click={revert}
bind:this={ref} bind:this={ref}
class="badge"
title={tr.deckConfigRevertButtonTooltip()} title={tr.deckConfigRevertButtonTooltip()}
on:click={revert}
> >
{@html revertIcon} {@html revertIcon}
</div> </span>
{/if} {/if}
<style lang="scss"> <style lang="scss">
.img-div { span :global(svg) {
display: flex; vertical-align: -0.125rem;
:global(svg) {
align-self: center;
opacity: 0.3; opacity: 0.3;
} }
}
</style> </style>

View file

@ -13,6 +13,7 @@
@import "ts/sass/bootstrap/close"; @import "ts/sass/bootstrap/close";
@import "ts/sass/bootstrap/alert"; @import "ts/sass/bootstrap/alert";
@import "ts/sass/bootstrap/tooltip"; @import "ts/sass/bootstrap/tooltip";
@import "ts/sass/bootstrap/badge";
.night-mode { .night-mode {
@include scrollbar.night-mode; @include scrollbar.night-mode;