From 79652b8da1dbab1c13e3af309d955db192c79df9 Mon Sep 17 00:00:00 2001 From: Anna Le Date: Thu, 7 Apr 2022 11:51:42 -0400 Subject: [PATCH 1/3] responsiveness update --- .../src/components/DayPanels/DayPanels.less | 2 +- .../MentorSubHeader/MentorSubHeader.less | 9 ++++ .../ContentCreator/DayEditor/DayEditor.less | 12 ------ .../ContentCreator/UnitEditor/UnitEditor.less | 20 ++++----- .../src/views/Mentor/Classroom/Classroom.less | 7 ++++ .../src/views/Mentor/Classroom/Home/Home.less | 42 +++++++++++++++---- .../LearningStandardModal.js | 2 +- .../src/views/Mentor/Dashboard/Dashboard.less | 33 ++++++++++++++- client/src/views/Researcher/DayLevelReport.js | 6 +-- .../src/views/Researcher/DayLevelReport.less | 23 ++++++---- .../views/Researcher/DayLevelReportView.js | 4 +- .../views/Researcher/DayLevelReportView.less | 16 +++++-- 12 files changed, 128 insertions(+), 48 deletions(-) diff --git a/client/src/components/DayPanels/DayPanels.less b/client/src/components/DayPanels/DayPanels.less index 8b5a36e8..1566935a 100644 --- a/client/src/components/DayPanels/DayPanels.less +++ b/client/src/components/DayPanels/DayPanels.less @@ -191,7 +191,7 @@ p { #blockly-canvas { margin: auto; width: 95%; - height: 72vh; + height: 74vh; } #console-container { diff --git a/client/src/components/MentorSubHeader/MentorSubHeader.less b/client/src/components/MentorSubHeader/MentorSubHeader.less index 45d1424d..9a42baae 100644 --- a/client/src/components/MentorSubHeader/MentorSubHeader.less +++ b/client/src/components/MentorSubHeader/MentorSubHeader.less @@ -54,3 +54,12 @@ } } } + +@media only screen and (max-width: 915px) { + + #page-header { + h1 { + width: fit-content; + } + } +} \ No newline at end of file diff --git a/client/src/views/ContentCreator/DayEditor/DayEditor.less b/client/src/views/ContentCreator/DayEditor/DayEditor.less index 04b5c4b2..b25fe8da 100644 --- a/client/src/views/ContentCreator/DayEditor/DayEditor.less +++ b/client/src/views/ContentCreator/DayEditor/DayEditor.less @@ -20,18 +20,6 @@ width: '160px'; } -// #display-code-modal { -// #display-code-btn { -// width: 15vw; -// min-height: 10vh; -// font-size: 1em; - -// &:hover { -// width: 18vw; -// } -// } -// } - .border-card-info { width: 50px; } diff --git a/client/src/views/ContentCreator/UnitEditor/UnitEditor.less b/client/src/views/ContentCreator/UnitEditor/UnitEditor.less index dbac376a..d95075e9 100644 --- a/client/src/views/ContentCreator/UnitEditor/UnitEditor.less +++ b/client/src/views/ContentCreator/UnitEditor/UnitEditor.less @@ -21,16 +21,16 @@ width: '160px'; } -#display-code-modal { +// #display-code-modal { - #display-code-btn { - width: 18vw; - min-height: 4vh; - font-size: 1em; +// #display-code-btn { +// width: 18vw; +// min-height: 4vh; +// font-size: 1em; - &:hover { - width: 20vw; - } - } - } \ No newline at end of file +// &:hover { +// width: 20vw; +// } +// } +// } \ No newline at end of file diff --git a/client/src/views/Mentor/Classroom/Classroom.less b/client/src/views/Mentor/Classroom/Classroom.less index 8972f151..4a77ea97 100644 --- a/client/src/views/Mentor/Classroom/Classroom.less +++ b/client/src/views/Mentor/Classroom/Classroom.less @@ -43,3 +43,10 @@ .ant-tabs-ink-bar { background: #colors[secondary] !important; } + +@media only screen and (max-width: 915px) { + .ant-tabs-nav-wrap, + .ant-tabs-nav { + margin: auto 10vw; + } +} diff --git a/client/src/views/Mentor/Classroom/Home/Home.less b/client/src/views/Mentor/Classroom/Home/Home.less index 716b17c9..3d341025 100644 --- a/client/src/views/Mentor/Classroom/Home/Home.less +++ b/client/src/views/Mentor/Classroom/Home/Home.less @@ -50,7 +50,7 @@ #view-day-button { height: 6vh; - width: 30%; + width: 40%; font-size: 1.2em; font-weight: 600; background-color: transparent; @@ -89,10 +89,14 @@ margin-left: 10px; #change-lesson-btn { - width: auto; + display: flex; + justify-content: center; + align-items: center; + width: fit-content; height: 2.5vh; font-size: 0.8em; font-weight: 600; + line-height: 0; border: none; color: #colors[text-primary]; background: #colors[quaternary]; @@ -103,10 +107,6 @@ &:hover { background: #colors[quinary]; } - #test { - display: flex; - justify-content: right; - } } } } @@ -151,7 +151,7 @@ float: left; margin-left: 12px; position: relative; - top: -60px; + top: -50px; &:focus { outline: none; @@ -167,3 +167,31 @@ } } } + +@media only screen and (max-width: 915px) { + + #active-learning-standard-title-container { + line-height: 20px; + padding-top: 2vh; + } + + #home-content-container { + #card-btn-container { + grid-template-columns: auto; + #view-day-card { + width: 90%; + #view-day-heading { + #view-day-button { + width: fit-content; + } + } + } + } + } + + #display-code-modal { + #display-code-btn { + width: 40vw; + } + } +} diff --git a/client/src/views/Mentor/Classroom/Home/LearningStandardSelect/LearningStandardModal.js b/client/src/views/Mentor/Classroom/Home/LearningStandardSelect/LearningStandardModal.js index 862197d0..4c390c1c 100644 --- a/client/src/views/Mentor/Classroom/Home/LearningStandardSelect/LearningStandardModal.js +++ b/client/src/views/Mentor/Classroom/Home/LearningStandardSelect/LearningStandardModal.js @@ -74,7 +74,7 @@ export default function LearningStandardModal({ return (
{
) : ( -
+
)}
-

Current Filter:

+

Current Filter:

{Object.keys(paramObj).map((key) => ( {key === 'grade' ? `${key}(id)` : key}: {paramObj[key]} @@ -412,7 +412,7 @@ const Filter = ({ setSearchParam }) => { ))} -

Or

+

Or