Skip to content

Commit 5b870e8

Browse files
mr8bitmr8bit
committed
add full spa
1 parent cea8c34 commit 5b870e8

File tree

25 files changed

+8622
-116
lines changed

25 files changed

+8622
-116
lines changed

‎package.json

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,6 @@
3333
"babel-runtime": "6.26.0",
3434
"bem-react-core": "^1.0.0-rc.8",
3535
"body-parser": "1.17.2",
36-
"bootstrap-loader": "2.2.0",
37-
"bootstrap-sass": "3.3.7",
3836
"classnames": "2.2.5",
3937
"clean-webpack-plugin": "0.1.16",
4038
"css-loader": "0.28.5",
@@ -49,16 +47,15 @@
4947
"html-webpack-plugin": "2.30.1",
5048
"imports-loader": "0.7.1",
5149
"isomorphic-fetch": "2.2.1",
52-
"jquery": "3.2.1",
53-
"less": "2.7.2",
54-
"less-loader": "4.0.5",
5550
"node-sass": "4.5.3",
5651
"postcss-import": "10.0.0",
5752
"postcss-loader": "2.0.6",
5853
"prop-types": "15.5.10",
5954
"react": "15.6.1",
55+
"react-addons-css-transition-group": "^15.6.2",
6056
"react-dom": "15.6.1",
6157
"react-mixin": "3.1.0",
58+
"react-preloader-icon": "^0.1.1",
6259
"react-redux": "5.0.6",
6360
"react-router": "4.2.0",
6461
"react-router-dom": "4.2.2",

‎src/blog/serializers.py

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99

1010
class AuthorSerizlizer(serializers.ModelSerializer):
1111
name = serializers.ReadOnlyField(source='get_full_name')
12-
1312
class Meta:
1413
model = User
1514
fields = (
@@ -20,10 +19,11 @@ class Meta:
2019
class ArticleSerializer(serializers.ModelSerializer):
2120
categoryName = serializers.ReadOnlyField(source='getCategory')
2221
dateCreate = serializers.ReadOnlyField(source='getDateCreate')
22+
author = AuthorSerizlizer(read_only=True, many=False)
2323

2424
class Meta:
2525
model = Article
26-
fields = ('id', 'title', 'slug', 'image', 'categoryName', 'dateCreate', 'type')
26+
fields = ('id', 'title', 'slug', 'image', 'categoryName', 'dateCreate', 'type', 'author')
2727

2828

2929
class ArticleViewSerializer(TaggitSerializer, serializers.ModelSerializer):

‎src/djangoreactredux/settings/base.py

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99

1010
DEBUG = True
1111

12-
ALLOWED_HOSTS = ['*']
12+
ALLOWED_HOSTS = ['localhost']
1313

1414
# Application definition
1515

@@ -34,15 +34,13 @@
3434
# Redux
3535
'rest_framework',
3636
'knox',
37-
'taggit_serializer',
37+
'taggit_serializer',
3838
'django_extensions',
3939

4040
'accounts',
4141
'base',
42-
4342
)
4443

45-
4644
MIDDLEWARE_CLASSES = (
4745
'django.middleware.security.SecurityMiddleware',
4846
'whitenoise.middleware.WhiteNoiseMiddleware',

‎src/media/bg2017.jpg

-421 KB
Loading

‎src/static/app.js

Lines changed: 44 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,12 @@ import {connect} from 'react-redux';
33
import {push} from 'react-router-redux';
44
import classNames from 'classnames';
55
import PropTypes from 'prop-types';
6-
import HeadNav from './components/NavCard'
6+
import NavCard from './components/Navigation/NavCard'
77
import Footer from './components/Footer'
88
import {authLogoutAndRedirect} from './actions/auth';
99
import './styles/main.sass';
10+
import PreloaderIcon, {ICON_TYPE} from 'react-preloader-icon';
11+
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; // ES6
1012

1113
class App extends React.Component {
1214
static propTypes = {
@@ -22,6 +24,10 @@ class App extends React.Component {
2224
location: undefined
2325
};
2426

27+
state = {
28+
preloadEnd: false
29+
}
30+
2531
logout = () => {
2632
this.props.dispatch(authLogoutAndRedirect());
2733
};
@@ -38,17 +44,20 @@ class App extends React.Component {
3844
this.props.dispatch(push('/protected'));
3945
};
4046

47+
componentWillMount() {
48+
console.log('componentWillMount from App', this.props.location)
49+
50+
}
51+
52+
componentDidMount() {
53+
setTimeout(function () {
54+
this.setState({preloadEnd: true});
55+
}.bind(this), 1000)
56+
console.log('componentDidMount from App', this.props.location)
57+
58+
}
4159

4260
render() {
43-
const homeClass = classNames({
44-
active: this.props.location && this.props.location.pathname === '/'
45-
});
46-
const protectedClass = classNames({
47-
active: this.props.location && this.props.location.pathname === '/protected'
48-
});
49-
const loginClass = classNames({
50-
active: this.props.location && this.props.location.pathname === '/login'
51-
});
5261

5362
const links = [
5463
{
@@ -62,13 +71,33 @@ class App extends React.Component {
6271
link: '/protected'
6372
},
6473
]
65-
74+
console.log('hello from App', this.props.location)
6675
return (
6776
<div className="app">
68-
<HeadNav links={links}/>
69-
<div>
70-
{this.props.children}
71-
</div>
77+
<NavCard links={links}/>
78+
{this.state.preloadEnd ?
79+
<ReactCSSTransitionGroup
80+
transitionName="animation"
81+
transitionAppear={true}
82+
transitionAppearTimeout={400}
83+
component="div"
84+
transitionEnterTimeout={1000}
85+
transitionLeaveTimeout={1000}>
86+
<div className="animation">
87+
{this.props.children}
88+
</div>
89+
</ReactCSSTransitionGroup>
90+
:
91+
<div className='preloader'>
92+
<PreloaderIcon
93+
type={ICON_TYPE.PUFF}
94+
size={60}
95+
strokeWidth={8}
96+
strokeColor="#4d4d4d"
97+
duration={800}
98+
/>
99+
</div>
100+
}
72101
<Footer/>
73102
</div>
74103
);

‎src/static/components/Article/head.sass

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
display: flex
1919
flex-direction: column
2020
justify-content: space-between
21-
width: 50%
21+
width: 60%
2222
&-body
2323
&-head
2424
&_date
@@ -28,6 +28,7 @@
2828
&__title
2929
font-size: 36px
3030
color: #fff
31+
line-height: 46px
3132
margin: 30px 0
3233
font-weight: 500
3334
&__line
@@ -52,7 +53,7 @@
5253
line-height: 20px
5354

5455
&-right
55-
width: 50%
56+
width: 40%
5657
display: flex
5758
flex-direction: column
5859
justify-content: space-around

‎src/static/components/Article/index.js

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Body from "./Body";
44
import PropTypes from 'prop-types';
55
import './_media.sass'
66
import Footer from "./Footer";
7+
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; // ES6
78

89
export default class Article extends React.Component {
910

@@ -15,18 +16,26 @@ export default class Article extends React.Component {
1516
const {content} = this.props;
1617
console.log(content);
1718
return (
18-
<div>
19-
<Head title={content.title}
20-
image={content.image}
21-
date={content.dateCreate}
22-
category={content.categoryName}
23-
author_name={content.author.name}
24-
/>
25-
<Body text={content.description}/>
26-
<Footer tags={content.tags}
27-
author={content.author}
28-
/>
29-
</div>
19+
<ReactCSSTransitionGroup
20+
transitionName="animation"
21+
transitionAppear={true}
22+
transitionAppearTimeout={400}
23+
component="div"
24+
transitionEnterTimeout={1000}
25+
transitionLeaveTimeout={1000}>
26+
<div className="animation">
27+
<Head title={content.title}
28+
image={content.image}
29+
date={content.dateCreate}
30+
category={content.categoryName}
31+
author_name={content.author.name}
32+
/>
33+
<Body text={content.description}/>
34+
<Footer tags={content.tags}
35+
author={content.author}
36+
/>
37+
</div>
38+
</ReactCSSTransitionGroup>
3039
)
3140
}
3241
}

‎src/static/components/CardList/Card/big.js

Lines changed: 31 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,40 +2,49 @@
22
* Created by lambada on 09.02.18.
33
*/
44
import React, {Component} from "react";
5+
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; // ES6
56

67
export default class CardBig extends Component {
78
render() {
89
const {card} = this.props;
910
const link = `/post/${card.id}`;
10-
return (
11-
<div className="card card--big" style={{backgroundImage: `url(${card.image})`}}>
12-
<a href={link} className="card__link">
13-
<div className="card-content">
14-
<div className="card-head--big">
11+
return (<ReactCSSTransitionGroup
12+
transitionName="card"
13+
transitionAppear={true}
14+
transitionAppearTimeout={400}
15+
component="div"
16+
transitionEnterTimeout={1000}
17+
transitionLeaveTimeout={1000}>
18+
<div className="card card--big" style={{backgroundImage: `url(${card.image})`}}>
19+
<a href={link} className="card__link">
20+
<div className="card-content">
21+
<div className="card-head--big">
1522
<span className="card-head__tag card-head__tag--big "
1623
style={{backgroundColor: card.categoryName.color}}>
1724
{card.categoryName.name} </span>
18-
</div>
19-
<div className="card-body card-body--big">
20-
<div className="card-body__title card-body__title--big">
21-
{card.title}
22-
</div>
23-
</div>
24-
<div className="card-footer card-footer--big">
25-
<div className="card-footer__datetime card-footer__datetime--big">
26-
{card.dateCreate}
2725
</div>
28-
<div className="card-footer__countcomment card-footer__countcomment--big">
29-
<span className="card-footer__icon card-footer__icon--white icon icon-comment"></span>
30-
<span className="card-footer__countcomment__number">12</span>
26+
<div className="card-body card-body--big">
27+
<div className="card-body__title card-body__title--big">
28+
{card.title}
29+
</div>
3130
</div>
32-
<div className="card-footer__author">
33-
Тимур Майзенберг
31+
<div className="card-footer card-footer--big">
32+
<div className="card-footer__datetime card-footer__datetime--big">
33+
{card.dateCreate}
34+
</div>
35+
<div className="card-footer__countcomment card-footer__countcomment--big">
36+
<span
37+
className="card-footer__icon card-footer__icon--white icon icon-comment"></span>
38+
<span className="card-footer__countcomment__number">12</span>
39+
</div>
40+
<div className="card-footer__author">
41+
{card.author.name}
42+
</div>
3443
</div>
3544
</div>
36-
</div>
37-
</a>
38-
</div>
45+
</a>
46+
</div>
47+
</ReactCSSTransitionGroup>
3948
)
4049
}
4150
}

‎src/static/components/CardList/Card/middle.js

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,19 @@
22
* Created by lambada on 09.02.18.
33
*/
44
import React, {Component} from "react";
5+
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; // ES6
56

67
export default class CardMiddle extends Component {
78
render() {
89
const {card} = this.props;
910
const link = `/post/${card.id}`
10-
return (
11+
return (<ReactCSSTransitionGroup
12+
transitionName="card"
13+
transitionAppear={true}
14+
transitionAppearTimeout={400}
15+
component="div"
16+
transitionEnterTimeout={1000}
17+
transitionLeaveTimeout={1000}>
1118
<div className="card card--middle">
1219
<a href={link} className="card__link">
1320
<div className="card-head--middle">
@@ -33,6 +40,7 @@ export default class CardMiddle extends Component {
3340
</div>
3441
</a>
3542
</div>
43+
</ReactCSSTransitionGroup>
3644
)
3745
}
3846
}

‎src/static/components/CardList/CardList.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,9 @@ export default class CardList extends React.Component {
1616
const {list, nextUrl} = this.props;
1717
return (
1818
<div>{
19-
list && list.map((item, index) => {
19+
list.map((item, index) => {
2020
return (
21+
2122
<Card key={item.id} card={item}/>
2223
)
2324
}

0 commit comments

Comments
 (0)