added readability.css

2020-02-17 14:04:58 +00:00 · 2020-02-17 14:04:58 +00:00 · aa21fba9b1
commit aa21fba9b1
parent ad6b4eff45
7 changed files with 445 additions and 348 deletions
--- a/list.js
+++ b/list.js
@ -11,21 +11,12 @@ const mailer = new UltraSES({

 const menu = [

-
   {
-  'name': 'steak',
-  'url': 'https://www.farmison.com/community/recipe/how-to-cook-your-beef-fillet-steak',
-  'hash': '35e244830bde1d967298fb9a585854f7'
-}, {
    'name': 'hazelnut crusted chicken',
    'url': 'http://www.marksdailyapple.com/hazelnut-crusted-chicken-with-stealth-coconut/#axzz29jTSubMo',
    'hash': 'baaf075a2384ff84ef3d9ce4eebfafff'
  }, { 'name': 'vegetable latkes', 'url': 'http://www.marksdailyapple.com/vegetable-latkes/#axzz29jTSubMo', 'hash': '11a043bfe06505f88b0bcfb59095ecab' },
   {
-  'name': 'beef stew',
-  'url': 'http://www.marksdailyapple.com/beef-stew-and-chicken-soup-in-35-minutes-or-less/#axzz29jTSubMo',
-  'hash': '45f5a2176ff5547585a5e562e0914776'
-}, {
    'name': 'sausage patties',
    'url': 'https://www.tasteslovely.com/homemade-paleo-breakfast-sausage-patties/',
    'hash': 'c6152fba4df0de77cb139488eaeb4690'
@ -37,7 +28,8 @@ const menu = [
    'name': 'primal texas chili',
    'url': 'http://www.marksdailyapple.com/primal-texas-chili/#axzz29jTSubMo',
    'hash': '319718f91f88fe96840cbdbf09bdb0b3'
-}, { 'name': 'moroccan burgers', 'url': 'https://sarahfragoso.com/moroccan-burgers-and-beet-salad/', 'hash': '0a4e01068e349791d6e9f2a0c9a80d98' }, {
+  },
+  {
    'name': 'paleo spaghetti',
    'url': 'https://paleoleap.com/paleo-spaghetti/',
    'hash': '59394666f0320c909c057fc535b99387'
@ -53,8 +45,8 @@ const menu = [
    'name': 'tender lemon parsley brisket',
    'url': 'http://www.marksdailyapple.com/tender-lemon-parsley-brisket/#axzz29jTSubMo',
    'hash': '5256dd240e04a62c5b002e5dc4234618'
-}
-,{
+  },
+  {
    'name': 'taco bowl crispy kale',
    'url': 'http://www.marksdailyapple.com/taco-bowl-with-crispy-kale-chips/#axzz29jTSubMo',
    'hash': 'fb3e4a7648a53e93490f6274f731e427'
@ -154,10 +146,6 @@ const menu = [
    'name': 'Melt In Your Mouth Slow Cooker Beef Brisket',
    'url': 'https://paleogrubs.com/beef-brisket-recipe',
    'hash': '92e81d0fc1d96b1669d0dcd98a0e355e'
-}, {
-  'name': 'Yummy Sweet Potato Gnocchi',
-  'url': 'https://paleogrubs.com/sweet-potato-gnocchi-recipe',
-  'hash': '9c1c921687e157a5670c6746bbceeee4'
  }, {
    'name': 'Simple Beef and Broccoli Stir Fry',
    'url': 'https://paleogrubs.com/beef-and-broccoli-recipe',
@ -235,10 +223,6 @@ const menu = [
    'name': 'Paleo Spicy Mustard Crockpot Chicken',
    'url': 'https://www.plaidandpaleo.com/2013/10/paleo-spicy-mustard-crockpot-chicken.html',
    'hash': 'a6c8493204d4a117f512f516e7ebbc38'
-}, {
-  'name': 'Creamy Paleo Chicken Skillet',
-  'url': 'http://paleogrubs.com/skillet-chicken-recipe',
-  'hash': '9b5602e594a5bba813b06835b3acef78'
  }, {
    'name': 'Sweet and Savory Moroccan Chicken',
    'url': 'http://paleogrubs.com/moroccan-chicken-recipe',
@ -255,10 +239,6 @@ const menu = [
    'name': 'Slow-Cooker Swedish Kalops Stew',
    'url': 'https://web.archive.org/web/20130501032143/http://www.mylivingnutrition.com/2013/04/11/slow-cooker-swedish-kalops-stew/',
    'hash': '866b670b9da5974e56b7a7759b406897'
-}, {
-  'name': 'Beef, Bacon and Rum Stew',
-  'url': 'http://domesticsoul.com/2011/12/beef-bacon-rum-stew-recipe.html',
-  'hash': '7601dee9f0ab54604b1afca6978bda53'
  }, {
    'name': 'Paleo Orange Cinnamon Beef Stew',
    'url': 'https://thehealthyfoodie.com/orange-cinnamon-beef-stew/',
@ -330,17 +310,7 @@ const menu = [
  }, { 'name': 'Slow cooked beef cheeks with pork & vanilla', 'url': 'https://irenamacri.com/recipes/slow-cooked-beef-cheeks/', 'hash': 'a39657743c78e7a1e5438243444af9b5' }];

 const soups = [
-  {
-    'name': 'chicken soup',
-    'url':
-  'http://www.marksdailyapple.com/beef-stew-and-chicken-soup-in-35-minutes-or-less/#axzz29jTSubMo',
-    'hash': 'f5970ca52c37f67cd1fda14edad7fdce'
-  },
-  {
-    'name': 'Tom Kha Gai -- Thai Coconut Soup',
-    'url': 'https://www.angsarap.net/2012/03/08/tom-kha-gai/',
-    'hash': '670819e255ec45b344ec1cc30ad436fe'
-  },
+
  {
    'name': 'Roasted Tomato Soup with Fresh Basil',
    'url': 'https://civilizedcaveman.com/recipes/soups/roasted-tomato-soup/',
@ -371,18 +341,7 @@ const soups = [
    'url': 'https://paleogrubs.com/slow-cooker-taco-soup',
    'hash': '926dcc730930547b3dabdc623613f8e9'
  },
-  {
-    'name': 'Chicken Soup - MD',
-    'url':
-  'https://paleogrubs.com/wp-content/uploads/2019/03/Homemade-Chicken-No-Noodle-Soup-1.jpg',
-    'hash': 'dc7eacaaf9b2d2fe6d16273d20f5d052'
-  },
-  {
-    'name': 'Ham Soup - MD',
-    'url':
-  'https://paleogrubs.com/wp-content/uploads/2019/03/Homemade-Chicken-No-Noodle-Soup-1.jpg',
-    'hash': 'ec2bc0d8622baeab237b9057a828933c'
-  },
+
  {
    'name': 'Chicken & Chorizo - MD',
    'url':
--- a/live/css/app.css
+++ b/live/css/app.css
@ -17,7 +17,7 @@

 body {
  font-family: 'Roboto', sans-serif;
-  font-size: 1rem;
+  font-size: 0.9rem;
  line-height: 1.6;
  background-color: #fff;
  color: #333;
@ -341,7 +341,7 @@ textarea {
  display: block;
  width: 100%;
  padding: 0.4rem;
-  font-size: 1.2rem;
+  font-size: 1.0rem;
  border: 1px solid #ccc;
 }

--- a/live/css/custom.css
+++ b/live/css/custom.css
@ -0,0 +1,73 @@
+.table-responsive {
+
+    display: block;
+    overflow-x: auto;
+    width: 100%;
+}
+
+.cardV2 {
+    border-radius: 4px;
+        background-color: #fff;
+        box-shadow: 0 0 4px 0 rgba(0,0,0,.14), 0 3px 4px 0 rgba(0,0,0,.12), 0 1px 5px 0 rgba(0,0,0,.2);
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
+        position: relative;
+        word-wrap: break-word;
+}
+
+table {
+    max-width: 100%;
+      width: 100%;
+    border: 0;
+        margin-bottom: 1rem;
+    border-collapse: collapse;
+}
+
+tr {
+    border-top: 1px solid #ccc;
+}
+
+tbody tr:nth-of-type(odd){
+    background-color: rgba(0,0,0,0.04);
+}
+
+tbody td {
+    border-top: 1px solid #e1e1e1;
+}
+
+.chicken {
+
+    background: #8e5241;
+    color: #fff;
+}
+
+.beef {
+
+    background: #d72414;
+    color: #fff;
+}
+
+.pork {
+    background: #EF96D9;
+    color: #fff;
+}
+
+.fish {
+
+    background: #005ba0;
+    color: #fff;
+}
+
+.egg {
+
+    background: #fbc003;
+    color: #fff;
+}
+
+.vegetable {
+
+
+    background: #00903e;
+    color: #fff;
+}
--- a/live/js/bundle.js
+++ b/live/js/bundle.js
@ -3397,7 +3397,9 @@ const axios = require('axios');
 class Recipe {

  constructor() {
-    this.url = 'https://menu.silvrtree.co.uk/recipes';
+    // this.url = 'https://menu.silvrtree.co.uk/recipes';
+
+    this.url = 'http://localhost:3000/recipes';
    this.listData = [];
    this.content = document.querySelector('#content');
    this.editor = document.querySelector('#editor');
@ -3408,6 +3410,33 @@ class Recipe {
    this.saveButton = document.querySelector('#save');
    this.deleteButton = document.querySelector('#delete');
    this.closeButton = document.querySelector('#close');
+
+    /*
+    <option value="1">Chicken</option>
+                    <option value="2">Beef</option>
+                    <option value="3">Pork</option>
+                    <option value="4">Fish</option>
+                    <option value="5">Egg</option>
+                    <option value="6">Vegetable</option>
+
+     */
+    this.meatTypeTpl = [
+      'nothing',
+      '<span class=\'badge chicken\'>Chicken</span>',
+      '<span class=\'badge beef\'>Beef</span>',
+      '<span class=\'badge pork\'>Pork</span>',
+      '<span class=\'badge fish\'>Fish</span>',
+      '<span class=\'badge egg\'>Egg</span>',
+      '<span class=\'badge vegetable\'>Vegetable</span>'
+
+    ];
+
+    this.mealTypeTpl = [
+      'nothing',
+      '',
+      '<span class=\'badge badge-light\'>Soup</span>'
+
+    ];
  }

  show(div) {
@ -3536,10 +3565,13 @@ class Recipe {

  renderList() {
    const list = this.listData.map((item) => {
-      return `<div class="dataRow" data-id="${item._id}" data-hash="${item.hash}">${item.name}</div>`;
+      console.log(item);
+
+      return `<tr><td class="dataRow" data-id="${item._id}" data-hash="${item.hash}">${item.name}</td> <td>${this.mealTypeTpl[item.mealtype]} ${this.meatTypeTpl[item.meat]}</td><td><button class="btn btn-sm btn-primary" data-id="e_${item._id}" data-hash="${item.hash}" type="button">Edit</button></td></tr>`;
    });

-    this.content.innerHTML = list.join('');
+    const tbody = list.join('');
+    this.content.innerHTML = `<div class="cardV2"><table><tbody>${tbody}</tbody></table></div>`;
  }

  getList() {
--- a/live/js/bundle.js.map
+++ b/live/js/bundle.js.map
--- a/live/recipes.html
+++ b/live/recipes.html
@ -4,6 +4,7 @@
    <meta charset="UTF-8">
    <title>Aida Recipes</title>
    <link href="/css/app.css" rel="stylesheet" type="text/css"/>
+    <link href="/css/custom.css" rel="stylesheet" type="text/css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
 </head>
 <body>
@ -22,7 +23,7 @@
    </div>

    <div id="editor" class="container" style="display:none ;">
-        <form autocomplete="off">
+        <form autocomplete="off" class="card">

            <label for="name">Name:</label>
            <input type="text" id="name" name="name" value="" required/>
--- a/src/v1/js/app.js
+++ b/src/v1/js/app.js
@ -4,7 +4,9 @@ const axios = require('axios');
 class Recipe {

  constructor() {
-    this.url = 'https://menu.silvrtree.co.uk/recipes';
+    // this.url = 'https://menu.silvrtree.co.uk/recipes';
+
+    this.url = 'http://localhost:3000/recipes';
    this.listData = [];
    this.content = document.querySelector('#content');
    this.editor = document.querySelector('#editor');
@ -15,6 +17,33 @@ class Recipe {
    this.saveButton = document.querySelector('#save');
    this.deleteButton = document.querySelector('#delete');
    this.closeButton = document.querySelector('#close');
+
+    /*
+    <option value="1">Chicken</option>
+                    <option value="2">Beef</option>
+                    <option value="3">Pork</option>
+                    <option value="4">Fish</option>
+                    <option value="5">Egg</option>
+                    <option value="6">Vegetable</option>
+
+     */
+    this.meatTypeTpl = [
+      'nothing',
+      '<span class=\'badge chicken\'>Chicken</span>',
+      '<span class=\'badge beef\'>Beef</span>',
+      '<span class=\'badge pork\'>Pork</span>',
+      '<span class=\'badge fish\'>Fish</span>',
+      '<span class=\'badge egg\'>Egg</span>',
+      '<span class=\'badge vegetable\'>Vegetable</span>'
+
+    ];
+
+    this.mealTypeTpl = [
+      'nothing',
+      '',
+      '<span class=\'badge badge-light\'>Soup</span>'
+
+    ];
  }

  show(div) {
@ -143,10 +172,13 @@ class Recipe {

  renderList() {
    const list = this.listData.map((item) => {
-      return `<div class="dataRow" data-id="${item._id}" data-hash="${item.hash}">${item.name}</div>`;
+      console.log(item);
+
+      return `<tr><td class="dataRow" data-id="${item._id}" data-hash="${item.hash}">${item.name}</td> <td>${this.mealTypeTpl[item.mealtype]} ${this.meatTypeTpl[item.meat]}</td><td><button class="btn btn-sm btn-primary" data-id="e_${item._id}" data-hash="${item.hash}" type="button">Edit</button></td></tr>`;
    });

-    this.content.innerHTML = list.join('');
+    const tbody = list.join('');
+    this.content.innerHTML = `<div class="cardV2"><table><tbody>${tbody}</tbody></table></div>`;
  }

  getList() {