Commit 236cbc7b445aa54865cfd8c10042d7954d7744c7
1 parent
c55955c063
Exists in
master
and in
1 other branch
update theme
Showing 4 changed files with 163 additions and 77 deletions Side-by-side Diff
app/images/t-shirt_icon/tshirt1.gif
app/scripts/controllers/main.js
... | ... | @@ -11,6 +11,7 @@ |
11 | 11 | var currentTShirtKey = 0; |
12 | 12 | var placeTShirtKey = ''; |
13 | 13 | var tShirtColorFirstKey = 0; |
14 | + $scope.hideReviewDesign = false; | |
14 | 15 | $scope.tShirtChoiceBackFrontKey = 'front'; |
15 | 16 | $scope.tShirtColorKey = tShirtColorFirstKey; |
16 | 17 | |
... | ... | @@ -124,6 +125,15 @@ |
124 | 125 | $scope.modalClose = function(){ |
125 | 126 | $('#tshirt-design').modal('hide'); |
126 | 127 | }; |
128 | + /** | |
129 | + *Show/Hide review design | |
130 | + */ | |
131 | + $scope.hideShowReviewDesign = function () { | |
132 | + if($scope.hideReviewDesign == true) | |
133 | + $scope.hideReviewDesign = false; | |
134 | + else | |
135 | + $scope.hideReviewDesign = true; | |
136 | + } | |
127 | 137 | |
128 | 138 | |
129 | 139 | }); |
app/styles/main.css
... | ... | @@ -36,11 +36,20 @@ |
36 | 36 | color: #ffffff; |
37 | 37 | background-color: #ff0000; |
38 | 38 | border: 1px solid #ff0000; |
39 | - | |
40 | 39 | } |
40 | +button.yellow1{ | |
41 | + background:url("../images/bgbutton1.png") repeat #ff801d; | |
42 | + color: #ffffff; | |
43 | + border: 1px solid #ff801d; | |
44 | +} | |
45 | +button.yellow2{ | |
46 | + background:url("../images/bgbutton2.png") repeat #ff801d; | |
47 | + color: #ffffff; | |
48 | + border: 1px solid #ff801d; | |
49 | +} | |
41 | 50 | button.white{ |
42 | - border: 1px solid #ff8080; | |
43 | - color: #ff8080; | |
51 | + border: 1px solid #ff801d; | |
52 | + color: #ff801d; | |
44 | 53 | background-color: #ffffff; |
45 | 54 | } |
46 | 55 | button.brown{ |
... | ... | @@ -55,6 +64,10 @@ |
55 | 64 | color: #ffffff; |
56 | 65 | padding: 1px 6px; |
57 | 66 | } |
67 | +button.none{ | |
68 | + border: 0; | |
69 | + background-color: transparent; | |
70 | +} | |
58 | 71 | #tshirt-container{ |
59 | 72 | border-left: 1px solid #dcdcdc; |
60 | 73 | border-right: 1px solid #dcdcdc; |
61 | 74 | |
... | ... | @@ -232,10 +245,23 @@ |
232 | 245 | font-weight: bold; |
233 | 246 | margin-bottom: 3px; |
234 | 247 | } |
248 | +aside .step .title span:first-child { | |
249 | + float: left; | |
250 | + width: 28% | |
251 | +} | |
252 | +aside .step .title span:last-child{ | |
253 | + float: left; | |
254 | + width: 72%; | |
255 | + padding: 6px 0; | |
256 | +} | |
257 | + | |
258 | +aside .step .title span:last-child { | |
259 | + | |
260 | +} | |
235 | 261 | aside .step .title-notice{ |
236 | 262 | font-size: 13px; |
237 | 263 | line-height: 16px; |
238 | - margin-bottom: 3px; | |
264 | + margin-bottom: 5px; | |
239 | 265 | } |
240 | 266 | aside .step .title-notice .require{ |
241 | 267 | font-size: 10px; |
242 | 268 | |
... | ... | @@ -243,12 +269,10 @@ |
243 | 269 | aside .step .step-box{ |
244 | 270 | border: 2px solid #dcdcdc; |
245 | 271 | font-size: 12px; |
246 | - | |
272 | + position: relative; | |
247 | 273 | } |
248 | 274 | /*Step 1*/ |
249 | 275 | aside .step .step-box .tshirt-design{ |
250 | - /*border: 1px solid #cccccc;*/ | |
251 | - /*background-color: #f5f5f5;*/ | |
252 | 276 | margin: 4px 4px; |
253 | 277 | } |
254 | 278 | aside .step .step-box .tshirt-design:hover{ |
... | ... | @@ -269,6 +293,7 @@ |
269 | 293 | aside .step .step-box .tshirt-design .icon img{ |
270 | 294 | max-width: 100%; |
271 | 295 | } |
296 | + | |
272 | 297 | aside .step .step-box .tshirt-design .name{ |
273 | 298 | padding: 2px 4px; |
274 | 299 | text-align: center; |
275 | 300 | |
... | ... | @@ -285,9 +310,11 @@ |
285 | 310 | } |
286 | 311 | /*Step 2*/ |
287 | 312 | aside .step .step-box .tshirt-color{ |
288 | - padding: 6px 10px; | |
313 | + padding: 6px 6px; | |
314 | + height: 100%; | |
289 | 315 | position: relative; |
290 | 316 | } |
317 | + | |
291 | 318 | aside .step .step-box .tshirt-color ul.choice-color{ |
292 | 319 | float: left; |
293 | 320 | list-style: none; |
... | ... | @@ -296,7 +323,7 @@ |
296 | 323 | margin-bottom: 3px; |
297 | 324 | } |
298 | 325 | aside .step .step-box .tshirt-color ul.choice-color li{ |
299 | - margin: 0 8px 4px 0; | |
326 | + margin: 0 6px 6px 0; | |
300 | 327 | border: 1px solid #cccccc; |
301 | 328 | padding: 2px 2px; |
302 | 329 | float: left; |
... | ... | @@ -309,8 +336,9 @@ |
309 | 336 | border: 1px solid #ff0000; |
310 | 337 | } |
311 | 338 | aside .step .step-box .tshirt-color ul.choice-color li div{ |
312 | - height: 30px; | |
313 | - width: 30px; | |
339 | + height: 26px; | |
340 | + width: 26px; | |
341 | + margin: 0; | |
314 | 342 | } |
315 | 343 | |
316 | 344 | aside .step .step-box .tshirt-color ul.choice-color li.white div{ |
317 | 345 | |
318 | 346 | |
319 | 347 | |
... | ... | @@ -319,16 +347,25 @@ |
319 | 347 | aside .step .step-box .tshirt-color ul.choice-color li.blue div{ |
320 | 348 | background-color: #e7dfd0; |
321 | 349 | } |
322 | -aside .step .step-box .tshirt-color .color-name{ | |
350 | +aside .step .step-box .choice-color-bottom{ | |
351 | + position: absolute; | |
352 | + bottom: 0; | |
353 | + left: 0; | |
354 | + width: 80%; | |
355 | + margin: 0 10%; | |
356 | +} | |
357 | +aside .step .step-box .choice-color-bottom .color-name{ | |
323 | 358 | width: 100%; |
324 | - font-size: 10px; | |
359 | + font-size: 12px; | |
360 | + text-align: center; | |
361 | + padding: 4px 0; | |
325 | 362 | } |
326 | -aside .step .step-box .tshirt-color .view-more{ | |
327 | - | |
363 | +aside .step .step-box .choice-color-bottom .view-more{ | |
364 | + text-align: right; | |
328 | 365 | } |
329 | 366 | /*Step 3*/ |
330 | 367 | aside .step .step-box .tshirt-saveorder{ |
331 | - padding: 10px 10px 6px 10px; | |
368 | + padding: 10px 10px 10px 10px; | |
332 | 369 | } |
333 | 370 | aside .step .step-box .tshirt-saveorder .action{ |
334 | 371 | width: 50%; |
335 | 372 | |
336 | 373 | |
337 | 374 | |
338 | 375 | |
339 | 376 | |
... | ... | @@ -341,41 +378,33 @@ |
341 | 378 | padding-left: 5px; |
342 | 379 | } |
343 | 380 | aside .step .step-box .tshirt-saveorder .action button{ |
344 | - padding: 8px 10px; | |
345 | - | |
381 | + padding: 4px 10px; | |
382 | + width: 100%; | |
346 | 383 | } |
347 | -aside .step .step-box .tshirt-saveorder .action button .text{ | |
348 | - float: left; | |
349 | - width: 80%; | |
350 | - text-align: center; | |
351 | - padding-left: 10px; | |
352 | - vertical-align: bottom; | |
353 | -} | |
354 | -aside .step .step-box .tshirt-saveorder .action button .arrow{ | |
355 | - float: left; | |
356 | - width: 20%; | |
357 | - height: 40px; | |
358 | - position: relative; | |
359 | -} | |
360 | -aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{ | |
361 | - position: absolute; | |
362 | - top: 50%; | |
363 | - right: -6px; | |
364 | - transform: translateX(-50%) translateY(-50%); | |
365 | - -webkit-transform: translateX(-50%) translateY(-50%); | |
366 | -} | |
367 | 384 | |
385 | + | |
368 | 386 | /*Step 4*/ |
369 | 387 | |
370 | 388 | aside .step .step-box .change-design{ |
371 | - padding: 4px 4px; | |
389 | + /*padding: 4px 4px;*/ | |
372 | 390 | } |
373 | 391 | aside .step .step-box .change-design table{ |
374 | - | |
392 | + width: 100%; | |
375 | 393 | } |
376 | 394 | aside .step .step-box .change-design table tr{ |
377 | 395 | border-bottom: 1px dotted #cccccc; |
378 | 396 | } |
397 | +aside .step .step-box .change-design table tr td{ | |
398 | + padding: 4px 3px; | |
399 | +} | |
400 | +aside .step .step-box .change-design table tr td:first-child{ | |
401 | + background-color: #ededed; | |
402 | +} | |
403 | +aside .step .step-box .change-design table tr td:last-child{ | |
404 | + background: url("../images/bgbutton2.png"); | |
405 | + color: #ffffff; | |
406 | + font-size: 15px; | |
407 | +} | |
379 | 408 | aside .step .step-box .change-design table tr:last-child{ |
380 | 409 | border-bottom: 0; |
381 | 410 | } |
... | ... | @@ -399,6 +428,8 @@ |
399 | 428 | right: 10px; |
400 | 429 | color: red; |
401 | 430 | font-size: 11px; |
431 | + cursor: pointer; | |
432 | + z-index: 99999; | |
402 | 433 | } |
403 | 434 | #tshirt-content .tshirt-image{ |
404 | 435 | padding: 20px 0 0 0; |
405 | 436 | |
... | ... | @@ -479,14 +510,14 @@ |
479 | 510 | cursor: pointer; |
480 | 511 | } |
481 | 512 | #tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{ |
482 | - background-color: red; | |
513 | + background-color: #ff7200; | |
483 | 514 | color: #ffffff; |
484 | 515 | } |
485 | 516 | #tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{ |
486 | 517 | color: #ffffff; |
487 | 518 | } |
488 | 519 | #tshirt-design header ul.nav li i.fa{ |
489 | - color: #fe070f; | |
520 | + color: #fc7500; | |
490 | 521 | font-size: 20px; |
491 | 522 | margin-right: 10px; |
492 | 523 | } |
... | ... | @@ -543,7 +574,7 @@ |
543 | 574 | } |
544 | 575 | .aside .box-design-option li .content i.fa{ |
545 | 576 | font-size: 30px; |
546 | - color: #fe070f; | |
577 | + color: #ff7200; | |
547 | 578 | margin: 8px 0; |
548 | 579 | } |
549 | 580 | .aside .box-design-option li .content .des{ |
... | ... | @@ -845,6 +876,9 @@ |
845 | 876 | footer ul.nav-footer{ |
846 | 877 | padding-left: 0; |
847 | 878 | list-style: none; |
879 | + float: left; | |
880 | + width: 80%; | |
881 | + margin-bottom: 0 | |
848 | 882 | } |
849 | 883 | footer ul.nav-footer li{ |
850 | 884 | float: left; |
... | ... | @@ -856,6 +890,20 @@ |
856 | 890 | color: #ffffff; |
857 | 891 | font-size: 11px; |
858 | 892 | } |
893 | +footer .logo-bottom{ | |
894 | + float: left; | |
895 | + width: 20%; | |
896 | + margin-bottom: 0; | |
897 | + text-align: right; | |
898 | +} | |
899 | +footer .logo-bottom img{ | |
900 | + height: 25px; | |
901 | + max-width: 100%; | |
902 | +} | |
903 | +.footer{ | |
904 | + padding: 15px 0; | |
905 | + text-align: center; | |
906 | +} | |
859 | 907 | /* Customize container */ |
860 | 908 | @media (min-width: 768px) { |
861 | 909 | .container { |
... | ... | @@ -875,7 +923,7 @@ |
875 | 923 | width: 1000px; |
876 | 924 | } |
877 | 925 | } |
878 | - | |
926 | +/*Mobile responsive*/ | |
879 | 927 | @media (max-width: 762px) { |
880 | 928 | .modal-dialog{ |
881 | 929 | margin: 0 0!important; |
... | ... | @@ -899,6 +947,35 @@ |
899 | 947 | } |
900 | 948 | .tshirt-design-container .design-content{ |
901 | 949 | padding: 0 0; |
950 | + } | |
951 | + /*Header*/ | |
952 | + header .logo{ | |
953 | + text-align: left; | |
954 | + } | |
955 | + header .top-control li{ | |
956 | + margin: 0 4px; | |
957 | + } | |
958 | + header .top-menu{ | |
959 | + display: table; | |
960 | + margin: auto; | |
961 | + } | |
962 | + header .social-share{ | |
963 | + display: none; | |
964 | + } | |
965 | + header .col-sm-6{ | |
966 | + padding: 0!important; | |
967 | + } | |
968 | + header .user-control{ | |
969 | + position: absolute; | |
970 | + right: 0; | |
971 | + top: -120%; | |
972 | + } | |
973 | + /*Footer*/ | |
974 | + footer ul.nav-footer{ | |
975 | + width: 100%; | |
976 | + } | |
977 | + footer .logo-bottom{ | |
978 | + display: none; | |
902 | 979 | } |
903 | 980 | } |
904 | 981 |
app/views/main.html
... | ... | @@ -60,8 +60,6 @@ |
60 | 60 | <div class="col-sm-12"> |
61 | 61 | <h2 class="pull-left">加工箇所を選択してデザインしてください。</h2> |
62 | 62 | <ul class="pull-right"> |
63 | - | |
64 | - | |
65 | 63 | <li class="circle"><a href="#">商品に戻る</a></li> |
66 | 64 | <li class="line"></li> |
67 | 65 | <li class="circle"><a href="#">加工方法に戻る</a></li> |
68 | 66 | |
69 | 67 | |
... | ... | @@ -70,26 +68,29 @@ |
70 | 68 | </ul> |
71 | 69 | </div> |
72 | 70 | </nav> |
71 | + <div style="height: 29px; width: 100%; background: url('../images/linebg.png') repeat-x"> | |
72 | + | |
73 | + </div> | |
73 | 74 | <article class="clearfix"> |
74 | 75 | <aside class="col-sm-5"> |
75 | 76 | <div class="clearfix row" style="position: relative"> |
76 | 77 | <div class="step col-xs-6"> |
77 | 78 | <div class="title clearfix"> |
78 | - <span style="float: left;width: 28%"><img src="../images/stepicon1.png" alt="1" /></span> <span style="float: left;width: 72%; padding: 16px 0">デザインを作る</span> | |
79 | + <span><img src="../images/stepicon1.png" alt="1" /></span> <span>デザインを作る</span> | |
79 | 80 | </div> |
80 | 81 | <div class="step-box"> |
81 | 82 | <div class="tshirt-design clearfix"> |
82 | 83 | <div class="icon"> |
83 | 84 | <img src="images/t-shirt_icon/tshirt1.gif" alt="icon t-shirt" /> |
84 | 85 | </div> |
85 | - <div class="name"> | |
86 | - 背中背中 (28x22) | |
87 | - </div> | |
88 | - <div class="action"> | |
89 | - <button class="red" ng-click="modalTShirtDesign()"> | |
90 | - デザインを作る | |
91 | - </button> | |
92 | - </div> | |
86 | + <div class="name"> | |
87 | + 背中背中 (28x22) | |
88 | + </div> | |
89 | + <div class="action"> | |
90 | + <button class="yellow2" ng-click="modalTShirtDesign()"> | |
91 | + デザインを作る | |
92 | + </button> | |
93 | + </div> | |
93 | 94 | </div> |
94 | 95 | </div> |
95 | 96 | </div> |
96 | 97 | |
97 | 98 | |
98 | 99 | |
... | ... | @@ -102,18 +103,20 @@ |
102 | 103 | <!-- STEP 2--> |
103 | 104 | <div class="step col-xs-6"> |
104 | 105 | <div class="title clearfix"> |
105 | - <span style="float: left;width: 28%"><img src="../images/stepicon2.png" alt="2" /></span><span style="float: left;width: 72%;padding: 6px 0"> アイテムカラーを変更する</span> | |
106 | + <span><img src="../images/stepicon2.png" alt="2" /></span><span> アイテムカラーを変更する</span> | |
106 | 107 | </div> |
107 | - <div class="step-box clearfix"> | |
108 | + <div class="step-box clearfix" style="min-height: 150px;"> | |
108 | 109 | <div class="tshirt-color"> |
109 | 110 | <ul class="choice-color clearfix"> |
110 | 111 | <li ng-repeat="(key,color) in tShirtColor" ng-click="choiceTShirtColor(key)" ng-class="key == tShirtColorKey ? 'action' : ''"> |
111 | 112 | <div ng-style="{'background-color' : color.code}"></div> |
112 | 113 | </li> |
113 | 114 | </ul> |
115 | + </div> | |
116 | + <div class="choice-color-bottom"> | |
114 | 117 | <div class="color-name" ng-bind="tShirtColorName"></div> |
115 | 118 | <div class="view-more"> |
116 | - 在庫確認 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> | |
119 | + 在庫確認 | |
117 | 120 | </div> |
118 | 121 | </div> |
119 | 122 | </div> |
... | ... | @@ -123,7 +126,7 @@ |
123 | 126 | |
124 | 127 | <!-- BREAK DOWN--> |
125 | 128 | <div class="text-center break-down"> |
126 | - <img src="images/bg_step_arrow.gif" alt="arrow" /> | |
129 | + <img src="images/arrow2.png" alt="arrow" /> | |
127 | 130 | </div> |
128 | 131 | |
129 | 132 | <!-- STEP 3--> |
130 | 133 | |
131 | 134 | |
132 | 135 | |
... | ... | @@ -133,22 +136,12 @@ |
133 | 136 | <div class="clearfix"> |
134 | 137 | <div class="action"> |
135 | 138 | <button class="white"> |
136 | - <div class="text"> | |
137 | 139 | このデザインを保存する |
138 | - </div> | |
139 | - <div class="arrow"> | |
140 | - <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> | |
141 | - </div> | |
142 | 140 | </button> |
143 | 141 | </div> |
144 | 142 | <div class="action"> |
145 | - <button class="red"> | |
146 | - <div class="text"> | |
143 | + <button class="yellow1"> | |
147 | 144 | このデザインで注文する |
148 | - </div> | |
149 | - <div class="arrow clearfix"> | |
150 | - <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> | |
151 | - </div> | |
152 | 145 | </button> |
153 | 146 | </div> |
154 | 147 | </div> |
... | ... | @@ -164,7 +157,7 @@ |
164 | 157 | <!-- STEP 4--> |
165 | 158 | <div class="step"> |
166 | 159 | <div class="title-notice"> |
167 | - 商品・デザインの変更はこちら <span class="require">作業中のデザインは破棄されます</span> | |
160 | + <strong>商品・デザインの変更はこちら</strong> <span class="require">作業中のデザインは破棄されます</span> | |
168 | 161 | </div> |
169 | 162 | <div class="step-box"> |
170 | 163 | <div class="change-design"> |
171 | 164 | |
... | ... | @@ -172,15 +165,15 @@ |
172 | 165 | <tr> |
173 | 166 | <td class="text-center">商品</td> |
174 | 167 | <td>MENドライカノコポロシャツ・ポケツキ半袖(ホワイト)</td> |
175 | - <td class="text-right"> | |
176 | - <button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button> | |
168 | + <td class="text-center"> | |
169 | + <button class="none"><i class="fa fa-angle-right" aria-hidden="true"></i> 変更</button> | |
177 | 170 | </td> |
178 | 171 | </tr> |
179 | 172 | <tr> |
180 | 173 | <td width="10%" class="text-center">加工方法</td> |
181 | 174 | <td width="70%">シルク:胸中央 (27×27)</td> |
182 | - <td width="20%" class="text-right"> | |
183 | - <button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button> | |
175 | + <td width="20%" class="text-center"> | |
176 | + <button class="none"><i class="fa fa-angle-right" aria-hidden="true"></i> 変更</button> | |
184 | 177 | </td> |
185 | 178 | </tr> |
186 | 179 | </table> |
187 | 180 | |
... | ... | @@ -199,12 +192,12 @@ |
199 | 192 | </div> |
200 | 193 | </aside> |
201 | 194 | <section id="tshirt-content" class="col-sm-7 text-center"> |
202 | - <div class="switch-border-design"> | |
195 | + <div class="switch-border-design" ng-click="hideShowReviewDesign()"> | |
203 | 196 | <i class="fa fa-square-o" aria-hidden="true"></i> 枠線を消す |
204 | 197 | </div> |
205 | 198 | <div class="tshirt-image"> |
206 | 199 | <img ng-src="{{ tShirtImg }}" alt="" /> |
207 | - <div ng-class="placeTshirt.place" id="preview-design" ng-show="placeTshirt.face === tShirtChoiceBackFrontKey" ng-click="modalTShirtDesign()"> | |
200 | + <div ng-class="placeTshirt.place" id="preview-design" ng-style="hideReviewDesign == true ? {border: 0} : {}" ng-show="(placeTshirt.face === tShirtChoiceBackFrontKey)" ng-click="modalTShirtDesign()"> | |
208 | 201 | <img ng-src="{{outputImage}}" ng-show="outputImage"/> |
209 | 202 | </div> |
210 | 203 | </div> |
211 | 204 | |
... | ... | @@ -236,7 +229,13 @@ |
236 | 229 | <li><a href="#">採用情報</a></li> |
237 | 230 | <li><a href="#">プライバシーポリシー</a></li> |
238 | 231 | </ul> |
232 | + <div class="logo-bottom"> | |
233 | + <img src="../images/logobottom.png" alt="Logo" /> | |
234 | + </div> | |
239 | 235 | </footer> |
236 | + <div class="footer text-center"> | |
237 | + Copyright © CREVASSE - All Rights Reserved | |
238 | + </div> | |
240 | 239 | |
241 | 240 | <!--MODAL CONTENT--> |
242 | 241 | <div ng-include="designFrameView"></div> |