18-Run-Timer-Brandi Soucy

[pixiestix826]

Index Screen

• [x] Setup Models and Collections
  • [x] Create Run Model with defaults for time, date, and notes
  • [x] Set urlRoot on Run Model to point to tiny-lr server
  • [x] Create Run Collection with url pointed to tiny-lr server
• [x] Setup Routes Map in src/router.js
  • [x] Create Route for Index Page
  • [x] Create Route for New Run Page
  • [x] Create Route for Run Detail Page (should take a dynamic id)
  • [x] Create Route for Run Edit Page (should take a dynamic id)
  • [x] Complete: Commit & Push src directory
• [x] List Route
  • [x] Checkpoint: Create the Markup For The Index Page (RAW HTML)
  • [x] Markup: Nav Bar
  • [x] Markup: List of Runs
  • [x] Markup: Run Date
  • [x] Markup: New Run Button
  • [x] Complete: Commit & Push public/index.html
  • [x] Checkpoint: Style Index Page
  • [x] Style: Nav Bar
  • [x] Style: List of Runs
  • [x] Style: Run Date
  • [x] Style: New Run Button
  • [x] Complete: Commit & Push sass directory
  • [x] Checkpoint: Create View for Index List
  • [x] View should be represented by a ul
  • [x] View should render when collection is updated from the server data
  • [x] View should render a List Item view for every item in the collection
  • [x] Complete: Commit & Push src directory
  • [x] Checkpoint: Create View for List Item
  • [x] View should be represented by a li
  • [x] Use template string to render HTML for date and time to match mockup HTML
  • [x] View should rerender on model changes
  • [x] Complete: Commit & Push src directory
  • [x] Checkpoint: Show List View on Home Route
  • [x] Remove mockup HTML from index.html (Leave nav bar)
  • [x] Create shared collection instance across all routes
  • [x] Fetch collection when app loads
  • [x] Create new instance of List View with passed in collection
  • [x] Render List View to #outlet
  • [x] Complete: Commit & Push src directory
• [x] New Run Route
  • [x] Checkpoint: Create the Markup For The New Run (RAW HTML)
  • [x] Markup: Form
  • [x] Markup: Inputs
  • [x] Markup: Buttons
  • [x] Complete: Commit & Push public/index.html
  • [x] Checkpoint: Style Index Page
  • [x] Style: Form
  • [x] Style: Inputs
  • [x] Style: Buttons
  • [x] Complete: Commit & Push sass directory
  • [x] Checkpoint: Create View for New Run Form
  • [x] View should be represented by a form
  • [x] View should render when model is changed
  • [x] View should respond to submit event
  • [x] On submit
    • [x] Save Current Model
    • [x] After save, redirect to detail route for new model id
  • [x] Complete: Commit & Push src directory
  • [x] Checkpoint: Show New Run Form on new url
  • [x] Remove mockup HTML from index.html (Leave nav bar)
  • [x] Create new instance of Run model on new route
  • [x] Create new instance of New Run Form with passed in Run Model
  • [x] Render New Run Form to #outlet
  • [x] Complete: Commit & Push src directory

[pixiestix826]

https://github.com/pixiestix826/18-run-timer/pull/1

[rtablada]

On the run form, there are horizontal scroll bars because the inputs are adding extra margin to the left and right.

You can fix this by removing the margin from these inputs and instead putting the margin on the containing element (I think .new-run).

In the router, you are sending the collect of runs instead of allRuns and then check to see what is going on with the this.collection.add function in your form view because you are passing in this.listAllRuns which isn't defined in the View, instead, you want to add the current model that is edited or created using the form.

[rtablada]

I would use some sort of HTML element to group the cancel and save buttons on the form page. Then you can get rid of the position fixed so that the buttons will always stay below the text area:

[pixiestix826]

@rtablada made the recommended changes and run-timer is ready for review.

[rtablada]

@pixiestix826 I'm still seeing the CSS error above? I'm not sure if maybe you didn't push?

[pixiestix826]

@rtablada urgh, it wasn't pushed. my bad. it is now.