add text description to index page

README.md

@@ -5,16 +5,34 @@
 ~~ add 'create category' component and get that working ~~
 ~~ add 'create item' component and get that working ~~
 ~~ add toggle function for 'done' ~~
-- prettify
+~~ prettify ~~
 ~~ add 'delete category' ~~
 ~~ add 'delete item' ~~
 ~~ add item view??? ~~
 - add edit item
 - limit authentication / ownership
 ~~ add 'done' option ~~
-- make super pretty
+~~ make super pretty ~~
 ~~ fix category_content route? ~~
-- add 'completed' viewstate/options
-- add 'shareable' url???
+~~ add 'completed' viewstate/options ~~
+~~ add 'shareable' url??? ~~
 - Verify that you cannot add an empty note
-- Verify uniqueness of Things
+~~ Verify uniqueness of Things ~~
+
+
+## FINAL TODOS
+(in order of importance)
+
+
+~~ Add 'What is Keepr' with a description to the index page ~~
+- Redeploy Ember and API
+- Finish ReadMe
+  - User Stories
+  - WireFrames
+  - ERDs
+- Confirm Ownership of Data
+- Restrict Empty Notes
+- Confirm uniqueness of Things
+- Any minor design tweaks
+- edit item
+- delete notes

app/category-content/route.js

@@ -20,6 +20,15 @@ export default Ember.Route.extend({
       .then(()=>{
         this.refresh();
       });
+    },
+    deleteContent(content) {
+      content.deleteRecord();
+      content.save()
+      .then(()=> {
+        history.back();
+      }).catch((err) => {
+        console.error(err);
+      });
     }
   }
 });

app/category-content/template.hbs

@@ -1,4 +1,5 @@
 {{thing-details content=model
                 createNote='createNote'
                 back="back"
-                toggleDone='toggleDone'}}
+                toggleDone='toggleDone'
+                deleteContent='deleteContent'}}

app/components/back-button/template.hbs

@@ -1 +1 @@
-<button class='btn btn-danger clearfix' {{action 'back' on="click"}}>Back</button>
+<button class='btn btn-primary clearfix' {{action 'back' on="click"}}>Back</button>

app/components/big-logo/component.js

@@ -1,11 +1,10 @@
 import Ember from 'ember';
 
 export default Ember.Component.extend({
-  isBordered: false,
+  isHidden: false,
   actions: {
     toggleTest() {
-      this.toggleProperty('isBordered');
+      this.toggleProperty('isHidden');
     }
   }
-
 });

app/components/big-logo/template.hbs

@@ -1,3 +1,17 @@
-<div {{action "toggleTest"}} class="logo-center {{if isBordered "bordered"}}">
-  <img class="main-image" src="assets/imgs/keepr-small.png" alt="" />
+<div {{action "toggleTest"}} class="logo-center {{if isHidden "transparent"}}">
+  <img class="main-image" src="assets/imgs/keepr-placeholder.png" alt="" />
+</div>
+
+<div class="{{unless isHidden "hidden"}}" style="margin-top: -40%; z-index: 100; width: 80%; margin-left: auto; margin-right: auto">
+  <p style="font-size: 24px; text-align: justify">
+    With Keepr, you can create lists of categories based on your own interests and
+    fill them up with whatever anything and everything you want to do, try, watch, taste, see, experience...<br/>
+        <br/>
+    Make notes about every item you add, and then cross them off when you've finally had a chance to give it a shot.
+  </p>
+
+  <br />
+
+  <p style="text-align: center; font-weight: 900; font-size: 30px;">Forget Forgetting. Keep track.</p>
+
 </div>

app/components/category-list/category-create/template.hbs

@@ -0,0 +1,5 @@
+<form {{action 'createCat' on='submit'}}>
+  {{input placeholder='New Category'
+          class='input-group form=control'
+          value=form.text}}
+</form>

app/components/little-logo/template.hbs

@@ -1,3 +1,3 @@
 <div class="logo-center">
-  <img class="small-image" src="assets/imgs/keepr.png" alt="" />
+  <img class="small-image" src="assets/imgs/keepr-small.png" alt="" />
 </div>

app/components/thing-details/component.js

@@ -12,6 +12,10 @@ export default Ember.Component.extend({
     back() {
       let done_status = this.get('content.done');
       this.sendAction('back', done_status);
+    },
+    deleteContent() {
+      let thing = this.get('content');
+      this.sendAction('deleteContent', thing);
     }
   }
 });

app/components/thing-details/template.hbs

@@ -19,7 +19,7 @@
 
 <div class="bottom-button-box clearfix">
   {{thing-details/done-button content=content toggleDone='toggleDone'}}
-  <button class="btn btn-danger" style="display: inline-block; float: right;" {{action 'deleteThing'}}>
+  <button class="btn btn-danger" style="display: inline-block; float: right;" {{action 'deleteContent'}}>
     Forget about it!
   </button>
 </div>

app/index/template.hbs

@@ -1 +1,3 @@
+<div class="flex">
 {{big-logo}}
+</div>

app/sign-in/template.hbs

@@ -1,3 +1,4 @@
+{{little-logo}}
 <h2>Sign In</h2>
 
 {{sign-in-form submit="signIn" reset="reset"}}

app/sign-up/template.hbs

@@ -1,2 +1,3 @@
+{{little-logo}}
 <h2>Sign Up</h2>
 {{sign-up-form submit="signUp"}}

app/styles/colors.scss

@@ -64,7 +64,7 @@ body {
   border-top: 1px solid lighten($dusty-purple, 50%);
 
   &:hover {
-    background-color: tint($mint-green, 95%)
+    background-color: tint($light-blue, 95%)
   }
 
   a {

app/styles/layout.scss

@@ -96,6 +96,10 @@ img {
 
 .thing-detail {
   cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+  }
 }
 
 .note-box {
@@ -144,3 +148,19 @@ img {
   overflow: auto;
   zoom: 1;
 }
+
+.hidden {
+  visibility: hidden;
+}
+
+.transparent {
+  opacity: 0.1;
+  z-index: -99;
+}
+
+.flex {
+  height: 80vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

app/styles/list.scss

@@ -5,4 +5,5 @@
 
 .item-completed {
   text-decoration: line-through;
+  color: grey;
 }