Merge pull request #46 from GSG-G7/fix-css-readme

Fix css readme

README.md

@@ -6,6 +6,9 @@
 ## **Why did we built our app ?**
   Database is built to have many lists, each list will have many items that is added by user, using handlebars and postgres to display and control this data.
 
+## **Schema digram :**
+ ![alt text](public/assets/sql.png)
+
 ## **How our progress was during the building of our app ??**
 
  - Have node server and a database using express
@@ -26,3 +29,6 @@
  - Display data to the user.
 
 ## **User Journey :**
+ - The user add the list.
+ - The user can add the item with details (title, content and user name) in specific list
+ - The user can view all lists with its items and tasks.

public/css/style.css

@@ -8,17 +8,17 @@
 
 body {
   background-color: #000;
-  background-image: url('../assets/background.jpeg');
+  background-image: linear-gradient(#1e2731,  rgba(0, 0, 0, 0.5) ), url('../assets/banner.jpg');
   background-size: cover;
   background-position: top center;
 }
 
 .home__header {
   font-family: 'Pacifico', cursive;
-  font-size: 1.7rem;
+  font-size: 2rem;
   padding: 2rem;
   text-align: center;
-  color: #0f0f0f;
+  color: #CD5A91;
 }
 
 .home__form {
@@ -37,10 +37,10 @@ body {
 }
 
 .home__main__input::placeholder {
-  font-size: 20px;
+  font-size: 18px;
   opacity: 0.5;
   letter-spacing: 2px;
-  color: red;
+  color:#CD5A91;
 }
 
 .home__main__add {
@@ -50,11 +50,11 @@ body {
   padding: 0.9rem 2rem;
   margin: 0.4rem 0.3rem;
   border-radius: 11px;
-  color: #000000;
+  color: #ffffff;
   text-decoration: none;
   font-weight: 700;
   text-transform: capitalize;
-  background: #df496f;
+  background: #CD5A91;
 }
 
 .home__results {
@@ -68,24 +68,25 @@ body {
   width: 30%;
   margin: 1rem;
   text-align: center;
-  border: 2px solid green;
+  border: 2px solid #808080;
   border-radius: 10px;
 }
 .list__title {
-  border-radius: 10px 10px 0 0;
-  background: gray;
+  background: #CD5A91;
   text-align: center;
   color: #ffffff;
   font-family: sans-serif;
   text-transform: capitalize;
   width: 100%;
+  border-radius: 9px 9px 0 0;
+  padding: 0.6rem;
 }
 .list__form {
   width: 80%;
   border: none;
   border-radius: 5px;
   text-align: center;
-  margin: 2px;
+  margin: 15px auto;
 }
 .list__form input {
   width: 100%;
@@ -97,15 +98,29 @@ body {
   text-align: center;
   text-transform: capitalize;
 }
+.item__add{
+  cursor: pointer;
+  background: #AE4D7B;
+  color: #ffffff;
+}
 .list__item {
-  border: 1px solid black;
   display: block;
-  width: 100%;
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
+  border-top: 1px solid #2f2e2e;
+  border-radius: 5px; 
+  background: #DFE1E6;
+  color: #000000;
+  margin: 5px;
+  padding: 6px 8px 2px;
+  opacity: 0.7;
 }
-.home__main {
-  min-height: 67.6vh;
+.item__pcontent{
+  text-align: left;
+  padding: 3px;
+}
+.item__username{
+  font-weight: bold;
+  color: #AE4D7B;
+  text-align: right;
 }
 .footer {
   width: 100%;

src/controllers/postData.js

@@ -12,10 +12,7 @@ const adduser = name =>
   users
     .find(name)
     .then(id => {
-      // -1 or something else
       if (id === -1) return users.insert(name).then(() => users.find(name));
-      // .then(console.log);
-      // return id;
     })
     .catch(err => err);
 

src/models/config/db_build.sql

@@ -20,4 +20,15 @@ CREATE TABLE items (
   user_id INTEGER REFERENCES users(id)
 );
 
+INSERT INTO lists (name) VALUES ('Project 1'),('Project 2'),('Project 3');
+INSERT INTO users (name) VALUES ('Mai'),('Mohammed'),('Imad'),('Fadi');
+INSERT INTO items (name, content, list_id, user_id) 
+VALUES ('Item 1', 'Description text Description textDescription text', 1, 1),
+('Item 2', 'Description text Description textDescription text ', 1, 2),
+('Item 3', 'Description text Description textDescription text', 1, 3),
+('Item 4', 'Description text Description textDescription text', 1, 3),
+('Item 22', 'Description text Description textDescription text', 2, 4),
+('Item 44', 'Description text Description textDescription text', 3, 4),
+('Item 4', 'Description text Description textDescription text', 2, 1);
+
 COMMIT;

src/views/500.hbs

@@ -1,4 +1,4 @@
 <h1 class="error-header">{{title}}</h1>
-<img class="error-img" src="https://image.freepik.com/free-vector/glitch-error-404-page_23-2148105404.jpg" alt=""
+<img class="error-img" src="https://blog.hubspot.com/hubfs/HTTP-500-Internal-Server-Error.jpg" alt=""
   srcset="">
 {{err}}

src/views/home.hbs

@@ -25,8 +25,8 @@
             {{#each this.list}}
                 <div class="list__item">
                     <h2 class="item__title">{{this.title}}</h2>
-                    <p class="item__content">{{this.content}}</p>
-                    <span class="item__user">{{this.username}}</span>
+                    <p class="item__pcontent">{{this.content}}</p>
+                    <p class="item__username">{{this.username}}</p>
                 </div>
             {{/each}}
 

src/views/partials/footer.hbs

@@ -1,4 +1,4 @@
 
 <footer class="footer">
-    <p class="footer__rights"> Barka © 2019 All Rights Reserved</p>
+    <p class="footer__rights"> Baraka © 2019 All Rights Reserved</p>
 </footer>