Adds content-desktop class to hide map on mobile (codefordurham#171)

Author: jnjosh

eatsmart/static/css/site.css

@@ -322,14 +322,14 @@ tr.violation-detail td {
     text-align: center;
     margin-top: 15px;
   }
-}
-
 
+}
 
 .main-map {
   height: 300px;
   margin-bottom: 10px;
 }
+
 @media screen and (max-width: 768px) {
     .main-map {
         height: 150px;
@@ -346,3 +346,25 @@ tr.violation-detail td {
   padding-right: 13px;
 
 }
+
+/* Content Desktop controls what is visible based on typical 
+   content size of iPad portrait, otherwise the content is 
+   hidden
+   */
+
+   @media screen and (min-width: 768px) {
+ 
+    .content-desktop {
+      display: block;
+    }
+  
+  }
+  
+  @media screen and (min-width: 0px) and (max-width: 768px) {
+   
+    .content-desktop {
+      display: none;
+    }
+    
+  }
+  

eatsmart/templates/inspections/establishment_list.html

@@ -8,7 +8,7 @@
 {% block body_id %}establishment-list{% endblock %}
 
 {% block map %}
-<div class="row">
+<div class="row content-desktop">
     <div class=" col-md-12">
         <div id='map' class="main-map"></div>
     </div>

eatsmart/templates/map.html

@@ -5,7 +5,7 @@
 
 {% block map %}
 <h1>MAP</h1>
-<div class="row col-md-12">
+<div class="row col-md-12 content-desktop">
     {% leaflet_map "main-map" callback="main_map_init" %}
     <script type="text/javascript">
         function main_map_init (map, options) {