Skip to content
Jump to bottom

food ui done, unpolished #1

Merged
merged 1 commit into from Nov 22, 2016
Merged

food ui done, unpolished #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
98 changes: 97 additions & 1 deletion app/pages/food/style.styl
View file
Open in desktop
Expand Up @@ -8,6 +8,10 @@
color: #888
transform: scale(.9)
transition: all .2s
.input-field label.active
transform: translateY(-120%)
.input-field.col label
left: 0

.food-filter
display: flex
Expand Down Expand Up @@ -42,4 +46,96 @@
padding-left: 26px

.foods
padding-top: 3em
display: flex
padding: 3em
flex-wrap: wrap

.card-panel
flex-grow: 1
display: flex
padding: 0
margin: .5em
align-items: center
cursor: pointer
transition: all .2s
&:hover
transform: scale(.95)
.health
background-color: green
width: 3em
min-width: @width
min-height: @width
height: 100%
display: flex
align-items: center
justify-content: center
i
color: white
h5
font-size: 1.4em
margin: .3em .7em

// "Add new food" button
&.add
background-color: blue
color: white
+above(500px)
max-width: 17em
i
font-size: 2.5em
.health
background-color: alpha(black, .27)



.food-crud
font-size: 1.1em
padding: 1em
border: 1px solid lightgray
my-box-shadow()
background: white
[type="radio"]:not(:checked)+label, [type="radio"]:checked+label
padding-left: 1.7em
padding-right: 1em
.grade
margin-bottom: 2em
h4
margin: 5px 0 25px 0
p
font-size: 1.1em
font-weight: 500
color: #BBB
margin-bottom: 5px
a.btn
width: 48%
.orange
float: right

.nutrition
margin-bottom: 1.5em
td
padding: .5em 5px
td:first-child
font-weight: 500
width: 50%



.modal_ .editContent
display: none
.modal_.editMode .editContent
display: inline

.modal_
align-items: center
justify-content: center
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
160 changes: 117 additions & 43 deletions app/pages/food/view.html
View file
Open in desktop
Expand Up @@ -60,52 +60,126 @@



<div class="foods">

<div class="card-panel add">
<div class="health">
<i class="material-icons">add</i>
</div>
<h5>Add new food</h5>
</div>

<div class="card-panel edit" ng-repeat="n in loop">
<div class="health">
<i class="material-icons">favorite</i>
</div>
<h5>{{n}}</h5>
</div>

</div>



<div class="modal_" id="foodModal">
<div class="food-crud">
<h4>jquery ctrl</h4>

<form action="#">

<div class="input-field">
<input id="food_name" type="text" placeholder="Bananas" class="validate">
<label for="food_name">Name</label>
</div>

<select>
<option value="" disabled selected>Category</option>
<option value="1">Fruit</option>
<option value="2">Veggie</option>
<option value="3">Fattie</option>
</select>

<p>Grade</p>
<div class="grade">
<input name="group1" type="radio" id="test1" checked/>
<label for="test1">Auto</label>

<input name="group1" type="radio" id="test2" disabled/>
<label for="test2">Green</label>

<input name="group1" type="radio" id="test3" disabled/>
<label for="test3">Yellow</label>

<input name="group1" type="radio" id="test4" disabled/>
<label for="test4">Red</label>
</div>

<span class="editContent">
<p>Nutrition Facts</p>
<table class="nutrition">
<tbody>
<tr>
<td>Sugar</td>
<td>$0.87</td>
</tr>
<tr>
<td>Alan</td>
<td>$3.76</td>
</tr>
<tr>
<td>Jonathan</td>
<td>$7.00</td>
</tr>
</tbody>
</table>
</span>

<a class="waves-effect waves-light btn blue">Create</a>
<a class="waves-effect waves-light btn orange">Cancel</a>

</form>

<div class="foods container row">
<!-- <a class="btn" onClick="expandAll();"><i class="material-icons left">fullscreen</i>Expand All</a>
<a class="btn" onClick="collapseAll();"><i class="material-icons left">fullscreen_exit</i>Collapse All</a> -->
<ul class="collapsible col s5" data-collapsible="expandable">
<li>
<div class="collapsible-header"><a><i class="material-icons">filter_drama</i>Apple</a></div>
<div class="collapsible-body"><p>First Things First</p></div>
</li>
<li>
<div class="collapsible-header"><a><i class="material-icons">filter_drama</i>Mike's Hard Lemonade</a></div>
<div class="collapsible-body"><p>First Things First</p></div>
</li>
<li>
<div class="collapsible-header"><a><i class="material-icons">filter_drama</i>Absolut Vodka</a></div>
<div class="collapsible-body"><p>First Things First</p></div>
</li>
</ul>
<ul class="collapsible col s5 push-s1" data-collapsible="expandable">
<li>
<div class="collapsible-header"><a><i class="material-icons">filter_drama</i>Newman's Own Oil &amp; Vinegar Dressing</a></div>
<div class="collapsible-body"><p>First Things First</p></div>
</li>
<li>
<div class="collapsible-header"><a><i class="material-icons">filter_drama</i>Tater Tots</a></div>
<div class="collapsible-body"><p>First Things First</p></div>
</li>
<li>
<div class="collapsible-header"><a><i class="material-icons">filter_drama</i>Twinkies</a></div>
<div class="collapsible-body"><p>First Things First</p></div>
</li>
</ul>
</div>
</div>



<script>
$(".collapsible").collapsible({accordion: false});
// function expandAll(){
// $(".collapsible-header").addClass("active");
// $(".collapsible").collapsible({accordion: false});
// }
// function collapseAll(){
// $(".collapsible-header").removeClass(function(){
// return "active";
// });
// $(".collapsible").collapsible({accordion: true});
// $(".collapsible").collapsible({accordion: false});
// }
$('input.autocomplete').autocomplete({
data: {
"Apple": null,
"Orange": null,
"Some Category": 'http://placehold.it/250x250'
}
});

$('.food-crud select').material_select();

$(function(){

var modal = $('.modal_');

// Open the modal
$(".foods .card-panel.add").on('click', function() {
modal.css('display', 'flex');
modal.removeClass('editMode');
$('.food-crud h4').html('Add New Food');
});
$(".foods .card-panel.edit").on('click', function() {
modal.css('display', 'flex');
modal.addClass('editMode');
$('.food-crud h4').html('Bananas');
});

// Close the modal
$('.food-crud .btn').on('click', function() {
modal.css('display', 'none');
});

// When the user clicks anywhere outside of the modal, close it
$(window).on('click', function(e) {
if ($(e.target).is('.modal_'))
modal.css('display', 'none');
});
});

</script>
10 changes: 6 additions & 4 deletions app/root/_header.kit
View file
Open in desktop
Expand Up @@ -13,14 +13,16 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.min.js"></script>
<!-- Materialize -->
<!-- <script src="https://cdn.rawgit.com/Dogfalo/materialize/master/dist/js/materialize.min.js"></script> -->
<!-- Materialize
https://cdn.rawgit.com/Dogfalo/materialize/master/dist/js/materialize.min.js
https://cdnjs.cloudflare.com/ajax/libs/angular-materialize/0.2.1/angular-materialize.min.js -->
<script src="assets/js/materialize.js"></script>
<script src="assets/js/tabs.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-materialize/0.2.1/angular-materialize.min.js"></script> -->

<script src="assets/js/flowtype.js"></script>

<!-- App -->
<script src="assets/js/bundle.js"></script>
<title>{{page.title}} | F2E</title>
<title ng-bind="title"></title>
</head>
<body>
8 changes: 8 additions & 0 deletions app/root/root-ctrl.js
View file
Open in desktop
@@ -1,9 +1,17 @@
app.controller('root', ['$scope', '$location', function ($scope, $location) {

$scope.$watch('page', function () {
$scope.title = $scope.page.title + ' | F2E';
}, true);

$scope.page = {
'title' : 'Root',
'id' : 'root',
'blackNav' : false
};

$scope.loop = ['Apple Pie','Bananas','Peas','Newman\'s Own Oil and Vinegar Dressing','Cucumber Salad','Kraft Macaroni and Cheese','Some food','Some more food','Some junk food','Some healthy food'];

$scope.go = function ( path ) {
$location.path( path );
};
Expand Down