tyler.durden
/
opensupports
mirror of https://github.com/opensupports/opensupports.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Ivan - Frontend - Fix Card component style issues, add header to main-home-page-portal [skip ci]

This commit is contained in:
ivan 2016-08-30 15:28:14 -03:00
parent f754251622
commit e971dbea08
7 changed files with 62 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
client/src/app/main/main-home/main-home-page-portal.js
View File

@ -1,21 +1,31 @@
import React from 'react';
import classNames from 'classnames';
import Widget from 'core-components/widget';
import Card from 'core-components/card';
import i18n from 'lib-app/i18n';
import Header from 'core-components/header';
class MainHomePagePortal extends React.Component {
render() {
return (
<Widget className={classNames('main-home-page-portal', this.props.className)}>
<Card title={i18n('TICKETS')} description={i18n('TICKETS_DESCRIPTION')} icon="ticket" color="red"/>
<Card title={i18n('ARTICLES')} description={i18n('ARTICLES_DESCRIPTION')} icon="book" color="blue"/>
<Card title={i18n('ACCOUNT')} description={i18n('ACCOUNT_DESCRIPTION')} icon="user" color="green"/>
<div className="main-home-page-portal__title">
<Header title={i18n('SUPPORT_CENTER')} description={i18n('SUPPORT_CENTER_DESCRIPTION')} />
</div>
<div className="main-home-page-portal__cards">
<div className="main-home-page-portal__card col-md-4">
<Card title={i18n('TICKETS')} description={i18n('TICKETS_DESCRIPTION')} icon="ticket" color="red"/>
</div>
<div className="main-home-page-portal__card col-md-4">
<Card title={i18n('ARTICLES')} description={i18n('ARTICLES_DESCRIPTION')} icon="book" color="blue"/>
</div>
<div className="main-home-page-portal__card col-md-4">
<Card title={i18n('ACCOUNT')} description={i18n('ACCOUNT_DESCRIPTION')} icon="user" color="green"/>
</div>
</div>
</Widget>
);
}
}

4
client/src/app/main/main-home/main-home-page-portal.scss
View File

@ -1,3 +1,7 @@
.main-home-page-portal {
min-height: 412px;
&__card {
padding: 5px;
}
}

12
client/src/core-components/card.js
View File

@ -10,22 +10,26 @@ class Card extends React.Component{
color: React.PropTypes.string
};
render(){
return(
render() {
return (
<div className={this.getClass()}>
<div className="card__icon"><Icon name={this.props.icon} size="5x"/></div>
<div className="card__title">{this.props.title}</div>
<div className="card__description">{this.props.description}</div>
</div>
)
);
}
getClass(){
getClass() {
var classes = {
'card': true,
'card_red': (this.props.color === 'red'),
'card_blue': (this.props.color === 'blue'),
'card_green': (this.props.color === 'green')
};
classes[this.props.className] = (this.props.className);
return classNames(classes);
}
}

50
client/src/core-components/card.scss
View File

@ -1,26 +1,30 @@
@import "../scss/vars";
.card{
padding: 15px;
width: 200px;
height: 260px;
color: white;
display: inline-block;
margin-right: 10px;
border-radius: 4px;
&__title{
font-variant: small-caps;
font-size: 20px;
}
&__description{
}
&_red{
background-color: $primary-red;
}
&_blue{
background-color: $secondary-blue;
}
&_green{
background-color: $primary-green;
}
.card {
border-radius: 4px;
color: white;
height: 260px;
padding: 15px;
&__title {
font-variant: small-caps;
margin: 10px 0;
font-size: $font-size--lg;
}
&__description {
font-size: $font-size--sm;
}
&_red {
background-color: $primary-red;
}
&_blue {
background-color: $secondary-blue;
}
&_green {
background-color: $primary-green;
}
}

2
client/src/core-components/form-field.scss
View File

@ -15,7 +15,7 @@
&_errored {
.form-field__error {
color: $primary-red;
font-size: $font-size--sm;
font-size: $font-size--xs;
display: block;
position: absolute;
}

8
client/src/data/languages/en.js
View File

@ -19,9 +19,11 @@ export default {
'CREATE_TICKET_DESCRIPTION': 'This is a form for creating tickets. Fill the form and send us your issues/doubts/suggestions. Our support system will answer it as soon as possible.',
'TICKET_LIST': 'Ticket List',
'TICKET_LIST_DESCRIPTION': 'Here you can find a list of all tickets you have sent to our support team.',
'TICKETS_DESCRIPTION': 'A random text about tickets',
'ARTICLES_DESCRIPTION': 'A random text about articles',
'ACCOUNT_DESCRIPTION': 'A random text about account',
'TICKETS_DESCRIPTION': 'Send ticket through our support center and get response of your doubts, suggestions and issues.',
'ARTICLES_DESCRIPTION': 'Take a look to our articles about common issues, guides and documentation.',
'ACCOUNT_DESCRIPTION': 'All your tickets are stored in your accounts\'s profile. Keep track off all your tickets you send to our staff team.',
'SUPPORT_CENTER': 'Support Center',
'SUPPORT_CENTER_DESCRIPTION': 'Welcome to our support center. You can contact us through a tickets system. Your tickets will be answered by our staff.',
//ERRORS
'EMAIL_NOT_EXIST': 'Email does not exist',

4
client/src/scss/_vars.scss
View File

@ -18,8 +18,8 @@ $full-space: 40px;
$half-space: 20px;
// FONT SIZING
$font-size--xs: 10px;
$font-size--sm: 12px;
$font-size--xs: 11px;
$font-size--sm: 13px;
$font-size--md: 16px;
$font-size--lg: 24px;
$font-size--xl: 32px;