b7s9 / coloring-book Goto Github PK

What

create initial style guide (each design team member will create their own style tile)

• colors
• typography
• logo
• app name
• descriptive words

What

Create bulleted list of project must haves and nice to haves in readme.md

Why

For quick reference for developers and to track progress in creating those features

what

The first goal is to store data of each coloring page. The second goal is read the data as needed to call up a coloring book page.

store svg data

• Create a new file in src/js/ called coloringBookData.js
• Create a javascript object named coloringBookData
• Within coloringBookData, create a property called path referencing the relative path of the directory containing all the coloring pages (relative from this file)
• Within coloringBookData, create an array called coloringPageData
• Within coloringPageData create a js object
  (one for each svg) each containing:
  • filename: name of the svg file, not its path
  • author: author of the work

e.g.

let data = {
  name: 'value',
  arrayName: [
    { propertyName: '1.txt', anotherProperty: 'value'},
    { propertyName: '2.txt', anotherProperty: 'value'} // etc.
  ]

}

what

• track changes to svg on user paint
• undo step
• redo step

why

bonus feature for extra credit

what

• Create an html page coloring-page.html
• Using URI hash(?) dynamically pull in svg

why

required for final

Describe the bug

The text-clip property appears not to work on webkit

To Reproduce

Steps to reproduce the behavior:

1. Go to a coloring page
2. Scroll down to Tools section

Expected behavior

Gradient should clip favicon "text"

Screenshots, Video

Additional context

Add any other context about the problem here.

(optional) Client Info:

• Device: iphone 8
• Screen dimensions:
• OS:
• OS Version:
• Browser: safari

• implement css/html from figma file, UI mockups
  • home view
  • library/gallery view
  • coloring book image view
  • help view
  • case study view

what

• create a static html page with an svg image of a simple shape
• detect click in the whitespace area of the svg image
• the area should fill with an arbitrary hex value.

As a bonus (time permitting), find a way to define/trace whitespace areas in more complex svg images.

note

to call the svg, you can either embed directly into html, use <object> or call the svg as an image file, depending on how you get it to work

why

required feature

what

• take all of the provided pdfs and convert them to svg files
• clean and standardize filenames. Perhaps in ascending numeric filenames like 1.svg, 2.svg?
• pull request svg files against master branch

additional scope (time permitting)

• Create an array of javascript objects containing references to the svg filenames, and associating each file with its author
• create a proof of concept html page that can use this array to render a given svg and author on a page

why

to achieve the required site functionality, we will need files in svg format, and we'll need a way to access them

Tried:
https://cloudconvert.com/
and
https://www.youtube.com/watch?v=r6tE_8KsxI4

what

• Everyone install node LTS version
• write and run the hello world script from the command line, but make it say your name, instead of phil's
• post a screenshot here as a comment of your output
• run node -v and npm -v, post output here as a comment

If you're spending more than 5-10 minutes on this, feel free to ask for help

why

So we can verify everyone is running a similar version of node, and that it works on their system. We will be using npm for this project starting this week

this issue depends on devin's color-picker branch being merged.

what

• move relevant files into src/
• copy relevant code into main.css and main.js
• use the color picker to get the hex value to paint with (instead of the textbox)
• see if you can refactor the js to use loops rather than hard coding everything like it is right now (we can chat about this)

what

• Prepare svg files so JS can detect the proper paths which should/shouldn't be filled by the user
• Update svg paint functionality to work in this way

why

We need svg painting to work on all images

what

For the full radial color picker, use this npm package or if that one doesn't work, use this one

why

• it's gonna be a lot easier than coding it from scratch
• it's in the spirit of the project

What

create final compiled style guide from meeting notes and all 3 guides. Please clearly list values/names for easy developer reference.

colors

• body color
• link color
• button color
• bg color

typography

• heading font
• body font

Other

• site name
• logo

In addition to the style tile, please also create a stylesheet containing css variables for each color and type rule eg.

  --main-blue: #0476EE;
  --link-color: #839493;
  --body-font: "Signika", sans-serif;
  --heading-font: "comic sans", script; /*or whatever it is */

As a bonus, (time permitting), acquire a .woff version of the fonts and create a proof of concept page with html elements referencing all of these variables

What

Create a section in contributing.md based on Phil's recommendations for good commit messages

Why

Otherwise it will be the wild west in terms of how people name commits and PRs. consistency will make project management much easier

Describe the bug

A clear and concise description of what the bug is.

To Reproduce

Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior

A clear and concise description of what you expected to happen.

Screenshots, Video

If applicable, add screenshots to help explain your problem.

Additional context

Add any other context about the problem here.

Client Info:

• Device: [e.g. iPhone6 or laptop]
• Screen dimensions:
• OS:
• OS Version:
• Browser:

what

create initial files, html areas, etc. plan out where things will live

html wireframing

• nav
  • logo
  • github link
  • about/instructions
• color picker
• canvas
• image picker

other

• create hello world css and js files included in the html page

What

A guide with pictures on how to setup github notifications and which are useful

Why

If we don't take control of our notifications, we will be inundated with emails every time something happens on this repository

edit: Completed wiki page https://github.com/b7s9/coloring-book/wiki/Control-Your-Notifications

what

• Using final style tile, create file src/style/variables.css containing our site's default variables
• @include 'variables.css' in the main.css stylesheet
• in main.css assign some of these defaults in the "rules" area
  • all text defaults to body color
  • all text defaults to body font
  • all links default to link color
  • all headings default to heading font
  • body background is bg color
  • etc.

for instance

  --primary: #FF0;
  --secondary: #0F0FFF;
  --body-color: #0476EE;
  --link-color: var(--primary);
  --body-font: "Signika", sans-serif;
  --heading-font: "comic sans", script; /*or whatever it is */

why

so we never have to update a site-wide style rule in multiple places.

• Create Favicon
• Add Favicon to HTML pages

• Finish adding css vars
• make navs consistent across pages
• remove welcome text from gallery view
• add borders to the thumbnails in gallery view
• Add authors to gallery view
• Remove "coloring pages" page (putting gallery view on index page instead)
• show that "Github Repository" is an external link

7/19:

• use icon.png, delete original directory
• change title to span.display
• fix spacing of elements on firefox
• fix .item thumbnail
• try switching color selector + tools
• fix position css on .tools
• get rid of border on coloring pg.

What

Every time a new Pull Request is created or updated, and for every Release, a notification will be sent to our discord server

Why

This will help keep everyone informed of the status of the app on the origin repository, and the status of other pull requests they're not assigned to

what

For the library/gallery view, we'll need images to represent each coloring book page. Create thumbnails at the ratio used in Mikayla's mockups (if the exact ratio isn't specified for each layout, ask).

aspect ratio: 3:4 ?

• sized for all layouts (width= 450px)

why

pulling in a png/jpg representing each coloring page may be less costly to the browser than pulling in the entire svg. check differences in filesize of the thumbnail png/jpg vs. svg and report some examples

what

• Create remote server
• set up deploy script

currently the links are broken since they are in title case

what

• create new file color-picker.html (use inline <script> tag for js for this task)
• create a row of 3 boxes filled with colors from main color scheme
• create a new row with a fourth box representing the currently selected color (you decide what the default color should be)
• below each box, create a text label for the hex value it is representing

when a user clicks on a box,

• a site variable should change to a given hex value that box is representing
• the fourth box changes fill color and its label changes to the selected hex value

As a bonus feature (time permitting), create an additional fifth box which remembers the previously selected color, and allows users to select it.

why

required feature

This issue depends on #32 and can't be completed until that is done

what

Display coloring book page using data

• create a new file in src/ called gallery.html
• inside coloringBookData.js generate a grid of cards for each SVG coloring page
• when a card is clicked on, go to index.html but show that svg? or create html pages representing each svg file

also set tags, assignees, and tasks (if applicable)

unintended consequence of moving the ultra color picker button down to the bottom line

Add gulp or webpack config