Merge pull request #395 from netlify/visual-tweaks

Small update to the UI's look and feel
This commit is contained in:
Shawn Erquhart
2017-05-18 11:26:19 -04:00
committed by GitHub
23 changed files with 395 additions and 288 deletions

View File

@ -1,10 +1,14 @@
@import '../UI/theme';
.appBar {
padding: 8px 24px;
height: auto;
background-color: var(--backgroundAltColor);
color: var(--defaultColorLight);
}
/* Gross stuff below, React Toolbox hacks */
.homeLink,
.iconMenu {
margin-left: 2%;
@ -19,8 +23,8 @@
.leftIcon span {
/* stylelint-disable */
color: var(--foregroundAltColor) !important;
font-size: 30px !important;
color: var(--defaultColorLight) !important;
font-size: 24px !important;
/* stylelint-enable */
}

View File

@ -1,32 +1,41 @@
@import "../UI/theme";
.control {
color: #7c8382;
color: var(--textColor);
position: relative;
padding: 20px 0 10px 0;
margin-top: 16px;
& input,
& textarea,
& select {
font-family: monospace;
font-family: 'SFMono-Regular', Consolas, "Liberation Mono", Menlo, Courier, monospace;
display: block;
width: 100%;
padding: 12px;
margin: 0;
border: none;
border: var(--textFieldBorder);
border-radius: var(--borderRadius);
outline: 0;
box-shadow: none;
background-color: var(--controlBGColor);
font-size: 18px;
color: #7c8382;
font-size: 16px;
color: var(--textColor);
transition: border-color .3s ease;
&:focus,
&:active {
border-color: var(--primaryColor);
}
}
}
.label {
display: block;
color: var(--controlLabelColor);
font-size: 14px;
font-size: 12px;
text-transform: uppercase;
font-weight: 600;
}
.labelWithError {
@ -40,3 +49,7 @@
color: #FF706F;
margin-bottom: 5px;
}
p {
font-size: 16px;
}

View File

@ -18,11 +18,11 @@
}
.controlPane {
height: calc(100% - 55px);
overflow: auto;
padding: 20px 20px 0;
height: calc(100% - 55px);
border-right: 1px solid var(--defaultColorLight);
background-color: var(--backgroundTertiaryColorDark);
background-color: var(--backgroundColor);
}
.previewPane {
@ -41,7 +41,7 @@
left: 0;
right: 0;
bottom: 0;
border-top: 1px solid var(--defaultColorLight);
border-top: var(--border);
background: var(--backgroundColor);
text-align: right;
}
@ -52,3 +52,7 @@
right: 0;
height: 100%;
}
.ProseMirror {
border: var(--textFieldBorder);
}

View File

@ -1,14 +1,21 @@
.card {
flex: 0 300px;
overflow: hidden;
margin-bottom: 10px;
margin-left: 15px;
margin-bottom: 16px;
margin-left: 16px;
max-width: 50%;
max-height: 290px;
width: 240px;
cursor: pointer;
}
.card:hover {
background: #f8f9fa;
transform: translateY(-8px);
}
.cardImage {
width: 240px;
margin: -16px -24px 16px -24px;
width: calc(100% + 24px + 24px);
height: 135px;
background-position: center center;
background-size: cover;
@ -18,7 +25,7 @@
.cardsGrid {
display: flex;
flex-flow: row wrap;
margin-left: -15px;
margin-left: -16px;
}
.cardList {

View File

@ -6,14 +6,14 @@
}
.inputField {
width: 80%;
max-width: 800px;
width: 100%;
max-width: 500px;
display: block;
margin: 0 auto;
margin: 0 24px;
padding: 10px 14px;
border: 0;
border-radius: var(--borderRadius);
box-shadow: none;
outline: none;
font-size: 18px;
font-size: 14px;
}

View File

@ -8,7 +8,7 @@
.stickyActive:not(.stickyAtBottom) {
position: fixed !important;
top: 64px !important;
top: 54px !important;
}
.stickyAtBottom {

View File

@ -163,6 +163,11 @@ export class Sticky extends Component {
static propTypes = {
className: PropTypes.string,
/**
* classNameActive: class to apply when Sticky is active.
*/
classNameActive: PropTypes.string,
/**
* fillContainerWidth: allows the sticky width to be dynamically set to the width of it's
* StickyContainer when sticky (fixed positioning).
@ -201,6 +206,7 @@ export class Sticky extends Component {
styles.sticky,
{
[styles.stickyActive]: state.shouldStick,
[props.classNameActive]: state.shouldStick,
[styles.stickyAtBottom]: state.shouldStickAtBottom,
},
)}

View File

@ -1,8 +1,39 @@
@import '../theme.css';
.card {
composes: base container rounded depth;
composes: base container rounded;
overflow: hidden;
border: var(--textFieldBorder);
transition: all .1s ease-in-out;
transform: translateY(0);
padding: 16px 24px;
}
.card > iframe,
.card > video,
.card > img {
margin: -16px -24px 16px;
width: calc(100% + 16px + 16px);
}
.card h1 {
font-size: 16px;
font-weight: 600;
letter-spacing: 0;
line-height: 24px;
margin: 0;
padding: 0;
border: none;
color: var(--defaultColor);
}
.card p {
font-size: 14px;
font-weight: 400;
letter-spacing: 0;
line-height: 24px;
padding: 0;
color: var(--textMutedColor);
}
.card > *:not(iframe, video, img, header, footer) {
@ -17,17 +48,3 @@
.card > *:not(iframe, video, img, header, footer):last-child {
margin-bottom: 10px;
}
.card > iframe,
.card > video,
.card > img {
max-width: 100%;
}
.card h1 {
margin: 15px 0;
padding: 0;
border: none;
color: var(--defaultColor);
font-size: 18px;
}

View File

@ -1,31 +1,35 @@
:root {
--defaultColor: #333;
--defaultColorLight: #eee;
--defaultColorLight: #fff;
--backgroundColor: #fff;
--backgroundColorShaded: #eee;
--shadowColor: rgba(0, 0, 0, .25);
--shadowColor: rgba(19, 39, 48, .24);
--infoColor: #69c;
--primaryColor: #4990e2;
--successColor: #1c7;
--warningColor: #fa0;
--errorColor: #f52;
--textColor: #272e30;
--borderRadius: 2px;
--borderRadiusLarge: 10px;
--dropShadow:
0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 3px 1px -2px rgba(0, 0, 0, 0.2),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
--textColor: #191919;
--textMutedColor: #8c8c8c;
--borderRadius: 4px;
--borderRadiusLarge: 8px;
--secondaryColor: #d9d9d9;
--dropShadow: 0 2px 8px 0 var(--secondaryColor);
--topmostZindex: 99999;
--foregroundAltColor: #fff;
--backgroundAltColor: #272e30;
--textFieldBorderColor: #e7e7e7;
--backgroundAltColor: #232528;
--textFieldBorderColor: var(--secondaryColor);
--highlightFGColor: #fff;
--highlightBGColor: #3ab7a5;
--highlightFGAltColor: #eee;
--controlLabelColor: var(--textColor);
--controlLabelColor: #8b8b8b;
--controlBGColor: #fff;
--backgroundTertiaryColor: #f2f5f4;
--backgroundTertiaryColor: #fff;
--backgroundTertiaryColorDark: color(var(--backgroundTertiaryColor) lightness(90%));
--richTextEditorMinHeight: 300px;
--borderWidth: 2px;
--border: solid var(--borderWidth) var(--secondaryColor);
--textFieldBorder: var(--border);
}
.base {
@ -42,7 +46,7 @@
}
.depth {
box-shadow: var(--shadowColor) 0 1px 6px;
box-shadow: var(--dropShadow);
}
.clearfix:after {

View File

@ -4,6 +4,11 @@
--iconSize: 30px;
}
/* redux-notifications override */
:global(.notif__container) {
z-index: 10000;
}
.root {
composes: base container rounded depth from '../theme.css';
overflow: hidden;

View File

@ -1,5 +1,7 @@
@import '../UI/theme.css';
:root {
--highlightColor: #e1eeea;
--highlightColor: #38ab9b;
--defaultFontSize: 1em;
}
@ -11,6 +13,7 @@
.column {
flex: 1 33%;
margin: -10px;
margin-top: 24px;
padding: 10px;
max-width: 33%;
transition: background-color .5s ease;
@ -18,7 +21,8 @@
.columnHovered {
composes: column;
background-color: var(--highlightColor);
border: 2px dashed var(--highlightColor);
border-radius: 4px;
}
.columnHeading {
@ -32,3 +36,11 @@
.card {
margin-bottom: 10px;
}
/* Gross stuff below, React Toolbox hacks */
.cardTitle h5 {
color: var(--backgroundAltColor) !important;
font-weight: 500 !important;
font-size: 21px !important;
}

View File

@ -88,6 +88,7 @@ class UnpublishedListing extends React.Component {
<CardTitle
title={entry.getIn(['data', 'title'])}
subtitle={`by ${ author }`}
className={styles.cardTitle}
/>
<CardText>
Last updated: {timeStamp} by {entry.getIn(['metaData', 'user'])}

View File

@ -12,7 +12,8 @@
font-size: .75em;
text-transform: uppercase;
background: var(--backgroundColorShaded);
background: var(--backgroundAltColor);
color: #fff;
}
.meta {}

View File

@ -0,0 +1,21 @@
@import "../UI/theme.css";
.input {
display: none !important;
}
.message {
padding: 20px;
display: block;
font-size: 12px;
}
.imageUpload {
background-color: #fff;
text-align: center;
color: #999;
border: var(--border);
border-style: dashed;
border-radius: var(--borderRadius);
cursor: pointer;
}

View File

@ -2,6 +2,7 @@ import React, { PropTypes } from 'react';
import { truncateMiddle } from '../../lib/textHelper';
import { Loader } from '../UI';
import AssetProxy, { createAssetProxy } from '../../valueObjects/AssetProxy';
import styles from './ImageControl.css';
const MAX_DISPLAY_LENGTH = 50;
@ -81,8 +82,8 @@ export default class ImageControl extends React.Component {
const imageName = this.renderImageName();
if (processing) {
return (
<div style={styles.imageUpload}>
<span style={styles.message}>
<div className={styles.imageUpload}>
<span className={styles.message}>
<Loader active />
</span>
</div>
@ -90,19 +91,19 @@ export default class ImageControl extends React.Component {
}
return (
<div
style={styles.imageUpload}
className={styles.imageUpload}
onDragEnter={this.handleDragEnter}
onDragOver={this.handleDragOver}
onDrop={this.handleChange}
>
<span style={styles.message} onClick={this.handleClick}>
{imageName ? imageName : 'Tip: Click here to upload an image from your file browser, or drag an image directly into this box from your desktop'}
<span className={styles.message} onClick={this.handleClick}>
{imageName ? imageName : 'Click here to upload an image from your computer, or drag and drop a file directly into this box'}
</span>
<input
type="file"
accept="image/*"
onChange={this.handleChange}
style={styles.input}
className={styles.input}
ref={this.handleFileInputRef}
/>
</div>
@ -110,24 +111,6 @@ export default class ImageControl extends React.Component {
}
}
const styles = {
input: {
display: 'none',
},
message: {
padding: '20px',
display: 'block',
fontSize: '12px',
},
imageUpload: {
backgroundColor: '#fff',
textAlign: 'center',
color: '#999',
border: '1px dashed #eee',
cursor: 'pointer',
},
};
ImageControl.propTypes = {
onAddAsset: PropTypes.func.isRequired,
onChange: PropTypes.func.isRequired,

View File

@ -1,3 +1,5 @@
@import "../../../UI/theme";
.root {
position: relative;
}
@ -6,6 +8,10 @@
composes: editorControlBar from "../VisualEditor/index.css";
}
.editorControlBarSticky {
composes: editorControlBarSticky from "../VisualEditor/index.css";
}
.dragging { }
.shim {
@ -28,4 +34,5 @@
.textarea {
overflow: hidden;
resize: none;
min-height: var(--richTextEditorMinHeight);
}

View File

@ -320,7 +320,11 @@ export default class RawEditor extends React.Component {
onDragOver={this.handleDragOver}
onDrop={this.handleDrop}
>
<Sticky className={styles.editorControlBar} fillContainerWidth>
<Sticky
className={styles.editorControlBar}
classNameActive={styles.editorControlBarSticky}
fillContainerWidth
>
<Toolbar
selectionPosition={selectionPosition}
onH1={this.handleHeader('#')}
@ -338,6 +342,7 @@ export default class RawEditor extends React.Component {
/>
</Sticky>
<TextareaAutosize
className={styles.textarea}
inputRef={this.handleRef}
className={styles.textarea}
value={this.props.value || ''}

View File

@ -2,10 +2,11 @@
.pluginForm {
position: absolute;
background-color: var(--backgroundTertiaryColorDark);
background-color: var(--backgroundColor);
margin-top: -20px;
margin-bottom: 30px;
margin-left: 20px;
border: var(--border);
border-radius: var(--borderRadius);
box-shadow: var(--dropShadow);
overflow: hidden;

View File

@ -1,10 +1,14 @@
@import "../../../UI/theme";
.editorControlBar {
background-color: var(--controlBGColor);
border-bottom: 1px solid var(--backgroundTertiaryColorDark);
border-radius: var(--borderRadius) var(--borderRadius) 0 0;
z-index: 1;
border: 2px solid transparent;
border-top: 0;
background-color: var(--controlBGColor);
}
.editorControlBarSticky {
border-color: var(--textFieldBorderColor);
}
.editor {
@ -69,8 +73,11 @@
position: relative;
background-color: var(--controlBGColor);
padding: 12px;
border-radius: 0 0 var(--borderRadius) var(--borderRadius);
overflow: hidden;
border-radius: var(--borderRadius);
overflow-x: auto;
border: var(--textFieldBorder);
min-height: var(--richTextEditorMinHeight);
& ul,
& ol {

View File

@ -275,7 +275,11 @@ export default class Editor extends Component {
onDragOver={this.handleDragOver}
onDrop={this.handleDrop}
>
<Sticky className={styles.editorControlBar} fillContainerWidth>
<Sticky
className={styles.editorControlBar}
classNameActive={styles.editorControlBarSticky}
fillContainerWidth
>
<Toolbar
selectionPosition={selectionPosition}
onH1={this.handleHeader(1)}