Merge pull request #57 from repair-cafe/styling-issues

Fix styling issues
repair-cafe · Aug 28, 2017 · 8323a1c · 8323a1c
2 parents 42cf3e0 + 758f6c7
commit 8323a1c
Show file tree

Hide file tree

Showing 9 changed files with 32 additions and 21 deletions.
diff --git a/themes/repair-cafe/assets/js/app.js b/themes/repair-cafe/assets/js/app.js
@@ -17,11 +17,13 @@ $( document ).ready(function() {
         var eventId = $(this).data('eventId');
         var image = $('img[data-lazy-load-event-id=' + eventId + ']:not(.loaded)');
         var loadingSpinner = $('i.fa-spinner[data-lazy-load-event-id=' + eventId + ']');
-        if(loadingSpinner.length > 0) {
-            loadingSpinner.hide();
-        }
         if(image.length > 0) {
-            image.addClass('loaded');
+            image.on('load', function() {
+                image.addClass('loaded');
+                if(loadingSpinner.length > 0) {
+                    loadingSpinner.hide();
+                }
+            });
             image.attr('src', image.data('lazyLoadSrc'));
         }
     });

diff --git a/themes/repair-cafe/assets/sass/_bootstrap_variables.scss b/themes/repair-cafe/assets/sass/_bootstrap_variables.scss
@@ -339,9 +339,9 @@ $table-inverse-color:           $body-bg !default;
 //
 // For each of Bootstrap's buttons, define text, background and border color.
 
-$input-btn-padding-y:       .5rem !default;
-$input-btn-padding-x:       .75rem !default;
-$input-btn-line-height:     1.25 !default;
+$input-btn-padding-y:       .6rem !default;
+$input-btn-padding-x:       1rem !default;
+$input-btn-line-height:     1.5 !default;
 
 $input-btn-padding-y-sm:    .25rem !default;
 $input-btn-padding-x-sm:    .5rem !default;
@@ -351,7 +351,7 @@ $input-btn-padding-y-lg:    .5rem !default;
 $input-btn-padding-x-lg:    1rem !default;
 $input-btn-line-height-lg:  1.5 !default;
 
-$btn-font-weight:                $font-weight-normal !default;
+$btn-font-weight:                $font-weight-bold !default;
 $btn-box-shadow:                 inset 0 1px 0 rgba($white,.15), 0 1px 1px rgba($black,.075) !default;
 $btn-focus-box-shadow:           0 0 0 3px rgba(theme-color("primary"), .25) !default;
 $btn-active-box-shadow:          inset 0 3px 5px rgba($black,.125) !default;
@@ -585,7 +585,7 @@ $navbar-dark-disabled-color:        rgba($white,.25) !default;
 $navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
 $navbar-dark-toggler-border-color:  rgba($white,.1) !default;
 
-$navbar-light-color:                $gray-900 !default;
+$navbar-light-color:                $body-color !default;
 $navbar-light-hover-color:          $link-color !default;
 $navbar-light-active-color:         $link-color !default;
 $navbar-light-disabled-color:       rgba($black,.3) !default;

diff --git a/themes/repair-cafe/assets/sass/_type.scss b/themes/repair-cafe/assets/sass/_type.scss
@@ -2,3 +2,7 @@ h3, h4, h5, h6,
 .h3, .h4, .h5, .h6 {
     margin-bottom: $headings-margin-bottom / 2;
 }
+
+.btn {
+    font-size: $font-size-sm;
+}
diff --git a/themes/repair-cafe/assets/sass/components/_btn-embed.scss b/themes/repair-cafe/assets/sass/components/_btn-embed.scss
@@ -1,8 +1,8 @@
 .has-btn-embed {
-    $btn-embed-color: $gray-600 !default;
-    $btn-embed-padding-x: .75rem !default;
-    $btn-embed-padding-x-sm: .5rem !default;
-    $btn-embed-padding-x-lg: 1.25rem !default;
+    $btn-embed-color: $input-placeholder-color !default;
+    $btn-embed-padding-x: $input-btn-padding-x !default;
+    $btn-embed-padding-x-sm: $input-btn-padding-x-sm !default;
+    $btn-embed-padding-x-lg: $input-btn-padding-x-lg !default;
 
     position: relative;
 
@@ -39,17 +39,19 @@
         position: absolute;
         top: 0;
         color: $btn-embed-color;
+        font-size: $font-size-base;
+        line-height: $input-btn-line-height;
         padding: $input-btn-padding-y $btn-embed-padding-x;
         cursor: pointer;
     }
     .btn-embed-sm {
         font-size: $font-size-sm;
-        line-height: $line-height-sm;
+        line-height: $input-btn-line-height-sm;
         padding: $input-btn-padding-y-sm $btn-embed-padding-x-sm;
     }
     .btn-embed-lg {
         font-size: $font-size-lg;
-        line-height: $line-height-lg;
+        line-height: $input-btn-line-height-lg;
         padding: $input-btn-padding-y-lg $btn-embed-padding-x-lg;
     }
 }
diff --git a/themes/repair-cafe/assets/sass/layouts/_home.scss b/themes/repair-cafe/assets/sass/layouts/_home.scss
@@ -2,4 +2,7 @@
     .category-logo {
         width: 60px;
     }
+    .categories {
+        font-weight: $font-weight-bold;
+    }
 }
diff --git a/themes/repair-cafe/layouts/homepage.htm b/themes/repair-cafe/layouts/homepage.htm
@@ -37,7 +37,7 @@
     <div class="page-content">
         <section class="container mb-5">
             <h2>{{ 'homepage.category_list.title'|_ }}</h2>
-            <ul class="list-unstyled row">
+            <ul class="list-unstyled row categories">
                 {% for category in categoryList.categories %}
                     <li class="col-lg-4 col-md-6 mb-3">
                         <a href="{{ 'cafes'|page ~ '?category=' ~ category.slug }}">

diff --git a/themes/repair-cafe/partials/components/event-search-form.htm b/themes/repair-cafe/partials/components/event-search-form.htm
@@ -3,14 +3,14 @@
     <div class="form-group{{ showCategories|default ? ' col-md-8 pr-md-1 mb-2' : ' col-12' }}">
         <div class="has-btn-embed has-btn-embed-right">
             <label for="searchterm" class="sr-only">{{ 'eventsearch.searchterm.label'|_ }}</label>
-            {{ form_input( 'search', 'searchterm', input('searchterm'), { class: 'form-control form-control-lg text-truncate', placeholder: 'eventsearch.searchterm.placeholder'|_ } ) }}
-            <button type="submit" class="btn btn-embed btn-embed-lg"><i class="fa fa-search" aria-hidden="true"></i></button>
+            {{ form_input( 'search', 'searchterm', input('searchterm'), { class: 'form-control text-truncate', placeholder: 'eventsearch.searchterm.placeholder'|_ } ) }}
+            <button type="submit" class="btn btn-embed"><i class="fa fa-search" aria-hidden="true"></i></button>
         </div>
     </div>
     {% if showCategories|default %}
         <div class="form-group col-md-4 pl-md-1 mb-0">
             <label for="category" class="sr-only">{{ 'eventsearch.category.label'|_ }}</label>
-            {{ form_select( 'category', categories, input('category'), { class: 'form-control form-control-lg' } ) }}
+            {{ form_select( 'category', categories, input('category'), { class: 'form-control' } ) }}
         </div>
     {% endif %}
 </div>

diff --git a/themes/repair-cafe/partials/components/eventlist.htm b/themes/repair-cafe/partials/components/eventlist.htm
@@ -58,7 +58,7 @@ <h4 class="h5">{{ event.getTitle }}</h4>
                                 </div>
                                 {% if not eventList.condensed %}
                                     <div>
-                                        <a class="btn btn-outline-primary" href="{{ 'cafe'|page({ slug: event.cafe.slug }) }}" role="button">{{ 'eventlist.cafe_detail_button'|_ }}</a>
+                                        <a class="btn btn-primary" href="{{ 'cafe'|page({ slug: event.cafe.slug }) }}" role="button">{{ 'eventlist.cafe_detail_button'|_ }}</a>
                                     </div>
                                 {% endif %}
                             </div>

diff --git a/themes/repair-cafe/partials/components/footer-newsletter.htm b/themes/repair-cafe/partials/components/footer-newsletter.htm
@@ -9,7 +9,7 @@
             <label class="sr-only" for="newsletterZip">ZIP</label>
             <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="newsletterZip" placeholder="ZIP">
 
-            <button type="submit" class="btn btn-outline-primary">Subscribe</button>
+            <button type="submit" class="btn btn-primary">Subscribe</button>
         </form>
     </div>
 </div>