added styling to the form and search pages. having issue oissue of wr…

…apping header background image

app/assets/javascripts/what-input.js

@@ -0,0 +1,361 @@
+/**
+ * what-input - A global utility for tracking the current input method (mouse, keyboard or touch).
+ * @version v4.2.0
+ * @link https://github.com/ten1seven/what-input
+ * @license MIT
+ */
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory();
+	else if(typeof define === 'function' && define.amd)
+		define("whatInput", [], factory);
+	else if(typeof exports === 'object')
+		exports["whatInput"] = factory();
+	else
+		root["whatInput"] = factory();
+})(this, function() {
+return /******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, exports) {
+
+	'use strict';
+
+	module.exports = function () {
+	  /*
+	   * variables
+	   */
+
+	  // last used input type
+	  var currentInput = 'initial';
+
+	  // last used input intent
+	  var currentIntent = null;
+
+	  // cache document.documentElement
+	  var doc = document.documentElement;
+
+	  // form input types
+	  var formInputs = ['input', 'select', 'textarea'];
+
+	  var functionList = [];
+
+	  // list of modifier keys commonly used with the mouse and
+	  // can be safely ignored to prevent false keyboard detection
+	  var ignoreMap = [16, // shift
+	  17, // control
+	  18, // alt
+	  91, // Windows key / left Apple cmd
+	  93 // Windows menu / right Apple cmd
+	  ];
+
+	  // list of keys for which we change intent even for form inputs
+	  var changeIntentMap = [9 // tab
+	  ];
+
+	  // mapping of events to input types
+	  var inputMap = {
+	    keydown: 'keyboard',
+	    mousedown: 'mouse',
+	    mousemove: 'mouse',
+	    MSPointerDown: 'pointer',
+	    MSPointerMove: 'pointer',
+	    pointerdown: 'pointer',
+	    pointermove: 'pointer',
+	    touchstart: 'touch'
+	  };
+
+	  // array of all used input types
+	  var inputTypes = [];
+
+	  // boolean: true if touch buffer is active
+	  var isBuffering = false;
+
+	  // boolean: true if the page is being scrolled
+	  var isScrolling = false;
+
+	  // store current mouse position
+	  var mousePos = {
+	    x: null,
+	    y: null
+	  };
+
+	  // map of IE 10 pointer events
+	  var pointerMap = {
+	    2: 'touch',
+	    3: 'touch', // treat pen like touch
+	    4: 'mouse'
+	  };
+
+	  var supportsPassive = false;
+
+	  try {
+	    var opts = Object.defineProperty({}, 'passive', {
+	      get: function get() {
+	        supportsPassive = true;
+	      }
+	    });
+
+	    window.addEventListener('test', null, opts);
+	  } catch (e) {}
+
+	  /*
+	   * set up
+	   */
+
+	  var setUp = function setUp() {
+	    // add correct mouse wheel event mapping to `inputMap`
+	    inputMap[detectWheel()] = 'mouse';
+
+	    addListeners();
+	    setInput();
+	  };
+
+	  /*
+	   * events
+	   */
+
+	  var addListeners = function addListeners() {
+	    // `pointermove`, `MSPointerMove`, `mousemove` and mouse wheel event binding
+	    // can only demonstrate potential, but not actual, interaction
+	    // and are treated separately
+
+	    // pointer events (mouse, pen, touch)
+	    if (window.PointerEvent) {
+	      doc.addEventListener('pointerdown', updateInput);
+	      doc.addEventListener('pointermove', setIntent);
+	    } else if (window.MSPointerEvent) {
+	      doc.addEventListener('MSPointerDown', updateInput);
+	      doc.addEventListener('MSPointerMove', setIntent);
+	    } else {
+	      // mouse events
+	      doc.addEventListener('mousedown', updateInput);
+	      doc.addEventListener('mousemove', setIntent);
+
+	      // touch events
+	      if ('ontouchstart' in window) {
+	        doc.addEventListener('touchstart', touchBuffer);
+	        doc.addEventListener('touchend', touchBuffer);
+	      }
+	    }
+
+	    // mouse wheel
+	    doc.addEventListener(detectWheel(), setIntent, supportsPassive ? { passive: true } : false);
+
+	    // keyboard events
+	    doc.addEventListener('keydown', updateInput);
+	  };
+
+	  // checks conditions before updating new input
+	  var updateInput = function updateInput(event) {
+	    // only execute if the touch buffer timer isn't running
+	    if (!isBuffering) {
+	      var eventKey = event.which;
+	      var value = inputMap[event.type];
+	      if (value === 'pointer') value = pointerType(event);
+
+	      if (currentInput !== value || currentIntent !== value) {
+	        var activeElem = document.activeElement;
+	        var activeInput = false;
+	        var notFormInput = activeElem && activeElem.nodeName && formInputs.indexOf(activeElem.nodeName.toLowerCase()) === -1;
+
+	        if (notFormInput || changeIntentMap.indexOf(eventKey) !== -1) {
+	          activeInput = true;
+	        }
+
+	        if (value === 'touch' ||
+	        // ignore mouse modifier keys
+	        value === 'mouse' ||
+	        // don't switch if the current element is a form input
+	        value === 'keyboard' && eventKey && activeInput && ignoreMap.indexOf(eventKey) === -1) {
+	          // set the current and catch-all variable
+	          currentInput = currentIntent = value;
+
+	          setInput();
+	        }
+	      }
+	    }
+	  };
+
+	  // updates the doc and `inputTypes` array with new input
+	  var setInput = function setInput() {
+	    doc.setAttribute('data-whatinput', currentInput);
+	    doc.setAttribute('data-whatintent', currentInput);
+
+	    if (inputTypes.indexOf(currentInput) === -1) {
+	      inputTypes.push(currentInput);
+	      doc.className += ' whatinput-types-' + currentInput;
+	    }
+
+	    fireFunctions('input');
+	  };
+
+	  // updates input intent for `mousemove` and `pointermove`
+	  var setIntent = function setIntent(event) {
+	    // test to see if `mousemove` happened relative to the screen
+	    // to detect scrolling versus mousemove
+	    if (mousePos['x'] !== event.screenX || mousePos['y'] !== event.screenY) {
+	      isScrolling = false;
+
+	      mousePos['x'] = event.screenX;
+	      mousePos['y'] = event.screenY;
+	    } else {
+	      isScrolling = true;
+	    }
+
+	    // only execute if the touch buffer timer isn't running
+	    // or scrolling isn't happening
+	    if (!isBuffering && !isScrolling) {
+	      var value = inputMap[event.type];
+	      if (value === 'pointer') value = pointerType(event);
+
+	      if (currentIntent !== value) {
+	        currentIntent = value;
+
+	        doc.setAttribute('data-whatintent', currentIntent);
+
+	        fireFunctions('intent');
+	      }
+	    }
+	  };
+
+	  // buffers touch events because they frequently also fire mouse events
+	  var touchBuffer = function touchBuffer(event) {
+	    if (event.type === 'touchstart') {
+	      isBuffering = false;
+
+	      // set the current input
+	      updateInput(event);
+	    } else {
+	      isBuffering = true;
+	    }
+	  };
+
+	  var fireFunctions = function fireFunctions(type) {
+	    for (var i = 0, len = functionList.length; i < len; i++) {
+	      if (functionList[i].type === type) {
+	        functionList[i].function.call(undefined, currentIntent);
+	      }
+	    }
+	  };
+
+	  /*
+	   * utilities
+	   */
+
+	  var pointerType = function pointerType(event) {
+	    if (typeof event.pointerType === 'number') {
+	      return pointerMap[event.pointerType];
+	    } else {
+	      // treat pen like touch
+	      return event.pointerType === 'pen' ? 'touch' : event.pointerType;
+	    }
+	  };
+
+	  // detect version of mouse wheel event to use
+	  // via https://developer.mozilla.org/en-US/docs/Web/Events/wheel
+	  var detectWheel = function detectWheel() {
+	    var wheelType = void 0;
+
+	    // Modern browsers support "wheel"
+	    if ('onwheel' in document.createElement('div')) {
+	      wheelType = 'wheel';
+	    } else {
+	      // Webkit and IE support at least "mousewheel"
+	      // or assume that remaining browsers are older Firefox
+	      wheelType = document.onmousewheel !== undefined ? 'mousewheel' : 'DOMMouseScroll';
+	    }
+
+	    return wheelType;
+	  };
+
+	  /*
+	   * init
+	   */
+
+	  // don't start script unless browser cuts the mustard
+	  // (also passes if polyfills are used)
+	  if ('addEventListener' in window && Array.prototype.indexOf) {
+	    setUp();
+	  }
+
+	  /*
+	   * api
+	   */
+
+	  return {
+	    // returns string: the current input type
+	    // opt: 'loose'|'strict'
+	    // 'strict' (default): returns the same value as the `data-whatinput` attribute
+	    // 'loose': includes `data-whatintent` value if it's more current than `data-whatinput`
+	    ask: function ask(opt) {
+	      return opt === 'loose' ? currentIntent : currentInput;
+	    },
+
+	    // returns array: all the detected input types
+	    types: function types() {
+	      return inputTypes;
+	    },
+
+	    // overwrites ignored keys with provided array
+	    ignoreKeys: function ignoreKeys(arr) {
+	      ignoreMap = arr;
+	    },
+
+	    // attach functions to input and intent "events"
+	    // funct: function to fire on change
+	    // eventType: 'input'|'intent'
+	    onChange: function onChange(funct, eventType) {
+	      functionList.push({
+	        function: funct,
+	        type: eventType
+	      });
+	    }
+	  };
+	}();
+
+/***/ })
+/******/ ])
+});
+;

app/assets/stylesheets/application.css

@@ -13,3 +13,94 @@
  *= require_tree .
  *= require_self
  */
+
+ html {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+body {
+  position: relative;
+  margin: 0;
+  padding-bottom: 6rem;
+  min-height: 100%;
+  font-family: "Helvetica Neue", Arial, sans-serif;
+}
+
+.demo {
+  margin: 0 auto;
+  padding-top: 64px;
+  max-width: 640px;
+  width: 94%;
+}
+
+.demo h1 {
+  margin-top: 0;
+}
+
+/**
+ * Footer Styles
+ */
+
+.footer {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 1rem;
+  background-color: #efefef;
+  text-align: center;
+}
+
+/**********PAGE HEADER*******************/
+
+.page-header {
+   max-width: 100%;
+   /*background-color: #B2DFDB;*/
+   background-image: url(cutting-board-header.png);
+   /*border-bottom: 1px solid #EEEEEE;*/
+   margin-bottom: 10px;
+   padding: 25px 20px 10px 20px;
+
+}
+
+.page-header h2 {
+  text-align: center;
+  margin: 25px auto 40px auto;
+}
+
+.page-header h2 a {
+  color: white;
+  padding-right: 25px;
+  margin-right: 15px;
+}
+
+/*******SEARCH PAGE**********/
+/*******SEARCH PAGE**********/
+/*******SEARCH PAGE**********/
+
+.results-grid {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.recipe-photo-and-name {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.recipe-photo-and-name li {
+  list-style: none;
+  font-size: 1.5em;
+}
+
+.recipe-grid {
+
+}

app/controllers/recipes_controller.rb

@@ -1,5 +1,4 @@
 require_dependency '../../lib/edamam_api_wrapper'
-require_dependency '../../lib/recipe'
 # require 'pry'
 
 class RecipesController < ApplicationController
@@ -23,7 +22,7 @@ def search_by_page
     @keywords = params['keywords']
     if @keywords == ""
       redirect_to root_path
-      #add flash message maybe
+      flash[:failure] = "You did not enter any keywords. Please enter ingredient keywords into the search bar."
     else
       @number_of_recipes = EdamamApiWrapper.find_number_of_recipes(@keywords)
       from = params[:from]

app/views/layouts/application.html.erb

@@ -9,6 +9,20 @@
   </head>
 
   <body>
+    <% if flash[:failure] %>
+      <section class = "row status success">
+        <% flash.each do |name, message| %>
+          <h3><%= message %></h3>
+        <% end %>
+      </section>
+    <% end  %>
+
     <%= yield %>
+
+  <footer class="footer">
+       <h4>
+         Powered by <%= link_to "Edamam", "https://www.edamam.com/" %>
+       </h4>
+     </footer>
   </body>
 </html>

app/views/recipes/_form.html.erb

@@ -1,6 +1,17 @@
-<h1>Muncher</h1>
-
-<%= form_tag recipes_search_path, :method => "get" do %>
-  <%= text_field_tag :keywords%>
-  <%= submit_tag "Search"%>
-<% end %>
+<header class = "page-header row">
+  <h2 class = "grid-x">
+    <div class = "small-12 cell">
+      <%= link_to("Muncher", root_path) %>
+    </div>
+  </h2>
+  <nav class = "grid-x">
+    <div class="small-4 cell"></div>
+    <div class="small-4">
+      <%= form_tag recipes_search_path, :method => "get" do %>
+      <div class = "small-2 cell"><%= text_field_tag :keywords%><div>
+      <div class = "small-2 cell"><%= submit_tag "Search", :class => "button"%><div>
+    </div>
+    <div class="small-4 cell"></div>
+    <% end %>
+  </nav>
+</header>

app/views/recipes/search.html.erb

@@ -1,21 +1,26 @@
+<section class= "small-12 large-8 cell">
+
 <%= render partial: "form" %>
+</section>
 
-<h2>Params:</h2>
-<%= params %>
+<!-- <h2>Params:</h2>
+<%= params %> -->
 
 <% unless params[:keywords] == nil %>
   <h1>Results for <%= @keywords %> </h1>
 <%end%>
 
-<h2>Number of Recipes: <%=@number_of_recipes%> </h2>
+<h3>Number of Recipes: <%=@number_of_recipes%> </h3>
 
-<%if @number_of_recipes != 0 && @number_of_recipes != nil%>
-  <% @recipes.each do |recipe| %>
-    <ul>
-      <li><%=image_tag recipe.image%></li>
-      <li><%=link_to(recipe.label, recipe_show_path(recipe.find_recipe_id))%></li>
-    </ul>
+<section class="results-grid">
+  <%if @number_of_recipes != 0 && @number_of_recipes != nil%>
+    <% @recipes.each do |recipe| %>
+      <ul class="recipe-photo-and-name">
+        <li><%=image_tag recipe.image%></li>
+        <li><%=link_to(recipe.label, recipe_show_path(recipe.find_recipe_id))%></li>
+      </ul>
   <%end%>
+</section>
 
   <%if @number_of_recipes > 100%>
     <%10.times do |page| %>

lib/edamam_api_wrapper.rb

@@ -1,7 +1,6 @@
 # require 'httparty'
 # require 'awesome_print'
 # require 'pry'
-require_dependency '../../lib/edamam_api_wrapper'
 require_dependency '../../lib/recipe'
 
 class EdamamApiWrapper