Skip to content

Commit c718e6e

Browse files
jasonwengjasonweng
committed
adjust template mobile layout
1 parent 0683562 commit c718e6e

File tree

9 files changed

+505
-315
lines changed

9 files changed

+505
-315
lines changed

‎app/products/views/gender.tmpl

Lines changed: 94 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,97 @@
11
<main class="container product_index">
2+
<div class="grid">
3+
<div class="grid__col is-2 product_options">
4+
<h2>CATEGORIES</h2>
5+
<ul>
6+
{{ range $category := get_categories }}
7+
<li>
8+
<a href="{{ $category.DefaultPath }}">{{ $category.Name }}</a>
9+
</li>
10+
{{
11+
end
12+
}}
13+
</ul>
214

3-
<div class="grid">
4-
<div class="grid__col is-2 product_options">
5-
<h2>CATEGORIES</h2>
6-
<ul>
7-
{{ range $category := get_categories }}
8-
<li><a href="{{ $category.DefaultPath }}">{{$category.Name}}</a></li>
9-
{{ end }}
10-
</ul>
11-
12-
<h2>COLORS</h2>
13-
<ul class="product_options-color">
14-
<li><a rel="nofollow" href="#"><span style="background:#eae3d3"></span>Beige</a></li>
15-
<li><a rel="nofollow" href="#"><span style="background:#222"></span>Black</a></li>
16-
<li><a rel="nofollow" href="#"><span style="background:#f79858"></span>Blue</a></li>
17-
<li><a rel="nofollow" href="#"><span style="background:#f56060"></span>Brown</a></li>
18-
<li><a rel="nofollow" href="#"><span style="background:#44c28d"></span>Green</a></li>
19-
<li><a rel="nofollow" href=""><span style="background:#999"></span>Grey</a></li>
20-
<li><a rel="nofollow" href=""><span style="background:#f79858"></span>Orange</a></li>
21-
<li><a rel="nofollow" href=""><span style="background:#b27ef8"></span>Purple</a></li>
22-
<li><a rel="nofollow" href=""><span style="background:#f56060"></span>Red</a></li>
23-
<li><a rel="nofollow" href=""><span style="background:#fff;border: 1px solid #e8e9eb;width:13px;height:13px;"></span>White</a></li>
24-
</ul>
15+
<h2>COLORS</h2>
16+
<ul class="product_options-color">
17+
<li>
18+
<a rel="nofollow" href="#"
19+
><span style="background:#eae3d3"></span>Beige</a
20+
>
21+
</li>
22+
<li>
23+
<a rel="nofollow" href="#"
24+
><span style="background:#222"></span>Black</a
25+
>
26+
</li>
27+
<li>
28+
<a rel="nofollow" href="#"
29+
><span style="background:#f79858"></span>Blue</a
30+
>
31+
</li>
32+
<li>
33+
<a rel="nofollow" href="#"
34+
><span style="background:#f56060"></span>Brown</a
35+
>
36+
</li>
37+
<li>
38+
<a rel="nofollow" href="#"
39+
><span style="background:#44c28d"></span>Green</a
40+
>
41+
</li>
42+
<li>
43+
<a rel="nofollow" href=""
44+
><span style="background:#999"></span>Grey</a
45+
>
46+
</li>
47+
<li>
48+
<a rel="nofollow" href=""
49+
><span style="background:#f79858"></span>Orange</a
50+
>
51+
</li>
52+
<li>
53+
<a rel="nofollow" href=""
54+
><span style="background:#b27ef8"></span>Purple</a
55+
>
56+
</li>
57+
<li>
58+
<a rel="nofollow" href=""
59+
><span style="background:#f56060"></span>Red</a
60+
>
61+
</li>
62+
<li>
63+
<a rel="nofollow" href=""
64+
><span
65+
style="background:#fff;border: 1px solid #e8e9eb;width:13px;height:13px;"
66+
></span
67+
>White</a
68+
>
69+
</li>
70+
</ul>
2571

26-
<h2>SIZES</h2>
27-
<ul class="product_options-size">
28-
<li><a rel="nofollow" href="#">XS</a></li>
29-
<li><a rel="nofollow" href="#">S</a></li>
30-
<li><a rel="nofollow" href="#">M</a></li>
31-
<li><a rel="nofollow" href="#">L</a></li>
32-
<li><a rel="nofollow" href="#">XL</a></li>
33-
<li><a rel="nofollow" href="#">XXL</a></li>
34-
</ul>
35-
</div>
72+
<h2>SIZES</h2>
73+
<ul class="product_options-size">
74+
<li><a rel="nofollow" href="#">XS</a></li>
75+
<li><a rel="nofollow" href="#">S</a></li>
76+
<li><a rel="nofollow" href="#">M</a></li>
77+
<li><a rel="nofollow" href="#">L</a></li>
78+
<li><a rel="nofollow" href="#">XL</a></li>
79+
<li><a rel="nofollow" href="#">XXL</a></li>
80+
</ul>
81+
</div>
3682

37-
<div class="grid__col is-10 product_lists">
38-
<h1>ALL PRODUCTS (8)</h1>
39-
<ul class="grid">
40-
{{range .Products}}
83+
<div class="grid__col is-10 product_lists">
84+
<h1>ALL PRODUCTS</h1>
85+
<ul class="grid">
86+
{{
87+
range.Products
88+
}}
4189
<li class="grid__col is-3">
4290
<a href="{{.DefaultPath}}">
43-
<div class="product_image" style="background-image: url({{.MainImageURL}});">
91+
<div
92+
class="product_image"
93+
style="background-image: url({{.MainImageURL}});"
94+
>
4495
<div class="image_overlay"></div>
4596
<div class="add_to_cart">Add to cart</div>
4697
<div class="stats">
@@ -49,10 +100,7 @@
49100
<span class="product_name">{{.Name}}</span>
50101

51102
<div class="product_meta">
52-
<strong>SIZES</strong>
53-
<span>
54-
XS, S, M, L, XL, XXL
55-
</span>
103+
<strong>SIZES</strong> <span> XS, S, M, L, XL, XXL </span>
56104
<strong>COLORS</strong>
57105
<div class="colors">
58106
<span style="background:#f79858"></span>
@@ -66,8 +114,10 @@
66114
</div>
67115
</a>
68116
</li>
69-
{{end}}
70-
</ul>
117+
{{
118+
end
119+
}}
120+
</ul>
121+
</div>
71122
</div>
72-
</div>
73123
</main>

‎app/products/views/index.tmpl

Lines changed: 94 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,96 @@
11
<main class="container product_index">
2-
<div class="grid">
3-
<div class="grid__col is-2 product_options">
4-
<h2>CATEGORIES</h2>
5-
<ul>
6-
{{ range $category := get_categories }}
7-
<li><a href="{{ $category.DefaultPath }}">{{$category.Name}}</a></li>
8-
{{ end }}
9-
</ul>
10-
11-
<h2>COLORS</h2>
12-
<ul class="product_options-color">
13-
<li><a rel="nofollow" href="#"><span style="background:#eae3d3"></span>Beige</a></li>
14-
<li><a rel="nofollow" href="#"><span style="background:#222"></span>Black</a></li>
15-
<li><a rel="nofollow" href="#"><span style="background:#f79858"></span>Blue</a></li>
16-
<li><a rel="nofollow" href="#"><span style="background:#f56060"></span>Brown</a></li>
17-
<li><a rel="nofollow" href="#"><span style="background:#44c28d"></span>Green</a></li>
18-
<li><a rel="nofollow" href=""><span style="background:#999"></span>Grey</a></li>
19-
<li><a rel="nofollow" href=""><span style="background:#f79858"></span>Orange</a></li>
20-
<li><a rel="nofollow" href=""><span style="background:#b27ef8"></span>Purple</a></li>
21-
<li><a rel="nofollow" href=""><span style="background:#f56060"></span>Red</a></li>
22-
<li><a rel="nofollow" href=""><span style="background:#fff;border: 1px solid #e8e9eb;width:13px;height:13px;"></span>White</a></li>
23-
</ul>
2+
<div class="grid">
3+
<div class="grid__col is-2 product_options">
4+
<h2>CATEGORIES</h2>
5+
<ul>
6+
{{ range $category := get_categories }}
7+
<li>
8+
<a href="{{ $category.DefaultPath }}">{{ $category.Name }}</a>
9+
</li>
10+
{{
11+
end
12+
}}
13+
</ul>
2414

25-
<h2>SIZES</h2>
26-
<ul class="product_options-size">
27-
<li><a rel="nofollow" href="#">XS</a></li>
28-
<li><a rel="nofollow" href="#">S</a></li>
29-
<li><a rel="nofollow" href="#">M</a></li>
30-
<li><a rel="nofollow" href="#">L</a></li>
31-
<li><a rel="nofollow" href="#">XL</a></li>
32-
<li><a rel="nofollow" href="#">XXL</a></li>
33-
</ul>
15+
<h2>COLORS</h2>
16+
<ul class="product_options-color">
17+
<li>
18+
<a rel="nofollow" href="#"
19+
><span style="background:#eae3d3"></span>Beige</a
20+
>
21+
</li>
22+
<li>
23+
<a rel="nofollow" href="#"
24+
><span style="background:#222"></span>Black</a
25+
>
26+
</li>
27+
<li>
28+
<a rel="nofollow" href="#"
29+
><span style="background:#f79858"></span>Blue</a
30+
>
31+
</li>
32+
<li>
33+
<a rel="nofollow" href="#"
34+
><span style="background:#f56060"></span>Brown</a
35+
>
36+
</li>
37+
<li>
38+
<a rel="nofollow" href="#"
39+
><span style="background:#44c28d"></span>Green</a
40+
>
41+
</li>
42+
<li>
43+
<a rel="nofollow" href=""
44+
><span style="background:#999"></span>Grey</a
45+
>
46+
</li>
47+
<li>
48+
<a rel="nofollow" href=""
49+
><span style="background:#f79858"></span>Orange</a
50+
>
51+
</li>
52+
<li>
53+
<a rel="nofollow" href=""
54+
><span style="background:#b27ef8"></span>Purple</a
55+
>
56+
</li>
57+
<li>
58+
<a rel="nofollow" href=""
59+
><span style="background:#f56060"></span>Red</a
60+
>
61+
</li>
62+
<li>
63+
<a rel="nofollow" href=""
64+
><span
65+
style="background:#fff;border: 1px solid #e8e9eb;width:13px;height:13px;"
66+
></span
67+
>White</a
68+
>
69+
</li>
70+
</ul>
3471

35-
</div>
36-
<div class="grid__col is-10 product_lists">
37-
<h1>ALL PRODUCTS (8)</h1>
38-
<ul class="grid">
39-
{{range .Products}}
72+
<h2>SIZES</h2>
73+
<ul class="product_options-size">
74+
<li><a rel="nofollow" href="#">XS</a></li>
75+
<li><a rel="nofollow" href="#">S</a></li>
76+
<li><a rel="nofollow" href="#">M</a></li>
77+
<li><a rel="nofollow" href="#">L</a></li>
78+
<li><a rel="nofollow" href="#">XL</a></li>
79+
<li><a rel="nofollow" href="#">XXL</a></li>
80+
</ul>
81+
</div>
82+
<div class="grid__col is-10 product_lists">
83+
<h1>ALL PRODUCTS</h1>
84+
<ul class="grid">
85+
{{
86+
range.Products
87+
}}
4088
<li class="grid__col is-4">
4189
<a href="{{.DefaultPath}}">
42-
<div class="product_image" style="background-image: url({{.MainImageURL}});">
90+
<div
91+
class="product_image"
92+
style="background-image: url({{.MainImageURL}});"
93+
>
4394
<div class="image_overlay"></div>
4495
<div class="add_to_cart">Add to cart</div>
4596
<div class="stats">
@@ -48,10 +99,7 @@
4899
<span class="product_name">{{.Name}}</span>
49100

50101
<div class="product_meta">
51-
<strong>SIZES</strong>
52-
<span>
53-
XS, S, M, L, XL, XXL
54-
</span>
102+
<strong>SIZES</strong> <span> XS, S, M, L, XL, XXL </span>
55103
<strong>COLORS</strong>
56104
<div class="colors">
57105
<span style="background:#f79858"></span>
@@ -65,8 +113,10 @@
65113
</div>
66114
</a>
67115
</li>
68-
{{end}}
69-
</ul>
116+
{{
117+
end
118+
}}
119+
</ul>
120+
</div>
70121
</div>
71-
</div>
72122
</main>

‎app/views/layouts/application.tmpl

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@
44
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
55
{{render_seo_tag}}
66
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0"/>
7-
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i|Playfair+Display|Raleway" rel="stylesheet">
7+
<link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i|Playfair+Display|Raleway" rel="stylesheet">
8+
<link type="text/css" rel="stylesheet" href="/dist/home_products.css" />
9+
<link type="text/css" rel="stylesheet" href="/vendors/flexslider.css" />
810
<link rel="stylesheet" media="all" href="/dist/qor.css">
911
<script src="/vendors/jquery.js"></script>
1012
<link href="//use.fontawesome.com/6a90f27203.css" media="all" rel="stylesheet">

‎app/views/widgets/products.tmpl

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
<ul class="grid row-four products__list">
2-
{{range .Products}}
3-
<li class="grid__col is-3">
4-
<a href="{{.DefaultPath}}" class="products__list--img"><img src="{{.MainImageURL}}" alt="" /></a>
5-
<a class="products__list--title" href="{{.DefaultPath}}">{{.Name}}</a>
6-
<p class="products__list--price" href="{{.DefaultPath}}"><span class="item_price">${{.Price}}</span></p>
7-
</li>
2+
{{range.Products}}
3+
<li class="grid__col is-3">
4+
<a href="{{.DefaultPath}}" class="products__list--img">
5+
<img src="{{.MainImageURL}}" alt=""/>
6+
</a>
7+
<a class="products__list--title" href="{{.DefaultPath}}">{{.Name}}</a>
8+
<p class="products__list--price" href="{{.DefaultPath}}">
9+
<span class="item_price">${{.Price}}</span>
10+
</p>
11+
</li>
812
{{end}}
913
</ul>
10-
<link type="text/css" rel="stylesheet" href="/dist/home_products.css" />

0 commit comments

Comments
 (0)