Skip to content

fixes issue 2852 #2860

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
maxceem merged 2 commits into from
Feb 27, 2019
Merged

fixes issue 2852 #2860

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
37dd267
fixes issue 2852
sumitdaga Feb 26, 2019
bca2065
added space
sumitdaga Feb 26, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/projects/list/components/Projects/Projects.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,7 @@ class Projects extends Component {
}

render() {
const { isPowerUser, isLoading, totalCount, criteria, currentUser, projectsListView, setProjectsListView, setInfiniteAutoload, loadProjects, history, orgConfig } = this.props
const { isPowerUser, isLoading, totalCount, criteria, projectsListView, setProjectsListView, setInfiniteAutoload, loadProjects, history, orgConfig } = this.props
// show walk through if user is customer and no projects were returned
// for default filters
const showWalkThrough = !isLoading && totalCount === 0 &&
Expand Down Expand Up @@ -248,7 +248,7 @@ class Projects extends Component {
<ProjectListNavHeader applyFilters={this.applyFilters} selectedView={chosenView} changeView={setProjectsListView} currentStatus={currentStatus} criteria={criteria} setInfiniteAutoload={setInfiniteAutoload} loadProjects={loadProjects} history={history}/>}
{ showWalkThrough ?
(
<Walkthrough currentUser={currentUser} />
<Walkthrough newProjectLink={getNewProjectLink(orgConfig)} />
) : (
projectsView
)
Expand Down
41 changes: 14 additions & 27 deletions src/projects/list/components/Walkthrough/Walkthrough.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,29 @@
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'
import NewProjectCard from '../../../components/projectsCard/NewProjectCard'



const Walkthrough = ({currentUser}) => (
const Walkthrough = ({newProjectLink}) => (
<div className="walkthrough-column">

<IconTextImg className="text-img"/>

<div className="bubble">
<IconRobot className="robot robotleft"/>
<div>
<span className="arrow"/>
<h3>010010010010100101001000100100101 <br/>Bzzt …I mean… Hello, {currentUser.firstName}!</h3>
<p>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.</p>
<Link to="/new-project">
<div className="new-project-button">
<div className="new-project-icon">
<BoldAdd className="icon-bold-add"/>
</div>
<div className="title">Create a new project</div>
</div>
</Link>
</div>
<IconRobot className="robot"/>
<IconShadow className="shadow"/>
<div className="header-text-wrapper">
<h3>Welcome to Topcoder.</h3>
<h3>To get started, click the "Create a new project" button below.</h3>
</div>

<div className="project-card-new">
<NewProjectCard link={newProjectLink} />
</div>

<div className="subtext">
If you have already created a project with us and are not seeing it listed, contact <a href="mailto:support@topcoder.com" target="_blank">support@topcoder.com</a>
</div>
</div>
)

Walkthrough.PropTypes = {
currentUser: PropTypes.object.isRequired
newProjectLink: PropTypes.string
}

export default Walkthrough
243 changes: 30 additions & 213 deletions src/projects/list/components/Walkthrough/Walkthrough.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,234 +6,51 @@
.walkthrough-column {
position: relative;
text-align: center;
min-height: 496px;
padding: 20px 56px;
@media screen and (max-width: $screen-sm - 1px) {
padding: 20px 26px;
}

.text-img{
background-size: 100% 100%;
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%;
}
}
.header-text-wrapper {
margin-bottom: 6 * $base-unit;

h3{
word-break: break-all;
color: $tc-gray-70;
@include roboto-medium;
font-size: 48px;
letter-spacing: 0px;
padding: 0 0 25px 0;
line-height: inherit;
}
ul{
width: 100%;
left:50%;
margin-left: -50%;
position: relative;
li{
float: left;
width: calc((100% - 40px)/3);
}
li:nth-child(2){
margin-left:20px;
margin-right:20px;
}
a{
background: rgba($tc-gray-neutral-dark,0.39);
border-radius: 4px;
width: 100%;
height: 306px;
display: block;
margin-bottom:20px;
font-size: 88px;
line-height: 306px;
text-align: center;
@include roboto-bold;
color: $tc-gray-20;
&:hover {
color: $tc-gray-80;
}
}
}
h3 {
color: $tc-gray-70;
@include roboto-medium;
font-size: 28px;
letter-spacing: 0px;
line-height: 36px;

.bubble{
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;
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: $tc-dark-blue-70;
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: $tc-dark-blue-70;
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: $tc-white;
width: 10px;
height: 10px;
}
}
}
div {
box-shadow: none;
min-height: 0;
padding: 0;
width: auto;
}
}
h3{
@include roboto-medium;
line-height:35px;
font-size: $tc-heading-sm;
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;
font-size: $tc-label-lg;
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;
height:0;
position: absolute;
left:-20px;
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;
width: 238px;
height: 281px;
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;
font-size: 18px;
line-height: 22px;
}
}
}
.shadow{
background-size: 960px 11px;
position: absolute;
width: 100%;
z-index:1;
display:block;
height: 11px;
bottom:-48px;
@media screen and (max-width: $screen-sm - 1px) {
display: none;

.project-card-new {
margin: 0 auto 6 * $base-unit;
height: 400px;
min-width: 280px;
max-width: 460px;

@media screen and (max-width: $screen-md - 1px) {
height: auto;
}
}
p{
text-align: left;
padding: 0 168px;

.subtext {
font-size: 14px;
@include roboto;
font-size: $tc-label-lg;
color: $tc-gray-70;
letter-spacing: 0px;
line-height: 23px;

a {
color: $tc-dark-blue;

&:hover {
text-decoration: underline;
}
}
}
}
}