Skip to content
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

Jump to bottom

feat: add machine font #35

Merged
merged 7 commits into from
Sep 1, 2019
Merged

feat: add machine font #35

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b2fe3c9
feat: add machine font
vharadkou Aug 31, 2019
27c70c8
build: check commit verification
vharadkou Aug 31, 2019
26467a9
style: update end of line
vharadkou Sep 1, 2019
60f3c6a
Merge branch 'master' into master
vharadkou Sep 1, 2019
ea96be3
Merge branch 'master' into master
vharadkou Sep 1, 2019
e6a0dc6
feat: add machine font
vharadkou Aug 31, 2019
b740571
fix: digest view
vharadkou Sep 1, 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
Binary file removed js_machine_front/src/components/navBar/images/logo.png
View file
Open in desktop
Binary file not shown.
58 changes: 48 additions & 10 deletions js_machine_front/src/components/navBar/navBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React from 'react';
import LogoSrc from './images/logo.png';
import './styles/route.css';
import './styles/routeMedia.css';
import { NavLink } from 'react-router-dom';
Expand All @@ -16,32 +15,71 @@ export class NavBar extends React.PureComponent {
return (
<div>
<div className="logo-box">
<NavLink to="/">
<img src={LogoSrc} className="logo-box__link" alt="logo" />
<NavLink
exact={true}
className="menu__nav-link menu__nav-link--logo"
to="/"
>
JS MACHINE
</NavLink>
</div>

<input id="menu__toggle" type="checkbox" checked={this.state.isMenuOpened} onChange={this.handleMenu} />
<input
id="menu__toggle"
type="checkbox"
checked={this.state.isMenuOpened}
onChange={this.handleMenu}
/>
<label className="menu__btn" htmlFor="menu__toggle">
<span />
</label>
<div className="menu">
<NavLink exact={true} className="menu__nav-link" activeClassName="active-link" to="/about">
<NavLink
exact={true}
className="menu__nav-link"
activeClassName="active-link"
to="/about"
>
<FormattedMessage id="page.about" />
</NavLink>
<NavLink exact={true} className="menu__nav-link" activeClassName="active-link" to="/news">
<NavLink
exact={true}
className="menu__nav-link"
activeClassName="active-link"
to="/news"
>
<FormattedMessage id="page.news" />
</NavLink>
<NavLink exact={true} className="menu__nav-link" activeClassName="active-link" to="/events">
<NavLink
exact={true}
className="menu__nav-link"
activeClassName="active-link"
to="/events"
>
<FormattedMessage id="page.events" />
</NavLink>
<NavLink exact={true} className="menu__nav-link" activeClassName="active-link" to="/partners">
<NavLink
exact={true}
className="menu__nav-link"
activeClassName="active-link"
to="/partners"
>
<FormattedMessage id="page.partners" />
</NavLink>
<NavLink exact={true} className="menu__nav-link" activeClassName="active-link" to="/authorization">
<NavLink
exact={true}
className="menu__nav-link"
activeClassName="active-link"
to="/authorization"
>
<FormattedMessage id="page.signIn" />
</NavLink>
<NavLink exact={true} className="menu__nav-link" activeClassName="active-link" to="/digestview">
<NavLink
exact={true}
className="menu__nav-link"
activeClassName="active-link"
to="/digestview"
>
<FormattedMessage id="page.digestview" />
</NavLink>
</div>
Expand Down
62 changes: 34 additions & 28 deletions js_machine_front/src/components/navBar/styles/route.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,50 @@
.logo-box {
position: absolute;
top: 60px;
left: 60px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0;
position: absolute;
top: 60px;
left: 60px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0;
}

.logo-box__link {
height: 28px;
position: absolute;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 28px;
position: absolute;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}

.menu {
position: absolute;
right: 60px;
top: 60px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: fit-content;
position: absolute;
right: 60px;
top: 60px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: fit-content;
}

.menu__nav-link {
margin-left: 60px;
font-family: 'Exo', sans-serif;
font-size: 16px;
color: white;
text-decoration: none;
font-weight: bold;
margin-left: 60px;
font-family: 'Exo', sans-serif;
font-size: 16px;
color: white;
text-decoration: none;
font-weight: bold;
}

.menu__nav-link--logo {
font-family: 'Machine', sans-serif;
font-size: 20px;
letter-spacing: 1px;
}

.active-link {
color: #F2E14C;
color: #f2e14c;
}

#menu__toggle {
display: none;
}
display: none;
}
4 changes: 4 additions & 0 deletions js_machine_front/src/components/navBar/styles/routeMedia.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,4 +83,8 @@
text-decoration: none;
transition-duration: .25s;
}
.menu__nav-link--logo {
color: white;
font-family: 'Machine', sans-serif;
}
}
10 changes: 5 additions & 5 deletions js_machine_front/src/components/navBar/tests/navBar.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ import { shallow } from 'enzyme';
import { NavLink } from 'react-router-dom';

describe('NavBar component is ready', () => {
it('navLink components is ready', () => {
const component = shallow(<NavBar/>);
it('navLink components is ready', () => {
const component = shallow(<NavBar />);

const tileContent = component.find(NavLink);
const tileContent = component.find(NavLink);

expect(tileContent).toHaveLength(7);
});
expect(tileContent).toHaveLength(7);
});
});
Binary file added js_machine_front/src/fonts/machine.ttf
View file
Open in desktop
Binary file not shown.
7 changes: 7 additions & 0 deletions js_machine_front/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,4 +69,11 @@ code {
src: url('fonts/Exo2-LightItalic.ttf') format('truetype');
font-weight: lighter;
font-style: italic;
}

@font-face{
font-family: 'Machine';
src: url('fonts/machine.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
48 changes: 24 additions & 24 deletions js_machine_front/src/scenes/authorization/components/authorizationSignIn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
import React from 'react';
import { SocialAuth } from './socialAuth';
import { SignInFrom } from './signInFrom';
import { FormattedMessage } from 'react-intl';

import '../styles/authorizationSignIn.css';
import '../styles/authorizationSignInMedia.css';

import { SignInProps } from 'scenes/authorization/models/authorizationSignIn';

export const AuthorizationSignIn: React.FC<SignInProps> = (props: SignInProps) => {
const resetSignInWidth = props.isAuthorizitationVisible ? '' : 'reset_sign-in-width';
return (
<div className={`sign-in ${resetSignInWidth}`}>
<div className={`sign-in__wrapper`}>
<div className="sign-in__title">
<FormattedMessage id="authorization.signIn" />
</div>
<SocialAuth />
<SignInFrom />
</div>
</div>
);
};
import React from 'react';
import { SocialAuth } from './socialAuth';
import { SignInFrom } from './signInFrom';
import { FormattedMessage } from 'react-intl';
import '../styles/authorizationSignIn.css';
import '../styles/authorizationSignInMedia.css';
import { SignInProps } from 'scenes/authorization/models/authorizationSignIn';
export const AuthorizationSignIn: React.FC<SignInProps> = (props: SignInProps) => {
const resetSignInWidth = props.isAuthorizitationVisible ? '' : 'reset_sign-in-width';
return (
<div className={`sign-in ${resetSignInWidth}`}>
<div className={`sign-in__wrapper`}>
<div className="sign-in__title">
<FormattedMessage id="authorization.signIn" />
</div>
<SocialAuth />
<SignInFrom />
</div>
</div>
);
};
26 changes: 13 additions & 13 deletions js_machine_front/src/scenes/digestView/components/dateAndView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import React, { memo } from 'react';
import Eye from '../images/eye.svg';
import '../styles/dateAndView.css';
import { DateAndViewProps } from '../models/dateAndView';

export const DateAndView: React.FC<DateAndViewProps> = memo((props: DateAndViewProps) => {
return (
<div className="date-and-view">
<span className="date-and-view__date">5 АВГ</span>
<span><img src={Eye} alt="Eye" className="date-and-view__img" /> {props.views}</span>
</div>
);
});
import React, { memo } from 'react';
import Eye from '../images/eye.svg';
import '../styles/dateAndView.css';
import { DateAndViewProps } from '../models/dateAndView';
export const DateAndView: React.FC<DateAndViewProps> = memo((props: DateAndViewProps) => {
return (
<div className="date-and-view">
<span className="date-and-view__date">5 АВГ</span>
<span><img src={Eye} alt="Eye" className="date-and-view__img" /> {props.views}</span>
</div>
);
});
26 changes: 13 additions & 13 deletions js_machine_front/src/scenes/digestView/components/leftArrowButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import React, { memo } from 'react';
import '../styles/leftArrowButton.css';
import arrow from '../images/left.svg';
import { LeftArrowButtonProps } from '../models/leftArrowButton';

export const LeftArrowButton: React.FC<LeftArrowButtonProps> = memo((props: LeftArrowButtonProps) => {
return (
<span className="left-arrow-button" onClick={props.closeDigest}>
<img src={arrow} alt="left-arrow" className="left-arrow-button__arrow" />
<span className="left-arrow-button__text">{props.text}</span>
</span>
);
});
import React, { memo } from 'react';
import '../styles/leftArrowButton.css';
import arrow from '../images/left.svg';
import { LeftArrowButtonProps } from '../models/leftArrowButton';
export const LeftArrowButton: React.FC<LeftArrowButtonProps> = memo((props: LeftArrowButtonProps) => {
return (
<span className="left-arrow-button" onClick={props.closeDigest}>
<img src={arrow} alt="left-arrow" className="left-arrow-button__arrow" />
<span className="left-arrow-button__text">{props.text}</span>
</span>
);
});
30 changes: 15 additions & 15 deletions js_machine_front/src/scenes/digestView/components/option.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import React, { memo } from 'react';
import '../styles/option.css';
import star from '../images/star.svg';
import share from '../images/share-option.svg';
import warning from '../images/warning.svg';

export const Option: React.FC = memo(() => {
return (
<div className="option">
<img src={share} alt="share" className="option__img" />
<img src={star} alt="start" className="option__img" />
<img src={warning} alt="warning" className="option__img" />
</div>
);
});
import React, { memo } from 'react';
import '../styles/option.css';
import star from '../images/star.svg';
import share from '../images/share-option.svg';
import warning from '../images/warning.svg';
export const Option: React.FC = memo(() => {
return (
<div className="option">
<img src={share} alt="share" className="option__img" />
<img src={star} alt="start" className="option__img" />
<img src={warning} alt="warning" className="option__img" />
</div>
);
});
Loading