21 |
22 |
26 |
52 | );
53 | }
54 |
55 | export default App;
56 |
--------------------------------------------------------------------------------
/src/app/handlers/Followers.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import { Link } from 'react-router';
3 | import { connect } from 'react-redux';
4 | import { loadOnScrollBottom } from '../../helpers';
5 |
6 | // Actions
7 | import { getFollowersAction, updateFollowersAction } from '../actions';
8 |
9 | class Followers extends Component {
10 | componentDidMount () {
11 | const userId = this.props.params.id;
12 | const type = this.props.route.name;
13 |
14 | this.props.getFollowersAction({userId, type});
15 | }
16 |
17 | render () {
18 | const followers = this.props.model.followers.map((follower, i) => {
19 | return (
20 | -
23 | {links}
24 |
27 | {children}
28 |
29 |
51 |
21 |
22 | 
23 | @{follower.username}
24 |
25 |
26 | );
27 | });
28 |
29 | return (
30 |
31 |
32 | {this.props.route.name === 'follows' && 'I Follow' || 'My Followers'}
33 |
34 |
38 | );
39 | }
40 | }
41 |
42 | Followers.propTypes = {
43 | model: PropTypes.object.isRequired,
44 | };
45 |
46 | export default connect(state => ({
47 | model: {
48 | followers: state.followers,
49 | pagination: state.followersPagination
50 | }
51 | }), {getFollowersAction, updateFollowersAction})(Followers);
52 |
--------------------------------------------------------------------------------
/src/app/handlers/PageNotFound.jsx:
--------------------------------------------------------------------------------
1 | export const PageNotFound = () => {
2 | return (
3 |
35 | {followers}
36 |
37 | Page not found
4 | );
5 | }
6 |
--------------------------------------------------------------------------------
/src/app/handlers/Profile.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import { Link } from 'react-router';
3 | import { connect } from 'react-redux';
4 | import { loadOnScrollBottom } from '../../helpers';
5 |
6 | // Actions
7 | import { getProfileDataAction, getProfilePhotosAction, updateProfilePhotosAction } from '../actions';
8 |
9 | class Profile extends Component {
10 |
11 | static propTypes = {
12 | model: PropTypes.object.isRequired,
13 | dispatch: PropTypes.func.isRequired
14 | }
15 |
16 | componentDidMount () {
17 | const { dispatch } = this.props;
18 | const userId = this.props.params.id;
19 |
20 | dispatch(getProfileDataAction({userId}));
21 | dispatch(getProfilePhotosAction({userId}));
22 |
23 | loadOnScrollBottom({
24 | dispatch,
25 | action: updateProfilePhotosAction,
26 | that: this,
27 | userId
28 | });
29 | }
30 |
31 | componentWillUnmount () {
32 | console.log('PROFILE UNDMOUNTED');
33 | $(window).off('scroll');
34 | }
35 |
36 | render () {
37 |
38 | const { profile, counts, photos, pagination, error } = this.props.model;
39 |
40 | if (error) {
41 | return (
42 |
43 | {error}
44 |
45 | );
46 | }
47 |
48 | const photoList = photos.map((photo, i) => {
49 | return (
50 |
51 |
52 | 
55 |
56 | Likes: {photo.likes.count}
57 |
58 | );
59 | });
60 |
61 | return (
62 |
55 |
56 | Likes: {photo.likes.count}
57 |
63 |
105 | );
106 | }
107 | }
108 |
109 | export default connect(state => ({
110 | model: {
111 | profile: state.profile,
112 | counts: state.counts,
113 | photos: state.profilePhotos,
114 | pagination: state.profilePagination,
115 | error: state.profileError
116 | }
117 | }))(Profile);
118 |
--------------------------------------------------------------------------------
/src/app/handlers/SearchPhotos.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import { connect } from 'react-redux';
3 |
4 | // Actions
5 | import { searchByTagAction, getPopularAction } from '../actions';
6 |
7 | class SearchPhotos extends Component {
8 |
9 | static propTypes = {
10 | model: PropTypes.object.isRequired,
11 | dispatch: PropTypes.func.isRequired
12 | }
13 |
14 | search (event) {
15 | event.preventDefault();
16 |
17 | const { dispatch } = this.props;
18 | dispatch(searchByTagAction(this.refs.searchInput.value));
19 | }
20 |
21 | deniedTag () {
22 | this.refs.searchInput.style.border = '2px solid #f00';
23 | setTimeout(() => {
24 | this.refs.searchInput.style.border = 'none';
25 | }, 2000);
26 | }
27 |
28 | componentDidMount () {
29 | this.props.dispatch(getPopularAction());
30 | }
31 |
32 | render () {
33 |
34 | const { foundedPhotos, deniedTag } = this.props.model;
35 |
36 | let searchResultItems = foundedPhotos.map((photo, i) => {
37 | return (
38 |
43 |
64 |
101 |
65 | 
69 |
70 |
71 | {profile.username}
72 |
73 | -
74 |
-
75 | Photos
76 | {counts.media} 77 |
78 | -
79 |
80 | Followers
81 | {counts.followed_by} 82 | 83 |
84 | -
85 |
86 | Follow
87 | {counts.follows} 88 | 89 |
90 |
-
92 |
- {profile.full_name} 93 |
- {profile.bio} 94 |
- 95 | 96 | {profile.website} 97 | 98 | 99 |
102 | {photoList}
103 |
104 | 
44 |
45 | )
46 | });
47 |
48 | if (deniedTag) {
49 | this.deniedTag();
50 |
51 | searchResultItems = (
52 |
53 | Don't try to search {this.refs.searchInput.value} anymore.
54 | This tag is disabled by instagram. 55 |
56 | );
57 | }
58 |
59 | return (
60 | 54 | This tag is disabled by instagram. 55 |
61 |
69 |
73 | );
74 | }
75 | }
76 |
77 | export default connect(state => ({
78 | model: {
79 | foundedPhotos: state.foundedPhotos,
80 | pagination: state.searchPagination,
81 | deniedTag: state.deniedTag
82 | }
83 | }))(SearchPhotos);
84 |
85 |
--------------------------------------------------------------------------------
/src/app/handlers/SearchUsers.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import { Link } from 'react-router';
3 | import { connect } from 'react-redux';
4 |
5 | // Actions
6 | import { searchByUserAction } from '../actions';
7 |
8 | class SearchUsers extends Component {
9 |
10 | static propTypes = {
11 | model: PropTypes.object.isRequired,
12 | dispatch: PropTypes.func.isRequired
13 | }
14 |
15 | search (event) {
16 | event.preventDefault();
17 |
18 | const { dispatch } = this.props;
19 | dispatch(searchByUserAction(this.refs.searchInput.value));
20 | }
21 |
22 | render () {
23 | const searchResultItems = this.props.model.users.map((photo, i) => {
24 | return (
25 |
30 |
70 | {searchResultItems}
71 |
72 |
37 |
45 |
49 | );
50 | }
51 | }
52 |
53 | export default connect(state => ({
54 | model: {
55 | users: state.foundedUsers
56 | }
57 | }))(SearchUsers);
58 |
--------------------------------------------------------------------------------
/src/app/handlers/Timeline.jsx:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import { connect } from 'react-redux';
3 | import { loadOnScrollBottom } from '../../helpers';
4 |
5 | // Actions
6 | import { getTimelineAction, updateTimelineAction } from '../actions';
7 |
8 | const token = localStorage.accessToken;
9 | const userId = localStorage.userId;
10 |
11 | const CommentsItem = ({src, author, text}) => {
12 | return (
13 |
46 | {searchResultItems}
47 |
48 |
89 | {timelineElement}
90 |
94 | -
91 | {comments}
92 |
136 |
140 | );
141 | }
142 | }
143 |
144 | export default connect(state => ({
145 | model: {
146 | timelineItems: state.timelineItems,
147 | pagination: state.timelinePagination,
148 | timelineLoaded: state.timelineLoaded
149 | }
150 | }))(Timeline);
151 |
--------------------------------------------------------------------------------
/src/app/reducers/followers.js:
--------------------------------------------------------------------------------
1 | import {
2 | GET_FOLLOWERS_REQUEST,
3 | GET_FOLLOWERS_RESPONSE,
4 | UPDATE_FOLLOWERS_RESPONSE
5 | } from '../constants';
6 |
7 | export const followers = (state = [], action) => {
8 | switch (action.type) {
9 | case GET_FOLLOWERS_REQUEST:
10 | case GET_FOLLOWERS_RESPONSE:
11 | return action.payload.followers;
12 | case UPDATE_FOLLOWERS_RESPONSE:
13 | return action.payload.followers.concat(action.payload.followers);
14 | default:
15 | return state;
16 | }
17 | };
18 |
19 |
20 | export const followersPagination = (state = {}, action) => {
21 | switch (action.type) {
22 | case GET_FOLLOWERS_REQUEST:
23 | case GET_FOLLOWERS_RESPONSE:
24 | case UPDATE_FOLLOWERS_RESPONSE:
25 | return action.payload.followersPagination;
26 | default:
27 | return state;
28 | }
29 | };
30 |
--------------------------------------------------------------------------------
/src/app/reducers/index.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux';
2 | import { timelineItems, timelinePagination, timelineLoaded } from './timeline';
3 | import {
4 | profile,
5 | counts,
6 | profileLoaded,
7 | profilePhotos,
8 | profilePagination,
9 | profileError
10 | } from './profile';
11 | import { foundedUsers } from './searchByUser';
12 | import {
13 | foundedPhotos,
14 | searchPagination,
15 | deniedTag,
16 | popularPhotos,
17 | popularPagination
18 | } from './searchByTag';
19 | import { followers, followersPagination } from './followers';
20 |
21 | const rootReducer = combineReducers({
22 |
23 | // Timeline
24 | timelineItems,
25 | timelinePagination,
26 | timelineLoaded,
27 |
28 | // Profile
29 | profile,
30 | counts,
31 | profileLoaded,
32 | profilePhotos,
33 | profilePagination,
34 | profileError,
35 |
36 | // Search by user
37 | foundedUsers,
38 |
39 | // Search by tag,
40 | foundedPhotos,
41 | searchPagination,
42 | deniedTag,
43 |
44 | // Popular
45 | popularPhotos,
46 |
47 | // Followers
48 | followers,
49 | followersPagination
50 | });
51 |
52 | export default rootReducer;
53 |
--------------------------------------------------------------------------------
/src/app/reducers/profile.js:
--------------------------------------------------------------------------------
1 | import {
2 | GET_PROFILE_REQUEST,
3 | GET_PROFILE_RESPONSE,
4 | UPDATE_PROFILE_PHOTOS_RESPONSE,
5 | GET_PROFILE_PHOTOS_REQUEST,
6 | GET_PROFILE_PHOTOS_RESPONSE
7 | } from '../constants';
8 |
9 | const initialState = {
10 | profile: {},
11 | counts: {},
12 | profileLoaded: false,
13 | profilePhotos: [],
14 | profilePagination: {},
15 | profileError: null
16 | };
17 |
18 | export const profile = (state = initialState.profile, action) => {
19 | switch (action.type) {
20 | case GET_PROFILE_RESPONSE:
21 | return action.payload.profile || {};
22 | case GET_PROFILE_REQUEST:
23 | default:
24 | return state;
25 | }
26 | };
27 |
28 | export const counts = (state = initialState.counts, action) => {
29 | switch (action.type) {
30 | case GET_PROFILE_RESPONSE:
31 | return action.payload.counts;
32 | case GET_PROFILE_REQUEST:
33 | default:
34 | return state;
35 | }
36 | };
37 |
38 | export const profileLoaded = (state = initialState.profileLoaded, action) => {
39 | switch (action.type) {
40 | case GET_PROFILE_RESPONSE:
41 | case GET_PROFILE_REQUEST:
42 | return action.payload.profileLoaded;
43 | default:
44 | return state;
45 | }
46 | };
47 |
48 | export const profilePhotos = (state = initialState.profilePhotos, action) => {
49 | switch (action.type) {
50 | case UPDATE_PROFILE_PHOTOS_RESPONSE:
51 | return state.concat(action.payload.profilePhotos);
52 | case GET_PROFILE_PHOTOS_RESPONSE:
53 | return action.payload.profilePhotos;
54 | case GET_PROFILE_PHOTOS_REQUEST:
55 | return initialState.profilePhotos;
56 | default:
57 | return state;
58 | }
59 | };
60 |
61 | export const profilePagination = (state = initialState.profilePagination, action) => {
62 | switch (action.type) {
63 | case GET_PROFILE_PHOTOS_RESPONSE:
64 | case UPDATE_PROFILE_PHOTOS_RESPONSE:
65 | return action.payload.profilePagination;
66 | case GET_PROFILE_PHOTOS_REQUEST:
67 | default:
68 | return state;
69 | }
70 | };
71 |
72 |
73 | export const profileError = (state = initialState.profileError, action) => {
74 | switch (action.type) {
75 | case GET_PROFILE_PHOTOS_RESPONSE:
76 | case UPDATE_PROFILE_PHOTOS_RESPONSE:
77 | return action.payload.profileError;
78 | case GET_PROFILE_PHOTOS_REQUEST:
79 | default:
80 | return state;
81 | }
82 | };
83 |
--------------------------------------------------------------------------------
/src/app/reducers/searchByTag.js:
--------------------------------------------------------------------------------
1 | import {
2 | SEARCH_BY_TAG_REQUEST,
3 | SEARCH_BY_TAG_RESPONSE,
4 | GET_POPULAR_REQUEST,
5 | GET_POPULAR_RESPONSE
6 | } from '../constants';
7 |
8 | const initialState = {
9 | foundedPhotos: [],
10 | searchPagination: {},
11 | deniedTag: false
12 | };
13 |
14 | export const foundedPhotos = (state = initialState.foundedPhotos, action) => {
15 | switch (action.type) {
16 | case SEARCH_BY_TAG_RESPONSE:
17 | case GET_POPULAR_RESPONSE:
18 |
19 | // If we try to find denied tag like: xxx, booty, etc
20 | // we will not get anything here
21 | // and we will simply return empty array
22 | return action.payload.foundedPhotos || [];
23 | case GET_POPULAR_REQUEST:
24 | case SEARCH_BY_TAG_REQUEST:
25 | default:
26 | return state;
27 | }
28 | };
29 |
30 |
31 | export const searchPagination = (state = initialState.searchPagination, action) => {
32 | switch (action.type) {
33 | case SEARCH_BY_TAG_RESPONSE:
34 |
35 | // If we try to find denied tag like: xxx, booty, etc
36 | // we will not get anything here
37 | // and we will simply return empty array
38 | return action.payload.searchPagination || [];
39 | case SEARCH_BY_TAG_REQUEST:
40 | default:
41 | return state;
42 | }
43 | };
44 |
45 |
46 | export const deniedTag = (state = initialState.deniedTag, action) => {
47 | switch (action.type) {
48 | case SEARCH_BY_TAG_RESPONSE:
49 | return action.payload.deniedTag;
50 | case SEARCH_BY_TAG_REQUEST:
51 | default:
52 | return state;
53 | }
54 | };
55 |
--------------------------------------------------------------------------------
/src/app/reducers/searchByUser.js:
--------------------------------------------------------------------------------
1 | import {
2 | SEARCH_BY_USER_REQUEST,
3 | SEARCH_BY_USER_RESPONSE
4 | } from '../constants';
5 |
6 | export const foundedUsers = (state = [], action) => {
7 | switch (action.type) {
8 | case SEARCH_BY_USER_RESPONSE:
9 | return action.payload.foundedUsers;
10 | case SEARCH_BY_USER_REQUEST:
11 | default:
12 | return state;
13 | }
14 | };
15 |
--------------------------------------------------------------------------------
/src/app/reducers/timeline.js:
--------------------------------------------------------------------------------
1 | import {
2 | GET_TIMELINE_REQUEST,
3 | GET_TIMELINE_RESPONSE,
4 | UPDATE_TIMELINE_RESPONSE
5 | } from '../constants';
6 |
7 | const initialState = {
8 | timelineItems: [],
9 | timelinePagination: {},
10 | timelineLoaded: false
11 | };
12 |
13 | export const timelineItems = (state = initialState.timelineItems, action) => {
14 | switch (action.type) {
15 | case GET_TIMELINE_REQUEST:
16 | return state;
17 | case GET_TIMELINE_RESPONSE:
18 | case UPDATE_TIMELINE_RESPONSE:
19 | return state.concat(action.payload.timelineItems);
20 | default:
21 | return state;
22 | }
23 | };
24 |
25 | export const timelinePagination = (state = initialState.timelinePagination, action) => {
26 | switch (action.type) {
27 | case GET_TIMELINE_REQUEST:
28 | return state;
29 | case GET_TIMELINE_RESPONSE:
30 | case UPDATE_TIMELINE_RESPONSE:
31 | return action.payload.pagination;
32 | default:
33 | return state;
34 | }
35 | };
36 |
37 | export const timelineLoaded = (state = initialState.timelineLoaded, action) => {
38 | switch (action.type) {
39 | case GET_TIMELINE_REQUEST:
40 | case GET_TIMELINE_RESPONSE:
41 | return action.payload.timelineLoaded;
42 | default:
43 | return state;
44 | }
45 | };
46 |
--------------------------------------------------------------------------------
/src/app/store/index.js:
--------------------------------------------------------------------------------
1 | import reducer from '../reducers';
2 | import { createStore, applyMiddleware } from 'redux';
3 | import logger from 'redux-logger';
4 | import thunk from 'redux-thunk';
5 |
6 | const middleware = process.env.NODE_ENV === 'production' ? [thunk] : [thunk, logger()];
7 | const createStoreWithMiddleware = applyMiddleware(...middleware)(createStore);
8 | const store = createStoreWithMiddleware(reducer);
9 |
10 | export default store;
11 |
--------------------------------------------------------------------------------
/src/helpers/index.js:
--------------------------------------------------------------------------------
1 | export const loadOnScrollBottom = ({dispatch, action, userId, that}) => {
2 | $(window).off('scroll');
3 | $(window).on('scroll', function() {
4 | if($(this).scrollTop() + $(this).height() == $(document).height()) {
5 | dispatch(action({url: that.props.model.pagination.next_url, userId}));
6 | }
7 | });
8 | };
9 |
--------------------------------------------------------------------------------
/src/stylus/_about.styl:
--------------------------------------------------------------------------------
1 | .about
2 | text-align center
3 | padding-top 40px
4 |
5 | &__header
6 | color #fff
7 | text-shadow 0 1px 1px #333
8 | font bold 2em "Roboto Condensed", Arial, Tahoma
9 |
10 | &__text
11 | color #333
12 | text-shadow 0 1px 1px #fff
13 |
14 | a
15 | text-decoration none
16 | color #333
17 | border-bottom 1px dashed #27ae60
18 | -webkit-transition border-color 0.5s ease
19 | -moz-transition border-color 0.5s ease
20 | transition border-color 0.5s ease
21 |
22 | &:hover
23 | border-color #ff4c4b
24 |
--------------------------------------------------------------------------------
/src/stylus/_column.styl:
--------------------------------------------------------------------------------
1 | [class*="column_xs-"]
2 | float left
3 |
4 | .column
5 | position relative
6 | min-height 1px
7 | padding-left 10px
8 | padding-right 10px
9 |
10 | setColumn(xs, 12)
11 | createOffset(xs, 12)
--------------------------------------------------------------------------------
/src/stylus/_comments.styl:
--------------------------------------------------------------------------------
1 | .comments
2 | margin 10px 0 0 100px
3 | padding 0
4 | list-style none
5 | overflow hidden
6 |
7 | &__item
8 | display block
9 | margin 0 0 5px 0
10 |
11 | &__pic
12 | width 20px
13 | margin-right 5px
14 | float left
15 |
16 | &__username
17 | font-size 0.85em
18 | font-weight bold
19 | color #444444
20 | text-decoration none
21 |
22 | &:hover
23 | border-bottom 1px dashed #444
24 |
25 | &__text
26 | font-size 0.85em
--------------------------------------------------------------------------------
/src/stylus/_feed.styl:
--------------------------------------------------------------------------------
1 | .feed
2 | margin 2% auto 0
3 | padding 0
4 | width 95%
5 | list-style none
6 |
7 | &__item
8 | display block
9 | width 76%
10 | min-height 400px
11 | margin 40px auto 0
--------------------------------------------------------------------------------
/src/stylus/_follow.styl:
--------------------------------------------------------------------------------
1 | .follow
2 |
3 | &__header
4 | color #fff
5 | text-shadow 0 1px 1px #333
6 | font-weight 700
7 | font-size 2em
8 | margin 20px 0
9 | text-align center
10 |
11 | &__list
12 | margin 0
13 | padding 0
14 | list-style none
15 |
16 | &__item
17 | float left
18 | width 100%
19 | height 100px
20 | vertical-align top
21 | margin 0
22 | background #fff
23 | border-bottom 1px solid #17b287
24 | border-right 1px solid #17b287
25 | border-left 1px solid #17b287
26 |
27 | &:first-child
28 | border-top 1px solid #17b287
29 |
30 | &:nth-child(4n)
31 | margin-right 0
32 |
33 | a
34 | text-decoration none
35 | color #333
36 | font-weight bold
37 | font-size 1.25em
38 | text-align center
39 |
40 | &__avatar
41 | display inline-block
42 | width 99px
43 | float left
44 | margin-right 10px
45 |
46 | &__username
47 | -webkit-transition color 0.5s ease
48 | -moz-transition color 0.5s ease
49 | transition color 0.5s ease
50 | overflow hidden
51 | position relative
52 | top 35px
53 |
54 | &:hover
55 | color #ff4c4b
56 |
57 | &__btn
58 | border 0
59 | padding 3px 10px
60 | box-shadow 2px 2px 2px 1px rgba(0,0,0,.5)
61 | background #ff4c4b
62 | color #fff
63 | float right
64 | margin 35px 10px 0 0
65 |
66 | &_read
67 | background #27ae60
68 |
--------------------------------------------------------------------------------
/src/stylus/_fonts.styl:
--------------------------------------------------------------------------------
1 | /* Подключаемые шрифты */
2 | @import url("http://fonts.googleapis.com/css?family=PT+Sans:400,700&subset=latin,cyrillic")
3 | @import url("../fonts/grand.css")
--------------------------------------------------------------------------------
/src/stylus/_footer.styl:
--------------------------------------------------------------------------------
1 | .footer
2 | position absolute
3 | bottom 0
4 | width 100%
5 | height 89px
6 | background #444444
7 | border-top 1px solid #4f4f50
8 | border-bottom 1px solid #4f4f50
9 |
10 | &__copyright
11 | float right
12 | color #dddbdb
13 | font normal 0.75em "Tahoma", Arial, Verdana
14 | margin 38px 60px 0 0
--------------------------------------------------------------------------------
/src/stylus/_form.styl:
--------------------------------------------------------------------------------
1 | .form
2 | position relative
3 | width 605px
4 |
5 | &__field
6 | margin 0
7 | padding 0
8 | border 0
9 |
10 | &__label
11 | display block
12 | padding 5px 0
13 |
14 | &__label-title
15 | display inline-block
16 | width 200px
17 | vertical-align top
18 |
19 | &__input, &__select, &__textarea
20 | width 400px
21 | font-size (14/16)*1em
22 | outline none
23 | border 1px solid #a0a0a0
24 |
25 | &__input
26 | height 30px
27 |
28 | &__input, &__textarea
29 | padding 0 5px
30 |
31 | &:focus
32 | box-shadow 0 0 2px 2px rgb(255, 229, 0)
33 |
34 | &__select
35 | width 200px
36 |
37 | &__textarea
38 | padding 3px 5px
39 | resize vertical
40 |
41 | &__answer
42 | display inline-block
43 | width 400px
44 |
45 | &__radio-wrapper
46 | display block
--------------------------------------------------------------------------------
/src/stylus/_globals.styl:
--------------------------------------------------------------------------------
1 | *
2 | -webkit-box-sizing border-box
3 | -moz-box-sizing border-box
4 | box-sizing border-box
5 |
6 | .g-clf:after, .g-clf:before
7 | clear both
8 | content ""
9 | display table
--------------------------------------------------------------------------------
/src/stylus/_grid.styl:
--------------------------------------------------------------------------------
1 | .grid
2 | display block
--------------------------------------------------------------------------------
/src/stylus/_header.styl:
--------------------------------------------------------------------------------
1 | /* Шапка */
2 | .header
3 | width 100%
4 | height 50px
5 | background #17b287
6 | position fixed
7 | top 0
8 | left 0
9 | z-index 9999
10 | box-shadow 0 1px 1px 2px rgba(0,0,0,.5)
--------------------------------------------------------------------------------
/src/stylus/_loader.styl:
--------------------------------------------------------------------------------
1 | @-moz-keyframes heartbeat-loader {
2 | 0% {
3 | -moz-transform: rotate(45deg) scale(1);
4 | transform: rotate(45deg) scale(1);
5 | }
6 | 14% {
7 | -moz-transform: rotate(45deg) scale(1.3);
8 | transform: rotate(45deg) scale(1.3);
9 | }
10 | 28% {
11 | -moz-transform: rotate(45deg) scale(1);
12 | transform: rotate(45deg) scale(1);
13 | }
14 | 42% {
15 | -moz-transform: rotate(45deg) scale(1.3);
16 | transform: rotate(45deg) scale(1.3);
17 | }
18 | 70% {
19 | -moz-transform: rotate(45deg) scale(1);
20 | transform: rotate(45deg) scale(1);
21 | }
22 | }
23 | @-webkit-keyframes heartbeat-loader {
24 | 0% {
25 | -webkit-transform: rotate(45deg) scale(1);
26 | transform: rotate(45deg) scale(1);
27 | }
28 | 14% {
29 | -webkit-transform: rotate(45deg) scale(1.3);
30 | transform: rotate(45deg) scale(1.3);
31 | }
32 | 28% {
33 | -webkit-transform: rotate(45deg) scale(1);
34 | transform: rotate(45deg) scale(1);
35 | }
36 | 42% {
37 | -webkit-transform: rotate(45deg) scale(1.3);
38 | transform: rotate(45deg) scale(1.3);
39 | }
40 | 70% {
41 | -webkit-transform: rotate(45deg) scale(1);
42 | transform: rotate(45deg) scale(1);
43 | }
44 | }
45 | @keyframes heartbeat-loader {
46 | 0% {
47 | -moz-transform: rotate(45deg) scale(1);
48 | -ms-transform: rotate(45deg) scale(1);
49 | -webkit-transform: rotate(45deg) scale(1);
50 | transform: rotate(45deg) scale(1);
51 | }
52 | 14% {
53 | -moz-transform: rotate(45deg) scale(1.3);
54 | -ms-transform: rotate(45deg) scale(1.3);
55 | -webkit-transform: rotate(45deg) scale(1.3);
56 | transform: rotate(45deg) scale(1.3);
57 | }
58 | 28% {
59 | -moz-transform: rotate(45deg) scale(1);
60 | -ms-transform: rotate(45deg) scale(1);
61 | -webkit-transform: rotate(45deg) scale(1);
62 | transform: rotate(45deg) scale(1);
63 | }
64 | 42% {
65 | -moz-transform: rotate(45deg) scale(1.3);
66 | -ms-transform: rotate(45deg) scale(1.3);
67 | -webkit-transform: rotate(45deg) scale(1.3);
68 | transform: rotate(45deg) scale(1.3);
69 | }
70 | 70% {
71 | -moz-transform: rotate(45deg) scale(1);
72 | -ms-transform: rotate(45deg) scale(1);
73 | -webkit-transform: rotate(45deg) scale(1);
74 | transform: rotate(45deg) scale(1);
75 | }
76 | }
77 | /* :not(:required) hides this rule from IE9 and below */
78 | .heartbeat-loader:not(:required) {
79 | -moz-animation: heartbeat-loader 1300ms ease 0s infinite normal;
80 | -webkit-animation: heartbeat-loader 1300ms ease 0s infinite normal;
81 | animation: heartbeat-loader 1300ms ease 0s infinite normal;
82 | display: inline-block;
83 | position: relative;
84 | overflow: hidden;
85 | text-indent: -9999px;
86 | width: 36px;
87 | height: 36px;
88 | -moz-transform: rotate(45deg) scale(1);
89 | -ms-transform: rotate(45deg) scale(1);
90 | -webkit-transform: rotate(45deg) scale(1);
91 | transform: rotate(45deg) scale(1);
92 | -moz-transform-origin: 50% 50%;
93 | -ms-transform-origin: 50% 50%;
94 | -webkit-transform-origin: 50% 50%;
95 | transform-origin: 50% 50%;
96 | }
97 | .heartbeat-loader:not(:required):after, .heartbeat-loader:not(:required):before {
98 | position: absolute;
99 | content: "";
100 | background: #e87;
101 | }
102 | .heartbeat-loader:not(:required):before {
103 | -moz-border-radius-topleft: 12px;
104 | -webkit-border-top-left-radius: 12px;
105 | border-top-left-radius: 12px;
106 | -moz-border-radius-bottomleft: 12px;
107 | -webkit-border-bottom-left-radius: 12px;
108 | border-bottom-left-radius: 12px;
109 | top: 12px;
110 | left: 0;
111 | width: 36px;
112 | height: 24px;
113 | }
114 | .heartbeat-loader:not(:required):after {
115 | -moz-border-radius-topleft: 12px;
116 | -webkit-border-top-left-radius: 12px;
117 | border-top-left-radius: 12px;
118 | -moz-border-radius-topright: 12px;
119 | -webkit-border-top-right-radius: 12px;
120 | border-top-right-radius: 12px;
121 | top: 0;
122 | left: 12px;
123 | width: 24px;
124 | height: 12px;
125 | }
126 |
--------------------------------------------------------------------------------
/src/stylus/_main.styl:
--------------------------------------------------------------------------------
1 | .main
2 | margin 0 auto
3 | padding 50px 10px 115px
--------------------------------------------------------------------------------
/src/stylus/_menu.styl:
--------------------------------------------------------------------------------
1 | .menu
2 | margin 0
3 | padding 14px 0 0
4 | list-style none
5 | text-align center
6 |
7 | &__item
8 | display inline-block
9 | margin-right 15px
10 | cursor pointer
11 |
12 | &:last-child
13 | margin-right 0
14 |
15 | &__link
16 | text-decoration none
17 | color #17b287
18 | background #f9f9f9
19 | padding 5px 20px
20 | -webkit-transition color 0.5s ease
21 | -moz-transition color 0.5s ease
22 | transition color 0.5s ease
23 |
24 | &:hover
25 | color #ff4c4b
--------------------------------------------------------------------------------
/src/stylus/_mixins.styl:
--------------------------------------------------------------------------------
1 | box-shadow(arguments...)
2 | -webkit-box-shadow arguments
3 | -moz-box-shadow arguments
4 | box-shadow arguments
5 |
6 | gradient(arguments...)
7 | background -moz-linear-gradient(top, arguments)
8 | background -webkit-linear-gradient(top, arguments)
9 | background linear-gradient(to bottom, arguments)
10 |
11 | grid(ratio)
12 | width (100/12) * unit(ratio, '%')
13 |
14 | offset(ratio)
15 | margin-left (100/12) * unit(ratio, '%')
16 |
17 | setColumn(name, columns)
18 |
19 | for num in (1..columns)
20 | &_{name}-{num}
21 | grid num
22 |
23 | createOffset(name, columns)
24 |
25 | for num in (1..columns)
26 | &__offset_{name}-{num}
27 | offset num
--------------------------------------------------------------------------------
/src/stylus/_normalize.styl:
--------------------------------------------------------------------------------
1 | /*! normalize.css v3.0.0 | MIT License | git.io/normalize */
2 |
3 | html
4 | font-family sans-serif
5 | -ms-text-size-adjust 100%
6 | -webkit-text-size-adjust 100%
7 |
8 | body
9 | margin 0
10 |
11 | article,
12 | aside,
13 | details,
14 | figcaption,
15 | figure,
16 | footer,
17 | header,
18 | hgroup,
19 | main,
20 | nav,
21 | section,
22 | summary
23 | display block
24 |
25 | audio,
26 | canvas,
27 | progress,
28 | video
29 | display inline-block
30 | vertical-align baseline
31 |
32 |
33 | audio:not([controls])
34 | display none
35 | height 0
36 |
37 | [hidden],
38 | template
39 | display none
40 |
41 | a
42 | background transparent
43 |
44 |
45 | a:active,
46 | a:hover
47 | outline 0
48 |
49 | abbr[title]
50 | border-bottom 1px dotted
51 |
52 | b,
53 | strong
54 | font-weight bold
55 |
56 | dfn
57 | font-style italic
58 |
59 | h1
60 | font-size 2em
61 | margin 0.67em 0
62 |
63 | mark
64 | background #ff0
65 | color #000
66 |
67 | small
68 | font-size 80%
69 |
70 | sub,
71 | sup
72 | font-size 75%
73 | line-height 0
74 | position relative
75 | vertical-align baseline
76 |
77 |
78 | sup
79 | top -0.5em
80 |
81 |
82 | sub
83 | bottom -0.25em
84 |
85 | img
86 | border 0
87 |
88 | svg:not(:root)
89 | overflow hidden
90 |
91 | figure
92 | margin 1em 40px
93 |
94 | hr
95 | -moz-box-sizing content-box
96 | box-sizing content-box
97 | height 0
98 |
99 | pre
100 | overflow auto
101 |
102 | code,
103 | kbd,
104 | pre,
105 | samp
106 | font-family monospace, monospace
107 | font-size 1em
108 |
109 | button,
110 | input,
111 | optgroup,
112 | select,
113 | textarea
114 | color inherit
115 | font inherit
116 | margin 0
117 |
118 | button
119 | overflow visible
120 |
121 | button,
122 | select
123 | text-transform none
124 |
125 | button,
126 | html input[type="button"],
127 | input[type="reset"],
128 | input[type="submit"]
129 | -webkit-appearance button
130 | cursor pointer
131 |
132 | button[disabled],
133 | html input[disabled]
134 | cursor default
135 |
136 | button::-moz-focus-inner,
137 | input::-moz-focus-inner
138 | border 0
139 | padding 0
140 |
141 | input
142 | line-height normal
143 |
144 | input[type="checkbox"],
145 | input[type="radio"]
146 | box-sizing border-box
147 | padding 0
148 |
149 |
150 | input[type="number"]::-webkit-inner-spin-button,
151 | input[type="number"]::-webkit-outer-spin-button
152 | height auto
153 |
154 |
155 | input[type="search"]
156 | -webkit-appearance textfield
157 | -moz-box-sizing content-box
158 | -webkit-box-sizing content-box
159 | box-sizing content-box
160 |
161 |
162 | input[type="search"]::-webkit-search-cancel-button,
163 | input[type="search"]::-webkit-search-decoration
164 | -webkit-appearance none
165 |
166 |
167 | fieldset
168 | border 1px solid #c0c0c0
169 | margin 0 2px
170 | padding 0.35em 0.625em 0.75em
171 |
172 |
173 | legend
174 | border 0
175 | padding 0
176 |
177 | textarea
178 | overflow auto
179 |
180 |
181 | optgroup
182 | font-weight bold
183 |
184 | table
185 | border-collapse collapse
186 | border-spacing 0
187 |
188 |
189 | td,
190 | th
191 | padding 0
192 |
--------------------------------------------------------------------------------
/src/stylus/_page.styl:
--------------------------------------------------------------------------------
1 | /* Обвязка */
2 | html, body
3 | height 100%
4 | font normal 16px "PT Sans", Verdana, Tahoma
5 |
6 | body
7 | background #bdc3c7
8 |
9 | &.welcome
10 | background url(../img/page/blur.jpg) no-repeat 0 0
11 | -webkit-background-size cover
12 | -moz-background-size cover
13 | -ms-background-size cover
14 | background-size cover
15 |
16 | .auth
17 | display block
18 | width 200px
19 | height 29px
20 | background url(../img/page/auth.png) no-repeat 0 0
21 | text-indent -9999px
22 | outline none
23 | position absolute
24 | top 50%
25 | left 50%
26 | margin-left -100px
27 | cursor pointer
28 |
29 | &:hover
30 | background url(../img/page/auth_h.png) no-repeat 0 0
31 |
32 | .page
33 | position relative
34 | min-height 100%
35 | margin 0 auto
--------------------------------------------------------------------------------
/src/stylus/_photo-list.styl:
--------------------------------------------------------------------------------
1 | .photo-list
2 | margin 0
3 | padding 0
4 | list-style none
5 |
6 | &__item
7 | display inline-block
8 | width 20.5%
9 | margin 0 6% 6% 0
10 | cursor pointer
11 |
12 | &:nth-child(4n)
13 | margin-right 0
14 |
15 | img
16 | max-width 100%
17 | box-shadow 0px 0px 2px 3px rgba(0,0,0,.7)
18 |
19 | &__likes
20 | font-size 0.7em
21 | color #333
22 | float right
23 |
24 | &:hover
25 | text-decoration underline
--------------------------------------------------------------------------------
/src/stylus/_photo.styl:
--------------------------------------------------------------------------------
1 | .photo
2 | overflow hidden
3 |
4 | &__pic
5 | display block
6 | width 500px
7 | max-width 100%
8 | margin-left 100px
--------------------------------------------------------------------------------
/src/stylus/_popup.styl:
--------------------------------------------------------------------------------
1 | /* Всплывающие окна */
--------------------------------------------------------------------------------
/src/stylus/_profile.styl:
--------------------------------------------------------------------------------
1 | .profile
2 | margin 40px 0 0
3 |
4 | &__photo
5 | display block
6 | margin 0 auto
7 | width 150px
8 | height 150px
9 |
10 | &__username
11 | color #fff
12 | text-shadow 0 1px 2px #333
13 | text-align center
14 | line-height 20px
15 | margin 10px 0 0
16 | font bold 2em
17 |
18 | &__stats, &__info
19 | margin 20px 0 30px
20 | padding 0
21 | list-style none
22 | text-align center
23 |
24 | &__item
25 | display inline-block
26 | text-align center
27 | padding 0 20px
28 | font normal 1.25em
29 | color #fff
30 | text-shadow 0 1px 1px #333
31 |
32 | a
33 | text-decoration none
34 | color #fff
35 | text-shadow 0 1px 1px #333
36 | -webkit-transition color 0.5s ease
37 | -moz-transition color 0.5s ease
38 | transition color 0.5s ease
39 |
40 | &:hover
41 | color #17b287
42 |
43 | &__info
44 |
45 | .profile__item
46 | color #333
47 | text-shadow none
48 | display block
49 | text-align center
--------------------------------------------------------------------------------
/src/stylus/_responsive.styl:
--------------------------------------------------------------------------------
1 | // Small devices (tablets, 768px and up)
2 | @media (min-width: 768px)
3 |
4 | [class*="column_sm-"]
5 | float left
6 |
7 | .column
8 |
9 | setColumn(sm, 12)
10 |
11 | createOffset(sm, 12)
12 |
13 | // Medium devices (desktops, 992px and up)
14 | @media (min-width: 992px)
15 |
16 | .page
17 | width 940px
18 |
19 | [class*="column_md-"]
20 | float left
21 |
22 | .column
23 |
24 | setColumn(md, 12)
25 |
26 | createOffset(md, 12)
27 |
28 | // Large devices (large desktops, 1200px and up)
29 | @media (min-width: 1170px)
30 |
31 | [class*="column_lg-"]
32 | float left
33 |
34 | .column
35 |
36 | setColumn(lg, 12)
37 |
38 | createOffset(lg, 12)
--------------------------------------------------------------------------------
/src/stylus/_row.styl:
--------------------------------------------------------------------------------
1 | .row
2 | margin-bottom 15px
--------------------------------------------------------------------------------
/src/stylus/_search.styl:
--------------------------------------------------------------------------------
1 | .search
2 | margin 40px 0 0
3 |
4 | &__form
5 | width 100%
6 | height 60px
7 | margin 0 auto 30px
8 |
9 | &__input
10 | display inline-block
11 | width 100%
12 | height 60px
13 | font normal 24px "Roboto Condensed"
14 | color #bdbab4
15 | outline none
16 | padding 0 14px
17 | border 0
--------------------------------------------------------------------------------
/src/stylus/_sidebar.styl:
--------------------------------------------------------------------------------
1 | /* Сайдбар */
--------------------------------------------------------------------------------
/src/stylus/_social.styl:
--------------------------------------------------------------------------------
1 | .social
2 | float left
3 | margin 32px 0 0 60px
4 | padding 0
5 | list-style none
6 |
7 | &__item
8 | display inline-block
9 | float left
10 | margin-left 15px
11 |
12 | &:first-child
13 | margin-left 0
14 |
15 | &__link
16 | color #dddbdb
17 | font normal 24px "Arial", Tahoma, Verdana
18 | text-decoration none
19 | -webkit-transition color 0.4s ease
20 | -moz-transition color 0.4s ease
21 | transition color 0.4s ease
22 | text-indent -9999px
23 |
24 | &:hover
25 | color #27ae60
--------------------------------------------------------------------------------
/src/stylus/_user.styl:
--------------------------------------------------------------------------------
1 | .user
2 | margin-bottom 10px
3 |
4 | &__pic
5 | width 100px
6 | height 100px
7 | float left
8 | margin-right 20px
9 |
10 | img
11 | width 100px
12 | border-radius 50%
13 |
14 | &__name
15 | color #333
16 | display block
17 |
18 | &__likes
19 | height 80px
20 | display block
21 |
22 | &__like
23 | width 80px
24 | height 80px
25 | display inline-block
26 | vertical-align middle
27 | background url("data:image/png;base64,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") no-repeat 0 0
28 | cursor pointer
29 |
30 | &:hover, &_liked
31 | background-position 0 -80px
32 |
33 | &__likes-count
34 | position relative
35 | font-size 2.5em
36 | display inline-block
37 | vertical-align middle
38 |
39 | &__video
40 | cursor pointer
41 | display block
42 | width 100px
43 | height 100px
44 | background url(../img/user/video-play.png)
--------------------------------------------------------------------------------
/src/stylus/_vars.styl:
--------------------------------------------------------------------------------
1 | mobileBreakPoint = 768px
2 | tabletBreakPoint = 992px
3 | wideBreakPoint = 1170px
--------------------------------------------------------------------------------
/src/stylus/style.styl:
--------------------------------------------------------------------------------
1 | @import "_vars"
2 | @import "_mixins"
3 |
4 | /* Шрифты */
5 | @import "_fonts"
6 |
7 | /* Normalize */
8 | @import "_normalize"
9 |
10 | /* Глобальные стили */
11 | @import "_globals"
12 |
13 | /* Обвязка */
14 | @import "_page"
15 |
16 | /* Шапка */
17 | @import "_header"
18 |
19 | /* Menu */
20 | @import "_menu"
21 |
22 | /* Основной контент */
23 | @import "_main"
24 |
25 | /* Боковое меню */
26 | @import "_sidebar"
27 |
28 | /* Подвал */
29 | @import "_footer"
30 |
31 | /* Форма */
32 | @import "_form"
33 |
34 | /* Сетка */
35 | @import "_grid"
36 |
37 | /* Строка сетки */
38 | @import "_row"
39 |
40 | /* Колонка сетки */
41 | @import "_column"
42 |
43 | /* Profile */
44 | @import "_profile"
45 |
46 | /* Popular */
47 | @import "_search"
48 |
49 | /* Photo List */
50 | @import "_photo-list"
51 |
52 | /* About page */
53 | @import "_about"
54 |
55 | /* Social Icons */
56 | @import "_social"
57 |
58 | /* Feed */
59 | @import "_feed"
60 |
61 | /* User in Feed */
62 | @import "_user"
63 |
64 | /* Photo in Feed */
65 | @import "_photo"
66 |
67 | /* Comments in Feed */
68 | @import "_comments"
69 |
70 | /* Followers and Follows */
71 | @import "_follow"
72 |
73 | /* Всплывающие окна */
74 | @import "_popup"
75 |
76 | /* Responsive */
77 | @import "_responsive"
78 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | var webpack = require('webpack');
2 | var path = require('path');
3 |
4 | module.exports = {
5 | entry: './src/app/Root.jsx',
6 | output: {
7 | publicPath: "/",
8 | filename: 'bundle.js'
9 | },
10 | context: __dirname,
11 | module: {
12 | loaders: [
13 | {
14 | test: /\.jsx?$/,
15 | loader: 'babel',
16 | query: {
17 | presets: ['es2015', 'stage-0', 'react']
18 | },
19 | exclude: /node_modules/,
20 | include: path.resolve(__dirname, 'src')
21 | },
22 | {test: /\.styl$/, loaders: ['style', 'css', 'stylus']}
23 | ]
24 | },
25 | resolve: {
26 | extensions: ['', '.js', '.jsx']
27 | }
28 | };
29 |
--------------------------------------------------------------------------------
-
137 | {items}
138 |