diff --git a/sass/BUILD.bazel b/sass/BUILD.bazel index b1183f8f1..5df1330ce 100644 --- a/sass/BUILD.bazel +++ b/sass/BUILD.bazel @@ -51,6 +51,14 @@ sass_library( visibility = ["//visibility:public"], ) +sass_library( + name = "breakpoints_lib", + srcs = [ + "breakpoints.scss", + ], + visibility = ["//visibility:public"], +) + sass_library( name = "button_mixins_lib", srcs = [ diff --git a/sass/_button-mixins.scss b/sass/_button-mixins.scss index 7934aaf08..aa7f74961 100644 --- a/sass/_button-mixins.scss +++ b/sass/_button-mixins.scss @@ -1,3 +1,5 @@ +/* Copyright: Ankitects Pty Ltd and contributors + * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */ @use "fusion-vars"; @import "bootstrap/scss/functions"; diff --git a/sass/breakpoints.scss b/sass/breakpoints.scss new file mode 100644 index 000000000..3993ba264 --- /dev/null +++ b/sass/breakpoints.scss @@ -0,0 +1,93 @@ +/* Copyright: Ankitects Pty Ltd and contributors + * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */ +@use "sass:list"; +@use "sass:map"; + +$bps: ( + "xs", + "sm", + "md", + "lg", + "xl", + "xxl", +); + +$breakpoints: ( + list.nth($bps, 2): 576px, + list.nth($bps, 3): 768px, + list.nth($bps, 4): 992px, + list.nth($bps, 5): 1200px, + list.nth($bps, 6): 1400px, +); + +@mixin with-breakpoint($bp) { + @if map.get($breakpoints, $bp) { + @media (min-width: map.get($breakpoints, $bp)) { + @content; + } + } @else { + @content; + } +}; + +@mixin with-breakpoints($prefix, $dict) { + @each $property, $values in $dict { + @each $bp, $value in $values { + @if map.get($breakpoints, $bp) { + @media (min-width: map.get($breakpoints, $bp)) { + .#{$prefix}-#{$bp} { + #{$property}: $value; + } + } + } @else { + .#{$prefix}-#{$bp} { + #{$property}: $value; + } + } + } + } +}; + +@function breakpoints-upto($upto) { + $result: (); + + @each $bp in $bps { + $result: list.append($result, $bp); + + @if $bp == $upto { + @return $result; + } + } + + @return $result; +} + +@function breakpoint-selector-upto($prefix, $upto) { + $result: (); + + @each $bp in breakpoints-upto($upto) { + $result: list.append($result, ".#{$prefix}-#{$bp}", $separator: comma) + } + + @return $result; +} + +@mixin with-breakpoints-upto($prefix, $dict) { + @each $property, $values in $dict { + @each $bp, $value in $values { + $selector: breakpoint-selector-upto($prefix, $bp); + + @if map.get($breakpoints, $bp) { + @media (min-width: map.get($breakpoints, $bp)) { + #{$selector} { + #{$property}: $value; + } + } + } @else { + #{$selector} { + #{$property}: $value; + } + } + } + } +}; diff --git a/ts/card-info/CardInfo.svelte b/ts/card-info/CardInfo.svelte index 41d6a7ce9..122fc3e4d 100644 --- a/ts/card-info/CardInfo.svelte +++ b/ts/card-info/CardInfo.svelte @@ -3,53 +3,54 @@ Copyright: Ankitects Pty Ltd and contributors License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html --> -{#if stats !== null} -
-
+ + {#if stats} + - {#if includeRevlog} - - {/if} -
-
-{:else} -
{tr.cardStatsNoCard()}
-{/if} + - + {#if revlog} + + + + {/if} + {:else} + + {/if} + diff --git a/ts/card-info/CardInfoPlaceholder.svelte b/ts/card-info/CardInfoPlaceholder.svelte new file mode 100644 index 000000000..4ba53a50c --- /dev/null +++ b/ts/card-info/CardInfoPlaceholder.svelte @@ -0,0 +1,19 @@ + + + +
{tr.cardStatsNoCard()}
+ + diff --git a/ts/card-info/CardStats.svelte b/ts/card-info/CardStats.svelte index ccaef6672..3fe057608 100644 --- a/ts/card-info/CardStats.svelte +++ b/ts/card-info/CardStats.svelte @@ -94,10 +94,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html $: statsRows = rowsFromStats(stats); - - {#each statsRows as row, _index} +
+ {#each statsRows as row} - + {/each} @@ -108,6 +108,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html width: 100%; border-spacing: 1em 0; border-collapse: collapse; + } + + .align-start { text-align: start; } diff --git a/ts/card-info/Revlog.svelte b/ts/card-info/Revlog.svelte index 0e96dab06..8ba2733d4 100644 --- a/ts/card-info/Revlog.svelte +++ b/ts/card-info/Revlog.svelte @@ -7,10 +7,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html import { Stats } from "../lib/proto"; import { Timestamp, timeSpan } from "../lib/time"; - export let stats: Stats.CardStatsResponse; - type StatsRevlogEntry = Stats.CardStatsResponse.StatsRevlogEntry; + export let revlog: StatsRevlogEntry[]; + function reviewKindClass(entry: StatsRevlogEntry): string { switch (entry.reviewKind) { case Stats.RevlogEntry.ReviewKind.LEARNING: @@ -59,6 +59,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html function revlogRowFromEntry(entry: StatsRevlogEntry): RevlogRow { const timestamp = new Timestamp(entry.time); + return { date: timestamp.dateString(), time: timestamp.timeString(), @@ -72,37 +73,32 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html }; } - let revlogRows: RevlogRow[]; - $: revlogRows = stats.revlog.map((entry) => - revlogRowFromEntry(entry as StatsRevlogEntry), - ); + $: revlogRows = revlog.map(revlogRowFromEntry); -{#if stats.revlog.length} -
-
{row.label}{row.label} {row.value}
+{#if revlog.length > 0} +
+ + + + + + + + + {#each revlogRows as row, _index} - - - - - - + + + + + + - {#each revlogRows as row, _index} - - - - - - - - - {/each} -
{tr2.cardStatsReviewLogDate()}{tr2.cardStatsReviewLogRating()}{tr2.cardStatsInterval()}{tr2.cardStatsReviewLogTimeTaken()}
{tr2.cardStatsReviewLogDate()}{tr2.cardStatsReviewLogRating()}{tr2.cardStatsInterval()}{tr2.cardStatsReviewLogTimeTaken()}{row.date} @ {row.time}{row.rating}{row.interval}{row.takenSecs}
{row.date} @ {row.time}{row.rating}{row.interval}{row.takenSecs}
- + {/each} + {/if} diff --git a/ts/components/ButtonToolbar.svelte b/ts/components/ButtonToolbar.svelte index cd636e4d4..baa79fd7a 100644 --- a/ts/components/ButtonToolbar.svelte +++ b/ts/components/ButtonToolbar.svelte @@ -119,7 +119,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html .button-toolbar { flex-wrap: var(--buttons-wrap); - padding: 0.15rem 0; + padding-left: 0.15rem; > :global(*) > :global(*) { /* TODO replace with gap once available */ diff --git a/ts/components/Col.svelte b/ts/components/Col.svelte new file mode 100644 index 000000000..bb4181f85 --- /dev/null +++ b/ts/components/Col.svelte @@ -0,0 +1,52 @@ + + + +
+ +
+ + diff --git a/ts/components/Container.svelte b/ts/components/Container.svelte index 006787989..582854b9a 100644 --- a/ts/components/Container.svelte +++ b/ts/components/Container.svelte @@ -4,16 +4,62 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html --> -
+
+ + diff --git a/ts/components/Row.svelte b/ts/components/Row.svelte new file mode 100644 index 000000000..713df5b64 --- /dev/null +++ b/ts/components/Row.svelte @@ -0,0 +1,26 @@ + + + + +
+ +
+ + + diff --git a/ts/components/StickyFooter.svelte b/ts/components/StickyContainer.svelte similarity index 56% rename from ts/components/StickyFooter.svelte rename to ts/components/StickyContainer.svelte index 57bea80ce..334e494e2 100644 --- a/ts/components/StickyFooter.svelte +++ b/ts/components/StickyContainer.svelte @@ -3,20 +3,29 @@ Copyright: Ankitects Pty Ltd and contributors License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html --> -
- -
+
+ + + +
diff --git a/ts/components/StickyHeader.svelte b/ts/components/StickyHeader.svelte deleted file mode 100644 index 053c942a0..000000000 --- a/ts/components/StickyHeader.svelte +++ /dev/null @@ -1,31 +0,0 @@ - - - -
- -
- - diff --git a/ts/deck-options/col.ts b/ts/components/types.ts similarity index 74% rename from ts/deck-options/col.ts rename to ts/components/types.ts index 56629e6e5..220585537 100644 --- a/ts/deck-options/col.ts +++ b/ts/components/types.ts @@ -1,4 +1,5 @@ // Copyright: Ankitects Pty Ltd and contributors // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html + export type Size = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12; -export type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl"; +export type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "xxl"; diff --git a/ts/deck-options/AdvancedOptions.svelte b/ts/deck-options/AdvancedOptions.svelte index 53adf614b..3678180c4 100644 --- a/ts/deck-options/AdvancedOptions.svelte +++ b/ts/deck-options/AdvancedOptions.svelte @@ -5,7 +5,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html - - - {tr.schedulingMaximumInterval()} - - + + {tr.schedulingMaximumInterval()} + - - - {tr.schedulingStartingEase()} - - + + {tr.schedulingStartingEase()} + - - - {tr.schedulingEasyBonus()} - - + + {tr.schedulingEasyBonus()} + - - - {tr.schedulingIntervalModifier()} - - + + {tr.schedulingIntervalModifier()} + - - - {tr.schedulingHardInterval()} - - + + {tr.schedulingHardInterval()} + - - - {tr.schedulingNewInterval()} - - + + {tr.schedulingNewInterval()} + {#if state.v3Scheduler} - - - + {/if} diff --git a/ts/deck-options/AudioOptions.svelte b/ts/deck-options/AudioOptions.svelte index b00fb3196..4ca842576 100644 --- a/ts/deck-options/AudioOptions.svelte +++ b/ts/deck-options/AudioOptions.svelte @@ -5,7 +5,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html - - - {tr.deckConfigDisableAutoplay()} - - + + {tr.deckConfigDisableAutoplay()} + - - - {tr.deckConfigSkipQuestionWhenReplaying()} - - + + {tr.deckConfigSkipQuestionWhenReplaying()} + diff --git a/ts/deck-options/BUILD.bazel b/ts/deck-options/BUILD.bazel index d724f6cca..4ac282c4b 100644 --- a/ts/deck-options/BUILD.bazel +++ b/ts/deck-options/BUILD.bazel @@ -14,6 +14,7 @@ compile_sass( deps = [ "//sass:base_lib", "//sass:scrollbar_lib", + "//sass:breakpoints_lib", "//sass/bootstrap", ], ) @@ -77,6 +78,7 @@ svelte_check( ]) + [ "//sass:button_mixins_lib", "//sass:night_mode_lib", + "//sass:breakpoints_lib", "//sass/bootstrap", "@npm//@types/bootstrap", "@npm//@types/lodash-es", diff --git a/ts/deck-options/BuryOptions.svelte b/ts/deck-options/BuryOptions.svelte index a78c37e31..1b812fea3 100644 --- a/ts/deck-options/BuryOptions.svelte +++ b/ts/deck-options/BuryOptions.svelte @@ -4,7 +4,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html --> - - - {tr.deckConfigBuryNewSiblings()} - - + + {tr.deckConfigBuryNewSiblings()} + - - - {tr.deckConfigBuryReviewSiblings()} - - + + {tr.deckConfigBuryReviewSiblings()} + diff --git a/ts/deck-options/CardStateCustomizer.svelte b/ts/deck-options/CardStateCustomizer.svelte index d48be044f..01a7e866c 100644 --- a/ts/deck-options/CardStateCustomizer.svelte +++ b/ts/deck-options/CardStateCustomizer.svelte @@ -4,10 +4,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html --> diff --git a/ts/deck-options/CheckBoxRow.svelte b/ts/deck-options/CheckBoxRow.svelte deleted file mode 100644 index 491df91d7..000000000 --- a/ts/deck-options/CheckBoxRow.svelte +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - {#if markdownTooltip}{:else}{/if} - - diff --git a/ts/deck-options/Col.svelte b/ts/deck-options/Col.svelte deleted file mode 100644 index 2242fa8e9..000000000 --- a/ts/deck-options/Col.svelte +++ /dev/null @@ -1,22 +0,0 @@ - - - -
- -
diff --git a/ts/deck-options/ConfigSelector.svelte b/ts/deck-options/ConfigSelector.svelte index d5568c0e2..42ed9ad3f 100644 --- a/ts/deck-options/ConfigSelector.svelte +++ b/ts/deck-options/ConfigSelector.svelte @@ -10,12 +10,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html import type Modal from "bootstrap/js/dist/modal"; import TextInputModal from "./TextInputModal.svelte"; - import StickyHeader from "../components/StickyHeader.svelte"; + import StickyContainer from "../components/StickyContainer.svelte"; import ButtonToolbar from "../components/ButtonToolbar.svelte"; import Item from "../components/Item.svelte"; import ButtonGroup from "../components/ButtonGroup.svelte"; import ButtonGroupItem from "../components/ButtonGroupItem.svelte"; - import Container from "../components/Container.svelte"; import SelectButton from "../components/SelectButton.svelte"; import SelectOption from "../components/SelectOption.svelte"; @@ -88,34 +87,32 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html bind:modalKey /> - - - - - - - - {#each $configList as entry} - - {configLabel(entry)} - - {/each} - - - - + + + + + + + {#each $configList as entry} + + {configLabel(entry)} + + {/each} + + + + - - - - - - + + + + + diff --git a/ts/deck-options/DailyLimits.svelte b/ts/deck-options/DailyLimits.svelte index 82aa05609..9ad746e3f 100644 --- a/ts/deck-options/DailyLimits.svelte +++ b/ts/deck-options/DailyLimits.svelte @@ -41,27 +41,27 @@ - - - {tr.schedulingNewCardsday()} - + + {tr.schedulingNewCardsday()} + + - - - {tr.schedulingMaximumReviewsday()} - + + {tr.schedulingMaximumReviewsday()} + + diff --git a/ts/deck-options/DeckOptionsPage.svelte b/ts/deck-options/DeckOptionsPage.svelte index 9dd48952b..195a446a8 100644 --- a/ts/deck-options/DeckOptionsPage.svelte +++ b/ts/deck-options/DeckOptionsPage.svelte @@ -5,7 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html - - + + - + diff --git a/ts/deck-options/Label.svelte b/ts/deck-options/Label.svelte index ff8d78eb2..f0d991151 100644 --- a/ts/deck-options/Label.svelte +++ b/ts/deck-options/Label.svelte @@ -18,3 +18,9 @@ + + diff --git a/ts/deck-options/LapseOptions.svelte b/ts/deck-options/LapseOptions.svelte index ce9fc275b..423876958 100644 --- a/ts/deck-options/LapseOptions.svelte +++ b/ts/deck-options/LapseOptions.svelte @@ -33,49 +33,43 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html - - - {tr.deckConfigRelearningSteps()} - - + + {tr.deckConfigRelearningSteps()} + + + + {tr.schedulingMinimumInterval()} + - - {tr.schedulingMinimumInterval()} - - - - - {tr.schedulingLeechThreshold()} - - + + {tr.schedulingLeechThreshold()} + - - - {tr.schedulingLeechAction()} - - + + {tr.schedulingLeechAction()} + diff --git a/ts/deck-options/NewOptions.svelte b/ts/deck-options/NewOptions.svelte index 47c5bd3ab..35883e788 100644 --- a/ts/deck-options/NewOptions.svelte +++ b/ts/deck-options/NewOptions.svelte @@ -4,10 +4,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html --> - - - {tr.deckConfigLearningSteps()} - - + + {tr.deckConfigLearningSteps()} + + + + {tr.schedulingGraduatingInterval()} + - - {tr.schedulingGraduatingInterval()} - - - - - {tr.schedulingEasyInterval()} - + + {tr.schedulingEasyInterval()} + + - - - {tr.deckConfigNewInsertionOrder()} - - + + {tr.deckConfigNewInsertionOrder()} + diff --git a/ts/deck-options/Row.svelte b/ts/deck-options/Row.svelte deleted file mode 100644 index 9acc04a48..000000000 --- a/ts/deck-options/Row.svelte +++ /dev/null @@ -1,11 +0,0 @@ - - - -
- -
diff --git a/ts/deck-options/SpinBox.svelte b/ts/deck-options/SpinBox.svelte index b050d1e11..e7ae0984c 100644 --- a/ts/deck-options/SpinBox.svelte +++ b/ts/deck-options/SpinBox.svelte @@ -28,7 +28,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html {min} {max} bind:value - class="form-control" + class="spin-box form-control" class:nightMode on:blur={checkMinMax} /> @@ -36,6 +36,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html diff --git a/ts/deck-options/TooltipLabel.svelte b/ts/deck-options/TooltipLabel.svelte index 245b15998..2f5f3c370 100644 --- a/ts/deck-options/TooltipLabel.svelte +++ b/ts/deck-options/TooltipLabel.svelte @@ -29,6 +29,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html > createTooltip(event.detail.span)} > {@html infoCircle} diff --git a/ts/deck-options/Warning.svelte b/ts/deck-options/Warning.svelte index 36b224ccc..70ff596a0 100644 --- a/ts/deck-options/Warning.svelte +++ b/ts/deck-options/Warning.svelte @@ -4,7 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html --> - + @@ -94,4 +94,4 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html - + diff --git a/ts/editor/TagEditor.svelte b/ts/editor/TagEditor.svelte index d69b29768..2d9cb06ec 100644 --- a/ts/editor/TagEditor.svelte +++ b/ts/editor/TagEditor.svelte @@ -5,7 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html - + {#if !wrap} tag.selected)} @@ -504,7 +509,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html SPACER
- +