diff options
| -rw-r--r-- | assets/css/style.css | 11 | ||||
| -rw-r--r-- | assets/css/typeheadjs.css | 1 | ||||
| -rw-r--r-- | assets/js/home_page.js | 16 | ||||
| -rw-r--r-- | views/index.hbs | 21 |
4 files changed, 34 insertions, 15 deletions
diff --git a/assets/css/style.css b/assets/css/style.css index d9ac8f5..d4d4860 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -48,17 +48,18 @@ main .search h2{ } .search input { - text-align: center; + text-align: left; box-sizing: border-box; background-size: 20px 20px; - padding: 0; + padding-left: 10px; + padding-right: 10px; } .search input, .search button.search-button { font-size: 16px; - height: 40px; + height: 40px; border-radius: 10px; - border: 2px solid #ccc; + border: 2px solid #ccc; } .input-group { @@ -629,4 +630,4 @@ hr { .badge { background-color: #f2dede !important; color: #a94442 !important; -}
\ No newline at end of file +} diff --git a/assets/css/typeheadjs.css b/assets/css/typeheadjs.css index e165778..f711776 100644 --- a/assets/css/typeheadjs.css +++ b/assets/css/typeheadjs.css @@ -19,6 +19,7 @@ span.twitter-typeahead .tt-dropdown-menu { -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); background-clip: padding-box; + margin-top: 10px; } span.twitter-typeahead .tt-suggestion { display: block; diff --git a/assets/js/home_page.js b/assets/js/home_page.js index 059444c..4c9151a 100644 --- a/assets/js/home_page.js +++ b/assets/js/home_page.js @@ -9,13 +9,21 @@ function main(){ switch(type) { case "Courses": - $("#search-field").attr("action","/search/courses"); - $("#user-input").attr("placeholder", "Enter coure code"); + // hide the input for user search + $("#user-input-users").css("display", "none"); + // show the input for courses search + $("#custom-autocomplete").css("display", "block"); + + $("#search-field").attr("action", "/search/courses"); $("#drop-down-value").text("Courses"); break; case "Users": - $("#search-field").attr("action","/search/users"); - $("#user-input").attr("placeholder", "Enter user info"); + // hide the input for courses search + $("#custom-autocomplete").css("display", "none"); + // show the input for users search + $("#user-input-users").css("display", "block"); + + $("#search-field").attr("action", "/search/users"); $("#drop-down-value").text("Users"); break; default: diff --git a/views/index.hbs b/views/index.hbs index c1c8eca..dfb06d3 100644 --- a/views/index.hbs +++ b/views/index.hbs @@ -59,15 +59,24 @@ </ul> </div> + <!-- Search bar courses (shown by default) --> <div id="custom-autocomplete"> - <!-- Search bar --> <input type="text" - id = "user-input" - class="form-control typeahead" - aria-label="..." - name="search" - placeholder="Enter course code eg. CSC148"> + id = "user-input-course" + class="form-control typeahead" + aria-label="..." + name="search" + placeholder="Enter course code eg. CSC148"> </div> + <!-- Search bar users (hidden by default) --> + <input type="text" + id = "user-input-users" + class="form-control" + aria-label="..." + name="search" + placeholder="Enter user info" + style="display:none"> + <!-- Prompt Search --> <span class="input-group-btn"> <button id = 'go-button' |