Feature/connect mobile

src/components/ActionCard/CommentMobile.jsx

@@ -16,7 +16,7 @@ const CommentMobile = ({ messageId, author, date, children }) => {
   const messageLink = window.location.pathname.substr(0, window.location.pathname.indexOf('#')) + `#comment-${messageId}`
 
   return (
-    <div styleName="comment">
+    <div styleName="comment" id={`comment-${messageId}`}>
       <div styleName="header">
         <UserWithName {..._.pick(author, 'firstName', 'lastName', 'photoURL')} size="40" />
         <Link styleName="date" to={messageLink}>{moment(date).fromNow()}</Link>

src/components/ActionCard/CommentMobile.scss

@@ -3,11 +3,8 @@
 .comment {
   background-color: $tc-gray-neutral-light;
   border-radius: 4px;
+  margin-top: 3 * $base-unit;
   padding: 2 * $base-unit 2 * $base-unit 3 * $base-unit 2 * $base-unit;
-
-  & + & {
-    margin-top: 3 * $base-unit;
-  }
 }
 
 .header {

src/components/ColorSelector/ColorSelector.scss

@@ -13,6 +13,10 @@
       margin: 0 15px;
       position: relative;
 
+      @media screen and (max-width: $screen-md - 1px) {
+        position: static;
+      }
+
       .remove-color {
         background-color: $tc-gray-60;
         opacity: 0.7;
@@ -31,9 +35,10 @@
       }
 
       svg {
+        display: block;
         position: relative;
         border-color: $tc-gray-30;
-        margin: 10px;
+        margin: 11px;
       }
     }
 
@@ -48,6 +53,18 @@
       padding: 10px;
       box-shadow: rgba($tc-black, 0.14902) 0px 0px 0px 1px, rgba($tc-black, 0.14902) 0px 8px 16px;
 
+      @media screen and (max-width: $screen-md - 1px) {
+        left: 50%;
+        transform: translateX(-50%);
+        top: auto;
+        width: 340px;
+      }
+
+      /* if picker doesn't fit screen, make it even smaller */
+      @media screen and (max-width: 350px - 1px) {
+        width: 310px;
+      }
+
       > div {
         // box-shadow: none !important;
       }
@@ -63,4 +80,3 @@
     }
   }
 }
-

src/components/Feed/FeedComments.jsx

@@ -8,7 +8,7 @@ import cn from 'classnames'
 import {markdownToHTML} from '../../helpers/markdownToState'
 import MediaQuery from 'react-responsive'
 import CommentMobile from '../ActionCard/CommentMobile'
-// import { THREAD_MESSAGES_PAGE_SIZE } from '../../config/constants'
+import { SCREEN_BREAKPOINT_MD } from '../../config/constants'
 
 const getCommentCount = (totalComments) => {
   if (!totalComments) {
@@ -72,7 +72,7 @@ class FeedComments extends React.Component {
             </div>
           </div>
         </Panel.Body>
-        <MediaQuery minWidth={768}>
+        <MediaQuery minWidth={SCREEN_BREAKPOINT_MD}>
           {(matches) => (matches ? (
             <div>
               {comments.map((item, idx) => (

src/components/Feed/FeedMobile.jsx

@@ -27,6 +27,33 @@ class FeedMobile extends React.Component {
     }
   }
 
+  componentWillReceiveProps(nextProps) {
+    // if comments just has been loaded, check if have to open the thread
+    if (this.props.comments.length === 0 && nextProps.comments.length > 0) {
+      this.openCommentFromHash(nextProps.comments)
+    }
+  }
+
+  componentWillMount() {
+    this.openCommentFromHash(this.props.comments)
+  }
+
+  /**
+   * If there is hash in the URL referencing some comment,
+   * open the comments thread by default
+   *
+   * @param {Array} comments list of comments
+   */
+  openCommentFromHash(comments) {
+    const { isCommentsShown } = this.state
+    const commentInHash = window.location.hash.match(/#comment-(\d+)/)
+    const isCommentInTheFeed = !!(commentInHash && _.find(comments, (comment) => (comment.id.toString() === commentInHash[1])))
+
+    if (!isCommentsShown && isCommentInTheFeed) {
+      this.toggleComments()
+    }
+  }
+
   toggleComments() {
     this.setState({ isCommentsShown: !this.state.isCommentsShown })
   }
@@ -62,14 +89,6 @@ class FeedMobile extends React.Component {
         </div>
         <h4 styleName="title">{title}</h4>
         <div styleName="text" dangerouslySetInnerHTML={{__html: markdownToHTML(topicMessage.content)}} />
-        <div styleName="feed-actions">
-          {totalComments > 0 ? (
-            <button className="tc-btn tc-btn-link tc-btn-md" onClick={this.toggleComments}>{commentsButtonText}</button>
-          ) : (
-            <div styleName="no-comments">No posts yet</div>
-          )}
-          {allowComments && <button className="tc-btn tc-btn-link tc-btn-md" onClick={this.toggleNewCommentMobile}>Write a post</button>}
-        </div>
         {isCommentsShown &&
           <FeedComments
             allowComments={allowComments}
@@ -90,6 +109,14 @@ class FeedMobile extends React.Component {
             allMembers={allMembers}
           />
         }
+        <div styleName="feed-actions">
+          {totalComments > 0 ? (
+            <button className="tc-btn tc-btn-link tc-btn-md" onClick={this.toggleComments}>{commentsButtonText}</button>
+          ) : (
+            <div styleName="no-comments">No posts yet</div>
+          )}
+          {allowComments && <button className="tc-btn tc-btn-link tc-btn-md" onClick={this.toggleNewCommentMobile}>Write a post</button>}
+        </div>
         {children}
         {isNewCommentMobileOpen &&
           <NewPostMobile

src/components/FileList/FileList.scss

@@ -5,11 +5,11 @@
     // reset styles of panel class, we need panel class to activate the modal-overlay
     border: none;
     box-shadow: none;
-  
+
     &.panel {
       padding: 0;
     }
-  
+
     > h4 {
       @include roboto-medium;
       font-size: 15px;
@@ -18,74 +18,112 @@
       margin-bottom: 2px;
     }
   }
-  
+
   .file-list-item {
     display: flex;
     border-top: 1px dashed $tc-gray-30;
     padding: 15px 0;
     width: 100%;
     align-items: stretch;
-
+
+    @media screen and (max-width: $screen-md - 1px) {
+      padding-top: 13px + 20px + 11px; /* date line height and its margins  */
+      position: relative;
+    }
+
     .icon-col {
       padding-top: 3px;
       width: 60px;
     }
-  
+
     .content-col {
       flex: 2;
-  
+
       h4 {
         @include roboto-bold;
         font-size: 15px;
         color: $tc-gray-80;
         max-width: 380px;
+
+        @media screen and (max-width: $screen-md - 1px) {
+          margin-right: 67px;
+          max-width: calc(100vw - 160px);
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
       }
-  
+
       p {
         @include roboto;
         font-size: 13px;
         font-weight: 400;
         color: $tc-gray-70;
         line-height: 20px;
       }
-  
+
       .title {
         width: 100%;
         display: flex;
         line-height: 25px;
+
+        @media screen and (max-width: $screen-md - 1px) {
+          flex-direction: column;
+        }
       }
-  
+
       .size {
         @include roboto;
         font-size: 15px;
         color: $tc-gray-60;
         margin-left: auto;
         text-align: right;
-
+
+        @media screen and (max-width: $screen-md - 1px) {
+          color: $tc-gray-40;
+          margin-left: 0;
+          text-align: left;
+        }
+
         .Tooltip {
           line-height: 100%;
+
+          @media screen and (max-width: $screen-md - 1px) {
+            left: 0;
+            position: absolute;
+            top: 13px;
+          }
         }
-  
+
         .date {
           font-size: 13px;
-          line-height: normal;
+          line-height: 20px;
           margin-top: 5px;
+
+          @media screen and (max-width: $screen-md - 1px) {
+            margin-top: 0;
+          }
         }
       }
-  
+
       .edit-icons {
         margin-left: 5px;
-
+
+        @media screen and (max-width: $screen-md - 1px) {
+          right: 0;
+          position: absolute;
+          top: 46px;
+        }
+
         i {
           cursor: pointer;
         }
       }
-  
+
       .title-edit {
         display: flex;
         align-items: center;
         margin-bottom: 10px;
-  
+
         input {
           @include roboto-bold;
           font-size: 15px;
@@ -97,7 +135,7 @@
           background: $tc-gray-neutral-light;
         }
       }
-  
+
       .tc-textarea {
         margin-left: 0;
         padding: 5px 10px;
@@ -110,27 +148,34 @@
         resize: none;
       }
     }
-  
+
     .icon-trash,
     .icon-edit {
       margin-left: 13px;
       vertical-align: middle;
     }
-  
+
     .icon-trash {
       margin-left: 22px;
     }
-  
+
     .icon-save {
       margin-right: 25px;
+
+      @media screen and (max-width: $screen-md - 1px) {
+        margin-right: 15px;
+      }
     }
-  
+
     .icon-close {
       margin-right: 10px;
+
+      @media screen and (max-width: $screen-md - 1px) {
+        margin-right: 0;
+      }
     }
   }
-  
+
   .delete-file-modal {
   }
 }
-

src/components/Footer/Footer.jsx

@@ -3,7 +3,7 @@ import MenuBar from 'appirio-tech-react-components/components/MenuBar/MenuBar'
 import moment from 'moment'
 import MediaQuery from 'react-responsive'
 import FooterV2 from '../FooterV2/FooterV2'
-import { NEW_PROJECT_PATH } from '../../config/constants'
+import { NEW_PROJECT_PATH, SCREEN_BREAKPOINT_MD } from '../../config/constants'
 
 require('./Footer.scss')
 
@@ -25,14 +25,14 @@ const Footer = () => {
   const shouldHideOnMobile =  window.location.pathname !== '/'
 
   return (
-    <MediaQuery minWidth={768}>
+    <MediaQuery minWidth={SCREEN_BREAKPOINT_MD}>
       {(matches) => {
         if (matches) {
           return (shouldHideOnDesktop ? null :
             <div className="Footer">
               <p className="copyright-notice">© Topcoder { currentYear }</p>
               <div className="footer-menu">
-                <MenuBar items={otherNavigationItems} orientation="horizontal" mobileBreakPoint={767} />
+                <MenuBar items={otherNavigationItems} orientation="horizontal" mobileBreakPoint={SCREEN_BREAKPOINT_MD - 1} />
               </div>
             </div>
           )

src/components/Grid/GridView.jsx

@@ -6,6 +6,7 @@ import PaginationBar from './PaginationBar'
 import Placeholder from './Placeholder'
 import InfiniteScroll from 'react-infinite-scroller'
 import LoadingIndicator from '../../components/LoadingIndicator/LoadingIndicator'
+import NewProjectCard from '../../projects/list/components/Projects/NewProjectCard'
 import { PROJECTS_LIST_PER_PAGE } from '../../config/constants'
 import './GridView.scss'
 
@@ -81,6 +82,7 @@ const GridView = props => {
             </div>
         }
         { !isLoading && !hasMore && <div key="end" className="gridview-no-more">No more {projectsStatus} projects</div>}
+        <div className="project-card project-card-new"><NewProjectCard /></div>
       </div>
     )
   }