Commit 236cbc7b445aa54865cfd8c10042d7954d7744c7

Authored by Dang YoungWorld
1 parent c55955c063
Exists in master and in 1 other branch develop

update theme

Showing 4 changed files with 163 additions and 77 deletions Side-by-side Diff

app/images/t-shirt_icon/tshirt1.gif

1.33 KB | W: | H:

1.18 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
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 });
... ... @@ -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  
... ... @@ -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 &copy; CREVASSE - All Rights Reserved
  238 + </div>
240 239  
241 240 <!--MODAL CONTENT-->
242 241 <div ng-include="designFrameView"></div>