Skip to content

Commit

Permalink
Mobile fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@sjoerdvanderhoorn
sjoerdvanderhoorn committed Aug 19, 2022
1 parent cd0a8ad commit 17ec579
Show file tree
Hide file tree
Showing 5 changed files with 66 additions and 55 deletions.
8 changes: 4 additions & 4 deletions components/administration.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ Vue.component('administration', {
<div class="col s12 offset-m1">
<h4>Categories</h4>
</div>
<div class="col s6 offset-m1">
<div class="col s12 m6 offset-m1">
<table class="striped">
<thead>
<tr>
Expand Down Expand Up @@ -61,7 +61,7 @@ Vue.component('administration', {
<div class="col s12 offset-m1">
<h4>Unit of measure</h4>
</div>
<div class="col s6 offset-m1">
<div class="col s12 m6 offset-m1">
<table class="striped">
<thead>
<tr>
Expand Down Expand Up @@ -94,7 +94,7 @@ Vue.component('administration', {
<div class="col s12 offset-m1">
<h4>Temperature</h4>
</div>
<div class="col s6 offset-m1">
<div class="col s12 m6 offset-m1">
<table class="striped">
<thead>
<tr>
Expand All @@ -119,7 +119,7 @@ Vue.component('administration', {
<div class="col s12 offset-m1">
<h4>Time</h4>
</div>
<div class="col s6 offset-m1">
<div class="col s12 m6 offset-m1">
<table class="striped">
<thead>
<tr>
Expand Down
8 changes: 4 additions & 4 deletions components/recipe.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@ Vue.component('recipe', {
<div class="row" style="margin-bottom: 0;">
<div class="col s12 offset-m1">
<div class="row">
<div class="col s8">
<div class="col s12 m8">
<h4>Title</h4>
<input id="title" type="text" v-model="recipe.title" @change="updateId()" placeholder="The greatest dish on earth...!" class="validate">
<h4>Description</h4>
<textarea id="description" v-model="recipe.description" placeholder="Simply the best..." class="materialize-textarea"></textarea>
</div>
<div class="col s4">
<div class="col s12 m4">
<a class="dropdown-trigger btn" :href="'#/recipe/' + recipe.id" v-show="!$root.isOnMealplan(recipe)" :data-target="'people_' + recipe.id">Add to meal plan</a>
<ul :id="'people_' + recipe.id" class='dropdown-content'>
<li><a :href="'#/recipe/' + recipe.id" @click="$root.addToMealPlan(recipe, 1)">One person</a></li>
Expand All @@ -33,11 +33,11 @@ Vue.component('recipe', {
<div class="row">
<div class="col s12 offset-m1">
<div class="row">
<div class="col s8">
<div class="col s12 m8">
<h4>Directions</h4>
<div contenteditable="true" @input="edit" v-html="formattedText"></div>
</div>
<div class="col s4">
<div class="col s12 m4">
<h4>Ingredients</h4>
<select v-model="recipe.for">
<option value="" disabled selected>Select how many people this recipe is for</option>
Expand Down
33 changes: 18 additions & 15 deletions components/shoppinglist.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,29 +23,32 @@ Vue.component('shoppinglist', {
</tr>
</thead>
<tbody>
<tr v-for="ingredient in category.ingredients">
<tr v-for="ingredient in category.ingredients" class="">
<td width="40">
<label>
<input v-model="ingredient.checked" type="checkbox" @change="toggleIngredient(ingredient)" /><span></span>
</label>
</td>
<td width="50" :class="{'right-align': true, strike:ingredient.checked}">
<td width="40" :class="{'right-align': true, strike:ingredient.checked}">
{{ingredient.quantity}}
<td width="100" :class="{strike:ingredient.checked}">
{{ingredient.unit}}
</td>
<td :class="{strike:ingredient.checked}">
{{ingredient.product}}
<td width="40" :class="{strike:ingredient.checked}">
{{ingredient.unit}}
</td>
<td width="200" class="right-align">
<a href="#/shoppinglist/" @click="removeIngredient(ingredient)" title="Remove ingredient" v-if="isAdhocIngredient(ingredient)" class="waves-effect waves-teal btn-flat"><i class="material-icons">undo</i></a>
<a href="#/shoppinglist/" @click="changeQuantity(ingredient)" title="Change quantity" class="waves-effect waves-teal btn-flat"><i class="material-icons">edit</i></a>
<a href="#/shoppinglist/" title="Categorize" class="dropdown-trigger waves-effect waves-teal btn-flat" :data-target="'category_' + ingredient.product"><i class="material-icons">category</i></a>
<ul :id="'category_' + ingredient.product" class='dropdown-content'>
<li v-for="category in categories"><a href="#/shoppinglist/" @click="changeCategory(ingredient, category)">{{category.name}}</a></li>
<li class="divider" tabindex="-1"></li>
<li><a href="#/shoppinglist/" @click="newCategory(ingredient)">New category</a></li>
</ul>
<td>
<span :class="{strike:ingredient.checked}">
{{ingredient.product}}
</span>
<span class="right" style="height: 10px;">
<i class="material-icons pointer" @click="removeIngredient(ingredient)" title="Remove ingredient" v-if="isAdhocIngredient(ingredient)">undo</i>
<i class="material-icons pointer" @click="changeQuantity(ingredient)" title="Change quantity">edit</i>
<i class="material-icons pointer dropdown-trigger" title="Categorize" :data-target="'category_' + ingredient.product">category</i>
<ul :id="'category_' + ingredient.product" class='dropdown-content'>
<li v-for="category in categories"><a href="#/shoppinglist/" @click="changeCategory(ingredient, category)">{{category.name}}</a></li>
<li class="divider" tabindex="-1"></li>
<li><a href="#/shoppinglist/" @click="newCategory(ingredient)">New category</a></li>
</ul>
</span>
</td>
</tr>
</tbody>
Expand Down
4 changes: 4 additions & 0 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,4 +33,8 @@ div[contenteditable="true"] .recipe.temperature {
.strike {
text-decoration: line-through;
color: rgba(158, 158, 158);
}

.pointer {
cursor: pointer;
}
68 changes: 36 additions & 32 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,13 +39,13 @@ <h4 class="light">Manage all your recipes in one app.</h4>
<p style="text-align: justify;">
Let Recepturer help you organize all your recipes in one place. You can add, edit and delete recipes, and create meal plans. Simply type your recipe and all ingredients will be listed as you go.
</p>
<p style="text-align: justify; ">
<p style="text-align: justify;">
Set up your shopping list and tick off all the ingredients you need. Easily order your shopping list according to your favorite groceries store.
</p>
</div>
<div class="section center-align">
<button class="btn-large waves-effect waves-light " v-on:click="dropboxConnect() "><i class="material-icons left ">import_contacts</i>Open with Dropbox</button>
<button class="btn-large waves-effect waves-light teal lighten-3 " v-on:click="loadDemo() "><i class="material-icons left ">science</i>Demo</button>
<button class="btn-large waves-effect waves-light" v-on:click="dropboxConnect()"><i class="material-icons left">import_contacts</i>Open with Dropbox</button>
<button class="btn-large waves-effect waves-light teal lighten-3" v-on:click="loadDemo()"><i class="material-icons left">science</i>Demo</button>
</div>
<div class="section">
<p>
Expand Down Expand Up @@ -88,23 +88,23 @@ <h4 class="header">Features</h4>
</div>

<!-- App -->
<header v-cloak v-if="page!='start' ">
<a data-target="nav-mobile " class="top-nav sidenav-trigger btn-floating btn-large teal lighten-3 waves-effect waves-light hide-on-large-only " style="margin: 15px; ">
<i class="material-icons ">menu</i>
<header v-cloak v-if="page!='start'">
<a data-target="nav-mobile" class="top-nav sidenav-trigger btn-floating btn-large teal lighten-3 waves-effect waves-light hide-on-large-only" style="margin: 15px;">
<i class="material-icons">menu</i>
</a>
<ul id="nav-mobile " class="sidenav sidenav-fixed ">
<li class="center-align " style="padding-top: 20px; ">
<ul id="nav-mobile" class="sidenav sidenav-fixed">
<li class="center-align" style="padding-top: 20px;">
<img src="resources/faviconio-logo/r.svg" />
<img src="resources/faviconio-logo/recepturer.svg" width="80% " />
<img src="resources/faviconio-logo/recepturer.svg" width="80%" />
</li>
<li>
<div class="divider "></div>
<div class="divider"></div>
</li>
<li class="bold sidenav-close " :class="{active: page=='recipes' || page=='recipe' } ">
<a :href=" '#/recipes/' " class="waves-effect waves-teal "><i class="material-icons ">blender</i>Recipes <span class="new badge " data-badge-caption=" ">{{this.recipes.length}}</span></a>
<li class="bold sidenav-close" :class="{active: page=='recipes' || page=='recipe' }">
<a :href=" '#/recipes/'" class="waves-effect waves-teal"><i class="material-icons">blender</i>Recipes <span class="new badge" data-badge-caption="">{{this.recipes.length}}</span></a>
</li>
<li class="bold sidenav-close " :class="{active: page=='mealplan' } ">
<a :href=" '#/mealplan/' " class="waves-effect waves-teal "><i class="material-icons ">menu_book</i>Meal plan <span class="new badge " data-badge-caption=" " v-if="this.mealplan.length> 0">{{this.mealplan.length}}</span>
<li class="bold sidenav-close" :class="{active: page=='mealplan' }">
<a :href=" '#/mealplan/'" class="waves-effect waves-teal"><i class="material-icons">menu_book</i>Meal plan <span class="new badge" data-badge-caption="" v-if="this.mealplan.length> 0">{{this.mealplan.length}}</span>
</a>
</li>
<li class="bold sidenav-close" :class="{active: page=='shoppinglist'}">
Expand All @@ -117,7 +117,7 @@ <h4 class="header">Features</h4>
<a :href="'#/administration/'" class="waves-effect waves-teal"><i class="material-icons">tune</i>Administration</a>
</li>
<li>
<a class="subheader">{{ storage.location=='dropbox' ? "Dropbox" : "Storage" }}</a>
<a class="subheader">{{ storage.location=='dropbox' ?"Dropbox" :"Storage" }}</a>
</li>
<li class="bold sidenav-close" v-if="storage.location=='dropbox'">
<a @click="dropboxSave()" v-if="!storage.outstandingChanges" class="waves-effect waves-teal grey-text"><i class="material-icons">published_with_changes</i>Up to date</a>
Expand All @@ -139,28 +139,32 @@ <h4 class="header">Features</h4>
</ul>
</header>

<main v-if="page=='recipes'">
<recipes :recipes="recipes" />
</main>
<main class="container">

<main v-if="page=='recipe'">
<recipe :recipe="recipe" />
</main>
<main v-if="page=='recipes'">
<recipes :recipes="recipes" />
</main>

<main v-if="page=='mealplan'">
<mealplan :mealplan="mealplan" />
</main>
<main v-if="page=='recipe'">
<recipe :recipe="recipe" />
</main>

<main v-if="page=='shoppinglist'">
<shoppinglist :mealplan="mealplan" :shoppinglist="shoppinglist" :categories="categories" />
</main>
<main v-if="page=='mealplan'">
<mealplan :mealplan="mealplan" />
</main>

<main v-if="page=='administration'">
<administration :settings="settings" />
</main>
<main v-if="page=='shoppinglist'">
<shoppinglist :mealplan="mealplan" :shoppinglist="shoppinglist" :categories="categories" />
</main>

<main v-if="page=='administration'">
<administration :settings="settings" />
</main>

<main v-if="page=='debug'">
<debug :recipes="recipes" />
</main>

<main v-if="page=='debug'">
<debug :recipes="recipes" />
</main>

</div>
Expand Down

0 comments on commit 17ec579

Please sign in to comment.