TRUONG / T-Shats Frontend

Download as
Browse Code »

Commit c55955c063478113d1b399e06119c730e198bbfa

Authored by DANG
1 parent 8841fa14eb
Exists in master and in 1 other branch develop

new menu

Showing 17 changed files with 131 additions and 88 deletions Side-by-side Diff

No preview for this file type
No preview for this file type
app/images/.DS_Store
Diff comments   View file @ c55955c
No preview for this file type
app/images/arrow1.png
Diff comments   View file @ c55955c

4.11 KB
app/images/arrow2.png
Diff comments   View file @ c55955c

4.1 KB
app/images/bgbutton1.png
Diff comments   View file @ c55955c

4.16 KB
app/images/bgbutton2.png
Diff comments   View file @ c55955c

3.18 KB
app/images/linebg.png
Diff comments   View file @ c55955c

6.4 KB
app/images/logo_mobile_world.png
View file @ c55955c

7.29 KB
app/images/logobottom.png
Diff comments   View file @ c55955c

9.31 KB
app/images/stepicon1.png
Diff comments   View file @ c55955c

5.57 KB
app/images/stepicon2.png
Diff comments   View file @ c55955c

5.68 KB
app/images/t-shirt_icon/tshirt1.gif
Diff comments   View file @ c55955c

1.09 KB | W: | H:

1.33 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
app/images/uniqlo_logo.png
View file @ c55955c

5.04 KB
app/images/yeoman.png
View file @ c55955c

13.2 KB
... ... @@ -95,12 +95,22 @@
95 95 header .top-menu{
96 96 list-style: none;
97 97 padding-left: 0;
98   - margin-bottom: 3px;
  98 + margin-bottom: 5px;
99 99 }
100 100 header .top-menu li{
101 101 float: left;
102   - padding: 6px 10px;
  102 + padding: 6px 0;
  103 +
103 104 }
  105 +header .top-menu li a{
  106 + color: #000000;
  107 + padding: 0 10px;
  108 + border-right: 1px solid #000000;
  109 + font-size: 12px;
  110 +}
  111 +header .top-menu li:last-child a{
  112 + border-right: 0;
  113 +}
104 114 header .top-control{
105 115 list-style: none;
106 116 padding-left: 0;
107 117  
108 118  
109 119  
... ... @@ -113,21 +123,33 @@
113 123 header .top-control li .bt-yellow{
114 124 background-color: #fe6a00;
115 125 color: #ffffff;
116   - padding: 4px 10px;
  126 + padding: 3px 10px;
117 127 font-size: 12px;
118 128 }
119 129 header .user-control{
120 130 background-color: #888888;
121 131 text-align: center;
122 132 }
  133 +header .user-control div{
  134 + font-size: 12px;
  135 + color: #ffffff;
  136 +}
  137 +header .user-control div:first-child{
  138 + padding: 10px 10px;
  139 +}
  140 +header .user-control div:last-child{
  141 + background-color: #fe6a00;
  142 + padding: 3px 10px;
  143 +}
123 144 /*NAVIGATION*/
124 145 nav{
125 146 border-bottom: 1px solid #dcdcdc;
126   - padding: 10px 0;
  147 + padding: 5px 0;
127 148 }
128 149 nav h2{
129 150 font-size: 27px;
130   - margin: 0 0;
  151 + margin: 20px 0;
  152 +
131 153 }
132 154 nav ul{
133 155 list-style: none;
134 156  
135 157  
136 158  
137 159  
138 160  
139 161  
140 162  
141 163  
... ... @@ -136,37 +158,58 @@
136 158  
137 159 }
138 160 nav ul li{
139   - margin-left: 2px;
140 161 float: left;
141   - padding: 6px 12px;
  162 +}
  163 +nav ul li.line{
  164 + border-bottom: 2px dashed #000000;
  165 + width: 34px;
  166 + height: 34px;
  167 +}
  168 +nav ul li.line-action{
  169 + border-bottom: 2px dashed #fe6a00;
  170 +}
  171 +nav ul li.circle{
  172 + width: 70px;
  173 + height: 70px;
  174 + -moz-border-radius: 35px;
  175 + -webkit-border-radius: 35px;
  176 + border-radius: 35px;
  177 + text-align: center;
  178 + font-size: 12px;
  179 + /*margin-left: 26px;*/
  180 +
142 181 background-color: #999999;
143 182 position: relative;
  183 + display: inline;
  184 + cursor: pointer;
144 185 }
145   -nav ul li i.fa{
146   - position: absolute;
  186 +
  187 +nav ul li.circle a{
147 188 color: #ffffff;
148   - font-size: 18px;
149   - right: -4px;
  189 + position: absolute;
150 190 top: 50%;
  191 + left: 50%;
151 192 transform: translateX(-50%) translateY(-50%);
152 193 -webkit-transform: translateX(-50%) translateY(-50%);
153 194 }
154   -nav ul li a{
155   - color: #ffffff;
156   -}
157 195 nav ul li:hover a{
158 196 text-decoration: none;
159 197 color: #ffffff;
160 198 }
161 199 nav ul li.action{
162   - color: #ffffff;
163   - background-color: #ed1d24;
  200 + background-color: #fe6a00;
164 201 }
165 202 /*ASIDE*/
166 203 aside{
167 204 margin: 10px 0;
168 205 }
169   -
  206 +aside .break-left{
  207 + position: absolute;
  208 + left: 50%;
  209 + top: 50%;
  210 + transform: translateX(-50%) translateY(-50%);
  211 + -webkit-transform: translateX(-50%) translateY(-50%);
  212 +}
170 213 aside .break-down{
171 214 padding: 0 0;
172 215 }
173 216  
174 217  
175 218  
176 219  
177 220  
178 221  
179 222  
... ... @@ -204,39 +247,41 @@
204 247 }
205 248 /*Step 1*/
206 249 aside .step .step-box .tshirt-design{
207   - border: 1px solid #cccccc;
208   - background-color: #f5f5f5;
209   - margin: 10px 10px;
  250 + /*border: 1px solid #cccccc;*/
  251 + /*background-color: #f5f5f5;*/
  252 + margin: 4px 4px;
210 253 }
211 254 aside .step .step-box .tshirt-design:hover{
212   - border: 1px solid #ff0000;
  255 + /*border: 1px solid #ff0000;*/
213 256 }
214 257 aside .step .step-box .tshirt-design button:hover{
215 258 background-color: #fa7b7b;
216 259 border: 1px solid #fa7b7b;
217 260 }
218 261 aside .step .step-box .tshirt-design div{
219   - float: left;
  262 + /*float: left;*/
220 263 }
221 264 aside .step .step-box .tshirt-design .icon{
222 265 padding: 4px 4px;
223   - border-right: 1px solid #cccccc;
224   -
  266 + text-align: center;
  267 + width: 100%;
225 268 }
226 269 aside .step .step-box .tshirt-design .icon img{
227   - height: 50px;
  270 + max-width: 100%;
228 271 }
229 272 aside .step .step-box .tshirt-design .name{
230   - padding: 10px 10px;
  273 + padding: 2px 4px;
  274 + text-align: center;
231 275  
232 276 }
233 277 aside .step .step-box .tshirt-design .action{
234   - padding: 10px 10px;
235   - float: right;
  278 + /*padding: 10px 10px;*/
  279 + /*float: right;*/
236 280  
237 281 }
238 282 aside .step .step-box .tshirt-design .action button{
239   - padding: 8px 10px;
  283 + padding: 6px 8px;
  284 + width: 100%;
240 285 }
241 286 /*Step 2*/
242 287 aside .step .step-box .tshirt-color{
... ... @@ -279,9 +324,7 @@
279 324 font-size: 10px;
280 325 }
281 326 aside .step .step-box .tshirt-color .view-more{
282   - position: absolute;
283   - bottom: 6px;
284   - right: 10px;
  327 +
285 328 }
286 329 /*Step 3*/
287 330 aside .step .step-box .tshirt-saveorder{
288 331  
289 332  
... ... @@ -321,13 +364,9 @@
321 364 transform: translateX(-50%) translateY(-50%);
322 365 -webkit-transform: translateX(-50%) translateY(-50%);
323 366 }
324   -aside .step .step-box .tshirt-saveorder .notice{
325   - padding: 5px 0 0 0;
326   -}
  367 +
327 368 /*Step 4*/
328   -aside .step .title-notice{
329 369  
330   -}
331 370 aside .step .step-box .change-design{
332 371 padding: 4px 4px;
333 372 }
... ... @@ -755,7 +794,6 @@
755 794 }
756 795 .tshirt-design-container .design-content{
757 796 padding: 10px 0;
758   - /*min-height: 580px;*/
759 797 }
760 798 .tshirt-design-container .design-content .content{
761 799 width: 100%;
... ... @@ -22,24 +22,24 @@
22 22 <div class="pull-left">
23 23 <ul class="top-menu clearfix">
24 24 <li>
25   - <a href="#">ABC</a>
  25 + <a href="#">はじめての方へ</a>
26 26 </li>
27 27 <li>
28   - <a href="#">ABC</a>
  28 + <a href="#">料金表</a>
29 29 </li>
30 30 <li>
31   - <a href="#">ABC</a>
  31 + <a href="#">新規会員登録</a>
32 32 </li>
33 33 </ul>
34 34 <ul class="top-control clearfix">
35 35 <li>
36 36 <div class="bt-yellow">
37   - <i class="fa fa-shirtsinbulk" aria-hidden="true"></i> DESIGN に戻る
  37 + <i class="fa fa-shirtsinbulk" aria-hidden="true"></i> DESIGN　デザイン作成
38 38 </div>
39 39 </li>
40 40 <li>
41 41 <div class="bt-yellow">
42   - <i class="fa fa-shopping-cart" aria-hidden="true"></i> 加工方法に戻る
  42 + <i class="fa fa-shopping-cart" aria-hidden="true"></i> ショッピングカート
43 43 </div>
44 44 </li>
45 45 </ul>
46 46  
... ... @@ -47,10 +47,10 @@
47 47 <div class="pull-right">
48 48 <div class="user-control">
49 49 <div>
50   - 方法に戻る
  50 + マイページ
51 51 </div>
52   - <div>
53   - <i class="fa fa-lock" aria-hidden="true"></i> に戻る
  52 + <div class="login">
  53 + <i class="fa fa-lock" aria-hidden="true"></i> ログイン
54 54 </div>
55 55 </div>
56 56 </div>
57 57  
58 58  
59 59  
60 60  
61 61  
62 62  
... ... @@ -60,60 +60,67 @@
60 60 <div class="col-sm-12">
61 61 <h2 class="pull-left">加工箇所を選択してデザインしてください。</h2>
62 62 <ul class="pull-right">
63   - <li><a href="#">商品に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li>
64   - <li><a href="#">加工方法に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li>
65   - <li class="action">デザインする</li>
  63 +
  64 +
  65 + <li class="circle"><a href="#">商品に戻る</a></li>
  66 + <li class="line"></li>
  67 + <li class="circle"><a href="#">加工方法に戻る</a></li>
  68 + <li class="line line-action"></li>
  69 + <li class="circle action"><a href="#">デザインする</a></li>
66 70 </ul>
67 71 </div>
68 72 </nav>
69 73 <article class="clearfix">
70 74 <aside class="col-sm-5">
71   - <div class="step">
72   - <div class="title">
73   - 1. デザインを作る
74   - </div>
75   - <div class="step-box">
76   - <div class="tshirt-design clearfix">
77   - <div class="icon">
78   - <img src="images/t-shirt_icon/tshirt1.gif" alt="icon t-shirt" />
  75 + <div class="clearfix row" style="position: relative">
  76 + <div class="step col-xs-6">
  77 + <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 + </div>
  80 + <div class="step-box">
  81 + <div class="tshirt-design clearfix">
  82 + <div class="icon">
  83 + <img src="images/t-shirt_icon/tshirt1.gif" alt="icon t-shirt" />
  84 + </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>
79 93 </div>
80   - <div class="name">
81   - 背中背中 (28x22)
82   - </div>
83   - <div class="action">
84   - <button class="red" ng-click="modalTShirtDesign()">
85   - <i class="fa fa-caret-right" aria-hidden="true"></i> デザインを作る
86   - </button>
87   - </div>
88 94 </div>
89 95 </div>
90   - </div>
91 96  
92   - <!-- BREAK DOWN-->
93   - <div class="text-center break-down">
94   - <img src="images/bg_step_arrow.gif" alt="arrow" />
95   - </div>
96   -
97   - <!-- STEP 2-->
98   - <div class="step">
99   - <div class="title">
100   - 2.アイテムカラーを変更する
  97 + <!--&lt;!&ndash; BREAK DOWN&ndash;&gt;-->
  98 + <div class="text-center break-left">
  99 + <img src="images/arrow1.png" alt="arrow" />
101 100 </div>
102   - <div class="step-box clearfix">
103   - <div class="tshirt-color">
104   - <ul class="choice-color clearfix">
105   - <li ng-repeat="(key,color) in tShirtColor" ng-click="choiceTShirtColor(key)" ng-class="key == tShirtColorKey ? 'action' : ''">
106   - <div ng-style="{'background-color' : color.code}"></div>
107   - </li>
108   - </ul>
109   - <div class="color-name" ng-bind="tShirtColorName"></div>
110   - <div class="view-more">
111   - 在庫確認 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
  101 +
  102 + <!-- STEP 2-->
  103 + <div class="step col-xs-6">
  104 + <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 + </div>
  107 + <div class="step-box clearfix">
  108 + <div class="tshirt-color">
  109 + <ul class="choice-color clearfix">
  110 + <li ng-repeat="(key,color) in tShirtColor" ng-click="choiceTShirtColor(key)" ng-class="key == tShirtColorKey ? 'action' : ''">
  111 + <div ng-style="{'background-color' : color.code}"></div>
  112 + </li>
  113 + </ul>
  114 + <div class="color-name" ng-bind="tShirtColorName"></div>
  115 + <div class="view-more">
  116 + 在庫確認 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
  117 + </div>
112 118 </div>
113 119 </div>
114 120 </div>
115 121 </div>
116 122  
  123 +
117 124 <!-- BREAK DOWN-->
118 125 <div class="text-center break-down">
119 126 <img src="images/bg_step_arrow.gif" alt="arrow" />
... ... @@ -145,9 +152,7 @@
145 152 </button>
146 153 </div>
147 154 </div>
148   - <div class="notice">
149   - デザインを保存するには、ログインしてください
150   - </div>
  155 +
151 156 </div>
152 157 </div>
153 158