Skip to content

Update Snippet page styles according to new designs #66

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AinuraAliieva merged 1 commit into from
Feb 2, 2018
Merged

Update Snippet page styles according to new designs #66

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 25 additions & 16 deletions src/components/Snippet.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import 'brace/theme/textmate';
import Title from './common/Title';
import Spinner from './common/Spinner';
import * as actions from '../actions';
import { downloadSnippet } from '../helpers';
import { downloadSnippet, copyToClipboard, parseDate } from '../helpers';

import '../styles/Snippet.styl';

Expand All @@ -18,6 +18,9 @@ class Snippet extends React.Component {
this.state = { isShowEmbed: false };
this.toggleEmbed = this.toggleEmbed.bind(this);
this.download = this.download.bind(this);
this.copyClipboard = (e) => {
copyToClipboard(e, 'embedded');
Copy link
Member

@ikalnytskyi ikalnytskyi Feb 2, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why it's here? It must be a separate commit! Please, do not make different changes in a single commit.

};
}

componentDidMount() {
Expand Down Expand Up @@ -51,31 +54,41 @@ class Snippet extends React.Component {
<div className="snippet" key="Snippet">
<div className="snippet-header">
<div className="snippet-data">
<span className="snippet-data-title">{snippetTitle}</span>
<div className="snippet-data-tags">
{snippet.get('tags').map(item => <span className="snippet-data-tag" key={item}>{item}</span>)}
</div>
<span className="snippet-data-meta">{parseDate(snippet.get('created_at'))}, by Guest</span>
</div>
<div className="snippet-data-actions">
<span className="snippet-data-lang">{syntax}</span>
<div>
<span className="snippet-data-title">{snippetTitle}</span>
<span className="snippet-data-lang">[ {syntax} ]</span>
<button className="snippet-button">Raw</button>
<button className="snippet-button" onClick={this.download}>Download</button>
<button
className={`snippet-button ${this.state.isShowEmbed}`}
key="snippet-details"
onClick={this.toggleEmbed}
onKeyPress={this.toggleEmbed}
>
Embed
</button>
</div>
<span className="snippet-data-author">By Guest</span>
</div>
<button
className="snippet-button"
key="snippet-details"
onClick={this.toggleEmbed}
onKeyPress={this.toggleEmbed}
>
Embed
</button>
</div>
<div className={`snippet-embed ${this.state.isShowEmbed}`}>
<span className="snippet-embed-close" onClick={this.toggleEmbed} role="presentation" />
<p className="snippet-embed-text">
In order to embed this content into your website or blog,
simply copy and paste code provided below:
</p>
<input
id="embedded"
className="input"
type="text"
defaultValue={`<script src='http://xsnippet.org/${snippet.get('id')}/embed/'></script>`}
/>
<button className="snippet-button embed" onClick={this.copyClipboard}>Copy</button>
</div>
<div className="snippet-code">
<AceEditor
Expand All @@ -94,10 +107,6 @@ class Snippet extends React.Component {
}}
value={`${snippet.get('content')}`}
/>
<div className="snippet-code-bottom-bar">
<button className="snippet-button light">Raw</button>
<button className="snippet-button light" onClick={this.download}>Download</button>
</div>
</div>
</div>,
]
Expand Down
17 changes: 16 additions & 1 deletion src/helpers/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,4 +36,19 @@ function downloadSnippet(snippet) {
download(content, name, 'text/plain');
}

export { regExpEscape, downloadSnippet };
function copyToClipboard(e, id) {
document.getElementById(id).select();
document.execCommand('copy');
e.target.focus();
}

// This function is here just because I don't want to pull the whole moment.js
// only for one tiny date
function parseDate(d) {
const date = new Date(d);
const day = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate();
const month = date.getMonth() < 10 ? `0${date.getMonth()}` : date.getMonth();
return `${day}.${month}.${date.getFullYear()}`;
}

export { regExpEscape, downloadSnippet, copyToClipboard, parseDate };
2 changes: 1 addition & 1 deletion src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400|Raleway:600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400|Raleway:600|Roboto:400,300,500,700" rel="stylesheet">
<title>XSnippet</title>
</head>
<body>
Expand Down
130 changes: 83 additions & 47 deletions src/styles/Snippet.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,77 +10,113 @@
display: flex
flex-flow: row nowrap
justify-content: space-between
align-items: center
min-height: offset
color: text-light
background: snippet-header-light
border-left: 40px solid snippet-header-normal
min-height: 110px
padding: 15px 20px
color: text-light
background: snippet-header-green-normal
border-left: 40px solid snippet-header-border
font-family: font-roboto

&-data
& > div
display: flex
display: flex
flex-flow: column nowrap
justify-content: space-between
&-title
font-size: 20px
margin-right: 20px
letter-spacing: .2px
&-author
display: block
margin-top: 7px
font-size: 14px
&-actions
display: flex
flex-flow: column nowrap
justify-content: space-between
align-items: flex-end
&-lang
font-size: 14px
&-meta
opacity: .8
font-size: 12px
font-weight: 300
&-tag
margin-right: 5px
padding: 3px 8px
font-size: 12px
font-weight: 300
color: text-light
border-radius: 9.5px
background-color: rgba(text-light, .2)
letter-spacing: .4px
&:last-shild
margin-right: 0

&-button
padding: 9px 12px
margin-right: 10px
padding: 11px 21px
color: text-light
font-size: 17px
font-family: font-quicksand
font-size: 14px
font-weight: 400
border-radius: 0
border: 1px solid text-light
background-color: button-normal
background-color: button-active
text-transform: uppercase
cursor: pointer
&:last-child
margin-right: 0
&.true
&:hover
background-color: button-light-normal
background-color: text-light
color: button-active
&.embed
margin-left: 10px
padding: 8px 18px
font-size: 12px
text-transform: none
border: none
&:hover
color: text-light
background-color: button-embed-hover

&-embed
min-height: 80px
background-color: snippet-header-normal
border-left: 40px solid snippet-header-dark
padding: 13px 20px 15px
position: relative
min-height: 84px
padding: 15px 20px
background-color: snippet-header-embed
border-left: 40px solid snippet-header-embed-dark
&.false
display: none
&-text
color: text-light
font-family: font-quicksand
font-size: 14px
padding-bottom: 10px
color: text-dark
font-family: font-roboto
font-weight: 300
font-size: 12px
& input
basic-input()
color: text-dark
background-color: snippet-content-light
padding: 4px 9px
font-size: 15px

&-code
flex: 1
position: relative
&-bottom-bar
bottom: 0
left: 0
right: 0
text-align: right
padding: 10px 20px
border-top: 1px solid border-light
width: auto
min-width: 450px
min-height: 30px
color: text-dark
background-color: snippet-content-light
&-button
color: text-light
border: none
margin-right: 3px
font-size: 17px
font-family: font-quicksand
padding: 10px 14px
font-size: 13px
&-close
position: absolute
width: 12px
height: 12px
top: 15px
right: 15px
cursor: pointer
outline: none
text-decoration: none
&.light
background-color: button-light-normal
&:hover
background-color: button-light-active
&::before
&::after
content: ''
position: absolute
width: 1px
height: 14px
left: 6px
background-color: snippet-embed-close
&::before
transform: rotate(45deg)
&::after
transform: rotate(-45deg)
3 changes: 3 additions & 0 deletions src/styles/common/colors.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ color-gainboro-white-s0 = #e8e8e8
color-white-smoke-white-s0 = #f3f3f3
color-white-white-s0 = #fdfdfd
color-gainsboro-white-s0 = #e4e4e4
color-gainsboro-white-s1 = #e1e1e1
color-shady-lady-gray-s0 = #979797

color-regent-st-blue-blue-s28 = #9cd9cd
color-downy-green-s42 = #7ad6c3
Expand All @@ -15,6 +17,7 @@ color-medium-aquamarine-blue-s50 = #62c4b0
color-puerto-rico-green-s47 = #64beac
color-niagara-green-s75 = #2aa88e
color-shamrock-green-s73 = #33c0a3
color-mountain-meadow-green-s89 = #11a88d
color-elf-green-green-s82 = #178770

color-shady-lady-grey-s0 = #979797
Expand Down
13 changes: 11 additions & 2 deletions src/styles/common/variables.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,15 @@ sidebar-active-icon = color-puerto-rico-green-s47
sidebar-normal-icon = color-dim-gray-gray-s0

snippet-header-normal = color-niagara-green-s75
snippet-header-dark = color-elf-green-green-s82
snippet-header-light = color-medium-aquamarine-blue-s47
snippet-content-light = color-white-white-s100
snippet-header-border = color-mountain-meadow-green-s89

snippet-header-green-normal = color-shamrock-green-s73
snippet-content-light = color-white-white-s100

snippet-header-embed-dark = color-gainsboro-white-s1
snippet-header-embed = color-white-smoke-white-s0
snippet-embed-close = color-shady-lady-gray-s0

language-bar-bg-normal = color-white-smoke-white-s0
language-bar-bg-active = color-white-white-s0
Expand All @@ -34,8 +40,11 @@ button-normal = color-medium-aquamarine-blue-s47
button-active = color-shamrock-green-s73
button-light-normal = color-regent-st-blue-blue-s28
button-light-active = color-downy-green-s42
button-inverse-header = color-mountain-meadow-green-s89
button-embed-hover = color-mountain-meadow-green-s89

offset = 70px

font-raleway = 'Raleway', sans-serif
font-quicksand = 'Quicksand', sans-serif
font-roboto = 'Roboto', sans-serif