From cf61c862ec2154b09ef1636f5feb862d70159a9b Mon Sep 17 00:00:00 2001 From: Zeshan Amjad Date: Mon, 11 Jun 2018 18:26:11 +0100 Subject: [PATCH] Fix responsive resizing of search box --- .../homepage/templates/homepage/homepage.html | 11 ++-- homerate/homerate/settings.py | 4 +- homerate/reviews/static/css/base.scss | 61 +++++++++++++------ homerate/reviews/templates/reviews/house.html | 30 ++++++--- 4 files changed, 71 insertions(+), 35 deletions(-) diff --git a/homerate/homepage/templates/homepage/homepage.html b/homerate/homepage/templates/homepage/homepage.html index 1543bd2..b3391ba 100644 --- a/homerate/homepage/templates/homepage/homepage.html +++ b/homerate/homepage/templates/homepage/homepage.html @@ -12,12 +12,11 @@

Surprise-free Renting

Read reviews of student houses, written by previous tenants.

- -

- - +
+ +

+ +
diff --git a/homerate/homerate/settings.py b/homerate/homerate/settings.py index 7a2fef8..f382e61 100644 --- 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 index 833ce59..8dc4a9a 100644 --- 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,7 +197,7 @@ $searchPadding: 20px; } a { - color: #333; + color: $mainTextColour; text-decoration: none; } } @@ -197,6 +205,12 @@ $searchPadding: 20px; /* 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 index 40a5a62..0574dab 100644 --- a/homerate/reviews/templates/reviews/house.html +++ b/homerate/reviews/templates/reviews/house.html @@ -9,6 +9,8 @@ {% block head %} + {% endblock %} @@ -33,16 +35,19 @@

{{ house.split_address.line1 }}

@@ -53,12 +58,19 @@

Reviews