Skip to content
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

Gallery #7

Merged
merged 2 commits into from
Feb 18, 2019
Merged

Gallery #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
49877a0
gallery page
hihayk Feb 18, 2019
8755d1c
gallery design
hihayk Feb 18, 2019
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
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
"react": "^16.4.1",
"react-copy-to-clipboard": "^5.0.1",
"react-dom": "^16.4.1",
"react-router-dom": "^4.3.1",
"styled-components": "^3.3.3"
},
"devDependencies": {
Expand Down
2 changes: 1 addition & 1 deletion public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@

gtag('config', 'UA-122952984-1');
</script>

<script> (function() { var qs,js,q,s,d=document, gi=d.getElementById, ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm_share", b="https://embed.typeform.com/"; if(!gi.call(d,id)){ js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })() </script>
</head>
<body>
<noscript>
Expand Down
181 changes: 176 additions & 5 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import DynamicInput from './components/dynamic-input.js'
import Slider from './components/slider.js'
import ColorBlock from './components/color-block.js'
import { isValidHex } from './utils.js'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'


const errorColor = 'transparent'

Expand Down Expand Up @@ -65,7 +67,7 @@ const FooterSection = styled.div`
const ColorBlocksRow = styled.div`
display: flex;
width: 100%;
margin-bottom: 88px;
${props => props.disabled && `pointer-events: none`};
`

const InputsRow = styled.div`
Expand All @@ -80,8 +82,8 @@ const InputsRow = styled.div`

const InputsRowItem = styled.div`
margin-right: 40px;
width: ${props => props.wide ? 192 : 96}px;
flex-shrink: 0;
width: ${props => props.wide ? 192 : 96}px;
`

const InputsRowItemSeparataor = styled.div`
Expand All @@ -91,6 +93,22 @@ const InputsRowItemSeparataor = styled.div`
flex-shrink: 0;
`

const getColorsList = (colorsAmount, colorsShiftAmount, mixColor, rotate, saturation, colorsObject) => {
const colorsList = []
const givenColor = isValidHex(numberToHex(hashToObject(colorsObject.scaleValue).mainColor)) ? numberToHex(hashToObject(colorsObject.scaleValue).mainColor) : errorColor

let step
for (step = 0; step < colorsAmount; step++) {
if (isValidHex(numberToHex(hashToObject(colorsObject.scaleValue).mainColor))) {
colorsList.push(Color(givenColor).rotate((step + 1) / colorsAmount * -rotate).saturate((step + 1) / colorsAmount * (saturation / 100)).mix(Color(mixColor), (colorsShiftAmount / 100) * (step + 1) / colorsAmount).string())
} else {
colorsList.push(errorColor)
}
}

return colorsList
}

const numberToHex = (number) => '#' + number
const hexToNumber = (number) => number.substr(1, number.length)

Expand All @@ -115,7 +133,7 @@ const defaultState = {
b: Color(numberToHex(initialColor)).rgb().blue()
}

class App extends Component {
class ScaleApp extends Component {
constructor (props) {
super(props)

Expand Down Expand Up @@ -409,7 +427,7 @@ class App extends Component {
</InputsRowItem>
</InputsRow>

<ColorBlocksRow>
<ColorBlocksRow style={{marginBottom: 88}}>
{this.getColorsList(this.state.darkColorsAmount, this.state.darkestAmount, 'black', this.state.darkColorsMixRotate, this.state.darkSaturation).reverse().map((color, index) => (
<ColorBlock style={{ background: color }} hasValidColor={isValidHex(numberToHex(this.state.mainColor))} color={color} key={index} />
))}
Expand Down Expand Up @@ -463,11 +481,164 @@ class App extends Component {
</TopSection>

<FooterSection>
<a href='/scale'><h1>Scale</h1></a>&nbsp; · &nbsp;made by <a href='http://hihayk.com' target='_blank' rel='noopener noreferrer'>Hayk</a>&nbsp; · &nbsp;<a href='https://github.com/hihayk/scale' target='_blank' rel='noopener noreferrer'>GitHub</a>
<a href='https://hihayk.github.io/scale'><h1>Scale</h1></a>&nbsp; · &nbsp;made by <a href='http://hihayk.com' target='_blank' rel='noopener noreferrer'>Hayk</a>&nbsp; · &nbsp;<a href='https://github.com/hihayk/scale' target='_blank' rel='noopener noreferrer'>GitHub</a>
&nbsp; · &nbsp;<Link to="/gallery">Gallery</Link>
</FooterSection>
</MainWrapper>
)
}
}

const galleryData = [
{
scaleValue: '#2/4/31/82/-8/-48/34/31/6a67b1/106/103/177',
authorName: 'Hayk',
authorLink: 'https://hihayk.com',
},
{
scaleValue: '#0/9/0/95/0/0/0/0/444/68/68/68',
authorName: 'Hayk',
authorLink: 'https://hihayk.com',
},
{
scaleValue: '#0/9/42/83/72/-55/60/50/9E3E3C/158/62/60',
authorName: 'Hayk',
authorLink: 'https://hihayk.com',
},
{
scaleValue: '#3/6/42/83/72/-76/60/50/824479/130/68/121',
authorName: 'Hayk',
authorLink: 'https://hihayk.com',
},
{
scaleValue: '#0/5/44/70/-51/116/100/14/45397F/69/57/127',
authorName: 'Hayk',
authorLink: 'https://hihayk.com',
},
]

const hashToObject = (hash) => {
if (hash) {
const stateKeysArray = Object.keys(defaultState)
const hashValuesArray = hash.substr(1, hash.length).split(['/'])

const getHashObject = () => {
var hashObject = {}
stateKeysArray.forEach((key, i) => hashObject[key] = hashValuesArray[i])

return hashObject
}

return getHashObject()
}

return null
}

const GalleryWrapper = styled.div`
padding: 80px;

@media (max-width: 720px) {
padding: 32px;
}
`

const GalleryItem = styled.div`
padding: 80px 0 40px 0;
border-bottom: 1px solid ${props => Color(props.color.mainColor).alpha(0.1).string()};
`

const ItemAuthor = styled.a`
margin-top: 24px;
color: ${props => props.color};
display: inline-block;
text-decoration: none;
font-size: 12px;
line-height: 16px;
`

const GalleryHeader = styled.header`
display: inline-block;
text-decoration: none;
font-size: 34px;
line-height: 34px;
border-bottom: 1px solid #ddd;
width: 100%;
padding: calc(50vh - 240px) 0 80px 0;
color: #222;
display: flex;

a {
color: #aaa;
text-decoration: none;
}

@media (max-width: 720px) {
font-size: 18px;
line-height: 28px;
}
`

const SubmitLink = styled.a`
margin-left: auto;
`

const GalleryApp = () => (
<GalleryWrapper>
<GalleryHeader>
<Link to="/">scale/</Link>gallery

<SubmitLink
href="https://hayk15.typeform.com/to/mVHrni"
data-mode="drawer_right"
data-hide-headers={true}
data-hide-footer={true}
data-submit-close-delay="5"
className="typeform-share"
>
+submit
</SubmitLink>
</GalleryHeader>
{Object.entries(galleryData).map(([key, value]) => {
const getColorsObject = () => hashToObject(value.scaleValue)

return (
<GalleryItem color={numberToHex(getColorsObject())}>
<a href={`/${value.scaleValue}`}>
<ColorBlocksRow disabled>
{getColorsList(getColorsObject().darkColorsAmount, getColorsObject().darkestAmount, 'black', getColorsObject().darkColorsMixRotate, getColorsObject().darkSaturation, value).reverse().map((color, index) => (
<ColorBlock style={{ background: color }} hasValidColor={isValidHex(numberToHex(getColorsObject().mainColor))} color={color} key={index} />
))}

<ColorBlock
wide
style={{ background: isValidHex(numberToHex(getColorsObject().mainColor)) ? numberToHex(getColorsObject().mainColor) : errorColor }}
hasValidColor={isValidHex(numberToHex(getColorsObject().mainColor))}
color={numberToHex(getColorsObject().mainColor)}
/>

{getColorsList(getColorsObject().lightColorsAmount, getColorsObject().lightestAmount, 'white', getColorsObject().lightColorsMixRotate, getColorsObject().lightSaturation, value).map((color, index) => (
<ColorBlock style={{ background: color }} hasValidColor={isValidHex(numberToHex(getColorsObject().mainColor))} color={color} key={index} />
))}
</ColorBlocksRow>

<ItemAuthor href={value.authorLink} target='_blank' color={numberToHex(getColorsObject().mainColor)}>
by {value.authorName}
</ItemAuthor>
</a>
</GalleryItem>
)
})}
</GalleryWrapper>
)

const App = () => (
<Router basename={process.env.PUBLIC_URL}>
<div>
<Route exact path="/" component={ScaleApp} />
<Route exact path="/gallery" component={GalleryApp} />
</div>
</Router>
)

export default App
2 changes: 1 addition & 1 deletion src/components/color-block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const ColorBlockContainer = styled.div`
}

@media (max-width: 720px) {
${props => props.wide && 'min-width: 144px'};
${props => props.wide && 'min-width: 96px'};
}
`

Expand Down
61 changes: 57 additions & 4 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3245,6 +3245,16 @@ he@1.1.x:
version "1.1.1"
resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"

history@^4.7.2:
version "4.7.2"
resolved "https://registry.yarnpkg.com/history/-/history-4.7.2.tgz#22b5c7f31633c5b8021c7f4a8a954ac139ee8d5b"
dependencies:
invariant "^2.2.1"
loose-envify "^1.2.0"
resolve-pathname "^2.2.0"
value-equal "^0.4.0"
warning "^3.0.0"

hmac-drbg@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
Expand Down Expand Up @@ -3502,7 +3512,7 @@ interpret@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614"

invariant@^2.2.0, invariant@^2.2.2:
invariant@^2.2.0, invariant@^2.2.1, invariant@^2.2.2, invariant@^2.2.4:
version "2.2.4"
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
dependencies:
Expand Down Expand Up @@ -4431,7 +4441,7 @@ longest@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"

loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1:
version "1.4.0"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
dependencies:
Expand Down Expand Up @@ -5139,7 +5149,7 @@ path-to-regexp@0.1.7:
version "0.1.7"
resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"

path-to-regexp@^1.0.1:
path-to-regexp@^1.0.1, path-to-regexp@^1.7.0:
version "1.7.0"
resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d"
dependencies:
Expand Down Expand Up @@ -5566,7 +5576,7 @@ promise@^7.1.1:
dependencies:
asap "~2.0.3"

prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0:
prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1:
version "15.6.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
dependencies:
Expand Down Expand Up @@ -5737,6 +5747,29 @@ react-is@^16.3.1:
version "16.4.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.4.1.tgz#d624c4650d2c65dbd52c72622bbf389435d9776e"

react-router-dom@^4.3.1:
version "4.3.1"
resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.3.1.tgz#4c2619fc24c4fa87c9fd18f4fb4a43fe63fbd5c6"
dependencies:
history "^4.7.2"
invariant "^2.2.4"
loose-envify "^1.3.1"
prop-types "^15.6.1"
react-router "^4.3.1"
warning "^4.0.1"

react-router@^4.3.1:
version "4.3.1"
resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.3.1.tgz#aada4aef14c809cb2e686b05cee4742234506c4e"
dependencies:
history "^4.7.2"
hoist-non-react-statics "^2.5.0"
invariant "^2.2.4"
loose-envify "^1.3.1"
path-to-regexp "^1.7.0"
prop-types "^15.6.1"
warning "^4.0.1"

react-scripts@1.1.4:
version "1.1.4"
resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-1.1.4.tgz#d5c230e707918d6dd2d06f303b10f5222d017c88"
Expand Down Expand Up @@ -6062,6 +6095,10 @@ resolve-from@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"

resolve-pathname@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-2.2.0.tgz#7e9ae21ed815fd63ab189adeee64dc831eefa879"

resolve-url@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
Expand Down Expand Up @@ -7051,6 +7088,10 @@ validate-npm-package-license@^3.0.1:
spdx-correct "^3.0.0"
spdx-expression-parse "^3.0.0"

value-equal@^0.4.0:
version "0.4.0"
resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-0.4.0.tgz#c5bdd2f54ee093c04839d71ce2e4758a6890abc7"

vary@~1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
Expand Down Expand Up @@ -7079,6 +7120,18 @@ walker@~1.0.5:
dependencies:
makeerror "1.0.x"

warning@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"
dependencies:
loose-envify "^1.0.0"

warning@^4.0.1:
version "4.0.3"
resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
dependencies:
loose-envify "^1.0.0"

watch@~0.10.0:
version "0.10.0"
resolved "https://registry.yarnpkg.com/watch/-/watch-0.10.0.tgz#77798b2da0f9910d595f1ace5b0c2258521f21dc"
Expand Down