dan/parsley
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

colors, style, tag editor

Browse Source
This commit is contained in:
Dan Elbert 2018-04-04 19:46:02 -05:00
parent d81818f2d4
commit 63a566d697
6 changed files with 81 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/javascript/components/AppRating.vue
View File

@ -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;

65
app/javascript/components/AppTagEditor.vue
View File

@ -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() {
// return {
// valueCopy: []
// };
// },
data() {
return {
hasFocus: false
};
},
computed: {
tagText: {
get: function() {
tagText() {
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;

8
app/javascript/components/RecipeEdit.vue
View File

@ -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>

7
app/javascript/components/RecipeEditIngredientEditor.vue
View File

@ -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>

10
app/javascript/components/TheRecipeList.vue
View File

@ -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";
}
},

20
app/javascript/styles/_variables.scss
View File

@ -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;
$red: #d4424e;
//$green: #79A736;
//$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;