+ <>
Incomplete
-
-
Set
-
Progress
-
Mark
-
Grade
-
Mode
+
+
+
Set
+ Progress
+ Mark
+ Grade
+ Mode
+
+
+ {
+ this.state.progressHistoryIncomplete.map((progressItem) =>
+
+
+ {progressItem.setTitle}
+ {
+ progressItem.switchLanguage &&
+
+ }
+
+
{progressItem.percentageProgress}%
+
{progressItem.correct}/{progressItem.progress}
+
{progressItem.grade}%
+
+ {
+ progressItem.mode === "questions"
+ ?
+
+ :
+
+ }
+
+
+
+
+
+ )
+ }
- {
- this.state.progressHistoryIncomplete.map((progressItem) =>
-
-
- {progressItem.setTitle}
- {
- progressItem.switchLanguage &&
-
- }
-
-
{progressItem.percentageProgress}%
-
{progressItem.correct}/{progressItem.progress}
-
{progressItem.grade}%
-
- {
- progressItem.mode === "questions"
- ?
-
- :
-
- }
-
-
-
-
-
- )
- }
-
+
}
{
this.state.progressHistoryComplete.length > 0 &&
-
+ <>
Completed
-
-
Set
-
Progress
-
Mark
-
Grade
-
Mode
+
+
+
Set
+ Mark
+ Grade
+ Mode
+
+ {
+ this.state.progressHistoryComplete.map((progressItem) =>
+
+
+ {progressItem.setTitle}
+ {
+ progressItem.switchLanguage &&
+
+ }
+
+
{progressItem.correct}/{progressItem.progress}
+
{progressItem.grade}%
+
+ {
+ progressItem.mode === "questions"
+ ?
+
+ :
+
+ }
+
+
+ )
+ }
- {
- this.state.progressHistoryComplete.map((progressItem) =>
-
-
- {progressItem.setTitle}
- {
- progressItem.switchLanguage &&
-
- }
-
-
{progressItem.percentageProgress}%
-
{progressItem.correct}/{progressItem.progress}
-
{progressItem.grade}%
-
- {
- progressItem.mode === "questions"
- ?
-
- :
-
- }
-
-
- )
- }
-
+
}
:
diff --git a/src/css/App.css b/src/css/App.css
index 3758f72..d9cb474 100644
--- a/src/css/App.css
+++ b/src/css/App.css
@@ -168,7 +168,7 @@ button:focus-visible, a:focus-visible {
outline: 1px solid var(--text-color-tinted);
}
-input[type=text] {
+input {
border-top: none;
border-right: none;
border-left: none;
@@ -179,10 +179,20 @@ input[type=text] {
min-width: 100px;
}
-input[type=text]:focus {
+input:focus {
outline: none;
}
+input[type="number"] {
+ -webkit-appearance: textfield;
+ -moz-appearance: textfield;
+ appearance: textfield;
+}
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+}
+
.page-header {
display: flex;
flex-direction: row;
@@ -256,6 +266,10 @@ label, p, input[type=text], main > span, main div > span {
margin-bottom: 8px;
}
+label .MuiIconButton-label > input {
+ z-index: -1;
+}
+
.stat-row {
display: flex;
flex-direction: row;
@@ -342,8 +356,8 @@ label, p, input[type=text], main > span, main div > span {
.progress-history-container > div > * {
display: table-cell;
word-wrap: break-word;
- padding-top: 2px;
- padding-bottom: 2px;
+ padding-top: 6px;
+ padding-bottom: 6px;
text-decoration: none;
color: inherit;
border-left: 8px solid transparent;
@@ -357,13 +371,27 @@ label, p, input[type=text], main > span, main div > span {
text-align: left;
}
+.progress-history-container > div:first-child > * {
+ padding-top: 0;
+}
+
+.progress-history-container > div > *:first-child > svg {
+ vertical-align: top;
+ margin-left: 4px;
+}
+
.progress-history-container .button.button--no-background {
padding: 0;
margin: 0;
}
+.title-icon {
+ color: var(--text-color-tinted);
+ margin-left: 12px;
+}
+
@media screen and (max-width: 420px) {
- .progress-history-container > div > *:nth-child(2), .progress-history-container > div > *:nth-last-child(3) {
+ .progress-history-container > div > *:nth-child(2), .progress-history-container--complete > div > *:nth-last-child(3), .progress-history-container--incomplete > div > *:nth-last-child(4) {
display: none;
}
}
\ No newline at end of file
diff --git a/src/css/GroupPage.css b/src/css/GroupPage.css
index 37007af..96b0509 100644
--- a/src/css/GroupPage.css
+++ b/src/css/GroupPage.css
@@ -52,29 +52,3 @@
.group-set-link--enabled > svg {
margin-left: 8px;
}
-
-.group-page-overlay-content {
- width: fit-content;
- height: fit-content;
- padding: 0;
-}
-
-.group-page-overlay-content > * {
- border-bottom: 1px solid var(--overlay-color);
- cursor: pointer;
- margin: 0;
-}
-
-.group-page-overlay-content > *:not(:last-child) {
- padding: 30px 48px;
-}
-
-.group-page-overlay-content > *:last-child {
- border: none;
- padding: 18px 48px;
-}
-
-.no-groups-message-list {
- padding: 0 18px;
- margin: 4px 0;
-}
\ No newline at end of file
diff --git a/src/css/OptionsListOverlay.css b/src/css/OptionsListOverlay.css
new file mode 100644
index 0000000..376bc85
--- /dev/null
+++ b/src/css/OptionsListOverlay.css
@@ -0,0 +1,20 @@
+.options-list-overlay-content {
+ width: fit-content;
+ height: fit-content;
+ padding: 0;
+}
+
+.options-list-overlay-content > * {
+ border-bottom: 1px solid var(--overlay-color);
+ cursor: pointer;
+ margin: 0;
+}
+
+.options-list-overlay-content > *:not(:last-child) {
+ padding: 30px 48px;
+}
+
+.options-list-overlay-content > *:last-child {
+ border: none;
+ padding: 18px 48px;
+}
diff --git a/src/css/SetPage.css b/src/css/SetPage.css
index d00c7db..db9ce13 100644
--- a/src/css/SetPage.css
+++ b/src/css/SetPage.css
@@ -1,8 +1,3 @@
-.set-cloud-icon {
- color: var(--text-color-tinted);
- margin-left: 12px;
-}
-
.vocab-list {
display: table;
table-layout: fixed;
@@ -50,6 +45,11 @@
row-gap: 8px;
}
+.no-groups-message-list {
+ padding: 0 18px;
+ margin: 4px 0;
+}
+
@media screen and (max-width: 860px) {
.set-page-group-overlay-content {
width: 75%;
diff --git a/src/css/SliderOverlay.css b/src/css/SliderOverlay.css
new file mode 100644
index 0000000..df556ef
--- /dev/null
+++ b/src/css/SliderOverlay.css
@@ -0,0 +1,43 @@
+.slider-overlay-content {
+ width: 80%;
+ max-width: 700px;
+ height: 40%;
+ max-height: 500px;
+ align-items: center;
+}
+
+.slider-overlay-content label {
+ margin: 16px 0 0 0;
+}
+
+.slider-overlay-content .continue-button {
+ margin: 24px 0 0 0;
+}
+
+.slider-overlay-content > .slider-container {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ column-gap: 12px;
+ justify-content: center;
+ align-items: center;
+}
+
+.slider-overlay-content > .slider-container input {
+ min-width: 0;
+ min-width: 26px;
+ width: 26px;
+}
+
+
+@media screen and (max-width: 500px) {
+ .slider-overlay-content {
+ width: 75%;
+ }
+}
+
+@media screen and (max-height: 700px) {
+ .slider-overlay-content {
+ height: 60%;
+ }
+}
\ No newline at end of file