Explorar el Código

removing carousel functionality for mobile size

master
Jon Price hace 14 años
padre
commit
4edbb69c0d

+ 9
- 5
oscar/static/css/responsive.css Ver fichero

@@ -145,6 +145,7 @@
145 145
     margin-bottom: 15px;
146 146
     height: auto!important;
147 147
     padding: 0px;
148
+    text-align: left;
148 149
   }
149 150
   .products li .product_pod .star {
150 151
     clear: none;
@@ -153,6 +154,9 @@
153 154
   .products li .product_pod .avaliability {
154 155
     text-align: left;
155 156
   }
157
+  .products li .product_pod .product_price {
158
+    position: static;
159
+  }
156 160
   .products li .product_pod .product_price h4 {
157 161
     margin-bottom: 0px;
158 162
     display: inline;
@@ -160,7 +164,10 @@
160 164
   .products li .product_pod .product_price h4 span, .products li .product_pod .product_price h4 del {
161 165
     float: none;
162 166
   }
163
-  .products li .product_pod .product_price .btn {
167
+  .products li .product_pod .product_price form input#id_quantity {
168
+    width: auto;
169
+  }
170
+  .products li .product_pod .product_price form .btn {
164 171
     width: auto;
165 172
     display: block;
166 173
     padding: 5px 14px 6px;
@@ -170,10 +177,7 @@
170 177
     width: 25%;
171 178
     float: left;
172 179
     margin-right: 15px;
173
-    margin-bottom: 0px;
174
-  }
175
-  .products li .product_pod .product_price {
176
-    position: static;
180
+    margin-bottom: 80px;
177 181
   }
178 182
   .star {
179 183
     padding-left: 70px;

+ 36
- 27
oscar/static/js/oscar/ui.js Ver fichero

@@ -56,17 +56,41 @@ $(document).ready(function()
56 56
           .remove();
57 57
     });
58 58
     
59
-    // Width and height of main navigation
60
-    var $browse_width = $('aside.span3').outerWidth(),
61
-        $browse_height = $('#browse > .dropdown-menu').outerHeight();
62
-    // set width of nav dropdown on the homepage
63
-    $('#browse').find('> .dropdown-menu').css({
64
-      width: $browse_width
65
-    });
66
-    // set margin top of aside allow space for home navigation
67
-    $('.home aside.span3').css({
68
-      marginTop: $browse_height
69
-    });
59
+    
60
+    var $window_width = $(window).width(); // Width of the window
61
+        $browse_width = $('aside.span3').outerWidth(),// Width of main navigation
62
+        $browse_height = $('#browse > .dropdown-menu').outerHeight();// Height of main navigation
63
+    
64
+    if ($window_width > 480) {
65
+      
66
+      // set width of nav dropdown on the homepage
67
+      $('#browse').find('> .dropdown-menu').css({
68
+        width: $browse_width
69
+      });
70
+      // set margin top of aside allow space for home navigation
71
+      $('.home aside.span3').css({
72
+        marginTop: $browse_height
73
+      });
74
+      
75
+      // This activates elastislide
76
+      var es_carousel = $('.es-carousel-wrapper'),
77
+          product_page = $('.product_page').length;
78
+      // on prodct page
79
+      if (product_page > 0) {
80
+        es_carousel.elastislide({
81
+            imageW: 175,
82
+            minItems: 5
83
+        });
84
+      }
85
+      else {
86
+        es_carousel.elastislide({
87
+          imageW: 200,
88
+          minItems: 4
89
+        });
90
+      }
91
+      
92
+    }    
93
+    
70 94
     
71 95
     // This activates the promotional banner carousel
72 96
     $('#myCarousel').carousel({
@@ -79,22 +103,7 @@ $(document).ready(function()
79 103
     // This activates the alerts
80 104
     $('.alert').alert('.close');
81 105
     
82
-    // This activates elastislide
83
-    var es_carousel = $('.es-carousel-wrapper'),
84
-        product_page = $('.product_page').length;
85
-    // on prodct page
86
-    if (product_page > 0) {
87
-      es_carousel.elastislide({
88
-          imageW: 175,
89
-          minItems: 5
90
-      });
91
-    }
92
-    else {
93
-      es_carousel.elastislide({
94
-        imageW: 200,
95
-        minItems: 4
96
-      });
97
-    }  
106
+      
98 107
 
99 108
     // Acordion - remove the first in the list as it is duplication.
100 109
     var n = $('.accordion dt').length;

+ 14
- 9
oscar/static/less/responsive.less Ver fichero

@@ -179,6 +179,7 @@
179 179
         margin-bottom:15px;
180 180
         height:auto!important;
181 181
         padding:0px;
182
+        text-align:left;
182 183
         .star {
183 184
           clear:none;
184 185
           margin-left:@quart * 1.15;
@@ -187,6 +188,7 @@
187 188
           text-align:left;
188 189
         }
189 190
         .product_price {
191
+          position:static;
190 192
           h4 {
191 193
             margin-bottom:0px;
192 194
             display:inline;
@@ -194,21 +196,24 @@
194 196
               float:none;
195 197
             }
196 198
           }
197
-          .btn {
198
-            width:auto;
199
-            display:block;
200
-            padding: 5px 14px 6px;
201
-            margin-top:5px;
199
+          form {
200
+            input#id_quantity {
201
+              width: auto;
202
+            }
203
+            .btn {
204
+              width:auto;
205
+              display:block;
206
+              padding: 5px 14px 6px;
207
+              margin-top:5px;
208
+            }
202 209
           }
210
+          
203 211
         } 
204 212
         .image_container {
205 213
           width:@quart;
206 214
           float:left;
207 215
           margin-right:15px;
208
-          margin-bottom:0px;
209
-        }
210
-        .product_price {
211
-          position:static;
216
+          margin-bottom:80px;
212 217
         }
213 218
       }
214 219
     }

+ 1
- 1
oscar/templates/promotions/automaticproductlist.html Ver fichero

@@ -8,7 +8,7 @@
8 8
     <!-- Elastislide Carousel -->
9 9
     <div class="es-carousel-wrapper">
10 10
         <div class="es-carousel">
11
-            <ul>
11
+            <ul class="products">
12 12
                 {% for product in promotion.get_products %}
13 13
                 <li>
14 14
                     <article class="product_pod">

+ 1
- 1
oscar/templates/promotions/handpickedproductlist.html Ver fichero

@@ -9,7 +9,7 @@
9 9
     <!-- Elastislide Carousel -->
10 10
     <div class="es-carousel-wrapper">
11 11
         <div class="es-carousel">
12
-            <ul>
12
+            <ul class="products">
13 13
                 {% for product in promotion.get_products %}
14 14
                 <li>
15 15
                     <article class="product_pod">

+ 0
- 1
oscar/templates/promotions/layout.html Ver fichero

@@ -111,7 +111,6 @@
111 111
 
112 112
 {# Block for additional scripts #}
113 113
 {% block extrascripts %}
114
-    <script src="{{ STATIC_URL }}js/scrollto/jquery.scrollTo-min.js" type="text/javascript" charset="utf-8"></script>
115 114
     <!-- Elastislide carousel js -->
116 115
     <script src="{{ STATIC_URL }}js/elastislide/jquery.elastislide.js" type="text/javascript" charset="utf-8"></script>    
117 116
     <!-- Front end js -->

Loading…
Cancelar
Guardar