results - scrollable view

Author: ychoy

frontend/app/styles/app.less

@@ -15,3 +15,7 @@
     position: relative;
     padding: 0 !important;
 }
+article.listing-card {
+  overflow: auto;
+  max-height: 85vh;
+}

frontend/app/templates/components/listing-info-sidebar.hbs

@@ -1,70 +1,72 @@
 <div class="ui container">
-    <!-- TODO - search by radius -->
-    <!-- TODO - fix responsive web design. Flexible columns so the information
-    doesn't look too cramped on the side when the screen is half or quartersize
-    -->
-    <!-- <table class="ui definition table">
+  <!-- TODO - search by radius -->
+  <!-- TODO - fix responsive web design. Flexible columns so the information
+  doesn't look too cramped on the side when the screen is half or quartersize
+  -->
+  <!-- <table class="ui definition table">
 
-      <tr>
-        <td class="one wide column">
-            <div class="ui label">Rent:</div>
-        </td>
-        <td>
-            {{range-slider
-              defaultValue='500,1500'
-              value='500,1500'
-              min=1
-              max=5000
-              step=1
-              tooltip='hide'
-            }}
-        </td>
-      </tr>
-    </table> -->
+    <tr>
+      <td class="one wide column">
+          <div class="ui label">Rent:</div>
+      </td>
+      <td>
+          {{range-slider
+            defaultValue='500,1500'
+            value='500,1500'
+            min=1
+            max=5000
+            step=1
+            tooltip='hide'
+          }}
+      </td>
+    </tr>
+  </table> -->
 
-    <div class="ui container">
-      <h2>Affordable Housing Units</h2>
-    </div>
+  <div class="ui container">
+    <h2>Affordable Housing Units</h2>
+  </div>
 
-    <br>
-    <!-- TODO Scrollable page -->
-    <article class="listing-card">
-      {{#each model as |listing|}}
+  <br>
+  <!-- TODO Scrollable page -->
 
-      <div class="ui list">
-        <div class="item">
-          <i class="tag icon"></i>
-          <div class="content">
-            <h3>{{listing.propertyName}}</h3>
-          </div>
-        </div>
-        <div class="item">
-          <i class="marker icon"></i>
-          <div class="content">
-            {{listing.propertyAddress}}
-          </div>
+  <article class="listing-card">
+    {{#each model as |listing|}}
+
+    <div class="ui list">
+      <div class="item">
+        <i class="tag icon"></i>
+        <div class="content">
+          <h3>{{listing.propertyName}}</h3>
         </div>
-        <div class="item">
-          <i class="call icon"></i>
-          <div class="content">
-            {{listing.propertyManagementPhone}}
-          </div>
+      </div>
+      <div class="item">
+        <i class="marker icon"></i>
+        <div class="content">
+          {{listing.propertyAddress}}
         </div>
-        <div class="item">
-          <i class="linkify icon"></i>
-          <div class="content">
-            <a href="{{listing.propertyWebsite}}">{{listing.propertyWebsite}}</a>
-          </div>
+      </div>
+      <div class="item">
+        <i class="call icon"></i>
+        <div class="content">
+          {{listing.propertyManagementPhone}}
         </div>
-        <div class="item">
-          <i class="users icon"></i>
-          <div class="content">
-            {{listing.propertyType}}
-          </div>
+      </div>
+      <div class="item">
+        <i class="linkify icon"></i>
+        <div class="content">
+          <a href="{{listing.propertyWebsite}}">{{listing.propertyWebsite}}</a>
         </div>
       </div>
-      <div class="ui divider">
+      <div class="item">
+        <i class="users icon"></i>
+        <div class="content">
+          {{listing.propertyType}}
+        </div>
       </div>
-    {{/each}}
-    </article>
+    </div>
+    <div class="ui divider">
+    </div>
+  {{/each}}
+  </article>
+
 </div>