New Design for About (#246)
* new design for about * clean code * reuse play.svg
This commit is contained in:
Yining Shi
Cassie Tarakajian
parent
3fc4ee897d
commit
62b4d4cc6e
5 changed files with 221 additions and 13 deletions
1
client/images/p5-asterisk.svg
Normal file
1
client/images/p5-asterisk.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 330 B |
29
client/images/p5js-square-logo.svg
Normal file
29
client/images/p5js-square-logo.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
|
|
@ -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.
|
||||
<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>
|
||||
<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
|
||||
</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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue