Fix responsive resizing of search box

HomeRateDev · Jun 11, 2018 · cf61c86 · cf61c86
1 parent 3e1522d
commit cf61c86
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 35 deletions.
diff --git a/homerate/homepage/templates/homepage/homepage.html b/homerate/homepage/templates/homepage/homepage.html
@@ -12,12 +12,11 @@ <h1 class="title">Surprise-free Renting</h1>
         <p class="tagline">Read reviews of student houses, written by previous tenants.</p>
     </header>
 
-    <input placeholder="Enter a postcode..." type="text" class="searchBox" maxlength="8"/>
-    <p class="errorMessage"></p>
-
-    <ul class="autocomplete">
-
-    </ul>
+    <div class="searchWrap">
+        <input placeholder="Enter a postcode..." type="text" class="searchBox" maxlength="8"/>
+        <p class="errorMessage"></p>
+        <ul class="autocomplete"></ul>
+    </div>
 
 </div>
 

diff --git a/homerate/homerate/settings.py b/homerate/homerate/settings.py
@@ -25,7 +25,7 @@
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = True
 
-ALLOWED_HOSTS = ['127.0.0.1', 'homerate.co.uk']
+ALLOWED_HOSTS = ['127.0.0.1', 'homerate.co.uk', 'localhost']
 
 
 # Application definition
@@ -40,7 +40,7 @@
     'sass_processor',
     'reviews',
     'homepage',
-    'profiles' 
+    'profiles'
 ]
 
 MIDDLEWARE = [

diff --git a/homerate/reviews/static/css/base.scss b/homerate/reviews/static/css/base.scss
@@ -9,6 +9,7 @@ $cornerRadius: 8px;
 $shadowColour: #576f92;
 $borderColour: #d8e4ea;
 $buttonColour: $mainTextColour;
+$containerWidth: 960px;
 
 body {
   background: $backgroundColour;
@@ -28,7 +29,7 @@ ul {
 }
 
 .container {
-  max-width: 960px;
+  max-width: $containerWidth;
   margin: 0 auto;
   padding: 0 5%;
 }
@@ -150,18 +151,25 @@ $logoHeight: 45px;
 $searchBoxWidth: 700px;
 $searchPadding: 20px;
 
-.searchBox {
-  @include textInput($searchPadding);
+.searchWrap {
   max-width: $searchBoxWidth;
+  margin: 0 auto;
   width: 80%;
+}
+
+.searchBox {
+  @include textInput($searchPadding);
+  width: 100%;
   margin-bottom: -1px;
+  box-sizing: border-box;
 }
 
 .autocomplete {
-  width: $searchBoxWidth + 2 * $searchPadding;
+  width: 100%;
   max-height: 200px;
   // visibility: hidden;
   margin: 20px auto 30px auto;
+  box-sizing: border-box;
   border-radius: $cornerRadius;
   overflow-x: hidden;
   overflow-y: auto;
@@ -189,14 +197,20 @@ $searchPadding: 20px;
     }
 
     a {
-      color: #333;
+      color: $mainTextColour;
       text-decoration: none;
     }
   }
 }
 
 /* House Page */
 
+.houseInfo {
+  margin-bottom: 15px;
+  border-bottom: solid 1px $borderColour;
+  padding-bottom: 10px;
+}
+
 .houseHeader {
 
   .houseAddress {
@@ -242,19 +256,16 @@ $searchPadding: 20px;
   display: inline-block;
 }
 
-.basicInfo {
-  padding: 20px;
-  background: #fff;
-  border-radius: $cornerRadius;
-  text-align: center;
-}
-
 .infoItem {
-  padding: 0 40px;
+  padding-right: 20px;
   display: inline-block;
 }
 
 .basicInfo {
+  margin-top: 2px;
+  border-radius: $cornerRadius;
+  color: $midText;
+
   .icon {
     width: 50px;
     display: inline-block;
@@ -263,6 +274,9 @@ $searchPadding: 20px;
 
   .value {
     margin-left: 10px;
+    font: {
+      weight: 600;
+    }
   }
 }
 
@@ -283,15 +297,26 @@ $searchPadding: 20px;
 
 /* House Page: Reviews */
 
-.review:first-child {
-  border-top: solid 1px $borderColour;
-}
-
 .review {
-  padding: 10px 10px;
+  padding: 10px 0;
   border-bottom: solid 1px $borderColour;
 }
 
+.reviewHeader {
+  i {
+    margin-right: 12px;
+    font-size: 64px;
+  }
+  i, .text {
+    display: inline-block;
+    vertical-align: middle;
+  }
+  h3 {
+    margin-bottom: 10px;
+    display: inline-block;
+  }
+}
+
 .reviewPoint {
   width: 40%;
   display: inline-block;

diff --git a/homerate/reviews/templates/reviews/house.html b/homerate/reviews/templates/reviews/house.html
@@ -9,6 +9,8 @@
 {% block head %}
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
     <link rel="stylesheet" href="{% sass_src 'css/stars.scss' %}">
+    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.0.13/css/all.css"
+          integrity="sha384-oi8o31xSQq8S0RpBcb4FaLB8LJi9AT8oIdmS1QldR8Ui7KUQjNAnDlJjp55Ba8FG" crossorigin="anonymous">
     <link rel="stylesheet" type="text/css" href="{% static 'slick/slick.css' %}"/>
     <link rel="stylesheet" type="text/css" href="{% static 'slick/slick-theme.css' %}"/>
 {% endblock %}
@@ -33,16 +35,19 @@ <h2 class="houseAddress">{{ house.split_address.line1 }}</h2>
                 </header>
                 <ul class="basicInfo">
                     <li class="infoItem">
-                        <img class="icon" src="{% static 'img/bed.svg' %}"/>
+                        <i class="far fa-bed"></i>
                         <span class="value">{{ house.bedrooms }}</span>
+                        <span class="label">bed</span>
                     </li>
                     <li class="infoItem">
-                        <img class="icon" src="{% static 'img/bath.svg' %}"/>
+                        <i class="far fa-bath"></i>
                         <span class="value">{{ house.bathrooms }}</span>
+                        <span class="label">bath</span>
                     </li>
                     <li class="infoItem">
-                        <img class="icon" src="{% static 'img/sofa.svg' %}"/>
+                        <i class="far fa-couch"></i>
                         <span class="value">{{ house.living_rooms }}</span>
+                        <span class="label">living room</span>
                     </li>
                 </ul>
             </section>
@@ -53,12 +58,19 @@ <h2>Reviews</h2>
                 <ul class="reviewList">
                     {% for review in reviews %}
                         <li class="review">
-                            <h3>Tenant from {{ review.moved_in_date }} to {{ review.moved_out_date }} <a
-                                    class="averageStars createStars">{{ review.general_rating }} ★</a>
-                                {% if user == review.author %}
-                                    <a class="addReview button" href="{% url 'edit_report' id=review.pk %}">Edit</a>
-                                    <a class="addReview button" href="{% url 'delete_report' id=review.pk %}">Delete</a>
-                                {% endif %} </h3>
+                            <header class="reviewHeader">
+                                <i class="fas fa-user-circle"></i>
+                                <div class="text">
+                                    <h3>Tenant from {{ review.moved_in_date }} to {{ review.moved_out_date }}</h3>
+                                    <a class="averageStars createStars">{{ review.general_rating }}</a>
+                                    {% if user == review.author %}
+                                        <div class="reviewActions">
+                                            <a class="edit button" href="{% url 'edit_report' id=review.pk %}">Edit</a>
+                                            <a class="delete button" href="{% url 'delete_report' id=review.pk %}">Delete</a>
+                                        </div>
+                                    {% endif %}
+                                </div>
+                            </header>
 
                             <ul class="reviewPoints">