Permalink
Browse files

New Design for About (#246)

* new design for about

* clean code

* reuse play.svg
  • Loading branch information...
yining1023 authored and catarak committed Jan 6, 2017
1 parent 3fc4ee8 commit 62b4d4cc6e80de17c6d010c98b46ac18c3cece37
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 28 28"><path fill="#ED225D" stroke="#ED225D" stroke-miterlimit="10" d="M16.909 10.259l8.533-2.576 1.676 5.156-8.498 2.899 5.275 7.48-4.447 3.225-5.553-7.348-5.408 7.155-4.318-3.289 5.275-7.223L.88 12.647l1.678-5.16 8.598 2.771V1.364h5.754v8.895z"/></svg>
@@ -0,0 +1,29 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="171.063px" height="171.06px" viewBox="0 0 191.063 191.06" enable-background="new 0 0 191.063 191.06"
xml:space="preserve">
<path fill="#ED225D" d="M58.197,108.205c-1.354-1.748-3.064-3.162-5.135-4.238c-2.07-1.074-4.496-1.611-7.281-1.611
c-2.627,0-4.977,0.557-7.045,1.672c-2.07,1.115-3.842,2.549-5.312,4.297c-1.475,1.752-2.588,3.742-3.344,5.971
c-0.758,2.229-1.133,4.459-1.133,6.686c0,2.229,0.375,4.438,1.133,6.625c0.756,2.191,1.869,4.16,3.344,5.912
c1.471,1.75,3.242,3.164,5.312,4.236c2.068,1.076,4.418,1.611,7.045,1.611c2.785,0,5.211-0.555,7.281-1.67s3.781-2.547,5.135-4.299
c1.352-1.75,2.367-3.74,3.045-5.969c0.676-2.229,1.014-4.457,1.014-6.686s-0.338-4.438-1.014-6.627
C60.564,111.927,59.549,109.957,58.197,108.205z"/>
<path fill="#ED225D" d="M0,0v191.06h191.063V0H0z M74.852,132.621c-1.312,3.701-3.184,6.924-5.611,9.67s-5.371,4.938-8.834,6.566
c-3.463,1.631-7.385,2.447-11.76,2.447c-4.061,0-7.781-0.836-11.164-2.506c-3.385-1.672-5.99-3.939-7.82-6.807h-0.238v36.295H15.098
V92.328h13.729v7.998h0.359c0.715-1.113,1.65-2.248,2.805-3.402s2.568-2.188,4.24-3.105c1.67-0.912,3.561-1.67,5.67-2.268
c2.107-0.596,4.477-0.896,7.104-0.896c4.059,0,7.799,0.777,11.223,2.328c3.422,1.555,6.367,3.684,8.836,6.389
c2.465,2.707,4.375,5.891,5.73,9.551c1.352,3.662,2.029,7.602,2.029,11.82S76.166,128.919,74.852,132.621z M136.422,134.531
c-1.633,3.701-3.842,6.826-6.627,9.371c-2.787,2.549-6.051,4.5-9.791,5.852s-7.721,2.029-11.938,2.029
c-7.086,0-13.057-1.654-17.91-4.955c-3.34-2.271-6.043-5.133-8.139-8.553l10.367-9.715l0.16-0.059
c1.193,3.344,3.182,6.029,5.969,8.059c2.785,2.029,6.09,3.045,9.91,3.045c2.148,0,4.178-0.357,6.088-1.076
c1.912-0.715,3.582-1.748,5.016-3.104c1.432-1.352,2.566-3.045,3.402-5.072c0.836-2.029,1.254-4.318,1.254-6.865
c0-3.264-0.559-5.971-1.672-8.119c-1.115-2.148-2.566-3.881-4.357-5.193s-3.803-2.229-6.029-2.746
c-2.229-0.518-4.498-0.775-6.805-0.775c-1.594,0-3.283,0.119-5.074,0.357c-1.791,0.24-3.543,0.578-5.254,1.016
c-1.713,0.438-3.383,0.936-5.014,1.49c-1.633,0.559-3.086,1.156-4.357,1.791l1.432-46.201h48.113V78h-34.504l-0.834,18.268
c1.352-0.398,2.963-0.676,4.834-0.838c1.871-0.156,3.562-0.238,5.074-0.238c4.139,0,7.979,0.598,11.521,1.791
c3.541,1.193,6.627,2.926,9.252,5.193c2.629,2.27,4.676,5.057,6.148,8.357c1.473,3.305,2.209,7.104,2.209,11.402
C138.867,126.632,138.051,130.83,136.422,134.531z M173.81,87.076l-5.243,3.802l-5.449-7.211l-5.312,7.026l-5.107-3.89l5.171-7.08
l-8.392-3.027l1.981-6.095l8.419,2.714v-8.708h6.754v8.721l8.357-2.522l1.979,6.09l-8.333,2.843L173.81,87.076z"/>
</svg>
@@ -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 (
<section className="about" ref="about" tabIndex="0">
<header className="about__header">
<h2>About</h2>
<h2 className="about__header-title">Welcome</h2>
<button className="about__exit-button" onClick={this.closeAboutModal}>
<InlineSVG src={exitUrl} alt="Close About Overlay" />
</button>
</header>
<div className="about__copy">
<p>
The p5.js Web Editor is an open source project.
</p>
<p>
<div className="about__content">
<div className="about__content-column">
<InlineSVG className="about__logo" src={squareLogoUrl} alt="p5js Square Logo" />
<p className="about__play-video">
<a
href="http://hello.p5js.org/"
target="_blank"
>
<InlineSVG className="about__play-video-button" src={playUrl} alt="Play Hello Video" />
Play hello! video</a>
</p>
</div>
<div className="about__content-column">
<h3 className="about__content-column-title">New to p5.js?</h3>
<p className="about__content-column-list">
<a
href="https://p5js.org/examples/"
target="_blank"
>
<InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
Examples</a>
</p>
<p className="about__content-column-list">
<a
href="https://p5js.org/tutorials/"
target="_blank"
>
<InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
Tutorials</a>
</p>
</div>
<div className="about__content-column">
<h3 className="about__content-column-title">Resources</h3>
<p className="about__content-column-list">
<a
href="https://p5js.org/libraries/"
target="_blank"
>
<InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
Libraries</a>
</p>
<p className="about__content-column-list">
<a
href="https://p5js.org/reference/"
target="_blank"
>
<InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
Reference</a>
</p>
<p className="about__content-column-list">
<a
href="https://forum.processing.org/two/"
target="_blank"
>
<InlineSVG className="about__content-column-asterisk" src={asteriskUrl} alt="p5 asterisk" />
Forum</a>
</p>
</div>
</div>
<div className="about__footer">
<p className="about__footer-list">
<a
href="https://github.com/processing/p5.js-web-editor"
target="_blank"
>Contribute </a>
or
>Contribute</a>
</p>
<p className="about__footer-list">
<a
href="https://github.com/processing/p5.js-web-editor/issues/new"
target="_blank"
> report a bug.</a>
>Report a bug</a>
</p>
<p className="about__footer-list">
<a
href="https://twitter.com/p5xjs?lang=en"
target="_blank"
>Twitter</a>
</p>
<button className="about__ok-button" onClick={this.closeAboutModal}>OK!</button>
</div>
</section>
);
@@ -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);
@@ -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;
}
.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;
}
}

0 comments on commit 62b4d4c

Please sign in to comment.