+
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;