Merge pull request #14 from alyssahursh/styles

Styles
alyssahursh · Oct 6, 2016 · cb0922b · cb0922b
2 parents 479e424 + a4d4945
commit cb0922b
Show file tree

Hide file tree

Showing 11 changed files with 208 additions and 80 deletions.
diff --git a/app/assets/images/Market-logo-black.png b/app/assets/images/Market-logo-black.png
diff --git a/app/assets/images/Market-logo-white.png b/app/assets/images/Market-logo-white.png
diff --git a/app/assets/images/Vendor-logo-black.png b/app/assets/images/Vendor-logo-black.png
diff --git a/app/assets/images/Vendor-logo-white.png b/app/assets/images/Vendor-logo-white.png
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -86,7 +86,7 @@ img.banner-image {
   width: 100vw;
 }
 
-form {
+div.search form {
   background: rgba(255,255,255,0.7);
   border: solid #d8d8d8 1px;
   position: fixed;
@@ -96,15 +96,15 @@ form {
   border: transparent;
 }
 
-input {
+div.search input {
   display: inline-block;
   height: 1.75vw;
   font: normal normal 1.5vw/1 'Lato', sans-serif;
   padding: 1.25vw;
   width: 38vw;
 }
 
-input.submit {
+div.search input.search-button {
   float: right;
   text-align: center;
   width: 7vw;
@@ -122,3 +122,108 @@ input.submit {
   color: #585858;
   font-weight: 300;
 }
+
+section.body {
+  padding: 10vw 0 0 0;
+  margin: 0 20vw 0 20vw;
+}
+
+div.see-all {
+  margin: 80vh 40vw;
+  position: fixed;
+  text-align: center;
+  width: 20vw;
+}
+
+div.see-all h5{
+  color: #FFF;
+  text-shadow: 2px 2px #404040;
+  font: normal 300 1.5vw/1 'Lato', sans-serif;
+  letter-spacing: .15em;
+}
+
+
+div.see-all ul {
+  position: relative;
+}
+
+div.see-all ul li {
+  background-color: #FFF;
+  border-radius: 100%;
+  height: 3vw;
+  opacity: .7;
+  text-align: center;
+  width: 3vw;
+
+}
+
+
+
+h3 {
+  display: inline-block;
+  font: normal normal 1.75vw/1.75vw 'Josefin Sans', sans-serif;
+  letter-spacing: .15em;
+  text-transform: uppercase
+}
+
+article.entity-display img {
+  border-radius: .5vw;
+  display: inline-block;
+  height: auto;
+  width: 15vw;
+}
+
+article.entity-display img.vendor {
+  background-color: #61964f;
+}
+
+article.entity-display img.market {
+  background-color: #71416a;
+}
+
+
+article.entity-display ul {
+  vertical-align: top;
+  display: inline-block;
+  padding: 0 0 0 2vw;
+}
+
+article.entity-display ul,
+article.entity-display ul.address-block {
+  width: 40vw;
+}
+/*
+article.entity-display ul li:nth-of-type(2n) {
+  font: normal 300 1vw/3 'Lato', sans-serif;
+  text-transform: uppercase;
+}*/
+
+h4 {
+  font: normal 300 1vw/1 'Lato', sans-serif;
+  letter-spacing: .15em;
+  padding: .5vw 0 3vw 0;
+  text-transform: uppercase;
+}
+
+article.entity-display ul.address-block li:first-of-type {
+  margin: 3vw 0 0 0;
+}
+
+article.entity-display ul.address-block li {
+  font: normal 300 1vw/1 'Lato', sans-serif;
+  letter-spacing: .15em;
+  padding: .5vw 0 0 0;
+  text-transform: uppercase;
+}
+
+article.entity-display button {
+  background-color: red;
+  width: 10vw;
+  height: 5vw;
+}
+
+div.list-break {
+  border-bottom: solid #d8d8d8 1px;
+  height: 3vw;
+  margin: 0 0 3vw 0;
+}
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -2,16 +2,16 @@
 <html>
 <head>
   <title>Farmers Markets</title>
-  <link href="https://fonts.googleapis.com/css?family=Lato:300,400|News+Cycle|Playfair+Display" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Lato:300,400|Josefin+Sans|Playfair+Display" rel="stylesheet">
   <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
   <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
   <%= csrf_meta_tags %>
 </head>
 
 <nav>
-  <p> <%= link_to_unless_current('Farmers Markets', 'home') %> </p>
+  <p><a href="/">Farmers Market</a></p>
   <ul>
-    <li><%= link_to('Admin', 'admin') %></li><li><%= link_to('Market', 'market') %></li><li><%= link_to('Vendor', 'vendor') %></li>
+    <li><a href='/admin'>Admin</a></li><li><a href="/market">Market</a></li><li><a href='/vendor'>Vendor</a></li>
   </ul>
 </nav>
 

diff --git a/app/views/markets/index.html.erb b/app/views/markets/index.html.erb
@@ -1,16 +1,15 @@
-<h1>Market#index</h1>
-<article>
-  <ol>
+<section class="body">
+
     <% @markets.each do |market| %>
-      <h4><%= market.id %></h4>
-      <li><%= link_to market.name, {controller: 'markets', action: 'show', id: market.id}, method: :get %></li>
-      <ul>
-        <li><%= market.address %></li>
-        <li><%= market.city %></li>
-        <li><%= market.county %></li>
-        <li><%= market.state %></li>
-        <li><%= market.zip %></li>
-      </ul>
+      <article class="entity-display">
+        <img src="../assets/Market-logo-white.png" alt="vendor placeholder logo" class="market"/>
+        <ul class="address-block">
+          <h3><%= link_to market.name, {action: 'show', id: market}, method: :get %></li></h3>
+          <li><%= market.address %></li>
+          <li><%= "#{market.city}, #{market.state} #{market.zip}" %></li>
+        </ul>
+      </article>
+      <div class="list-break"></div>
     <% end %>
-  </ol>
-</article>
+
+</section>
diff --git a/app/views/markets/show.html.erb b/app/views/markets/show.html.erb
@@ -1,24 +1,27 @@
-<h1>Markets#show</h1>
-<article>
-  <ul>
-    <li><%= @market.name %></li>
-    <li><%= @market.address %></li>
-    <li><%= @market.city %></li>
-    <li><%= @market.county %></li>
-    <li><%= @market.state %></li>
-    <li><%= @market.zip %></li>
-  </ul>
-</article>
+<section class="body">
 
-<article>
-  <!-- need to someway set market_id to default with current market? -->
-  <%= button_to "Add Vendor", {controller: 'vendors', action: 'new'}, method: :get %>
-  <ul>
-    <% @market.vendors.each do |vendor| %>
-      <li>
-        <%= link_to vendor.name, {controller: 'vendors', action: 'show', id: vendor.id}, method: :get %>
-        <%= button_to "Edit", {controller: 'vendors', action: 'edit', id: vendor.id}, method: :get %>
-      </li>
-    <% end %>
-  </ul>
-</article>
+  <article class="entity-display">
+    <img src="../assets/Market-logo-white.png" alt="vendor placeholder logo" class="market"/>
+    <ul class="address-block">
+      <h3><%= @market.name %></li></h3>
+      <li><%= @market.address %></li>
+      <li><%= "#{@market.city}, #{@market.state} #{@market.zip}" %></li>
+    </ul>
+    <%= button_to "Edit Profile", {controller: 'markets', action: 'edit', id: @market.id }, method: :get %>
+  </article>
+
+
+  <article>
+    <!-- need to someway set market_id to default with current market? -->
+    <%= button_to "Add Vendor", {controller: 'vendors', action: 'new'}, method: :get %>
+    <ul>
+      <% @market.vendors.each do |vendor| %>
+        <li>
+          <%= link_to vendor.name, {controller: 'vendors', action: 'show', id: vendor.id}, method: :get %>
+          <%= button_to "Edit", {controller: 'vendors', action: 'edit', id: vendor.id}, method: :get %>
+        </li>
+      <% end %>
+    </ul>
+  </article>
+
+</section>
diff --git a/app/views/pages/home.html.erb b/app/views/pages/home.html.erb
@@ -1,6 +1,21 @@
-<%= form_tag '/search', method: :get do %>
-  <%= text_field_tag :search, params[:search], placeholder: 'Search for Markets' %>
-  <%= submit_tag "search", class: "submit" %>
-<% end %>
+<div class="search">
+  <%= form_tag '/search', method: :get do %>
+    <%= text_field_tag :search, params[:search], placeholder: 'Search for Markets' %>
+    <%= submit_tag "search", class: "search-button" %>
+  <% end %>
+</div>
+
+<div class="see-all">
+  <h5>— OR —</h5>
+  <h5>See All</h5>
+  <ul>
+    <li>
+      <a href="/markets">M</a>
+      <a href="/vendors">V</a>
+      <a href="/products">P</a>
+    </li>
+  </ul>
+</div>
+
 
 <img src="assets/food-board.jpg" alt="Salmon meal on wooden platter" class="banner-image"/>
diff --git a/app/views/vendors/index.html.erb b/app/views/vendors/index.html.erb
@@ -1,12 +1,15 @@
-<h1>Vendors#index</h1>
-<article>
-  <ul>
+<section class="body">
+
     <% @vendors.each do |vendor| %>
-      <h4><%= vendor.id %></h4>
-      <li><%= link_to vendor.name, {controller: 'vendors', action: 'show', id: vendor.id}, method: :get %></li>
-      <li><%= vendor.description %></li>
-      <li><%= vendor.num_of_employees %></li>
-      <li><%= vendor.market_id %></li>
+      <article class="entity-display">
+        <img src="../assets/Vendor-logo-white.png" alt="vendor placeholder logo" class="vendor"/>
+        <ul>
+          <h3><%= vendor.name %></h3>
+          <h4>at <%= link_to vendor.market.name, {controller: 'markets', action: 'show', id: vendor.market_id}, method: :get %></h4>
+          <p>Description: <%= vendor.description %></p>
+        </ul>
+      </article>
+      <div class="list-break"></div>
     <% end %>
-  </ul>
-</article>
+
+</section>
diff --git a/app/views/vendors/show.html.erb b/app/views/vendors/show.html.erb
@@ -1,25 +1,28 @@
-<h1>Vendors#show</h1>
-<article>
-  <ul>
-    <li><%= @vendor.name %></li>
-    <li><%= @vendor.description %></li>
-    <li><%= @vendor.num_of_employees %></li>
-    <li><%= @vendor.market_id %></li>
-  </ul>
-</article>
+<section class="body">
 
-<article>
-  <!-- need to someway set vendor_id to default with current vendor? -->
-  <%= button_to "Add Product", {controller: 'products', action: 'new', id: @vendor.id}, method: :get %>
-  <ul>
-    <% @vendor.products.each do |product| %>
-      <li>
-        <%= product.name %>
-        <%= button_to "Edit", {controller: 'products', action: 'edit', id: product.id}, method: :get %>
-      </li>
-    <% end %>
-  </ul>
-</article>
+  <article class="entity-display">
+    <img src="../assets/Vendor-logo-white.png" alt="vendor placeholder logo" class="vendor"/>
+    <ul>
+      <h3><%= @vendor.name %></h3>
+      <h4>at <%= link_to @vendor.market.name, {controller: 'markets', action: 'show', id: @vendor.market_id}, method: :get %></h4>
+      <p>Description: <%= @vendor.description %></p>
+    </ul>
+    <%= button_to "Edit Profile", {controller: 'vendors', action: 'edit', id: @vendor.id }, method: :get %>
+  </article>
 
-<!-- update sales index method to only pull sales with certain vendor id? -->
-<%= button_to "See Sales", {controller: 'sales', action: 'index'}, method: :get %>
+  <article>
+    <!-- need to someway set vendor_id to default with current vendor? -->
+    <%= button_to "Add Product", {controller: 'products', action: 'new', id: @vendor.id }, method: :get %>
+    <ul>
+      <% @vendor.products.each do |product| %>
+        <li>
+          <%= product.name %><%= button_to "Edit", {controller: 'products', action: 'edit', id: product.id}, method: :get, class:"submit" %>
+        </li>
+      <% end %>
+    </ul>
+  </article>
+
+  <!-- update sales index method to only pull sales with certain vendor id? -->
+  <%= button_to "See Sales", {controller: 'sales', action: 'index'}, method: :get %>
+
+</section>