Skip to content

Commit f4c9605

Browse files
RishiRajSahuRishiRajSahu
authored
Merge pull request #1984 from appirio-tech/dev
Merging Mobile Phase-II changes to Prod
2 parents 9c1de8f + 85ef36d commit f4c9605

File tree

85 files changed

+3285
-898
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

85 files changed

+3285
-898
lines changed

‎.circleci/config.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ jobs:
66
steps:
77
- checkout
88
- restore_cache:
9-
key: test-node-modules-{{ checksum "package-lock.json" }}
9+
key: test-node-modules-{{ .Environment.CACHE_VERSION }}-{{ checksum "package-lock.json" }}
1010
- run: npm install
1111
- save_cache:
12-
key: test-node-modules-{{ checksum "package-lock.json" }}
12+
key: test-node-modules-{{ .Environment.CACHE_VERSION }}-{{ checksum "package-lock.json" }}
1313
paths:
1414
- node_modules
1515
- run: npm run lint

‎src/assets/icons/icon-check-light.svg‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎src/components/ActionCard/CommentMobile.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const CommentMobile = ({ messageId, author, date, children }) => {
1616
const messageLink = window.location.pathname.substr(0, window.location.pathname.indexOf('#')) + `#comment-${messageId}`
1717

1818
return (
19-
<div styleName="comment">
19+
<div styleName="comment" id={`comment-${messageId}`}>
2020
<div styleName="header">
2121
<UserWithName {..._.pick(author, 'firstName', 'lastName', 'photoURL')} size="40" />
2222
<Link styleName="date" to={messageLink}>{moment(date).fromNow()}</Link>

‎src/components/ActionCard/CommentMobile.scss‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,8 @@
33
.comment {
44
background-color: $tc-gray-neutral-light;
55
border-radius: 4px;
6+
margin-top: 3 * $base-unit;
67
padding: 2 * $base-unit 2 * $base-unit 3 * $base-unit 2 * $base-unit;
7-
8-
& + & {
9-
margin-top: 3 * $base-unit;
10-
}
118
}
129

1310
.header {

‎src/components/ColorSelector/ColorSelector.scss‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@
1313
margin: 0 15px;
1414
position: relative;
1515

16+
@media screen and (max-width: $screen-md - 1px) {
17+
position: static;
18+
}
19+
1620
.remove-color {
1721
background-color: $tc-gray-60;
1822
opacity: 0.7;
@@ -31,9 +35,10 @@
3135
}
3236

3337
svg {
38+
display: block;
3439
position: relative;
3540
border-color: $tc-gray-30;
36-
margin: 10px;
41+
margin: 11px;
3742
}
3843
}
3944

@@ -48,6 +53,18 @@
4853
padding: 10px;
4954
box-shadow: rgba($tc-black, 0.14902) 0px 0px 0px 1px, rgba($tc-black, 0.14902) 0px 8px 16px;
5055

56+
@media screen and (max-width: $screen-md - 1px) {
57+
left: 50%;
58+
transform: translateX(-50%);
59+
top: auto;
60+
width: 340px;
61+
}
62+
63+
/* if picker doesn't fit screen, make it even smaller */
64+
@media screen and (max-width: 350px - 1px) {
65+
width: 310px;
66+
}
67+
5168
> div {
5269
// box-shadow: none !important;
5370
}
@@ -63,4 +80,3 @@
6380
}
6481
}
6582
}
66-

‎src/components/Feed/FeedComments.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import cn from 'classnames'
88
import {markdownToHTML} from '../../helpers/markdownToState'
99
import MediaQuery from 'react-responsive'
1010
import CommentMobile from '../ActionCard/CommentMobile'
11-
// import { THREAD_MESSAGES_PAGE_SIZE } from '../../config/constants'
11+
import { SCREEN_BREAKPOINT_MD } from '../../config/constants'
1212

1313
const getCommentCount = (totalComments) => {
1414
if (!totalComments) {
@@ -72,7 +72,7 @@ class FeedComments extends React.Component {
7272
</div>
7373
</div>
7474
</Panel.Body>
75-
<MediaQuery minWidth={768}>
75+
<MediaQuery minWidth={SCREEN_BREAKPOINT_MD}>
7676
{(matches) => (matches ? (
7777
<div>
7878
{comments.map((item, idx) => (

‎src/components/Feed/FeedMobile.jsx‎

Lines changed: 35 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,33 @@ class FeedMobile extends React.Component {
2727
}
2828
}
2929

30+
componentWillReceiveProps(nextProps) {
31+
// if comments just has been loaded, check if have to open the thread
32+
if (this.props.comments.length === 0 && nextProps.comments.length > 0) {
33+
this.openCommentFromHash(nextProps.comments)
34+
}
35+
}
36+
37+
componentWillMount() {
38+
this.openCommentFromHash(this.props.comments)
39+
}
40+
41+
/**
42+
* If there is hash in the URL referencing some comment,
43+
* open the comments thread by default
44+
*
45+
* @param {Array} comments list of comments
46+
*/
47+
openCommentFromHash(comments) {
48+
const { isCommentsShown } = this.state
49+
const commentInHash = window.location.hash.match(/#comment-(\d+)/)
50+
const isCommentInTheFeed = !!(commentInHash && _.find(comments, (comment) => (comment.id.toString() === commentInHash[1])))
51+
52+
if (!isCommentsShown && isCommentInTheFeed) {
53+
this.toggleComments()
54+
}
55+
}
56+
3057
toggleComments() {
3158
this.setState({ isCommentsShown: !this.state.isCommentsShown })
3259
}
@@ -62,14 +89,6 @@ class FeedMobile extends React.Component {
6289
</div>
6390
<h4 styleName="title">{title}</h4>
6491
<div styleName="text" dangerouslySetInnerHTML={{__html: markdownToHTML(topicMessage.content)}} />
65-
<div styleName="feed-actions">
66-
{totalComments > 0 ? (
67-
<button className="tc-btn tc-btn-link tc-btn-md" onClick={this.toggleComments}>{commentsButtonText}</button>
68-
) : (
69-
<div styleName="no-comments">No posts yet</div>
70-
)}
71-
{allowComments && <button className="tc-btn tc-btn-link tc-btn-md" onClick={this.toggleNewCommentMobile}>Write a post</button>}
72-
</div>
7392
{isCommentsShown &&
7493
<FeedComments
7594
allowComments={allowComments}
@@ -90,6 +109,14 @@ class FeedMobile extends React.Component {
90109
allMembers={allMembers}
91110
/>
92111
}
112+
<div styleName="feed-actions">
113+
{totalComments > 0 ? (
114+
<button className="tc-btn tc-btn-link tc-btn-md" onClick={this.toggleComments}>{commentsButtonText}</button>
115+
) : (
116+
<div styleName="no-comments">No posts yet</div>
117+
)}
118+
{allowComments && <button className="tc-btn tc-btn-link tc-btn-md" onClick={this.toggleNewCommentMobile}>Write a post</button>}
119+
</div>
93120
{children}
94121
{isNewCommentMobileOpen &&
95122
<NewPostMobile

‎src/components/FileList/FileList.scss‎

Lines changed: 68 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55
// reset styles of panel class, we need panel class to activate the modal-overlay
66
border: none;
77
box-shadow: none;
8-
8+
99
&.panel {
1010
padding: 0;
1111
}
12-
12+
1313
> h4 {
1414
@include roboto-medium;
1515
font-size: 15px;
@@ -18,74 +18,112 @@
1818
margin-bottom: 2px;
1919
}
2020
}
21-
21+
2222
.file-list-item {
2323
display: flex;
2424
border-top: 1px dashed $tc-gray-30;
2525
padding: 15px 0;
2626
width: 100%;
2727
align-items: stretch;
28-
28+
29+
@media screen and (max-width: $screen-md - 1px) {
30+
padding-top: 13px + 20px + 11px; /* date line height and its margins */
31+
position: relative;
32+
}
33+
2934
.icon-col {
3035
padding-top: 3px;
3136
width: 60px;
3237
}
33-
38+
3439
.content-col {
3540
flex: 2;
36-
41+
3742
h4 {
3843
@include roboto-bold;
3944
font-size: 15px;
4045
color: $tc-gray-80;
4146
max-width: 380px;
47+
48+
@media screen and (max-width: $screen-md - 1px) {
49+
margin-right: 67px;
50+
max-width: calc(100vw - 160px);
51+
overflow: hidden;
52+
text-overflow: ellipsis;
53+
}
4254
}
43-
55+
4456
p {
4557
@include roboto;
4658
font-size: 13px;
4759
font-weight: 400;
4860
color: $tc-gray-70;
4961
line-height: 20px;
5062
}
51-
63+
5264
.title {
5365
width: 100%;
5466
display: flex;
5567
line-height: 25px;
68+
69+
@media screen and (max-width: $screen-md - 1px) {
70+
flex-direction: column;
71+
}
5672
}
57-
73+
5874
.size {
5975
@include roboto;
6076
font-size: 15px;
6177
color: $tc-gray-60;
6278
margin-left: auto;
6379
text-align: right;
64-
80+
81+
@media screen and (max-width: $screen-md - 1px) {
82+
color: $tc-gray-40;
83+
margin-left: 0;
84+
text-align: left;
85+
}
86+
6587
.Tooltip {
6688
line-height: 100%;
89+
90+
@media screen and (max-width: $screen-md - 1px) {
91+
left: 0;
92+
position: absolute;
93+
top: 13px;
94+
}
6795
}
68-
96+
6997
.date {
7098
font-size: 13px;
71-
line-height: normal;
99+
line-height: 20px;
72100
margin-top: 5px;
101+
102+
@media screen and (max-width: $screen-md - 1px) {
103+
margin-top: 0;
104+
}
73105
}
74106
}
75-
107+
76108
.edit-icons {
77109
margin-left: 5px;
78-
110+
111+
@media screen and (max-width: $screen-md - 1px) {
112+
right: 0;
113+
position: absolute;
114+
top: 46px;
115+
}
116+
79117
i {
80118
cursor: pointer;
81119
}
82120
}
83-
121+
84122
.title-edit {
85123
display: flex;
86124
align-items: center;
87125
margin-bottom: 10px;
88-
126+
89127
input {
90128
@include roboto-bold;
91129
font-size: 15px;
@@ -97,7 +135,7 @@
97135
background: $tc-gray-neutral-light;
98136
}
99137
}
100-
138+
101139
.tc-textarea {
102140
margin-left: 0;
103141
padding: 5px 10px;
@@ -110,27 +148,34 @@
110148
resize: none;
111149
}
112150
}
113-
151+
114152
.icon-trash,
115153
.icon-edit {
116154
margin-left: 13px;
117155
vertical-align: middle;
118156
}
119-
157+
120158
.icon-trash {
121159
margin-left: 22px;
122160
}
123-
161+
124162
.icon-save {
125163
margin-right: 25px;
164+
165+
@media screen and (max-width: $screen-md - 1px) {
166+
margin-right: 15px;
167+
}
126168
}
127-
169+
128170
.icon-close {
129171
margin-right: 10px;
172+
173+
@media screen and (max-width: $screen-md - 1px) {
174+
margin-right: 0;
175+
}
130176
}
131177
}
132-
178+
133179
.delete-file-modal {
134180
}
135181
}
136-

‎src/components/Footer/Footer.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import MenuBar from 'appirio-tech-react-components/components/MenuBar/MenuBar'
33
import moment from 'moment'
44
import MediaQuery from 'react-responsive'
55
import FooterV2 from '../FooterV2/FooterV2'
6-
import { NEW_PROJECT_PATH } from '../../config/constants'
6+
import { NEW_PROJECT_PATH, SCREEN_BREAKPOINT_MD } from '../../config/constants'
77

88
require('./Footer.scss')
99

@@ -25,14 +25,14 @@ const Footer = () => {
2525
const shouldHideOnMobile = window.location.pathname !== '/'
2626

2727
return (
28-
<MediaQuery minWidth={768}>
28+
<MediaQuery minWidth={SCREEN_BREAKPOINT_MD}>
2929
{(matches) => {
3030
if (matches) {
3131
return (shouldHideOnDesktop ? null :
3232
<div className="Footer">
3333
<p className="copyright-notice">© Topcoder { currentYear }</p>
3434
<div className="footer-menu">
35-
<MenuBar items={otherNavigationItems} orientation="horizontal" mobileBreakPoint={767} />
35+
<MenuBar items={otherNavigationItems} orientation="horizontal" mobileBreakPoint={SCREEN_BREAKPOINT_MD - 1} />
3636
</div>
3737
</div>
3838
)

0 commit comments

Comments
 (0)