From 158966cc01b2db5b107e06f2d66c9a10faf4e56e Mon Sep 17 00:00:00 2001 From: aignatov-bio Date: Thu, 2 Apr 2020 14:50:48 +0200 Subject: [PATCH] Add mobile view for dashboard --- .../stylesheets/dashboard/calendar.scss | 23 ++++++-- .../stylesheets/dashboard/current_tasks.scss | 56 +++++++++++++++++++ .../stylesheets/dashboard/quick_start.scss | 12 ++++ .../stylesheets/dashboard/recent_work.scss | 38 +++++++++++++ app/assets/stylesheets/dashboard/show.scss | 21 ++++++- .../shared_styles/elements/navigation.scss | 2 + 6 files changed, 144 insertions(+), 8 deletions(-) diff --git a/app/assets/stylesheets/dashboard/calendar.scss b/app/assets/stylesheets/dashboard/calendar.scss index b5bf7d2da..1b91db708 100644 --- a/app/assets/stylesheets/dashboard/calendar.scss +++ b/app/assets/stylesheets/dashboard/calendar.scss @@ -1,7 +1,10 @@ // scss-lint:disable SelectorDepth // scss-lint:disable NestingDepth + + .dashboard-container .calendar-widget { + --calendar-day-size: 32px; grid-column: 10 / span 3; grid-row: 1 / span 6; min-height: 320px; @@ -57,12 +60,12 @@ animation-timing-function: $timing-function-sharp; border-radius: 50%; display: flex; - height: 32px; + height: var(--calendar-day-size); justify-content: center; position: relative; transition: .3s; user-select: none; - width: 32px; + width: var(--calendar-day-size); &.adjacent-month { color: $color-alto; @@ -75,9 +78,9 @@ border-radius: 50%; cursor: pointer; display: flex; - height: 30px; + height: calc(var(--calendar-day-size) - 2px); justify-content: center; - width: 30px; + width: calc(var(--calendar-day-size) - 2px); &:hover { background: $color-concrete; @@ -91,9 +94,9 @@ border-radius: 50%; content: ""; height: 4px; - left: 14px; + left: calc((var(--calendar-day-size) / 2) - 2px); position: absolute; - top: 24px; + top: calc((var(--calendar-day-size) / 2) + 8px); width: 4px; } } @@ -143,3 +146,11 @@ } } } + +@media (max-width: 700px) { + .dashboard-container .calendar-widget { + --calendar-day-size: 28px; + grid-column: 1 / span 12; + grid-row: 2; + } +} diff --git a/app/assets/stylesheets/dashboard/current_tasks.scss b/app/assets/stylesheets/dashboard/current_tasks.scss index d442fefdd..ae83941f0 100644 --- a/app/assets/stylesheets/dashboard/current_tasks.scss +++ b/app/assets/stylesheets/dashboard/current_tasks.scss @@ -335,3 +335,59 @@ } } } + +@media (max-width: 700px) { + .dashboard-container .current-tasks-widget { + --widget-header-size: 72px; + grid-row: 1; + min-height: 450px; + + .widget-title { + flex-basis: 100%; + line-height: 36px; + } + + .actions-container { + flex-grow: 0; + padding: 0; + } + + .current-tasks-navbar { + flex-basis: 0; + flex-grow: 1; + } + + .search-container { + margin-right: 5px; + + .task-search-field { + width: 150px; + + &:focus { + width: 150px; + } + } + } + + .current-tasks-list { + .current-task-item { + .item-row { + flex-wrap: wrap; + + .task-due-date { + @include font-small; + + .fas { + display: none; + } + } + + .task-progress-container { + flex-basis: 100%; + max-width: none; + } + } + } + } + } +} diff --git a/app/assets/stylesheets/dashboard/quick_start.scss b/app/assets/stylesheets/dashboard/quick_start.scss index dd69bc6db..1ab28051a 100644 --- a/app/assets/stylesheets/dashboard/quick_start.scss +++ b/app/assets/stylesheets/dashboard/quick_start.scss @@ -1,3 +1,6 @@ +// scss-lint:disable SelectorDepth +// scss-lint:disable NestingDepth + .dashboard-container .quick-start-widget { grid-column: 1 / span 2; grid-row: 7 / span 6; @@ -34,3 +37,12 @@ grid-row: 5 / span 4; } } + +@media (max-width: 700px) { + .dashboard-container .quick-start-widget { + --widget-header-size: 36px; + grid-column: 1 / span 12; + grid-row: 4; + min-height: 300px; + } +} diff --git a/app/assets/stylesheets/dashboard/recent_work.scss b/app/assets/stylesheets/dashboard/recent_work.scss index 76db9c39e..00fad2df4 100644 --- a/app/assets/stylesheets/dashboard/recent_work.scss +++ b/app/assets/stylesheets/dashboard/recent_work.scss @@ -83,3 +83,41 @@ } } } + +@media (max-width: 700px) { + .dashboard-container .recent-work-widget { + --widget-header-size: 72px; + grid-row: 3; + min-height: 450px; + + .widget-title { + flex-basis: 100%; + line-height: 36px; + } + + .recent-work-container { + .recent-work-item { + flex-wrap: wrap; + margin: 5px 0; + + .object-name { + flex-basis: 100%; + line-height: 18px; + } + + .object-type { + flex-basis: 0; + flex-grow: 1; + line-height: 18px; + } + + .object-changed { + flex-basis: 0; + flex-grow: 1; + line-height: 18px; + text-align: right; + } + } + } + } +} diff --git a/app/assets/stylesheets/dashboard/show.scss b/app/assets/stylesheets/dashboard/show.scss index 12ff213c8..9a9598352 100644 --- a/app/assets/stylesheets/dashboard/show.scss +++ b/app/assets/stylesheets/dashboard/show.scss @@ -1,6 +1,9 @@ +// scss-lint:disable SelectorDepth +// scss-lint:disable NestingDepth + .dashboard-container { - --widget-header-size: 44px; --dashboard-widgets-gap: 30px; + --widget-header-size: 44px; display: grid; grid-column-gap: var(--dashboard-widgets-gap); grid-row-gap: var(--dashboard-widgets-gap); @@ -19,7 +22,6 @@ align-items: center; border-bottom: $border-tertiary; display: flex; - height: var(--widget-header-size); padding-left: 16px; @@ -54,3 +56,18 @@ --dashboard-widgets-gap: 16px; } } + +@media (max-width: 700px) { + .dashboard-container { + --widget-header-size: 72px; + grid-template-rows: auto; + + .widget-header { + flex-wrap: wrap; + + .sci-secondary-navbar { + height: 36px; + } + } + } +} diff --git a/app/assets/stylesheets/shared_styles/elements/navigation.scss b/app/assets/stylesheets/shared_styles/elements/navigation.scss index bc2c5442a..c8b9575b7 100644 --- a/app/assets/stylesheets/shared_styles/elements/navigation.scss +++ b/app/assets/stylesheets/shared_styles/elements/navigation.scss @@ -1,6 +1,7 @@ .sci-secondary-navbar { display: flex; height: 100%; + overflow-x: auto; .navbar-link { @include font-small; @@ -13,6 +14,7 @@ position: relative; text-decoration: none; text-transform: uppercase; + white-space: nowrap; &:hover { color: $color-volcano;