fixed result display

Author: afislonge

web/css/style.css

@@ -1728,43 +1728,77 @@ figure {
 
 /*# sourceMappingURL=style.css.map */
 .hide {
-  display: none;
+  visibility: hidden;
+}
+
+.inlinepadding {
+  display: inline;
+  padding-right: 15px;
+}
+
+.inline {
+  display: inline;
 }
 
 .listing {
-  margin-bottom: 20px;
+  max-width: 1200px;
+  margin: 10px auto;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #fff;
 }
 
-.name {
-  font-size: 18px;
-  font-weight: bold;
+.listing-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px;
+  border-bottom: 1px solid #ddd;
 }
 
-.category {
-  font-size: 14px;
-  color: #888;
+.listing-item:last-child {
+  border-bottom: none;
 }
 
-.rating {
+.details {
+  flex: 1;
+  padding-right: 15px;
+}
+
+.name-rating {
   display: flex;
+  justify-content: space-between;
   align-items: center;
+  margin-bottom: 10px;
+}
+
+.name {
+  font-weight: bold;
+  font-size: 1.2em;
+}
+
+.rating {
+  font-size: 1.2em;
+  color: #ff9800;
 }
 
 .stars {
-  font-size: 20px;
+  color: #ff9800;
 }
 
-.count {
-  margin-left: 10px;
-  font-size: 14px;
-  color: #888;
+.info {
+  font-size: 0.9em;
+  color: #555;
 }
 
-.inlinepadding {
-  display: inline;
-  padding-right: 15px;
+.amenities {
+  font-size: 0.9em;
+  color: #555;
 }
 
-.inline {
-  display: inline;
+.location {
+  text-align: right;
+  font-size: 0.9em;
+  color: #555;
 }

web/index.html

@@ -185,24 +185,32 @@ <h2>
                   </div>
                  </div>                                  
                 </div>
-                <div id="result" class="row hide">
+                <div id="result" class="row">
                   <div class="listing">
-                    <div class="name">Wendy's 80%</div>
-                    <div class="category">Restaurant</div>
-                    <div class="rating">
-                      <span class="stars">★★★★★</span>
-                      <span class="count">(15,000 ratings)</span>
+                    <div class="listing-item">
+                        <div class="details">
+                            <div class="name-rating">
+                                <span class="name">Wendys 80%</span>
+                                <span class="rating">5.0 <span class="stars">★★★★★</span> (15,000 ratings)</span>
+                            </div>
+                            <div class="info">Restaurant</div>
+                            <div class="amenities">Business Amenities: WIFI, Car Park, BYOB, Open 24/7</div>
+                        </div>
+                        <div class="location">Populated Area</div>
                     </div>
-                  </div>
 
-                  <div class="listing">
-                    <div class="name">Starbucks 75%</div>
-                    <div class="category">Restaurant</div>
-                    <div class="rating">
-                      <span class="stars">★★★★☆</span>
-                      <span class="count">(14,000 ratings)</span>
+                    <div class="listing-item">
+                        <div class="details">
+                            <div class="name-rating">
+                                <span class="name">Starbucks 75%</span>
+                                <span class="rating">4.0 <span class="stars">★★★★☆</span> (14,000 ratings)</span>
+                            </div>
+                            <div class="info">Restaurant</div>
+                            <div class="amenities">Business Amenities: WIFI, Car Park, BYOB, Open 24/7</div>
+                        </div>
+                        <div class="location">Populated Area</div>
                     </div>
-                  </div>
+                </div>
                 </div>
                 <div class="row">
                   <div class="col-md-12">