Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Merge pull request #1 from dmd-web-and-mobile/foodsUI 
food ui done, unpolished
  • Loading branch information
@bak11004
bak11004 committed Nov 22, 2016
2 parents 68efc6b + 746ef7f commit c5b6743
Show file tree
Hide file tree
Showing 9 changed files with 424 additions and 53 deletions.
98 changes: 97 additions & 1 deletion app/pages/food/style.styl
View file
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
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
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
@@ -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

0 comments on commit c5b6743

Please sign in to comment.