From a72b42d705ce128e66615f557c4804d9c244ab08 Mon Sep 17 00:00:00 2001 From: Matthew Grove Date: Sun, 12 Sep 2021 20:27:15 +0100 Subject: [PATCH] Update styling and add styling for new mode --- src/GroupPage.js | 3 +- src/History.js | 157 +++++++++++++++++---------------- src/css/App.css | 38 ++++++-- src/css/GroupPage.css | 26 ------ src/css/OptionsListOverlay.css | 20 +++++ src/css/SetPage.css | 10 +-- src/css/SliderOverlay.css | 43 +++++++++ 7 files changed, 183 insertions(+), 114 deletions(-) create mode 100644 src/css/OptionsListOverlay.css create mode 100644 src/css/SliderOverlay.css diff --git a/src/GroupPage.js b/src/GroupPage.js index 44a2213..4b96aa7 100644 --- a/src/GroupPage.js +++ b/src/GroupPage.js @@ -7,6 +7,7 @@ import Footer from "./Footer"; import "./css/GroupPage.css"; import "./css/ConfirmationDialog.css"; +import "./css/OptionsListOverlay.css"; import Loader from "./puff-loader.svg" @@ -530,7 +531,7 @@ export default withRouter(class GroupPage extends Component { this.state.editingUser && <>
-
+
{ ["Owner", "Contributor", "Member", "Remove"].map((role) =>

{ this.state.progressHistoryIncomplete.length > 0 && -
+ <>

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