From e971dbea08ce9cc3c2b4baf6b0f4414bbf6853fc Mon Sep 17 00:00:00 2001 From: ivan Date: Tue, 30 Aug 2016 15:28:14 -0300 Subject: [PATCH] Ivan - Frontend - Fix Card component style issues, add header to main-home-page-portal [skip ci] --- .../main/main-home/main-home-page-portal.js | 20 ++++++-- .../main/main-home/main-home-page-portal.scss | 4 ++ client/src/core-components/card.js | 12 +++-- client/src/core-components/card.scss | 50 ++++++++++--------- client/src/core-components/form-field.scss | 2 +- client/src/data/languages/en.js | 8 +-- client/src/scss/_vars.scss | 4 +- 7 files changed, 62 insertions(+), 38 deletions(-) diff --git a/client/src/app/main/main-home/main-home-page-portal.js b/client/src/app/main/main-home/main-home-page-portal.js index 43261fe5..6f63cc37 100644 --- a/client/src/app/main/main-home/main-home-page-portal.js +++ b/client/src/app/main/main-home/main-home-page-portal.js @@ -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 ( - - - +
+
+
+
+
+ +
+
+ +
+
+ +
+
); - } } diff --git a/client/src/app/main/main-home/main-home-page-portal.scss b/client/src/app/main/main-home/main-home-page-portal.scss index 5a9fa2b3..ad6c9dc4 100644 --- a/client/src/app/main/main-home/main-home-page-portal.scss +++ b/client/src/app/main/main-home/main-home-page-portal.scss @@ -1,3 +1,7 @@ .main-home-page-portal { + min-height: 412px; + &__card { + padding: 5px; + } } \ No newline at end of file diff --git a/client/src/core-components/card.js b/client/src/core-components/card.js index 6022fb6b..991b0161 100644 --- a/client/src/core-components/card.js +++ b/client/src/core-components/card.js @@ -10,22 +10,26 @@ class Card extends React.Component{ color: React.PropTypes.string }; - render(){ - return( + render() { + return (
{this.props.title}
{this.props.description}
- ) + ); } - 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); } } diff --git a/client/src/core-components/card.scss b/client/src/core-components/card.scss index c978dc07..77bd29e2 100644 --- a/client/src/core-components/card.scss +++ b/client/src/core-components/card.scss @@ -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; + } } diff --git a/client/src/core-components/form-field.scss b/client/src/core-components/form-field.scss index 0b2ee428..e818fcaf 100644 --- a/client/src/core-components/form-field.scss +++ b/client/src/core-components/form-field.scss @@ -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; } diff --git a/client/src/data/languages/en.js b/client/src/data/languages/en.js index ece39332..f978f876 100644 --- a/client/src/data/languages/en.js +++ b/client/src/data/languages/en.js @@ -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', diff --git a/client/src/scss/_vars.scss b/client/src/scss/_vars.scss index 956a56d9..4da6af75 100644 --- a/client/src/scss/_vars.scss +++ b/client/src/scss/_vars.scss @@ -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; \ No newline at end of file