From ba9bfa0f72c54dfa22e33ea62ad9901f75bf3819 Mon Sep 17 00:00:00 2001 From: dat Date: Tue, 22 May 2018 15:47:50 +0700 Subject: [PATCH] topcoder connect ui responsive updates --- src/assets/icons/coder-welcome.svg | 2 +- src/components/CoderBot/CoderBot.scss | 46 +++++- src/components/Maintenance/Maintenance.jsx | 2 +- src/components/Maintenance/Maintenance.scss | 17 +- .../StatusFilters/StatusFiltersMobile.jsx | 2 +- .../StatusFilters/StatusFiltersMobile.scss | 2 +- .../Projects/ProjectListNavHeader.jsx | 10 ++ .../Projects/ProjectListNavHeader.scss | 13 +- .../components/Walkthrough/Walkthrough.jsx | 15 +- .../components/Walkthrough/Walkthrough.scss | 145 +++++++++++++++--- 10 files changed, 216 insertions(+), 38 deletions(-) diff --git a/src/assets/icons/coder-welcome.svg b/src/assets/icons/coder-welcome.svg index 3ad07735a..a718ee687 100755 --- a/src/assets/icons/coder-welcome.svg +++ b/src/assets/icons/coder-welcome.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/components/CoderBot/CoderBot.scss b/src/components/CoderBot/CoderBot.scss index 3962e51ab..728f82264 100644 --- a/src/components/CoderBot/CoderBot.scss +++ b/src/components/CoderBot/CoderBot.scss @@ -13,14 +13,24 @@ position: relative; padding-top: 55px; text-align: center; - min-height: 606px; - min-width: 768px; - width: 970px; + min-height: 706px; + @media screen and (max-width: $screen-sm - 1px) { + min-height: 780px; + } margin: 20px auto 0; background: #ffffff; .icon-coder-broken { margin: 6% 20%; float: left; + @media screen and (max-width: $screen-md - 1px) { + margin: 6% 10%; + } + @media screen and (max-width: $screen-sm - 1px) { + margin: 6% 5%; + } + @media screen and (max-width: 321px) { + margin: 6% 1%; + } } background-size: 307px 300px; a{ @@ -36,24 +46,52 @@ letter-spacing: 0px; padding: 0 168px 25px 168px; line-height: inherit; + @media screen and (max-width: 1000px - 1px) { + padding: 0 100px 25px 100px; + } + @media screen and (max-width: $screen-md - 1px) { + padding: 0 28px 25px 28px; + } + @media screen and (max-width: $screen-sm - 1px) { + font-size: 30px; + } } p{ text-align: left; + min-height: 120px; padding: 0 168px; @include roboto; font-size: $tc-label-lg; color: $tc-gray-70; letter-spacing: 0px; line-height: 23px; + @media screen and (max-width: 1000px - 1px) { + padding: 0 100px; + } + @media screen and (max-width: $screen-md - 1px) { + padding: 0 28px; + } } span{ position: absolute; left: 49%; - top: 45%; + bottom: 25%; @include roboto-medium; font-size: 190px; color: $tc-orange-30; letter-spacing: 0px; + @media screen and (max-width: $screen-md - 1px) { + font-size: 150px; + bottom: 30%; + } + @media screen and (max-width: $screen-sm - 1px) { + font-size: 100px; + bottom: 45%; + } + @media screen and (max-width: 400px) { + font-size: 65px; + left: 63%; + } } } } diff --git a/src/components/Maintenance/Maintenance.jsx b/src/components/Maintenance/Maintenance.jsx index f03898e81..8b93d2ebd 100644 --- a/src/components/Maintenance/Maintenance.jsx +++ b/src/components/Maintenance/Maintenance.jsx @@ -5,7 +5,7 @@ const Maintenance = () => { return (
-
+

Welcome to Topcoder Connect

We are temporarily down for maintenance. We will be back shortly, after Coder is done with all the amazing optimizations.

diff --git a/src/components/Maintenance/Maintenance.scss b/src/components/Maintenance/Maintenance.scss index 6c3fcd6e1..7a8adf48d 100644 --- a/src/components/Maintenance/Maintenance.scss +++ b/src/components/Maintenance/Maintenance.scss @@ -8,15 +8,14 @@ } } - .page-error { + .page-error-maintenance { border-radius:4px; position: relative; padding-top: 55px; text-align: center; min-height: 606px; - min-width: 768px; - width: 970px; margin: 20px auto 0; + background: #ffffff; /* background: $tc-white url('../../assets/icons/coder-broken.svg') no-repeat 18% 85%; */ background-size: 307px 300px; a{ @@ -30,17 +29,25 @@ @include roboto-medium; font-size: 48px; letter-spacing: 0px; - padding: 0 168px 25px 168px; + padding: 0 28px 25px 28px; line-height: inherit; + @media screen and (max-width: $screen-sm - 1px) { + font-size: 30px; + } } p{ - text-align: left; + text-align: center; padding: 0 168px; @include roboto; font-size: $tc-label-lg; color: $tc-gray-70; letter-spacing: 0px; line-height: 23px; + padding: 0 28px 25px 28px; + + @media screen and (max-width: $screen-md - 1px) { + text-align: justify; + } } span{ position: absolute; diff --git a/src/components/StatusFilters/StatusFiltersMobile.jsx b/src/components/StatusFilters/StatusFiltersMobile.jsx index 6163a2566..defacbe44 100644 --- a/src/components/StatusFilters/StatusFiltersMobile.jsx +++ b/src/components/StatusFilters/StatusFiltersMobile.jsx @@ -47,7 +47,7 @@ class StatusFiltersMobile extends React.Component { return (
- {currentSatusLabel} +
{currentSatusLabel}
{isOpen &&
    diff --git a/src/components/StatusFilters/StatusFiltersMobile.scss b/src/components/StatusFilters/StatusFiltersMobile.scss index cb6bab593..9daf936a6 100644 --- a/src/components/StatusFilters/StatusFiltersMobile.scss +++ b/src/components/StatusFilters/StatusFiltersMobile.scss @@ -8,11 +8,11 @@ display: flex; height: 10 * $base-unit; font-size: 15px; - justify-content: space-between; padding: 0 4 * $base-unit; > svg { width: 12px; + margin-left: 10px; } &.is-open > svg { diff --git a/src/projects/list/components/Projects/ProjectListNavHeader.jsx b/src/projects/list/components/Projects/ProjectListNavHeader.jsx index 95ccfca3d..8b785ac64 100644 --- a/src/projects/list/components/Projects/ProjectListNavHeader.jsx +++ b/src/projects/list/components/Projects/ProjectListNavHeader.jsx @@ -87,6 +87,16 @@ export default class ProjectListNavHeader extends Component { ) )} +
    +
    + +
    +
diff --git a/src/projects/list/components/Projects/ProjectListNavHeader.scss b/src/projects/list/components/Projects/ProjectListNavHeader.scss index deba0c2e1..033f0b62c 100644 --- a/src/projects/list/components/Projects/ProjectListNavHeader.scss +++ b/src/projects/list/components/Projects/ProjectListNavHeader.scss @@ -21,6 +21,15 @@ .left-wrapper { flex: 1 1 auto; + .primary-filter { + position: absolute; + top: 60px; + right: 0; + + @media screen and (min-width: $screen-sm) { + display: none; + } + } } .right-wrapper { @@ -59,10 +68,6 @@ .primary-filter { margin-right: 20px; - @media screen and (max-width: $screen-md - 1px) { - display: none; - } - .tc-switch .label { white-space: nowrap; } diff --git a/src/projects/list/components/Walkthrough/Walkthrough.jsx b/src/projects/list/components/Walkthrough/Walkthrough.jsx index 665cca824..433f4aaef 100644 --- a/src/projects/list/components/Walkthrough/Walkthrough.jsx +++ b/src/projects/list/components/Walkthrough/Walkthrough.jsx @@ -1,9 +1,11 @@ import React from 'react' import PropTypes from 'prop-types' +import {Link} from 'react-router-dom' import './Walkthrough.scss' import IconShadow from '../../../../assets/icons/ground-shadow.svg' import IconRobot from '../../../../assets/icons/coder-welcome.svg' import IconTextImg from '../../../../assets/icons/pointer-new-project.svg' +import BoldAdd from '../../../../assets/icons/ui-16px-1_bold-add.svg' @@ -13,13 +15,22 @@ const Walkthrough = ({currentUser}) => (
- - +

010010010010100101001000100100101
Bzzt …I mean… Hello, {currentUser.firstName}!

Welcome to Connect! I’m Coder the Robot. I see you have no projects yet. To get you started, press the “New Project” icon and let’s build something.

+ +
+
+ +
+
Create a new project
+
+
+ +
) diff --git a/src/projects/list/components/Walkthrough/Walkthrough.scss b/src/projects/list/components/Walkthrough/Walkthrough.scss index 76bbdec8b..984751434 100644 --- a/src/projects/list/components/Walkthrough/Walkthrough.scss +++ b/src/projects/list/components/Walkthrough/Walkthrough.scss @@ -6,21 +6,29 @@ .walkthrough-column { position: relative; text-align: center; - min-width: 768px; min-height: 496px; - padding: 20px 86px; + padding: 20px 56px; + @media screen and (max-width: $screen-sm - 1px) { + padding: 20px 26px; + } .text-img{ background-size: 100% 100%; - position: absolute; - display:block; - width: 640px; - height: 160px; - right: 80px; - z-index:2; + position: relative; + display: block; + width: 90%; + left: 10%; + @media screen and (max-width: $screen-sm - 1px) { + display: none; + } + @media screen and (min-width: $screen-md - 1px) { + width: 60%; + left: 40%; + } } h3{ + word-break: break-all; color: $tc-gray-70; @include roboto-medium; font-size: 48px; @@ -60,19 +68,77 @@ } .bubble{ - position: absolute; - top: 180px; - left: calc(50% - 300px); - padding-left:243px; - + position: relative; + padding:0 10%; + display: flex; + padding: 0 20% 0 20%; + @media screen and (max-width: $screen-sm - 1px) { + left:0; + padding-left: 0; + display: block; + margin: 0; + } + @media screen and (max-width: 1200px) { + padding: 0 10% 0 10%; + } + @media screen and (max-width: 1000px) { + padding: 0; + } div{ position:relative; background: $tc-white; - width: 436px; min-height: 235px; padding: 30px 30px 50px 30px; box-shadow: 0 0 15px rgba($tc-black, .15); border-radius: 4px; + @media screen and (max-width: $screen-sm - 1px) { + width: auto; + padding: 30px 30px 30px 30px; + } + a { + display: none; + @media screen and (max-width: $screen-sm - 1px) { + display: initial; + } + .new-project-button { + @include roboto; + color: #4285f4; + margin-top: 30px; + display: flex; + align-items: center; + justify-content: center; + .title { + white-space: nowrap; + margin-left: 10px; + } + .new-project-icon { + width: 30px; + height: 30px; + background-color: rgb(66, 133, 244); + border-radius: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + svg { + fill: #fff; + width: 10px; + height: 10px; + } + } + } + div { + box-shadow: none; + min-height: 0; + padding: 0; + width: auto; + } + } h3{ @include roboto-medium; line-height:35px; @@ -80,6 +146,13 @@ color: $tc-black; text-align:left; padding-bottom: 10px; + @media screen and (max-width: $screen-md - 1px) { + font-size: 18px; + } + @media screen and (max-width: $screen-sm - 1px) { + font-size: 16px; + line-height:30px; + } } p{ @include roboto; @@ -87,6 +160,12 @@ color: $tc-gray-80; line-height: 25px; padding: 0; + @media screen and (max-width: $screen-md - 1px) { + font-size: 14px; + } + @media screen and (max-width: $screen-sm - 1px) { + font-size: 13px; + } } .arrow{ width:0; @@ -96,28 +175,56 @@ top: 42px; border-left:34px solid transparent; border-top:34px solid $tc-white; + @media screen and (max-width: $screen-sm - 1px) { + border-left: none; + border-right:34px solid transparent; + bottom: -20px; + left: inherit; + top: inherit; + } } } } .robot{ background-size: 238px 281px; - position: absolute; width: 238px; height: 281px; - left:0; - display:block; + left: 30%; top:0; z-index:2; + display: none; + &.robotleft { + width: 100%; + display: block; + @media screen and (max-width: $screen-sm - 1px) { + display: none; + } + } + @media screen and (max-width: $screen-sm - 1px) { + width: 100%; + position: relative; + margin: 50px 0; + left: 0%; + display: block; + } + ellipse { + display: none; + @media screen and (max-width: $screen-sm - 1px) { + display: initial; + } + } } .shadow{ background-size: 960px 11px; position: absolute; - width: 960px; + width: 100%; z-index:1; display:block; height: 11px; - left:-150px; bottom:-48px; + @media screen and (max-width: $screen-sm - 1px) { + display: none; + } } p{ text-align: left;