From 62b4d4cc6e80de17c6d010c98b46ac18c3cece37 Mon Sep 17 00:00:00 2001 From: Yining Shi Date: Fri, 6 Jan 2017 13:14:39 -0500 Subject: [PATCH] New Design for About (#246) * new design for about * clean code * reuse play.svg --- client/images/p5-asterisk.svg | 1 + client/images/p5js-square-logo.svg | 29 ++++++ client/modules/IDE/components/About.jsx | 85 ++++++++++++++++-- client/styles/abstracts/_variables.scss | 6 ++ client/styles/components/_about.scss | 113 +++++++++++++++++++++++- 5 files changed, 221 insertions(+), 13 deletions(-) create mode 100644 client/images/p5-asterisk.svg create mode 100644 client/images/p5js-square-logo.svg diff --git a/client/images/p5-asterisk.svg b/client/images/p5-asterisk.svg new file mode 100644 index 00000000..6550801d --- /dev/null +++ b/client/images/p5-asterisk.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/images/p5js-square-logo.svg b/client/images/p5js-square-logo.svg new file mode 100644 index 00000000..4c7ed8aa --- /dev/null +++ b/client/images/p5js-square-logo.svg @@ -0,0 +1,29 @@ + + + + + + + diff --git a/client/modules/IDE/components/About.jsx b/client/modules/IDE/components/About.jsx index d09a00c6..c73092e9 100644 --- a/client/modules/IDE/components/About.jsx +++ b/client/modules/IDE/components/About.jsx @@ -1,6 +1,9 @@ import React, { PropTypes } from 'react'; import InlineSVG from 'react-inlinesvg'; const exitUrl = require('../../../images/exit.svg'); +const squareLogoUrl = require('../../../images/p5js-square-logo.svg'); +const playUrl = require('../../../images/play.svg'); +const asteriskUrl = require('../../../images/p5-asterisk.svg'); import { browserHistory } from 'react-router'; class About extends React.Component { @@ -21,26 +24,90 @@ class About extends React.Component { return (
-

About

+

Welcome

-
-

- The p5.js Web Editor is an open source project. -

-

+

+
+ +

+ + + Play hello! video +

+
+
+

New to p5.js?

+

+ + + Examples +

+

+ + + Tutorials +

+
+
+

Resources

+

+ + + Libraries +

+

+ + + Reference +

+

+ + + Forum +

+
+
+
+

Contribute - or + >Contribute +

+

report a bug. + >Report a bug

+

+ Twitter +

+
); diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss index 6a662ace..9e970d18 100644 --- a/client/styles/abstracts/_variables.scss +++ b/client/styles/abstracts/_variables.scss @@ -39,6 +39,7 @@ $themes: ( file-selected-color: #f4f4f4, input-text-color: #333, input-border-color: #b5b5b5, + about-list-text-color: #4a4a4a, ), dark: ( logo-color: $p5js-pink, @@ -72,6 +73,7 @@ $themes: ( file-selected-color: #404040, input-text-color: #333, input-border-color: #b5b5b5, + about-list-text-color: #f4f4f4, ), contrast: ( logo-color: $yellow, @@ -104,6 +106,7 @@ $themes: ( file-selected-color: #404040, input-text-color: #333, input-border-color: #b5b5b5, + about-list-text-color: #f4f4f4, ) ); @@ -125,3 +128,6 @@ $form-navigation-options-color: #999999; $icon-color: #8b8b8b; $icon-hover-color: #333; + +$about-play-background-color: rgba(255, 255, 255, 0.7); +$about-button-border-color: rgba(151, 151, 151, 0.7); diff --git a/client/styles/components/_about.scss b/client/styles/components/_about.scss index 6a94ff25..228e1167 100644 --- a/client/styles/components/_about.scss +++ b/client/styles/components/_about.scss @@ -3,12 +3,25 @@ display: flex; flex-wrap: wrap; flex-flow: column; + width: #{720 / $base-font-size}rem; + outline: none; + & a { + color: $form-navigation-options-color; + } } .about__header { display: flex; justify-content: space-between; - padding: #{20 / $base-font-size}rem; + padding-top: #{12 / $base-font-size}rem; + padding-right: #{14 / $base-font-size}rem; + padding-bottom: #{20 / $base-font-size}rem; + padding-left: #{21 / $base-font-size}rem; +} + +.about__header-title { + font-size: #{38 / $base-font-size}rem; + font-weight: normal; } .about__exit-button { @@ -17,6 +30,98 @@ } } -.about__copy { - padding: #{20 / $base-font-size}rem; -} \ No newline at end of file +.about__logo { + @include themify() { + & path { + fill: getThemifyVariable('logo-color'); + } + } +} + +.about__play-video { + padding-top: #{9 / $base-font-size}rem; + padding-left: #{5 / $base-font-size}rem; +} + +.about__play-video-button { + @include themify() { + @extend %toolbar-button; + width: #{32 / $base-font-size}rem; + height: #{32 / $base-font-size}rem; + line-height: #{34 / $base-font-size}rem; + border-radius: #{24 / $base-font-size}rem; + background-color: $about-play-background-color; + border: solid 0.5px $about-button-border-color; + &:hover { + border-color: getThemifyVariable('button-background-hover-color'); + } + } + padding-left: 2px; + margin-right: #{9 / $base-font-size}rem; + svg { + width: #{11 / $base-font-size}rem; + height: #{11 / $base-font-size}rem; + } +} + +.about__content { + display: flex; + flex-direction: row; + justify-content: space-between; + padding-top: #{17 / $base-font-size}rem; + padding-right: #{78 / $base-font-size}rem; + padding-bottom: #{20 / $base-font-size}rem; + padding-left: #{20 / $base-font-size}rem; +} + +.about__content-column { + display: flex; + flex-direction: column; +} + +.about__content-column-title { + font-size: #{21 / $base-font-size}rem; + padding-left: #{17 / $base-font-size}rem; +} + +.about__content-column-asterisk { + padding-right: #{5 / $base-font-size}rem; + @include themify() { + & path { + fill: getThemifyVariable('logo-color'); + stroke: getThemifyVariable('logo-color'); + } + } +} + +.about__content-column-list { + @include themify() { + padding-top: #{10 / $base-font-size}rem; + font-size: #{16 / $base-font-size}rem; + & a { + color: getThemifyVariable(about-list-text-color); + } + } +} + +.about__footer { + display: flex; + justify-content: space-between; + padding-top: #{18 / $base-font-size}rem; + padding-right: #{20 / $base-font-size}rem; + padding-bottom: #{21 / $base-font-size}rem; + padding-left: #{291 / $base-font-size}rem; +} + +.about__footer-list { + padding-top: #{12 / $base-font-size}rem; +} + +.about__ok-button { + @include themify() { + @extend %button; + padding: #{7 / $base-font-size}rem #{13 / $base-font-size}rem; + font-size: #{16 / $base-font-size}rem; + border: #{0.5 / $base-font-size}rem solid $toast-background-color; + } +}