Merge pull request #367 from gautampanday/task-7731

Removed the shadow from home banner and updated search box #7731
openlabs · May 8, 2015 · e9e8f0b · e9e8f0b
2 parents 1ddc145 + 534a7c8
commit e9e8f0b
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 18 deletions.
diff --git a/static/css/style.css b/static/css/style.css
@@ -344,18 +344,8 @@ a,.item a{
   width: auto;
   max-height: 80px;
 }
-.top-search .btn{
-  min-height: 35px;
-}
-.top-search input{
-  min-height: 35px;
-  border-radius: 2px;
-  -webkit-box-shadow: 0 1px 5px #bdc3c7 inset;
-  -moz-box-shadow: 0 1px 5px #bdc3c7 inset;
-  box-shadow: 0 1px 5px #bdc3c7 inset;
-}
 .top-search{
-  margin-top: 15px;
+  margin-top: 5px;
 }
 .my-account  a.dropdown-toggle{
   border-color: #fff;
@@ -1819,4 +1809,59 @@ h3.product-item-name{
 }
 .bx-wrapper .bx-next{
   right: -30px;
+}
+#homepage-banner-carousel .carousel-control.right, #homepage-banner-carousel .carousel-control.left{
+  background-image: none;
+}
+.search-form{
+  position: relative;
+}
+.top-search .search{
+  background: #fff;
+  width: 100%;
+  border: 6px solid rgba(0, 0, 0, 0.1);
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  color: #a1a1a1;
+  font-weight: 300;
+  font-size: 14px;
+  padding: 8px 105px 8px 10px;
+  -moz-border-radius: 34px;
+  -webkit-border-radius: 34px;
+  border-radius: 34px;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+}
+.top-search button{
+  background-color: #06A2DC;
+  position: absolute;
+  right: 5px;
+  top: 6px;
+  -webkit-border-top-right-radius: 34px;
+  -webkit-border-bottom-right-radius: 34px;
+  -moz-border-radius-topright: 34px;
+  -moz-border-radius-bottomright: 34px;
+  border-top-right-radius: 34px;
+  border-bottom-right-radius: 34px;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  width: 85px;
+  height: 36px;
+  border: 0;
+}
+.top-search button:before{
+  color: #fff;
+  font-family: "FontAwesome";
+  font-size: 14px;
+  content: "\f002";
+}
+.top-search button:hover{
+  background: #83b7e6;
+}
+.banner-image .top-search button{
+  border: 0;
+}
+#search_form{
+  position: relative;
 }
diff --git a/templates/webshop/base.jinja b/templates/webshop/base.jinja
@@ -200,11 +200,9 @@
               <form action="{{ url_for('nereid.website.quick_search') }}" id="search_form"
                 itemprop="potentialAction" itemscope itemtype="http://schema.org/SearchAction">
                 <meta itemprop="target" content="{{ url_for('nereid.website.quick_search', _external=True) }}?q={q}"/>
-                <div class="input-group" id="search-bar">
-                  <input type="text" class="form-control typeahead" data-provide="typeahead" name="q" itemprop="query-input" required>
-                  <span class="input-group-btn">
-                    <button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
-                  </span>
+                <div id="search-bar">
+                  <input type="text" class="typeahead input-text typeahead search" data-provide="typeahead" name="q" itemprop="query-input" placeholder="Search" required>
+                    <button class="button fa-search" type="submit"></button>
                 </div><!-- /input-group -->
               </form>
             </div>

diff --git a/templates/webshop/home.jinja b/templates/webshop/home.jinja
@@ -31,9 +31,9 @@
               {% else %}
                 <a href="{% if banner.click_url %}{{ banner.click_url }} {% endif%}">
                   {% if banner.type == 'image' %}
-                  <img src="{{ banner.file.url }}" alt="{{ banner.alternative_text }}">
+                  <img src="{{ banner.file.url }}" class="margin-auto" alt="{{ banner.alternative_text }}">
                   {% elif banner.type == 'remote_image' %}
-                  <img src="{{ banner.remote_image_url }}" alt="{{ banner.alternative_text }}">
+                  <img src="{{ banner.remote_image_url }}" class="margin-auto" alt="{{ banner.alternative_text }}">
                   {% endif %}
                   <div class="carousel-caption">
                     <h4>{{ banner.name }}</h4>
@@ -178,6 +178,9 @@ $(document).ready(function() {
     autoControls: true,
     moveSlides: 1,
   });
+  $('.carousel').carousel({
+    interval: 5000
+  })
 });
 </script>
 {% endblock scripts %}