colors, style, tag editor

app/javascript/components/AppRating.vue

@@ -73,6 +73,8 @@
 
 <style lang="scss" scoped>
 
+  @import "../styles/variables";
+
   span.rating {
     position: relative;
     display: inline-block;
@@ -86,7 +88,7 @@
     }
 
     .filled-set {
-      color: gold;
+      color: $yellow;
       position: absolute;
       top: 0;
       left: 0;

app/javascript/components/AppTagEditor.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="tag-editor control">
-    <input type="text" class="input" v-model="tagText">
+    <input ref="input" type="text" class="input" :value="tagText" @input="inputHandler" @focus="getFocus" @blur="loseFocus">
     <div class="tags">
       <span v-for="t in value" :key="t" class="tag">{{t}}</span>
     </div>
@@ -17,37 +17,58 @@
       }
     },
 
-    // data() {
+    data() {
-    //   return {
+      return {
-    //     valueCopy: []
+        hasFocus: false
-    //   };
+      };
-    // },
+    },
 
     computed: {
-      tagText: {
+      tagText() {
-        get: function() {
+        return this.value.join(" ");
-          return this.value.join(" ");
-        },
-        set: function(str) {
-          const newTags = [...new Set(str.toString().split(/\s+/).filter(t => t.length > 0))];
-          if (!this.arraysEqual(newTags, this.value)) {
-            this.$emit("input", newTags);
-          }
-        }
       }
     },
 
     watch: {
-      // value(newVal) {
-      //   console.log(newVal);
-      //   if (!this.arraysEqual(newVal, this.valueCopy)) {
-      //     console.log("diff");
-      //     this.valueCopy = newVal;
-      //   }
-      // }
     },
 
     methods: {
+      inputHandler(el) {
+        let str = el.target.value;
+        this.checkInput(str);
+        this.$nextTick(() => {
+          el.target.value = str;
+        });
+      },
+
+      checkInput(str) {
+        if (this.hasFocus) {
+          const m = str.match(/\S\s+\S*$/);
+
+          if (m !== null) {
+            str = str.substring(0, m.index + 1);
+          } else {
+            str = "";
+          }
+        }
+
+        const newTags = [...new Set(str.toString().split(/\s+/).filter(t => t.length > 0))];
+
+        if (!this.arraysEqual(newTags, this.value)) {
+          this.$emit("input", newTags);
+        }
+      },
+
+      getFocus() {
+        this.hasFocus = true;
+      },
+
+      loseFocus() {
+        this.hasFocus = false;
+        this.checkInput(this.$refs.input.value);
+
+      },
+
       arraysEqual(arr1, arr2) {
         if(arr1.length !== arr2.length)
           return false;

app/javascript/components/RecipeEdit.vue

@@ -72,7 +72,7 @@
       <label class="label title is-4">Directions</label>
       <div class="control columns">
         <div class="column">
-          <textarea ref="step_text_area" class="textarea" v-model="recipe.step_text"></textarea>
+          <textarea ref="step_text_area" class="textarea directions-input" v-model="recipe.step_text"></textarea>
         </div>
         <div class="column">
           <div class="box content" v-html="stepPreview">
@@ -137,7 +137,7 @@
     },
 
     mounted() {
-      autosize(this.$refs.step_text_area);
+      //autosize(this.$refs.step_text_area);
     },
 
     components: {
@@ -151,4 +151,8 @@
   .bulk-input {
     height: 100%;
   }
+
+  .directions-input {
+    height: 100%;
+  }
 </style>

app/javascript/components/RecipeEditIngredientEditor.vue

@@ -2,9 +2,9 @@
   <div>
     <button type="button" class="button is-primary" @click="bulkEditIngredients">Bulk Edit</button>
     <app-modal :open="isBulkEditing" title="Edit Ingredients" @dismiss="cancelBulkEditing">
-      <div class="columns is-mobile">
+      <div class="columns">
         <div class="column is-half">
-          <textarea ref="bulkEditTextarea" class="textarea is-size-7 bulk-input" v-model="bulkEditText"></textarea>
+          <textarea ref="bulkEditTextarea" class="textarea is-size-7-mobile  bulk-input" v-model="bulkEditText"></textarea>
         </div>
         <div class="column is-half">
           <table class="table is-bordered is-narrow is-size-7">
@@ -200,4 +200,7 @@
 </script>
 
 <style lang="scss" scoped>
+
+
+
 </style>

app/javascript/components/TheRecipeList.vue

@@ -12,7 +12,7 @@
           <th v-for="h in tableHeader" :key="h.name">
             <a v-if="h.sort" href="#" @click.prevent="setSort(h.name)">
               {{h.label}}
-              <app-icon v-if="search.sortColumn === h.name" size="sm" :icon="search.sortDirection === 'desc' ? 'caret-bottom' : 'caret-top'"></app-icon>
+              <app-icon v-if="search.sortColumn === h.name" size="sm" :icon="search.sortDirection === 'asc' ? 'caret-bottom' : 'caret-top'"></app-icon>
             </a>
             <span v-else>{{h.label}}</span>
           </th>
@@ -50,9 +50,9 @@
           </td>
           <td>{{ r.yields }}</td>
           <td>{{ formatRecipeTime(r.total_time, r.active_time) }}</td>
-          <td><app-date-time :date-time="r.updated_at" :show-time="false"></app-date-time></td>
+          <td><app-date-time :date-time="r.created_at" :show-time="false"></app-date-time></td>
           <td>
-            <router-link v-if="isLoggedIn" :to="{name: 'edit_recipe', params: { id: r.id } }" class="button">
+            <router-link v-if="isLoggedIn" :to="{name: 'edit_recipe', params: { id: r.id } }" class="button is-primary">
               <app-icon icon="pencil" size="md"></app-icon>
             </router-link>
             <button v-if="isLoggedIn" type="button" class="button is-danger">
@@ -78,7 +78,7 @@
       return {
         recipeData: null,
         search: {
-          sortColumn: 'name',
+          sortColumn: 'created_at',
           sortDirection: 'desc',
           page: 1,
           per: 25,
@@ -133,7 +133,7 @@
           this.search.sortDirection = this.search.sortDirection === "desc" ? "asc" : "desc";
         } else {
           this.search.sortColumn = col;
-          this.search.sortDirection = "desc";
+          this.search.sortDirection = "asc";
         }
       },
 

app/javascript/styles/_variables.scss

@@ -1,7 +1,23 @@
 
+
+// coolors.co pallet
+$coolors-dark: rgba(29, 30, 24, 1);
+$coolors-blue: rgba(67, 127, 151, 1);
+$coolors-green: rgba(121, 167, 54, 1);
+$coolors-red: #ab4c34;
+$coolors-yellow: rgba(240, 162, 2, 1);
+
 // Bluma default overrides
-$green: #79A736;
+//$green: #79A736;
-$red: #d4424e;
+//$red: #d4424e;
+//$blue: #9c36a7;
+
+$green: $coolors-green;
+$blue: $coolors-blue;
+$red: $coolors-red;
+$yellow: $coolors-yellow;
+$dark: $coolors-dark;
+
 $primary: $green;
 
 $modal-content-width: 750px;