jshaver/scouttracker
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Updated the styling a little bit

Browse source
This commit is contained in:
John Shaver 2017-07-22 16:31:14 -07:00
parent e868bc0d0b
commit 438842b8bf
5 changed files with 104 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
README.md
View file

@ -2,7 +2,13 @@ I created this project because a) I always wished there was a better way to
track the progress of my CubScouts in getting their ranks and b) I wanted to
learn graphql with Apollo.
Right now there is a [demo](https://bobjohnbob.github.io/scouttracker/build/?id=cj54d5gqs6f4e0156y7x8tj0f) (unfortunately subscriptions with graph.cool seem to be somewhat unreliable, so it may not connect/update properly) where you can tick off achievements for a single scout's wolf adventures. I've mostly built this project to learn graphql so I started there, there-fore it's not pretty (yet) but that is what I'll start working on next. Currently the demo is subscribing to live updates from a graph.cool generated API to know which achievements are checked off.
Right now there is a
[demo](https://bobjohnbob.github.io/scouttracker/build/?id=cj54d5gqs6f4e0156y7x8tj0f)
(unfortunately subscriptions with graph.cool seem to be somewhat unreliable, so
it may not connect/update properly) where you can tick off achievements for a
single scout's wolf adventures. Currently the demo is subscribing to live updates
from a graph.cool generated API to know which achievements are checked off.
This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
This project was bootstrapped with [Create React
App](https://github.com/facebookincubator/create-react-app).

40
package-lock.json generated
View file

@ -778,6 +778,11 @@
"resolved": "https://registry.npmjs.org/braces/-/braces-1.8.5.tgz",
"integrity": "sha1-uneWLhLf+WnWt2cR6RS3N4V79qc="
},
"brcast": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/brcast/-/brcast-2.0.1.tgz",
"integrity": "sha512-Hm6AjEjr2hg5P/+tfAi7IARUW6mRNweni7ezt7vvOF53qn4++rdJoPsg8dDGS7KcwT2cRDucuFNMRYi3nkCD6Q=="
},
"brorand": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
@ -1901,6 +1906,11 @@
"resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
"integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc="
},
"fast-memoize": {
"version": "2.2.7",
"resolved": "https://registry.npmjs.org/fast-memoize/-/fast-memoize-2.2.7.tgz",
"integrity": "sha1-8UXFwiA5zt8KHU/2ylkq0CaEcMo="
},
"fastparse": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.1.tgz",
@ -2618,6 +2628,16 @@
}
}
},
"glamor": {
"version": "2.20.30",
"resolved": "https://registry.npmjs.org/glamor/-/glamor-2.20.30.tgz",
"integrity": "sha512-loENOwfYk24QXdr4Ms3NUFl8cQN5SGJbIUCSnURx5NESb9/VdeNjH3r9XWzpmtTNr1iywcIfsgXdaesbHS7Dzg=="
},
"glamorous": {
"version": "3.23.5",
"resolved": "https://registry.npmjs.org/glamorous/-/glamorous-3.23.5.tgz",
"integrity": "sha1-SfYTop9kze6AlIZ5xm281AhOX9U="
},
"glob": {
"version": "7.1.2",
"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
@ -2815,6 +2835,11 @@
"resolved": "https://registry.npmjs.org/html-comment-regex/-/html-comment-regex-1.1.1.tgz",
"integrity": "sha1-ZouTd26q5V696POtRkswekljYl4="
},
"html-element-attributes": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/html-element-attributes/-/html-element-attributes-1.3.0.tgz",
"integrity": "sha1-8G69/OIt6XnbggICZcrFQfsX1Pw="
},
"html-encoding-sniffer": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-1.0.1.tgz",
@ -2830,6 +2855,11 @@
"resolved": "https://registry.npmjs.org/html-minifier/-/html-minifier-3.5.2.tgz",
"integrity": "sha1-1zvD/0SJQkCIGM5gm/P7DqfvTrc="
},
"html-tag-names": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/html-tag-names/-/html-tag-names-1.1.2.tgz",
"integrity": "sha1-9lFolkxanIJnXv2ogoddyyqHXCI="
},
"html-webpack-plugin": {
"version": "2.29.0",
"resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-2.29.0.tgz",
@ -5123,6 +5153,11 @@
"resolved": "https://registry.npmjs.org/react-event-listener/-/react-event-listener-0.4.5.tgz",
"integrity": "sha1-4+iVoJcM8U7o+JAROvaBl6vz0LE="
},
"react-html-attributes": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/react-html-attributes/-/react-html-attributes-1.4.1.tgz",
"integrity": "sha1-l7XscQ2miDNZjIvm+JrENiFoQKU="
},
"react-router": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-4.1.1.tgz",
@ -5754,6 +5789,11 @@
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.1.0.tgz",
"integrity": "sha1-kswUuz2tiSjKVlbDPhmhnyCvXHo="
},
"svg-tag-names": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/svg-tag-names/-/svg-tag-names-1.1.1.tgz",
"integrity": "sha1-lkGynvcQJe4JTHBD983efZn71Qo="
},
"svgo": {
"version": "0.7.2",
"resolved": "https://registry.npmjs.org/svgo/-/svgo-0.7.2.tgz",

3
package.json
View file

@ -4,7 +4,10 @@
"private": true,
"homepage": "https://bobjohnbob.github.io/scouttracker/build",
"dependencies": {
"glamor": "^2.20.30",
"glamorous": "^3.23.5",
"material-ui": "^0.18.6",
"prop-types": "^15.5.10",
"react": "^15.6.1",
"react-apollo": "^1.4.2",
"react-dom": "^15.6.1",

56
src/components/Achievement.js
View file

@ -1,5 +1,11 @@
import React from 'react';
import { gql, graphql } from 'react-apollo';
import { Div } from 'glamorous';
const blue = "#00BCD4";
const size = 2.6;
const size_rem = `${size}rem`;
const pad = "0.5rem";
export default({
id,
@ -12,9 +18,28 @@ export default({
mutate
}) => {
if(completed) {
return <div className='completed-achievement'>
{number}{letter}
</div>;
return <Div
fontSize={`${size/2}rem`}
border={`0.2rem solid ${blue}`}
display="inline-flex"
color="white"
background-color={blue}
width={size_rem}
height={size_rem}
border-radius={size_rem}
margin={pad}
cursor="pointer"
>
<Div
display="flex"
width={size_rem}
height={size_rem}
justify-content="center"
align-items="center"
>
<Div display="inline-flex">{number}{letter}</Div>
</Div>
</Div>
} else {
const variables = {
@ -23,8 +48,27 @@ export default({
date: (new Date(Date.now())).toISOString()
};
return <button onClick={() => mutate({variables})} className='achievement'>
{number}{letter}
</button>;
return <Div
onClick={()=>{mutate({variables})}}
fontSize={`${size/2}rem`}
border={`0.15rem solid ${blue}`}
display="inline-flex"
color={blue}
width={size_rem}
height={size_rem}
border-radius={size_rem}
margin={pad}
cursor="pointer"
>
<Div
display="flex"
width={size_rem}
height={size_rem}
justify-content="center"
align-items="center"
>
<Div display="inline-flex">{number}{letter}</Div>
</Div>
</Div>
}
};

5
src/components/AchievementList.js
View file

@ -1,6 +1,7 @@
import React from 'react';
import Achievement from './Achievement.js';
import CompleteAchievement from '../containers/CompleteAchievement.js';
import {Div} from 'glamorous';
const AchievementButton = CompleteAchievement(Achievement);
@ -43,9 +44,9 @@ export default class AchievementList extends React.Component {
return <AchievementButton {...props} />
});
return <div>
return <Div disply="flex" padding="0.5rem">
{list}
</div>
</Div>
}
componentWillUnmount() {