Commit 4ae9cc6345dbc166316b94bdae232f56b339a968
1 parent
7e14f17860
Exists in
master
and in
1 other branch
fix reponsive
Showing 5 changed files with 47 additions and 17 deletions Inline Diff
app/scripts/controllers/tshirtdesign.js
1 | define(['app'], function (app) { | 1 | define(['app'], function (app) { |
2 | //'use strict'; | ||
3 | app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $window, $timeout, $illustration) { | 2 | app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $window, $timeout, $illustration) { |
4 | |||
5 | var canvas = new fabric.Canvas('main-design-container'); | 3 | var canvas = new fabric.Canvas('main-design-container'); |
6 | //Set width and height canvas | 4 | //Set width and height canvas |
7 | function setSizeCanvas() { | 5 | function setSizeCanvas() { |
8 | console.log($rootScope.placeTshirt); | 6 | if(typeof $rootScope.placeTshirt.place == 'undefined') |
7 | return; | ||
8 | |||
9 | var _modalWidth = $('.modal-dialog').width(); | 9 | var _modalWidth = $('.modal-dialog').width(); |
10 | var _windowWidth = window.innerWidth; | 10 | var _windowWidth = window.innerWidth; |
11 | if(_windowWidth > 762) { | 11 | var place = $rootScope.placeTshirt.place; |
12 | var _contentCanvasWidth = _modalWidth*8/12 - 100; | 12 | |
13 | } else { | 13 | switch (place) { |
14 | var _contentCanvasWidth = _windowWidth-70; | 14 | case 't_shirt_p_1' : |
15 | $scope.designCanvasClass = 'design-content-t_shirt_p_1'; | ||
16 | if(_windowWidth > 762) { | ||
17 | var _contentCanvasWidth = (_modalWidth*8/12)/1.2; | ||
18 | var _contentCanvasHeight = _contentCanvasWidth; | ||
19 | } else { | ||
20 | var _contentCanvasWidth = _windowWidth-70; | ||
21 | var _contentCanvasHeight = _contentCanvasWidth; | ||
22 | } | ||
23 | break; | ||
24 | case 't_shirt_p_2' : | ||
25 | $scope.designCanvasClass = 'design-content-t_shirt_p_2'; | ||
26 | if(_windowWidth > 762) { | ||
27 | var _contentCanvasWidth = (_modalWidth*8/12)/1.2; | ||
28 | var _contentCanvasHeight = (_modalWidth*8/12)/2.2; | ||
29 | |||
30 | } else { | ||
31 | var _contentCanvasWidth = _windowWidth-70; | ||
32 | var _contentCanvasHeight = (_windowWidth)/2.5; | ||
33 | } | ||
34 | break; | ||
35 | default: | ||
36 | break; | ||
15 | } | 37 | } |
16 | 38 | ||
17 | canvas.setWidth(_contentCanvasWidth); | 39 | canvas.setWidth(_contentCanvasWidth); |
18 | canvas.setHeight(650); | 40 | canvas.setHeight(_contentCanvasHeight); |
19 | } | 41 | } |
20 | setSizeCanvas(); | 42 | setSizeCanvas(); |
21 | //Window resize event | 43 | //Window resize event |
22 | $(window).resize(function () { | 44 | $(window).resize(function () { |
23 | setSizeCanvas(); | 45 | setSizeCanvas(); |
24 | }); | 46 | }); |
25 | 47 | ||
26 | //Custom control | 48 | //Custom control |
27 | fabric.Object.prototype.transparentCorners = true; | 49 | fabric.Object.prototype.transparentCorners = true; |
28 | fabric.Object.prototype.hasRotatingPoint = false; | 50 | fabric.Object.prototype.hasRotatingPoint = false; |
29 | 51 | ||
30 | var ctrVisible = {tl: false, ml:false, bl:false, mb: false, br: true, mr: false, tr: true, mt: true, mtr: false}; | 52 | var ctrVisible = {tl: false, ml:false, bl:false, mb: false, br: true, mr: false, tr: true, mt: true, mtr: false}; |
31 | for(key in ctrVisible) { | 53 | for(key in ctrVisible) { |
32 | fabric.Object.prototype.setControlVisible(key,ctrVisible[key]); | 54 | fabric.Object.prototype.setControlVisible(key,ctrVisible[key]); |
33 | } | 55 | } |
34 | 56 | ||
35 | fabric.Object.prototype.customiseCornerIcons({ | 57 | fabric.Object.prototype.customiseCornerIcons({ |
36 | settings: { | 58 | settings: { |
37 | borderColor: '#0000ff', | 59 | borderColor: '#0000ff', |
38 | cornerSize: 25, | 60 | cornerSize: 25, |
39 | cornerShape: 'circle', | 61 | cornerShape: 'circle', |
40 | cornerBackgroundColor: '#0171b4', | 62 | cornerBackgroundColor: '#0171b4', |
41 | cornerPadding: 6 | 63 | cornerPadding: 6 |
42 | }, | 64 | }, |
43 | mt: { | 65 | mt: { |
44 | icon: 'images/control-icon/ok.png' | 66 | icon: 'images/control-icon/ok.png' |
45 | }, | 67 | }, |
46 | br: { | 68 | br: { |
47 | icon: 'images/control-icon/resize.png' | 69 | icon: 'images/control-icon/resize.png' |
48 | }, | 70 | }, |
49 | tr: { | 71 | tr: { |
50 | icon: 'images/control-icon/rotate.png' | 72 | icon: 'images/control-icon/rotate.png' |
51 | } | 73 | } |
52 | }); | 74 | }); |
53 | 75 | ||
54 | fabric.Canvas.prototype.customiseControls({ | 76 | fabric.Canvas.prototype.customiseControls({ |
55 | mt: { | 77 | mt: { |
56 | cursor: 'pointer', | 78 | cursor: 'pointer', |
57 | action: function(e, target) { | 79 | action: function(e, target) { |
58 | fabric.Object.prototype.selectable = false; | 80 | fabric.Object.prototype.selectable = false; |
59 | canvas.deactivateAll(); | 81 | canvas.deactivateAll(); |
60 | delete currentObj; | 82 | delete currentObj; |
61 | $scope.designTextValue = ''; | 83 | $scope.designTextValue = ''; |
62 | $timeout(function(){ | 84 | $timeout(function(){ |
63 | fabric.Object.prototype.selectable = true; | 85 | fabric.Object.prototype.selectable = true; |
64 | },20); | 86 | },20); |
65 | } | 87 | } |
66 | }, | 88 | }, |
67 | br: { | 89 | br: { |
68 | 90 | ||
69 | }, | 91 | }, |
70 | tr: { | 92 | tr: { |
71 | action: 'rotate', | 93 | action: 'rotate', |
72 | cursor: 'crosshair' | 94 | cursor: 'crosshair' |
73 | } | 95 | } |
74 | }); | 96 | }); |
75 | 97 | ||
76 | canvas.on({ | 98 | canvas.on({ |
77 | 'object:added' : onIllustrationAdded, | 99 | 'object:added' : onIllustrationAdded, |
78 | 'object:moving' : onIllustrationMoving, | 100 | 'object:moving' : onIllustrationMoving, |
79 | 'object:scaling' : onIllustrationChange, | 101 | 'object:scaling' : onIllustrationChange, |
80 | 'object:rotating' : onIllustrationChange, | 102 | 'object:rotating' : onIllustrationChange, |
81 | 'object:selected' : onObjectSelected, | 103 | 'object:selected' : onObjectSelected, |
82 | 'object:modified' : onIllustrationModifield, | 104 | 'object:modified' : onIllustrationModifield, |
83 | 'selection:cleared' : onObjectOut, | 105 | 'selection:cleared' : onObjectOut, |
84 | }); | 106 | }); |
85 | 107 | ||
86 | var currentObj; | 108 | var currentObj; |
87 | var listObj = []; | 109 | var listObj = []; |
88 | var stateObj = []; | 110 | var stateObj = []; |
89 | var indexCurr = 0; | 111 | var indexCurr = 0; |
90 | var indexCurr2 = 0; | 112 | var indexCurr2 = 0; |
91 | var actionObj = false; | 113 | var actionObj = false; |
92 | var refreshObj = true; | 114 | var refreshObj = true; |
93 | var spacingNum = 0; | 115 | var spacingNum = 0; |
94 | $scope.itemFont = 0; | 116 | $scope.itemFont = 0; |
95 | 117 | ||
96 | $scope.showDesignTab = function(tab){ | 118 | $scope.showDesignTab = function(tab){ |
97 | canvas.deactivateAll().renderAll(); | 119 | canvas.deactivateAll().renderAll(); |
98 | $rootScope.isShowLeftPanel = tab; | 120 | $rootScope.isShowLeftPanel = tab; |
99 | switch (tab) { | 121 | switch (tab) { |
100 | case 'illustration': { | 122 | case 'illustration': { |
101 | $scope.IllustrationList = $illustration.getAll(); | 123 | $scope.IllustrationList = $illustration.getAll(); |
102 | $rootScope.outputImage = false; | 124 | $rootScope.outputImage = false; |
103 | $scope.illustrationSelectConfig = { | 125 | $scope.illustrationSelectConfig = { |
104 | allowClear:true | 126 | allowClear:true |
105 | }; | 127 | }; |
106 | $timeout(function(){ | 128 | $timeout(function(){ |
107 | $('.illstration-item').tooltip({ | 129 | $('.illstration-item').tooltip({ |
108 | animated: 'fade', | 130 | animated: 'fade', |
109 | placement: 'bottom', | 131 | placement: 'bottom', |
110 | html: true | 132 | html: true |
111 | }); | 133 | }); |
112 | },1000); | 134 | },1000); |
113 | break; | 135 | break; |
114 | } | 136 | } |
115 | case 'text': { | 137 | case 'text': { |
116 | break; | 138 | break; |
117 | } | 139 | } |
118 | } | 140 | } |
119 | }; | 141 | }; |
120 | $scope.showDesignTab('default'); | 142 | $scope.showDesignTab('default'); |
121 | 143 | ||
122 | 144 | ||
123 | function onIllustrationAdded(options){ | 145 | function onIllustrationAdded(options){ |
124 | var object = options.target; | 146 | var object = options.target; |
125 | 147 | ||
126 | if (actionObj === true) { | 148 | if (actionObj === true) { |
127 | stateObj = [stateObj[indexCurr2]]; | 149 | stateObj = [stateObj[indexCurr2]]; |
128 | listObj = [listObj[indexCurr2]]; | 150 | listObj = [listObj[indexCurr2]]; |
129 | 151 | ||
130 | actionObj = false; | 152 | actionObj = false; |
131 | console.log(stateObj); | 153 | console.log(stateObj); |
132 | indexCurr = 1; | 154 | indexCurr = 1; |
133 | } | 155 | } |
134 | object.saveState(); | 156 | object.saveState(); |
135 | 157 | ||
136 | console.log(object.originalState); | 158 | console.log(object.originalState); |
137 | stateObj[indexCurr] = JSON.stringify(object.originalState); | 159 | stateObj[indexCurr] = JSON.stringify(object.originalState); |
138 | listObj[indexCurr] = object; | 160 | listObj[indexCurr] = object; |
139 | indexCurr++; | 161 | indexCurr++; |
140 | indexCurr2 = indexCurr - 1; | 162 | indexCurr2 = indexCurr - 1; |
141 | refreshObj = true; | 163 | refreshObj = true; |
142 | } | 164 | } |
143 | 165 | ||
144 | function onIllustrationModifield(options){ | 166 | function onIllustrationModifield(options){ |
145 | $('.object-border').hide(); | 167 | $('.object-border').hide(); |
146 | // | 168 | // |
147 | var pointer = canvas.getPointer(options.e); | 169 | var pointer = canvas.getPointer(options.e); |
148 | if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){ | 170 | if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){ |
149 | canvas.getActiveObject().remove(); | 171 | canvas.getActiveObject().remove(); |
150 | $('.design-content .trash-design img').attr({'src':'images/trash.png'}); | 172 | $('.design-content .trash-design img').attr({'src':'images/trash.png'}); |
151 | return; | 173 | return; |
152 | } | 174 | } |
153 | 175 | ||
154 | // | 176 | // |
155 | var objOffset = canvas.getActiveObject().getBoundingRect(); | 177 | var objOffset = canvas.getActiveObject().getBoundingRect(); |
156 | var cH = canvas.height, cW = canvas.width, H0 = 20, W0 = 20; | 178 | var cH = canvas.height, cW = canvas.width, H0 = 20, W0 = 20; |
157 | //console.log(objOffset,canvas.height,canvas.width); | 179 | //console.log(objOffset,canvas.height,canvas.width); |
158 | if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){ | 180 | if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){ |
159 | if (confirm('削除してもよろしいですか')){ | 181 | if (confirm('削除してもよろしいですか')){ |
160 | canvas.getActiveObject().remove(); | 182 | canvas.getActiveObject().remove(); |
161 | }else{ | 183 | }else{ |
162 | undoCanvas(); | 184 | undoCanvas(); |
163 | return; | 185 | return; |
164 | } | 186 | } |
165 | } | 187 | } |
166 | 188 | ||
167 | var object = options.target; | 189 | var object = options.target; |
168 | if (actionObj === true) { | 190 | if (actionObj === true) { |
169 | stateObj = [stateObj[indexCurr2]]; | 191 | stateObj = [stateObj[indexCurr2]]; |
170 | listObj = [listObj[indexCurr2]]; | 192 | listObj = [listObj[indexCurr2]]; |
171 | 193 | ||
172 | actionObj = false; | 194 | actionObj = false; |
173 | console.log(stateObj); | 195 | console.log(stateObj); |
174 | indexCurr = 1; | 196 | indexCurr = 1; |
175 | } | 197 | } |
176 | 198 | ||
177 | object.saveState(); | 199 | object.saveState(); |
178 | 200 | ||
179 | stateObj[indexCurr] = JSON.stringify(object.originalState); | 201 | stateObj[indexCurr] = JSON.stringify(object.originalState); |
180 | listObj[indexCurr] = object; | 202 | listObj[indexCurr] = object; |
181 | indexCurr++; | 203 | indexCurr++; |
182 | indexCurr2 = indexCurr - 1; | 204 | indexCurr2 = indexCurr - 1; |
183 | refreshObj = true; | 205 | refreshObj = true; |
184 | } | 206 | } |
185 | 207 | ||
186 | function onIllustrationChange(options) { | 208 | function onIllustrationChange(options) { |
187 | 209 | ||
188 | } | 210 | } |
189 | 211 | ||
190 | function onIllustrationMoving(options) { | 212 | function onIllustrationMoving(options) { |
191 | var object = options.target; | 213 | var object = options.target; |
192 | var pointer = canvas.getPointer(options.e); | 214 | var pointer = canvas.getPointer(options.e); |
193 | if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){ | 215 | if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){ |
194 | $('.design-content .trash-design img').attr({'src':'images/trash-hover.png'}); | 216 | $('.design-content .trash-design img').attr({'src':'images/trash-hover.png'}); |
195 | }else{ | 217 | }else{ |
196 | $('.design-content .trash-design img').attr({'src':'images/trash.png'}); | 218 | $('.design-content .trash-design img').attr({'src':'images/trash.png'}); |
197 | } | 219 | } |
198 | 220 | ||
199 | console.log(object.oCoords,object.originalState); | 221 | console.log(object.oCoords,object.originalState); |
200 | object.setCoords(); | 222 | object.setCoords(); |
201 | var Coords = object.oCoords; | 223 | var Coords = object.oCoords; |
202 | var diffX = 55, diffY=50; | 224 | var diffX = 55, diffY=50; |
203 | var xAngle = Math.cos(object.getAngle() * (Math.PI / 180))/2; | 225 | var xAngle = Math.cos(object.getAngle() * (Math.PI / 180))/2; |
204 | var yAngle = Math.sin(object.getAngle() * (Math.PI / 180))/2; | 226 | var yAngle = Math.sin(object.getAngle() * (Math.PI / 180))/2; |
205 | $('#object-border-left').css({'height':Math.ceil(object.originalState.height*object.scaleY), top: Coords.tl.y+diffY, left: Coords.tl.x+diffX}); | 227 | $('#object-border-left').css({'height':Math.ceil(object.originalState.height*object.scaleY), top: Coords.tl.y+diffY, left: Coords.tl.x+diffX}); |
206 | $('#object-border-right').css({'height':Math.ceil(object.originalState.height*object.scaleY), top: Coords.tr.y+diffY, left: Coords.tr.x+diffX}); | 228 | $('#object-border-right').css({'height':Math.ceil(object.originalState.height*object.scaleY), top: Coords.tr.y+diffY, left: Coords.tr.x+diffX}); |
207 | $('#object-border-top').css({'width':Math.ceil(object.originalState.width*object.scaleX), top: Coords.tl.y+diffY, left: Coords.tl.x+diffX}); | 229 | $('#object-border-top').css({'width':Math.ceil(object.originalState.width*object.scaleX), top: Coords.tl.y+diffY, left: Coords.tl.x+diffX}); |
208 | $('#object-border-bottom').css({'width':Math.ceil(object.originalState.width*object.scaleX), top: Coords.bl.y+diffY, left: Coords.bl.x+diffX}); | 230 | $('#object-border-bottom').css({'width':Math.ceil(object.originalState.width*object.scaleX), top: Coords.bl.y+diffY, left: Coords.bl.x+diffX}); |
209 | $('.object-border').css({ | 231 | $('.object-border').css({ |
210 | '-ms-transform': 'rotate('+object.getAngle()+'deg)', /* IE 9 */ | 232 | '-ms-transform': 'rotate('+object.getAngle()+'deg)', /* IE 9 */ |
211 | '-webkit-transform': 'rotate('+object.getAngle()+'deg)', /* Safari */ | 233 | '-webkit-transform': 'rotate('+object.getAngle()+'deg)', /* Safari */ |
212 | 'transform': 'rotate('+object.getAngle()+'deg)' /* Standard syntax */ | 234 | 'transform': 'rotate('+object.getAngle()+'deg)' /* Standard syntax */ |
213 | }); | 235 | }); |
214 | $('.object-border').show(); | 236 | $('.object-border').show(); |
215 | } | 237 | } |
216 | 238 | ||
217 | function onObjectOut() { | 239 | function onObjectOut() { |
218 | delete currentObj; | 240 | delete currentObj; |
219 | $scope.designTextValue = ''; | 241 | $scope.designTextValue = ''; |
220 | } | 242 | } |
221 | 243 | ||
222 | function undoCanvas() { | 244 | function undoCanvas() { |
223 | if (indexCurr <= 0) { | 245 | if (indexCurr <= 0) { |
224 | indexCurr = 0; | 246 | indexCurr = 0; |
225 | return; | 247 | return; |
226 | } | 248 | } |
227 | 249 | ||
228 | if (refreshObj === true) { | 250 | if (refreshObj === true) { |
229 | indexCurr--; | 251 | indexCurr--; |
230 | refreshObj = false; | 252 | refreshObj = false; |
231 | } | 253 | } |
232 | 254 | ||
233 | console.log('undo'); | 255 | console.log('undo'); |
234 | 256 | ||
235 | indexCurr2 = indexCurr - 1; | 257 | indexCurr2 = indexCurr - 1; |
236 | currentObj = listObj[indexCurr2]; | 258 | currentObj = listObj[indexCurr2]; |
237 | if (currentObj){ | 259 | if (currentObj){ |
238 | currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); | 260 | currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); |
239 | } | 261 | } |
240 | 262 | ||
241 | indexCurr--; | 263 | indexCurr--; |
242 | currentObj.setCoords(); | 264 | currentObj.setCoords(); |
243 | canvas.renderAll(); | 265 | canvas.renderAll(); |
244 | actionObj = true; | 266 | actionObj = true; |
245 | } | 267 | } |
246 | 268 | ||
247 | function redoCanvas() { | 269 | function redoCanvas() { |
248 | actionObj = true; | 270 | actionObj = true; |
249 | if (indexCurr >= stateObj.length - 1) { | 271 | if (indexCurr >= stateObj.length - 1) { |
250 | return; | 272 | return; |
251 | } | 273 | } |
252 | 274 | ||
253 | console.log('redo'); | 275 | console.log('redo'); |
254 | 276 | ||
255 | indexCurr2 = indexCurr + 1; | 277 | indexCurr2 = indexCurr + 1; |
256 | currentObj = listObj[indexCurr2]; | 278 | currentObj = listObj[indexCurr2]; |
257 | currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); | 279 | currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); |
258 | 280 | ||
259 | indexCurr++; | 281 | indexCurr++; |
260 | currentObj.setCoords(); | 282 | currentObj.setCoords(); |
261 | canvas.renderAll(); | 283 | canvas.renderAll(); |
262 | } | 284 | } |
263 | 285 | ||
264 | $scope.canvasClearAll = function(){ | 286 | $scope.canvasClearAll = function(){ |
265 | if (confirm('配置されたすべての文字や画像を消去します')){ | 287 | if (confirm('配置されたすべての文字や画像を消去します')){ |
266 | canvas.clear(); | 288 | canvas.clear(); |
267 | } | 289 | } |
268 | } | 290 | } |
269 | 291 | ||
270 | function onObjectSelected(options) { | 292 | function onObjectSelected(options) { |
271 | var currentObj = options.target; | 293 | var currentObj = options.target; |
272 | 294 | ||
273 | $scope.typeObject = currentObj.type; | 295 | $scope.typeObject = currentObj.type; |
274 | switch ($scope.typeObject) { | 296 | switch ($scope.typeObject) { |
275 | case 'i-text' : | 297 | case 'i-text' : |
276 | $rootScope.isShowLeftPanel = 'text'; | 298 | $rootScope.isShowLeftPanel = 'text'; |
277 | var text = currentObj.text; | 299 | var text = currentObj.text; |
278 | if(text != '') { | 300 | if(text != '') { |
279 | $scope.designText = text; | 301 | $scope.designText = text; |
280 | $scope.designTextValue = text; | 302 | $scope.designTextValue = text; |
281 | } | 303 | } |
282 | break; | 304 | break; |
283 | 305 | ||
284 | case 'path-group' : | 306 | case 'path-group' : |
285 | $rootScope.isShowLeftPanel = 'illustration'; | 307 | $rootScope.isShowLeftPanel = 'illustration'; |
286 | break; | 308 | break; |
287 | 309 | ||
288 | case 'image': | 310 | case 'image': |
289 | $rootScope.isShowLeftPanel = 'image'; | 311 | $rootScope.isShowLeftPanel = 'image'; |
290 | break; | 312 | break; |
291 | 313 | ||
292 | default : | 314 | default : |
293 | $rootScope.isShowLeftPanel = 'default'; | 315 | $rootScope.isShowLeftPanel = 'default'; |
294 | break; | 316 | break; |
295 | } | 317 | } |
296 | $rootScope.safeApply(); | 318 | $rootScope.safeApply(); |
297 | } | 319 | } |
298 | 320 | ||
299 | // Illustration process | 321 | // Illustration process |
300 | $scope.changeIllustrationCategory = function(currentIllustration){ | 322 | $scope.changeIllustrationCategory = function(currentIllustration){ |
301 | $scope.currentIllustrationCate = $illustration.getList(currentIllustration); | 323 | $scope.currentIllustrationCate = $illustration.getList(currentIllustration); |
302 | }; | 324 | }; |
303 | 325 | ||
304 | $scope.insertSvg = function(item){ | 326 | $scope.insertSvg = function(item){ |
305 | fabric.loadSVGFromURL(item.path, function(objects, options) { | 327 | fabric.loadSVGFromURL(item.path, function(objects, options) { |
306 | var shape = fabric.util.groupSVGElements(objects, options); | 328 | var shape = fabric.util.groupSVGElements(objects, options); |
307 | canvas.add(shape.scale(0.6)); | 329 | canvas.add(shape.scale(0.6)); |
308 | shape.set({ left: 150, top: 200 }).setCoords(); | 330 | shape.set({ left: 150, top: 200 }).setCoords(); |
309 | canvas.renderAll(); | 331 | canvas.renderAll(); |
310 | canvas.setActiveObject(shape); | 332 | canvas.setActiveObject(shape); |
311 | }); | 333 | }); |
312 | }; | 334 | }; |
313 | 335 | ||
314 | // color pattern | 336 | // color pattern |
315 | $scope.listColorPatterns = [ | 337 | $scope.listColorPatterns = [ |
316 | '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc', | 338 | '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc', |
317 | '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450', | 339 | '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450', |
318 | '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666', | 340 | '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666', |
319 | '#333333' | 341 | '#333333' |
320 | ]; | 342 | ]; |
321 | 343 | ||
322 | $scope.changeColorPattern = function(color){ | 344 | $scope.changeColorPattern = function(color){ |
323 | var obj = canvas.getActiveObject(); | 345 | var obj = canvas.getActiveObject(); |
324 | if (!color){ | 346 | if (!color){ |
325 | color = 'none'; | 347 | color = 'none'; |
326 | } | 348 | } |
327 | if (obj instanceof fabric.PathGroup) { | 349 | if (obj instanceof fabric.PathGroup) { |
328 | obj.getObjects().forEach(function(o) { | 350 | obj.getObjects().forEach(function(o) { |
329 | o.fill = color; | 351 | o.fill = color; |
330 | }); | 352 | }); |
331 | } | 353 | } |
332 | else { | 354 | else { |
333 | obj.fill = color; | 355 | obj.fill = color; |
334 | } | 356 | } |
335 | canvas.renderAll(); | 357 | canvas.renderAll(); |
336 | }; | 358 | }; |
337 | 359 | ||
338 | //Font | 360 | //Font |
339 | $scope.listFontFamily = [ | 361 | $scope.listFontFamily = [ |
340 | { | 362 | { |
341 | name : 'GN Aki iro Sesami Cookies', | 363 | name : 'GN Aki iro Sesami Cookies', |
342 | slug : 'gn_aki_iro_sesami_cookies', | 364 | slug : 'gn_aki_iro_sesami_cookies', |
343 | }, | 365 | }, |
344 | { | 366 | { |
345 | name : 'GN-Fuyu-iro_Script_Bold', | 367 | name : 'GN-Fuyu-iro_Script_Bold', |
346 | slug : 'gn_fuyu_iro_script_bold' | 368 | slug : 'gn_fuyu_iro_script_bold' |
347 | }, | 369 | }, |
348 | { | 370 | { |
349 | name : 'GN Killgothic U Kanana', | 371 | name : 'GN Killgothic U Kanana', |
350 | slug : 'gn_killgothic_u_kanana' | 372 | slug : 'gn_killgothic_u_kanana' |
351 | }, | 373 | }, |
352 | { | 374 | { |
353 | name : 'GN-Kin-iro_Alphabet_Cookies', | 375 | name : 'GN-Kin-iro_Alphabet_Cookies', |
354 | slug : 'gn_kin_iro_alphabet_cookies' | 376 | slug : 'gn_kin_iro_alphabet_cookies' |
355 | 377 | ||
356 | }, | 378 | }, |
357 | { | 379 | { |
358 | name : 'GN-Kin-iro_SansSerif', | 380 | name : 'GN-Kin-iro_SansSerif', |
359 | slug : 'gn_kin_iro_sansserif' | 381 | slug : 'gn_kin_iro_sansserif' |
360 | 382 | ||
361 | }, | 383 | }, |
362 | { | 384 | { |
363 | name : 'GN-Koharuiro_Sunray', | 385 | name : 'GN-Koharuiro_Sunray', |
364 | slug : 'gn_koharuiro_sunray' | 386 | slug : 'gn_koharuiro_sunray' |
365 | 387 | ||
366 | }, | 388 | }, |
367 | { | 389 | { |
368 | name : 'GN-Kyu-pin', | 390 | name : 'GN-Kyu-pin', |
369 | slug : 'gn_kyu_pin' | 391 | slug : 'gn_kyu_pin' |
370 | }, | 392 | }, |
371 | { | 393 | { |
372 | name : 'gn_natsu_iro_schedule', | 394 | name : 'gn_natsu_iro_schedule', |
373 | slug : 'gn_natsu_iro_schedule' | 395 | slug : 'gn_natsu_iro_schedule' |
374 | 396 | ||
375 | }, | 397 | }, |
376 | { | 398 | { |
377 | name : 'gnkana_kiniro_sansserif_l', | 399 | name : 'gnkana_kiniro_sansserif_l', |
378 | slug : 'gnkana_kiniro_sansserif_l' | 400 | slug : 'gnkana_kiniro_sansserif_l' |
379 | 401 | ||
380 | }, | 402 | }, |
381 | { | 403 | { |
382 | name : 'gnkana_kiniro_sansserif_st', | 404 | name : 'gnkana_kiniro_sansserif_st', |
383 | slug : 'gnkana_kiniro_sansserif_st' | 405 | slug : 'gnkana_kiniro_sansserif_st' |
384 | }, | 406 | }, |
385 | { | 407 | { |
386 | name : 'gnkana_kon_iro_nightfall', | 408 | name : 'gnkana_kon_iro_nightfall', |
387 | slug : 'gnkana_kon_iro_nightfall' | 409 | slug : 'gnkana_kon_iro_nightfall' |
388 | 410 | ||
389 | }, | 411 | }, |
390 | { | 412 | { |
391 | name : 'ms_gothic', | 413 | name : 'ms_gothic', |
392 | slug : 'ms_gothic' | 414 | slug : 'ms_gothic' |
393 | 415 | ||
394 | }, | 416 | }, |
395 | { | 417 | { |
396 | name : 'msmincho', | 418 | name : 'msmincho', |
397 | slug : 'msmincho' | 419 | slug : 'msmincho' |
398 | }, | 420 | }, |
399 | { | 421 | { |
400 | name : 'ufonts_com_ms_pgothic', | 422 | name : 'ufonts_com_ms_pgothic', |
401 | slug : 'ufonts_com_ms_pgothic' | 423 | slug : 'ufonts_com_ms_pgothic' |
402 | } | 424 | } |
403 | ]; | 425 | ]; |
404 | 426 | ||
405 | // layer process | 427 | // layer process |
406 | $scope.layerProcess = function(mode) { | 428 | $scope.layerProcess = function(mode) { |
407 | // console.log('layerProcess'); | 429 | // console.log('layerProcess'); |
408 | var activeObject = canvas.getActiveObject(); | 430 | var activeObject = canvas.getActiveObject(); |
409 | 431 | ||
410 | if (activeObject){ | 432 | if (activeObject){ |
411 | switch (mode) { | 433 | switch (mode) { |
412 | case 1: | 434 | case 1: |
413 | activeObject.bringForward(); | 435 | activeObject.bringForward(); |
414 | break; | 436 | break; |
415 | case 2: | 437 | case 2: |
416 | activeObject.sendBackwards(); | 438 | activeObject.sendBackwards(); |
417 | break; | 439 | break; |
418 | case 3: | 440 | case 3: |
419 | activeObject.bringToFront(); | 441 | activeObject.bringToFront(); |
420 | break; | 442 | break; |
421 | case 4: | 443 | case 4: |
422 | activeObject.sendToBack(); | 444 | activeObject.sendToBack(); |
423 | break; | 445 | break; |
424 | } | 446 | } |
425 | canvas.deactivateAll().renderAll(); | 447 | canvas.deactivateAll().renderAll(); |
426 | } | 448 | } |
427 | }; | 449 | }; |
428 | 450 | ||
429 | $scope.focusInputText = function(text) { | 451 | $scope.focusInputText = function(text) { |
430 | currentObj = canvas.getActiveObject(); | 452 | currentObj = canvas.getActiveObject(); |
431 | if(typeof currentObj == 'undefined' || currentObj == null) { | 453 | if(typeof currentObj == 'undefined' || currentObj == null) { |
432 | $scope.iText = new fabric.IText('', { | 454 | $scope.iText = new fabric.IText('', { |
433 | left: 150, | 455 | left: 150, |
434 | top: 200, | 456 | top: 200, |
435 | fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug, | 457 | fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug, |
436 | fontWeight: 'normal', | 458 | fontWeight: 'normal', |
437 | textAlign: 'center', | 459 | textAlign: 'center', |
438 | fontSize: 28, | 460 | fontSize: 28, |
439 | fill: 'black', | 461 | fill: 'black', |
440 | editable: false | 462 | editable: false |
441 | }); | 463 | }); |
442 | } else { | 464 | } else { |
443 | if(currentObj.type != 'i-text') { | 465 | if(currentObj.type != 'i-text') { |
444 | $scope.iText = new fabric.IText('', { | 466 | $scope.iText = new fabric.IText('', { |
445 | left: 150, | 467 | left: 150, |
446 | top: 200, | 468 | top: 200, |
447 | fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug, | 469 | fontFamily: typeof $scope.itemFont != 'undefined' ? $scope.listFontFamily[$scope.itemFont].slug : $scope.listFontFamily[0].slug, |
448 | fontWeight: 'normal', | 470 | fontWeight: 'normal', |
449 | textAlign: 'center', | 471 | textAlign: 'center', |
450 | fontSize: 28, | 472 | fontSize: 28, |
451 | fill: 'black', | 473 | fill: 'black', |
452 | editable: false | 474 | editable: false |
453 | }); | 475 | }); |
454 | } else{ | 476 | } else{ |
455 | $scope.iText = currentObj; | 477 | $scope.iText = currentObj; |
456 | } | 478 | } |
457 | } | 479 | } |
458 | }; | 480 | }; |
459 | 481 | ||
460 | //Design text | 482 | //Design text |
461 | $scope.inputText = function(e) { | 483 | $scope.inputText = function(e) { |
462 | if(typeof $scope.iText != "undefined") { | 484 | if(typeof $scope.iText != "undefined") { |
463 | var iText = $scope.iText; | 485 | var iText = $scope.iText; |
464 | iText.text = e; | 486 | iText.text = e; |
465 | canvas.add(iText); | 487 | canvas.add(iText); |
466 | canvas.renderAll(); | 488 | canvas.renderAll(); |
467 | canvas.setActiveObject(iText); | 489 | canvas.setActiveObject(iText); |
468 | } | 490 | } |
469 | }; | 491 | }; |
470 | $scope.setFontFamily = function(font,index) { | 492 | $scope.setFontFamily = function(font,index) { |
471 | $scope.itemFont = index; | 493 | $scope.itemFont = index; |
472 | if(canvas.getActiveObject()) { | 494 | if(canvas.getActiveObject()) { |
473 | var currentObj = canvas.getActiveObject(); | 495 | var currentObj = canvas.getActiveObject(); |
474 | if(currentObj.type == 'i-text') { | 496 | if(currentObj.type == 'i-text') { |
475 | currentObj.set('fontFamily', font); | 497 | currentObj.set('fontFamily', font); |
476 | canvas.renderAll(); | 498 | canvas.renderAll(); |
477 | canvas.setActiveObject(currentObj); | 499 | canvas.setActiveObject(currentObj); |
478 | } | 500 | } |
479 | 501 | ||
480 | } | 502 | } |
481 | }; | 503 | }; |
482 | //Set letter spacing text | 504 | //Set letter spacing text |
483 | $scope.setLetterSpacingText = function(e) { | 505 | $scope.setLetterSpacingText = function(e) { |
484 | if(canvas.getActiveObject()) { | 506 | if(canvas.getActiveObject()) { |
485 | var currentObj = canvas.getActiveObject(); | 507 | var currentObj = canvas.getActiveObject(); |
486 | if(currentObj.type == 'i-text') { | 508 | if(currentObj.type == 'i-text') { |
487 | if(e == 'plus') | 509 | if(e == 'plus') |
488 | spacingNum = spacingNum + 30; | 510 | spacingNum = spacingNum + 30; |
489 | else if (spacingNum >= -30){ | 511 | else if (spacingNum >= -30){ |
490 | spacingNum = spacingNum - 30; | 512 | spacingNum = spacingNum - 30; |
491 | } | 513 | } |
492 | if(e == 'default') | 514 | if(e == 'default') |
493 | spacingNum = 0; | 515 | spacingNum = 0; |
494 | 516 | ||
495 | currentObj.set('charSpacing', spacingNum); | 517 | currentObj.set('charSpacing', spacingNum); |
496 | canvas.renderAll(); | 518 | canvas.renderAll(); |
497 | canvas.setActiveObject(currentObj); | 519 | canvas.setActiveObject(currentObj); |
498 | } | 520 | } |
499 | } | 521 | } |
500 | }; | 522 | }; |
501 | 523 | ||
502 | 524 | ||
503 | /**** process insert image */ | 525 | /**** process insert image */ |
504 | if (typeof($window.localStorage.recentImages) != 'undefined'){ | 526 | if (typeof($window.localStorage.recentImages) != 'undefined'){ |
505 | $scope.recentImages = JSON.parse($window.localStorage.recentImages); | 527 | $scope.recentImages = JSON.parse($window.localStorage.recentImages); |
506 | }else{ | 528 | }else{ |
507 | $scope.recentImages = {}; | 529 | $scope.recentImages = {}; |
508 | } | 530 | } |
509 | 531 | ||
510 | var addToRecentImage = function(name, data){ | 532 | var addToRecentImage = function(name, data){ |
511 | if (typeof($window.localStorage.recentImages) != 'undefined'){ | 533 | if (typeof($window.localStorage.recentImages) != 'undefined'){ |
512 | $scope.recentImages = JSON.parse($window.localStorage.recentImages); | 534 | $scope.recentImages = JSON.parse($window.localStorage.recentImages); |
513 | }else{ | 535 | }else{ |
514 | $scope.recentImages = {}; | 536 | $scope.recentImages = {}; |
515 | } | 537 | } |
516 | 538 | ||
517 | if (typeof($scope.recentImages[name]) == 'undefined'){ | 539 | if (typeof($scope.recentImages[name]) == 'undefined'){ |
518 | var ii=0; | 540 | var ii=0; |
519 | var II = 0; | 541 | var II = 0; |
520 | for(var item in $scope.recentImages){ | 542 | for(var item in $scope.recentImages){ |
521 | if (II==0){ | 543 | if (II==0){ |
522 | II = item; | 544 | II = item; |
523 | } | 545 | } |
524 | ii++; | 546 | ii++; |
525 | } | 547 | } |
526 | if (ii>16 && II!=0){ | 548 | if (ii>16 && II!=0){ |
527 | delete $scope.recentImages[II]; | 549 | delete $scope.recentImages[II]; |
528 | } | 550 | } |
529 | $scope.recentImages[name] = data; | 551 | $scope.recentImages[name] = data; |
530 | $window.localStorage.recentImages = JSON.stringify($scope.recentImages); | 552 | $window.localStorage.recentImages = JSON.stringify($scope.recentImages); |
531 | } | 553 | } |
532 | } | 554 | } |
533 | $scope.chooseImage = function(e){//console.log(e); | 555 | $scope.chooseImage = function(e){//console.log(e); |
534 | if (e.target.files[0] && e.target.files[0].size > 5*1024*1024){ | 556 | if (e.target.files[0] && e.target.files[0].size > 5*1024*1024){ |
535 | alert('アップロードできませんでした'); | 557 | alert('アップロードできませんでした'); |
536 | return; | 558 | return; |
537 | } | 559 | } |
538 | var reader = new FileReader(); | 560 | var reader = new FileReader(); |
539 | reader.onload = function (event) { | 561 | reader.onload = function (event) { |
540 | addToRecentImage ($('#imgLoader').val(), event.target.result); | 562 | addToRecentImage ($('#imgLoader').val(), event.target.result); |
541 | var imgObj = new Image();//console.log($('#imgLoader').val()); | 563 | var imgObj = new Image();//console.log($('#imgLoader').val()); |
542 | imgObj.src = event.target.result; | 564 | imgObj.src = event.target.result; |
543 | imgObj.onload = function () { | 565 | imgObj.onload = function () { |
544 | // start fabricJS stuff | 566 | // start fabricJS stuff |
545 | 567 | ||
546 | var image = new fabric.Image(imgObj); | 568 | var image = new fabric.Image(imgObj); |
547 | image.set({ | 569 | image.set({ |
548 | left: 50, | 570 | left: 50, |
549 | top: 50 | 571 | top: 50 |
550 | }); | 572 | }); |
551 | //image.scale(getRandomNum(0.1, 0.25)).setCoords(); | 573 | //image.scale(getRandomNum(0.1, 0.25)).setCoords(); |
552 | image.scaleToWidth(200); | 574 | image.scaleToWidth(200); |
553 | canvas.add(image); | 575 | canvas.add(image); |
554 | } | 576 | } |
555 | } | 577 | } |
556 | reader.readAsDataURL(e.target.files[0]); | 578 | reader.readAsDataURL(e.target.files[0]); |
557 | } | 579 | } |
558 | 580 | ||
559 | $scope.insertRecentImage = function(data){ | 581 | $scope.insertRecentImage = function(data){ |
560 | var imgObj = new Image(); | 582 | var imgObj = new Image(); |
561 | imgObj.src = data; | 583 | imgObj.src = data; |
562 | imgObj.onload = function () { | 584 | imgObj.onload = function () { |
563 | // start fabricJS stuff | 585 | // start fabricJS stuff |
564 | 586 | ||
565 | var image = new fabric.Image(imgObj); | 587 | var image = new fabric.Image(imgObj); |
566 | image.set({ | 588 | image.set({ |
567 | left: 50, | 589 | left: 50, |
568 | top: 50 | 590 | top: 50 |
569 | }); | 591 | }); |
570 | image.scaleToWidth(200); | 592 | image.scaleToWidth(200); |
571 | canvas.add(image); | 593 | canvas.add(image); |
572 | } | 594 | } |
573 | } | 595 | } |
574 | 596 | ||
575 | //Traslation text | 597 | //Traslation text |
576 | $scope.rotateText = function(style) { | 598 | $scope.rotateText = function(style) { |
577 | if(canvas.getActiveObject()) { | 599 | if(canvas.getActiveObject()) { |
578 | var currentObj = canvas.getActiveObject(); | 600 | var currentObj = canvas.getActiveObject(); |
579 | if(currentObj.type == 'i-text') { | 601 | if(currentObj.type == 'i-text') { |
580 | currentObj.set('rotate', Math.PI / 4); | 602 | currentObj.set('rotate', Math.PI / 4); |
581 | canvas.renderAll(); | 603 | canvas.renderAll(); |
582 | canvas.setActiveObject(currentObj); | 604 | canvas.setActiveObject(currentObj); |
583 | } | 605 | } |
584 | } | 606 | } |
585 | }; | 607 | }; |
586 | 608 | ||
587 | 609 | ||
588 | /* Process output */ | 610 | /* Process output */ |
589 | $scope.outputDesign = function(){ | 611 | $scope.outputDesign = function(){ |
590 | $rootScope.outputImage = canvas.toDataURL('png'); | 612 | $rootScope.outputImage = canvas.toDataURL('png'); |
591 | // console.log(); | 613 | // console.log(); |
592 | $('#tshirt-design').modal('hide'); | 614 | $('#tshirt-design').modal('hide'); |
593 | } | 615 | } |
594 | }); | 616 | }); |
app/styles/main.css
1 | /* Space out content a bit */ | 1 | /* Space out content a bit */ |
2 | @import "../fonts/font.css"; | 2 | @import "../fonts/font.css"; |
3 | @import "../fonts/font_canvas/font-canvas.css"; | 3 | @import "../fonts/font_canvas/font-canvas.css"; |
4 | @import "placedesign.css"; | 4 | @import "placedesign.css"; |
5 | html{ | 5 | html{ |
6 | height:100%; | 6 | height:100%; |
7 | width:100%; | 7 | width:100%; |
8 | } | 8 | } |
9 | body { | 9 | body { |
10 | font-family: 'Hiragino Kaku Gothic Pro', sans-serif; | 10 | font-family: 'Hiragino Kaku Gothic Pro', sans-serif; |
11 | height:100%; | 11 | height:100%; |
12 | width:100%; | 12 | width:100%; |
13 | } | 13 | } |
14 | /*Scroll bar style*/ | 14 | /*Scroll bar style*/ |
15 | ::-webkit-scrollbar { | 15 | ::-webkit-scrollbar { |
16 | -webkit-appearance: none; | 16 | -webkit-appearance: none; |
17 | width: 7px; | 17 | width: 7px; |
18 | } | 18 | } |
19 | ::-webkit-scrollbar-track { | 19 | ::-webkit-scrollbar-track { |
20 | -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); | 20 | -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); |
21 | } | 21 | } |
22 | 22 | ||
23 | ::-webkit-scrollbar-thumb { | 23 | ::-webkit-scrollbar-thumb { |
24 | border-radius: 4px; | 24 | border-radius: 4px; |
25 | background-color: rgba(0,0,0,.5); | 25 | background-color: rgba(0,0,0,.5); |
26 | -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5); | 26 | -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5); |
27 | } | 27 | } |
28 | /*End scroll bar style*/ | 28 | /*End scroll bar style*/ |
29 | .padding-right-0{ | 29 | .padding-right-0{ |
30 | padding-right: 0!important; | 30 | padding-right: 0!important; |
31 | } | 31 | } |
32 | .padding-left-0{ | 32 | .padding-left-0{ |
33 | padding-left: 0!important; | 33 | padding-left: 0!important; |
34 | } | 34 | } |
35 | button.red{ | 35 | button.red{ |
36 | color: #ffffff; | 36 | color: #ffffff; |
37 | background-color: #ff0000; | 37 | background-color: #ff0000; |
38 | border: 1px solid #ff0000; | 38 | border: 1px solid #ff0000; |
39 | 39 | ||
40 | } | 40 | } |
41 | button.white{ | 41 | button.white{ |
42 | border: 1px solid #ff8080; | 42 | border: 1px solid #ff8080; |
43 | color: #ff8080; | 43 | color: #ff8080; |
44 | background-color: #ffffff; | 44 | background-color: #ffffff; |
45 | } | 45 | } |
46 | button.brown{ | 46 | button.brown{ |
47 | background-color: #666666; | 47 | background-color: #666666; |
48 | border: 1px solid #666666; | 48 | border: 1px solid #666666; |
49 | color: #ffffff; | 49 | color: #ffffff; |
50 | border-radius: 5px; | 50 | border-radius: 5px; |
51 | } | 51 | } |
52 | button.black{ | 52 | button.black{ |
53 | border: 1px solid #c9c9c9; | 53 | border: 1px solid #c9c9c9; |
54 | background-color: #343434; | 54 | background-color: #343434; |
55 | color: #ffffff; | 55 | color: #ffffff; |
56 | padding: 1px 6px; | 56 | padding: 1px 6px; |
57 | } | 57 | } |
58 | #tshirt-container{ | 58 | #tshirt-container{ |
59 | border-left: 1px solid #dcdcdc; | 59 | border-left: 1px solid #dcdcdc; |
60 | border-right: 1px solid #dcdcdc; | 60 | border-right: 1px solid #dcdcdc; |
61 | } | 61 | } |
62 | /*HEADER*/ | 62 | /*HEADER*/ |
63 | header{ | 63 | header{ |
64 | border-bottom: 1px solid #dcdcdc; | 64 | border-bottom: 1px solid #dcdcdc; |
65 | } | 65 | } |
66 | header .logo{ | 66 | header .logo{ |
67 | color: #ed1d24; | 67 | color: #ed1d24; |
68 | font-size: 30px; | 68 | font-size: 30px; |
69 | text-transform: uppercase; | 69 | text-transform: uppercase; |
70 | font-weight: bold; | 70 | font-weight: bold; |
71 | } | 71 | } |
72 | header .logo img{ | 72 | header .logo img{ |
73 | width: 60px; | 73 | width: 60px; |
74 | } | 74 | } |
75 | /*NAVIGATION*/ | 75 | /*NAVIGATION*/ |
76 | nav{ | 76 | nav{ |
77 | border-bottom: 1px solid #dcdcdc; | 77 | border-bottom: 1px solid #dcdcdc; |
78 | padding: 10px 0; | 78 | padding: 10px 0; |
79 | } | 79 | } |
80 | nav h2{ | 80 | nav h2{ |
81 | font-size: 27px; | 81 | font-size: 27px; |
82 | margin: 0 0; | 82 | margin: 0 0; |
83 | } | 83 | } |
84 | nav ul{ | 84 | nav ul{ |
85 | list-style: none; | 85 | list-style: none; |
86 | padding-left: 0; | 86 | padding-left: 0; |
87 | margin-bottom: 0; | 87 | margin-bottom: 0; |
88 | 88 | ||
89 | } | 89 | } |
90 | nav ul li{ | 90 | nav ul li{ |
91 | margin-left: 2px; | 91 | margin-left: 2px; |
92 | float: left; | 92 | float: left; |
93 | padding: 6px 12px; | 93 | padding: 6px 12px; |
94 | background-color: #999999; | 94 | background-color: #999999; |
95 | position: relative; | 95 | position: relative; |
96 | } | 96 | } |
97 | nav ul li i.fa{ | 97 | nav ul li i.fa{ |
98 | position: absolute; | 98 | position: absolute; |
99 | color: #ffffff; | 99 | color: #ffffff; |
100 | font-size: 18px; | 100 | font-size: 18px; |
101 | right: -4px; | 101 | right: -4px; |
102 | top: 50%; | 102 | top: 50%; |
103 | transform: translateX(-50%) translateY(-50%); | 103 | transform: translateX(-50%) translateY(-50%); |
104 | -webkit-transform: translateX(-50%) translateY(-50%); | 104 | -webkit-transform: translateX(-50%) translateY(-50%); |
105 | } | 105 | } |
106 | nav ul li a{ | 106 | nav ul li a{ |
107 | color: #ffffff; | 107 | color: #ffffff; |
108 | } | 108 | } |
109 | nav ul li:hover a{ | 109 | nav ul li:hover a{ |
110 | text-decoration: none; | 110 | text-decoration: none; |
111 | color: #ffffff; | 111 | color: #ffffff; |
112 | } | 112 | } |
113 | nav ul li.action{ | 113 | nav ul li.action{ |
114 | color: #ffffff; | 114 | color: #ffffff; |
115 | background-color: #ed1d24; | 115 | background-color: #ed1d24; |
116 | } | 116 | } |
117 | /*ASIDE*/ | 117 | /*ASIDE*/ |
118 | aside{ | 118 | aside{ |
119 | margin: 10px 0; | 119 | margin: 10px 0; |
120 | } | 120 | } |
121 | 121 | ||
122 | aside .break-down{ | 122 | aside .break-down{ |
123 | padding: 0 0; | 123 | padding: 0 0; |
124 | } | 124 | } |
125 | aside .break-down i.fa{ | 125 | aside .break-down i.fa{ |
126 | font-size: 35px; | 126 | font-size: 35px; |
127 | color: #ff0000; | 127 | color: #ff0000; |
128 | } | 128 | } |
129 | aside .break-line{ | 129 | aside .break-line{ |
130 | height: 10px; | 130 | height: 10px; |
131 | } | 131 | } |
132 | aside .break-line hr{ | 132 | aside .break-line hr{ |
133 | border-top: 1px dotted #cccccc; | 133 | border-top: 1px dotted #cccccc; |
134 | } | 134 | } |
135 | aside .step{ | 135 | aside .step{ |
136 | margin: 0 0; | 136 | margin: 0 0; |
137 | } | 137 | } |
138 | aside .step .title{ | 138 | aside .step .title{ |
139 | font-size: 15px; | 139 | font-size: 15px; |
140 | line-height: 16px; | 140 | line-height: 16px; |
141 | font-weight: bold; | 141 | font-weight: bold; |
142 | margin-bottom: 3px; | 142 | margin-bottom: 3px; |
143 | } | 143 | } |
144 | aside .step .title-notice{ | 144 | aside .step .title-notice{ |
145 | font-size: 13px; | 145 | font-size: 13px; |
146 | line-height: 16px; | 146 | line-height: 16px; |
147 | margin-bottom: 3px; | 147 | margin-bottom: 3px; |
148 | } | 148 | } |
149 | aside .step .title-notice .require{ | 149 | aside .step .title-notice .require{ |
150 | font-size: 10px; | 150 | font-size: 10px; |
151 | } | 151 | } |
152 | aside .step .step-box{ | 152 | aside .step .step-box{ |
153 | border: 2px solid #dcdcdc; | 153 | border: 2px solid #dcdcdc; |
154 | font-size: 12px; | 154 | font-size: 12px; |
155 | 155 | ||
156 | } | 156 | } |
157 | /*Step 1*/ | 157 | /*Step 1*/ |
158 | aside .step .step-box .tshirt-design{ | 158 | aside .step .step-box .tshirt-design{ |
159 | border: 1px solid #cccccc; | 159 | border: 1px solid #cccccc; |
160 | background-color: #f5f5f5; | 160 | background-color: #f5f5f5; |
161 | margin: 10px 10px; | 161 | margin: 10px 10px; |
162 | } | 162 | } |
163 | aside .step .step-box .tshirt-design:hover{ | 163 | aside .step .step-box .tshirt-design:hover{ |
164 | border: 1px solid #ff0000; | 164 | border: 1px solid #ff0000; |
165 | } | 165 | } |
166 | aside .step .step-box .tshirt-design button:hover{ | 166 | aside .step .step-box .tshirt-design button:hover{ |
167 | background-color: #fa7b7b; | 167 | background-color: #fa7b7b; |
168 | border: 1px solid #fa7b7b; | 168 | border: 1px solid #fa7b7b; |
169 | } | 169 | } |
170 | aside .step .step-box .tshirt-design div{ | 170 | aside .step .step-box .tshirt-design div{ |
171 | float: left; | 171 | float: left; |
172 | } | 172 | } |
173 | aside .step .step-box .tshirt-design .icon{ | 173 | aside .step .step-box .tshirt-design .icon{ |
174 | padding: 4px 4px; | 174 | padding: 4px 4px; |
175 | border-right: 1px solid #cccccc; | 175 | border-right: 1px solid #cccccc; |
176 | 176 | ||
177 | } | 177 | } |
178 | aside .step .step-box .tshirt-design .icon img{ | 178 | aside .step .step-box .tshirt-design .icon img{ |
179 | height: 50px; | 179 | height: 50px; |
180 | } | 180 | } |
181 | aside .step .step-box .tshirt-design .name{ | 181 | aside .step .step-box .tshirt-design .name{ |
182 | padding: 10px 10px; | 182 | padding: 10px 10px; |
183 | 183 | ||
184 | } | 184 | } |
185 | aside .step .step-box .tshirt-design .action{ | 185 | aside .step .step-box .tshirt-design .action{ |
186 | padding: 10px 10px; | 186 | padding: 10px 10px; |
187 | float: right; | 187 | float: right; |
188 | 188 | ||
189 | } | 189 | } |
190 | aside .step .step-box .tshirt-design .action button{ | 190 | aside .step .step-box .tshirt-design .action button{ |
191 | padding: 8px 10px; | 191 | padding: 8px 10px; |
192 | } | 192 | } |
193 | /*Step 2*/ | 193 | /*Step 2*/ |
194 | aside .step .step-box .tshirt-color{ | 194 | aside .step .step-box .tshirt-color{ |
195 | padding: 6px 10px; | 195 | padding: 6px 10px; |
196 | position: relative; | 196 | position: relative; |
197 | } | 197 | } |
198 | aside .step .step-box .tshirt-color ul.choice-color{ | 198 | aside .step .step-box .tshirt-color ul.choice-color{ |
199 | float: left; | 199 | float: left; |
200 | list-style: none; | 200 | list-style: none; |
201 | padding-left: 0; | 201 | padding-left: 0; |
202 | width: 100%; | 202 | width: 100%; |
203 | margin-bottom: 3px; | 203 | margin-bottom: 3px; |
204 | } | 204 | } |
205 | aside .step .step-box .tshirt-color ul.choice-color li{ | 205 | aside .step .step-box .tshirt-color ul.choice-color li{ |
206 | margin: 0 8px 4px 0; | 206 | margin: 0 8px 4px 0; |
207 | border: 1px solid #cccccc; | 207 | border: 1px solid #cccccc; |
208 | padding: 2px 2px; | 208 | padding: 2px 2px; |
209 | float: left; | 209 | float: left; |
210 | cursor: pointer; | 210 | cursor: pointer; |
211 | } | 211 | } |
212 | aside .step .step-box .tshirt-color ul.choice-color li.action{ | 212 | aside .step .step-box .tshirt-color ul.choice-color li.action{ |
213 | border: 1px solid #ff0000; | 213 | border: 1px solid #ff0000; |
214 | } | 214 | } |
215 | aside .step .step-box .tshirt-color ul.choice-color li:hover{ | 215 | aside .step .step-box .tshirt-color ul.choice-color li:hover{ |
216 | border: 1px solid #ff0000; | 216 | border: 1px solid #ff0000; |
217 | } | 217 | } |
218 | aside .step .step-box .tshirt-color ul.choice-color li div{ | 218 | aside .step .step-box .tshirt-color ul.choice-color li div{ |
219 | height: 30px; | 219 | height: 30px; |
220 | width: 30px; | 220 | width: 30px; |
221 | } | 221 | } |
222 | 222 | ||
223 | aside .step .step-box .tshirt-color ul.choice-color li.white div{ | 223 | aside .step .step-box .tshirt-color ul.choice-color li.white div{ |
224 | background-color: #ece7e4; | 224 | background-color: #ece7e4; |
225 | } | 225 | } |
226 | aside .step .step-box .tshirt-color ul.choice-color li.blue div{ | 226 | aside .step .step-box .tshirt-color ul.choice-color li.blue div{ |
227 | background-color: #e7dfd0; | 227 | background-color: #e7dfd0; |
228 | } | 228 | } |
229 | aside .step .step-box .tshirt-color .color-name{ | 229 | aside .step .step-box .tshirt-color .color-name{ |
230 | width: 100%; | 230 | width: 100%; |
231 | font-size: 10px; | 231 | font-size: 10px; |
232 | } | 232 | } |
233 | aside .step .step-box .tshirt-color .view-more{ | 233 | aside .step .step-box .tshirt-color .view-more{ |
234 | position: absolute; | 234 | position: absolute; |
235 | bottom: 6px; | 235 | bottom: 6px; |
236 | right: 10px; | 236 | right: 10px; |
237 | } | 237 | } |
238 | /*Step 3*/ | 238 | /*Step 3*/ |
239 | aside .step .step-box .tshirt-saveorder{ | 239 | aside .step .step-box .tshirt-saveorder{ |
240 | padding: 10px 10px 6px 10px; | 240 | padding: 10px 10px 6px 10px; |
241 | } | 241 | } |
242 | aside .step .step-box .tshirt-saveorder .action{ | 242 | aside .step .step-box .tshirt-saveorder .action{ |
243 | width: 50%; | 243 | width: 50%; |
244 | float: left; | 244 | float: left; |
245 | } | 245 | } |
246 | aside .step .step-box .tshirt-saveorder .action:first-child{ | 246 | aside .step .step-box .tshirt-saveorder .action:first-child{ |
247 | padding-right: 5px; | 247 | padding-right: 5px; |
248 | } | 248 | } |
249 | aside .step .step-box .tshirt-saveorder .action:last-child{ | 249 | aside .step .step-box .tshirt-saveorder .action:last-child{ |
250 | padding-left: 5px; | 250 | padding-left: 5px; |
251 | } | 251 | } |
252 | aside .step .step-box .tshirt-saveorder .action button{ | 252 | aside .step .step-box .tshirt-saveorder .action button{ |
253 | padding: 8px 10px; | 253 | padding: 8px 10px; |
254 | 254 | ||
255 | } | 255 | } |
256 | aside .step .step-box .tshirt-saveorder .action button .text{ | 256 | aside .step .step-box .tshirt-saveorder .action button .text{ |
257 | float: left; | 257 | float: left; |
258 | width: 80%; | 258 | width: 80%; |
259 | text-align: center; | 259 | text-align: center; |
260 | padding-left: 10px; | 260 | padding-left: 10px; |
261 | vertical-align: bottom; | 261 | vertical-align: bottom; |
262 | } | 262 | } |
263 | aside .step .step-box .tshirt-saveorder .action button .arrow{ | 263 | aside .step .step-box .tshirt-saveorder .action button .arrow{ |
264 | float: left; | 264 | float: left; |
265 | width: 20%; | 265 | width: 20%; |
266 | height: 40px; | 266 | height: 40px; |
267 | position: relative; | 267 | position: relative; |
268 | } | 268 | } |
269 | aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{ | 269 | aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{ |
270 | position: absolute; | 270 | position: absolute; |
271 | top: 50%; | 271 | top: 50%; |
272 | right: -6px; | 272 | right: -6px; |
273 | transform: translateX(-50%) translateY(-50%); | 273 | transform: translateX(-50%) translateY(-50%); |
274 | -webkit-transform: translateX(-50%) translateY(-50%); | 274 | -webkit-transform: translateX(-50%) translateY(-50%); |
275 | } | 275 | } |
276 | aside .step .step-box .tshirt-saveorder .notice{ | 276 | aside .step .step-box .tshirt-saveorder .notice{ |
277 | padding: 5px 0 0 0; | 277 | padding: 5px 0 0 0; |
278 | } | 278 | } |
279 | /*Step 4*/ | 279 | /*Step 4*/ |
280 | aside .step .title-notice{ | 280 | aside .step .title-notice{ |
281 | 281 | ||
282 | } | 282 | } |
283 | aside .step .step-box .change-design{ | 283 | aside .step .step-box .change-design{ |
284 | padding: 4px 4px; | 284 | padding: 4px 4px; |
285 | } | 285 | } |
286 | aside .step .step-box .change-design table{ | 286 | aside .step .step-box .change-design table{ |
287 | 287 | ||
288 | } | 288 | } |
289 | aside .step .step-box .change-design table tr{ | 289 | aside .step .step-box .change-design table tr{ |
290 | border-bottom: 1px dotted #cccccc; | 290 | border-bottom: 1px dotted #cccccc; |
291 | } | 291 | } |
292 | aside .step .step-box .change-design table tr:last-child{ | 292 | aside .step .step-box .change-design table tr:last-child{ |
293 | border-bottom: 0; | 293 | border-bottom: 0; |
294 | } | 294 | } |
295 | 295 | ||
296 | /*Step 5- finish*/ | 296 | /*Step 5- finish*/ |
297 | aside .step .finish-design{ | 297 | aside .step .finish-design{ |
298 | padding: 20px 0; | 298 | padding: 20px 0; |
299 | } | 299 | } |
300 | aside .step .finish-design button{ | 300 | aside .step .finish-design button{ |
301 | width: 100%; | 301 | width: 100%; |
302 | padding: 8px 10px; | 302 | padding: 8px 10px; |
303 | } | 303 | } |
304 | 304 | ||
305 | /*DESIGN CONTENT*/ | 305 | /*DESIGN CONTENT*/ |
306 | #tshirt-content{ | 306 | #tshirt-content{ |
307 | position: relative; | 307 | position: relative; |
308 | } | 308 | } |
309 | #tshirt-content .switch-border-design{ | 309 | #tshirt-content .switch-border-design{ |
310 | position: absolute; | 310 | position: absolute; |
311 | top: 5px; | 311 | top: 5px; |
312 | right: 10px; | 312 | right: 10px; |
313 | color: red; | 313 | color: red; |
314 | font-size: 11px; | 314 | font-size: 11px; |
315 | } | 315 | } |
316 | #tshirt-content .tshirt-image{ | 316 | #tshirt-content .tshirt-image{ |
317 | padding: 20px 0 0 0; | 317 | padding: 20px 0 0 0; |
318 | position: relative; | 318 | position: relative; |
319 | height: 100%; | 319 | height: 100%; |
320 | width: 100%; | 320 | width: 100%; |
321 | } | 321 | } |
322 | 322 | ||
323 | #tshirt-content .tshirt-image img{ | 323 | #tshirt-content .tshirt-image img{ |
324 | width: 100%; | 324 | width: 100%; |
325 | } | 325 | } |
326 | 326 | ||
327 | #tshirt-content .tshirt-choice{ | 327 | #tshirt-content .tshirt-choice{ |
328 | 328 | ||
329 | } | 329 | } |
330 | #tshirt-content .tshirt-choice ul{ | 330 | #tshirt-content .tshirt-choice ul{ |
331 | list-style: none; | 331 | list-style: none; |
332 | padding-left: 0; | 332 | padding-left: 0; |
333 | display: table; | 333 | display: table; |
334 | margin: auto; | 334 | margin: auto; |
335 | } | 335 | } |
336 | #tshirt-content .tshirt-choice ul li{ | 336 | #tshirt-content .tshirt-choice ul li{ |
337 | float: left; | 337 | float: left; |
338 | margin: 10px 10px; | 338 | margin: 10px 10px; |
339 | cursor: pointer; | 339 | cursor: pointer; |
340 | } | 340 | } |
341 | #tshirt-content .tshirt-choice ul li .image{ | 341 | #tshirt-content .tshirt-choice ul li .image{ |
342 | border: 1px solid #cccccc; | 342 | border: 1px solid #cccccc; |
343 | padding: 3px 3px; | 343 | padding: 3px 3px; |
344 | } | 344 | } |
345 | #tshirt-content .tshirt-choice ul li.focus{ | 345 | #tshirt-content .tshirt-choice ul li.focus{ |
346 | 346 | ||
347 | } | 347 | } |
348 | #tshirt-content .tshirt-choice ul li.focus .image{ | 348 | #tshirt-content .tshirt-choice ul li.focus .image{ |
349 | border: 1px solid #ff0000; | 349 | border: 1px solid #ff0000; |
350 | } | 350 | } |
351 | #tshirt-content .tshirt-choice ul li .image img{ | 351 | #tshirt-content .tshirt-choice ul li .image img{ |
352 | width: 50px; | 352 | width: 50px; |
353 | height: auto; | 353 | height: auto; |
354 | } | 354 | } |
355 | /*MODAL Design*/ | 355 | /*MODAL Design*/ |
356 | #tshirt-design{ | 356 | #tshirt-design{ |
357 | background-color: #666666; | 357 | background-color: #666666; |
358 | } | 358 | } |
359 | #tshirt-design .modal-dialog{ | 359 | #tshirt-design .modal-dialog{ |
360 | /*width: 800px!important;*/ | 360 | /*width: 800px!important;*/ |
361 | margin: 0 auto; | 361 | margin: 0 auto; |
362 | } | 362 | } |
363 | #tshirt-design .modal-dialog .modal-content{ | 363 | #tshirt-design .modal-dialog .modal-content{ |
364 | background-color: transparent; | 364 | background-color: transparent; |
365 | border-radius: 0; | 365 | border-radius: 0; |
366 | border: 0; | 366 | border: 0; |
367 | -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; | 367 | -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; |
368 | box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; | 368 | box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; |
369 | } | 369 | } |
370 | #tshirt-design .modal-dialog .modal-content .modal-header{ | 370 | #tshirt-design .modal-dialog .modal-content .modal-header{ |
371 | padding: 0 0 10px 0; | 371 | padding: 0 0 10px 0; |
372 | border-bottom: 0; | 372 | border-bottom: 0; |
373 | border-shadow: none!important; | 373 | border-shadow: none!important; |
374 | } | 374 | } |
375 | #tshirt-design .modal-dialog .modal-content .modal-body{ | 375 | #tshirt-design .modal-dialog .modal-content .modal-body{ |
376 | background-color: #f5f5f5; | 376 | background-color: #f5f5f5; |
377 | padding: 0 0; | 377 | padding: 0 0; |
378 | } | 378 | } |
379 | #tshirt-design header{ | 379 | #tshirt-design header{ |
380 | border-bottom: 1px solid #cccccc; | 380 | border-bottom: 1px solid #cccccc; |
381 | background-color: #dddddd; | 381 | background-color: #dddddd; |
382 | } | 382 | } |
383 | #tshirt-design header ul.nav{ | 383 | #tshirt-design header ul.nav{ |
384 | padding-left: 0; | 384 | padding-left: 0; |
385 | list-style: none; | 385 | list-style: none; |
386 | } | 386 | } |
387 | #tshirt-design header ul.nav li{ | 387 | #tshirt-design header ul.nav li{ |
388 | float: left; | 388 | float: left; |
389 | padding: 8px 26px; | 389 | padding: 8px 26px; |
390 | border-right: 1px solid #cccccc; | 390 | border-right: 1px solid #cccccc; |
391 | font-size: 14px; | 391 | font-size: 14px; |
392 | cursor: pointer; | 392 | cursor: pointer; |
393 | } | 393 | } |
394 | #tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{ | 394 | #tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{ |
395 | background-color: red; | 395 | background-color: red; |
396 | color: #ffffff; | 396 | color: #ffffff; |
397 | } | 397 | } |
398 | #tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{ | 398 | #tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{ |
399 | color: #ffffff; | 399 | color: #ffffff; |
400 | } | 400 | } |
401 | #tshirt-design header ul.nav li i.fa{ | 401 | #tshirt-design header ul.nav li i.fa{ |
402 | color: #fe070f; | 402 | color: #fe070f; |
403 | font-size: 20px; | 403 | font-size: 20px; |
404 | margin-right: 10px; | 404 | margin-right: 10px; |
405 | } | 405 | } |
406 | #tshirt-design header .action{ | 406 | #tshirt-design header .action{ |
407 | 407 | ||
408 | } | 408 | } |
409 | #tshirt-design header .action button{ | 409 | #tshirt-design header .action button{ |
410 | padding: 2px 10px; | 410 | padding: 2px 10px; |
411 | margin: 6px 10px; | 411 | margin: 6px 10px; |
412 | } | 412 | } |
413 | #tshirt-design header .action button:hover{ | 413 | #tshirt-design header .action button:hover{ |
414 | background-color: red; | 414 | background-color: red; |
415 | color: #ffffff; | 415 | color: #ffffff; |
416 | } | 416 | } |
417 | 417 | ||
418 | /*Aside modal*/ | 418 | /*Aside modal*/ |
419 | .aside{ | 419 | .aside{ |
420 | } | 420 | } |
421 | 421 | ||
422 | .aside .box-design-option{ | 422 | .aside .box-design-option{ |
423 | list-style: none; | 423 | list-style: none; |
424 | padding-left: 0; | 424 | padding-left: 0; |
425 | margin-top: 10px; | 425 | margin-top: 10px; |
426 | } | 426 | } |
427 | 427 | ||
428 | .aside .box-design-option li{ | 428 | .aside .box-design-option li{ |
429 | border: 1px solid #cdcdcd; | 429 | border: 1px solid #cdcdcd; |
430 | position: relative; | 430 | position: relative; |
431 | /*cursor: pointer;*/ | 431 | /*cursor: pointer;*/ |
432 | margin-bottom: 10px; | 432 | margin-bottom: 10px; |
433 | } | 433 | } |
434 | .aside .box-design-option li .hover{ | 434 | .aside .box-design-option li .hover{ |
435 | background-color: #fddad4; | 435 | background-color: #fddad4; |
436 | opacity: 0.6; | 436 | opacity: 0.6; |
437 | position: absolute; | 437 | position: absolute; |
438 | width: 100%; | 438 | width: 100%; |
439 | height: 100%; | 439 | height: 100%; |
440 | display: none; | 440 | display: none; |
441 | } | 441 | } |
442 | .aside .box-design-option li:hover .hover{ | 442 | .aside .box-design-option li:hover .hover{ |
443 | display: block; | 443 | display: block; |
444 | } | 444 | } |
445 | 445 | ||
446 | .aside .box-design-option li .title{ | 446 | .aside .box-design-option li .title{ |
447 | background: url("../images/bg1.png") repeat #cdcdcd; | 447 | background: url("../images/bg1.png") repeat #cdcdcd; |
448 | padding: 3px 10px; | 448 | padding: 3px 10px; |
449 | } | 449 | } |
450 | .aside .box-design-option li .title i.fa{ | 450 | .aside .box-design-option li .title i.fa{ |
451 | color: #000000; | 451 | color: #000000; |
452 | } | 452 | } |
453 | 453 | ||
454 | .aside .box-design-option li .content{ | 454 | .aside .box-design-option li .content{ |
455 | 455 | ||
456 | } | 456 | } |
457 | .aside .box-design-option li .content i.fa{ | 457 | .aside .box-design-option li .content i.fa{ |
458 | font-size: 30px; | 458 | font-size: 30px; |
459 | color: #fe070f; | 459 | color: #fe070f; |
460 | margin: 8px 0; | 460 | margin: 8px 0; |
461 | } | 461 | } |
462 | .aside .box-design-option li .content .des{ | 462 | .aside .box-design-option li .content .des{ |
463 | padding: 3px 10px 3px 0; | 463 | padding: 3px 10px 3px 0; |
464 | } | 464 | } |
465 | .aside .box-design-option li .content .color-patterns { | 465 | .aside .box-design-option li .content .color-patterns { |
466 | width: 100%; | 466 | width: 100%; |
467 | border: #bbb solid 1px; | 467 | border: #bbb solid 1px; |
468 | background: #FFF; | 468 | background: #FFF; |
469 | margin-top: 5px; | 469 | margin-top: 5px; |
470 | min-height: 65px; | 470 | min-height: 65px; |
471 | } | 471 | } |
472 | 472 | ||
473 | .aside .box-design-option li .content .color-patterns .color-pattern-item{ | 473 | .aside .box-design-option li .content .color-patterns .color-pattern-item{ |
474 | height: 20px; | 474 | height: 20px; |
475 | float: left; | 475 | float: left; |
476 | margin-left: 4px; | 476 | margin-left: 4px; |
477 | margin-top: 2px; | 477 | margin-top: 2px; |
478 | width: 20px; | 478 | width: 20px; |
479 | cursor: pointer; | 479 | cursor: pointer; |
480 | border: 1px solid #ddd; | 480 | border: 1px solid #ddd; |
481 | } | 481 | } |
482 | 482 | ||
483 | .aside .box-design-option li .content .color-patterns .color-pattern-item:hover { | 483 | .aside .box-design-option li .content .color-patterns .color-pattern-item:hover { |
484 | outline: 1px solid #ed1d24; | 484 | outline: 1px solid #ed1d24; |
485 | } | 485 | } |
486 | 486 | ||
487 | .aside .box-design-option li .title .reset-color-patterns { | 487 | .aside .box-design-option li .title .reset-color-patterns { |
488 | cursor: pointer; | 488 | cursor: pointer; |
489 | } | 489 | } |
490 | 490 | ||
491 | .aside .box-design-option li .title .reset-color-patterns:hover { | 491 | .aside .box-design-option li .title .reset-color-patterns:hover { |
492 | opacity: 0.6; | 492 | opacity: 0.6; |
493 | } | 493 | } |
494 | 494 | ||
495 | .aside .box-design-option li .content .layer-item { | 495 | .aside .box-design-option li .content .layer-item { |
496 | text-align: center; | 496 | text-align: center; |
497 | border: 1px #ddd solid; | 497 | border: 1px #ddd solid; |
498 | background: #FFF; | 498 | background: #FFF; |
499 | padding: 5px; | 499 | padding: 5px; |
500 | font-size: 12px; | 500 | font-size: 12px; |
501 | cursor: pointer; | 501 | cursor: pointer; |
502 | } | 502 | } |
503 | 503 | ||
504 | .aside .box-design-option li .content .layer-item:hover { | 504 | .aside .box-design-option li .content .layer-item:hover { |
505 | background: #ffcccc; | 505 | background: #ffcccc; |
506 | } | 506 | } |
507 | 507 | ||
508 | 508 | ||
509 | /*Design Text*/ | 509 | /*Design Text*/ |
510 | .aside #choice-text{ | 510 | .aside #choice-text{ |
511 | 511 | ||
512 | } | 512 | } |
513 | .aside #choice-text .content{ | 513 | .aside #choice-text .content{ |
514 | padding: 10px 10px; | 514 | padding: 10px 10px; |
515 | } | 515 | } |
516 | .aside #choice-text .content ul.font-family-box{ | 516 | .aside #choice-text .content ul.font-family-box{ |
517 | list-style: none; | 517 | list-style: none; |
518 | margin: 10px 0; | 518 | margin: 10px 0; |
519 | padding-left: 0; | 519 | padding-left: 0; |
520 | height: 180px; | 520 | height: 180px; |
521 | width: 100%; | 521 | width: 100%; |
522 | overflow-y: scroll; | 522 | overflow-y: scroll; |
523 | border: 1px solid #c0c0c0; | 523 | border: 1px solid #c0c0c0; |
524 | } | 524 | } |
525 | 525 | ||
526 | .aside #choice-text .content .font-family-box li{ | 526 | .aside #choice-text .content .font-family-box li{ |
527 | cursor: pointer; | 527 | cursor: pointer; |
528 | padding: 4px 8px; | 528 | padding: 4px 8px; |
529 | border: 0; | 529 | border: 0; |
530 | border-bottom: 1px solid #c0c0c0; | 530 | border-bottom: 1px solid #c0c0c0; |
531 | border-right: 1px solid #c0c0c0; | 531 | border-right: 1px solid #c0c0c0; |
532 | font-size: 16px; | 532 | font-size: 16px; |
533 | margin-bottom: 0; | 533 | margin-bottom: 0; |
534 | } | 534 | } |
535 | .aside #choice-text .content .font-family-box li.active{ | 535 | .aside #choice-text .content .font-family-box li.active{ |
536 | border: 1px solid #fe070f; | 536 | border: 1px solid #fe070f; |
537 | } | 537 | } |
538 | .aside #choice-text .content .spacing-letter{ | 538 | .aside #choice-text .content .spacing-letter{ |
539 | 539 | ||
540 | } | 540 | } |
541 | .aside #choice-text .content .spacing-letter .text-label{ | 541 | .aside #choice-text .content .spacing-letter .text-label{ |
542 | font-size: 16px; | 542 | font-size: 16px; |
543 | padding: 4px 0; | 543 | padding: 4px 0; |
544 | } | 544 | } |
545 | .aside #choice-text .content .spacing-letter .box{ | 545 | .aside #choice-text .content .spacing-letter .box{ |
546 | border: 1px solid #8c8c8c; | 546 | border: 1px solid #8c8c8c; |
547 | box-shadow: 0 0 5px #888888; | 547 | box-shadow: 0 0 5px #888888; |
548 | background-color: #f0f0f0; | 548 | background-color: #f0f0f0; |
549 | } | 549 | } |
550 | .aside #choice-text .content .spacing-letter .item{ | 550 | .aside #choice-text .content .spacing-letter .item{ |
551 | float: left; | 551 | float: left; |
552 | } | 552 | } |
553 | .aside #choice-text .content .spacing-letter .item:hover{ | 553 | .aside #choice-text .content .spacing-letter .item:hover{ |
554 | background-color: #fddad4; | 554 | background-color: #fddad4; |
555 | } | 555 | } |
556 | 556 | ||
557 | .aside #choice-text .content .spacing-letter .item i.fa{ | 557 | .aside #choice-text .content .spacing-letter .item i.fa{ |
558 | font-size: 22px; | 558 | font-size: 22px; |
559 | margin: 0 0; | 559 | margin: 0 0; |
560 | color: #000000; | 560 | color: #000000; |
561 | } | 561 | } |
562 | .aside #choice-text .content .spacing-letter .item-text{ | 562 | .aside #choice-text .content .spacing-letter .item-text{ |
563 | padding: 6px 20px; | 563 | padding: 6px 20px; |
564 | font-size: 13px; | 564 | font-size: 13px; |
565 | } | 565 | } |
566 | .aside #choice-text .content .spacing-letter .item-plus{ | 566 | .aside #choice-text .content .spacing-letter .item-plus{ |
567 | border-right: 1px solid #8c8c8c; | 567 | border-right: 1px solid #8c8c8c; |
568 | } | 568 | } |
569 | .aside #choice-text .content .spacing-letter .item-minus{ | 569 | .aside #choice-text .content .spacing-letter .item-minus{ |
570 | border-left: 1px solid #8c8c8c; | 570 | border-left: 1px solid #8c8c8c; |
571 | } | 571 | } |
572 | .aside #choice-text .content .spacing-letter .item-plus, .aside #choice-text .content .spacing-letter .item-minus { | 572 | .aside #choice-text .content .spacing-letter .item-plus, .aside #choice-text .content .spacing-letter .item-minus { |
573 | padding: 5px 6px 1px 6px; | 573 | padding: 5px 6px 1px 6px; |
574 | cursor: pointer; | 574 | cursor: pointer; |
575 | } | 575 | } |
576 | /*Design Choice Illustration*/ | 576 | /*Design Choice Illustration*/ |
577 | .aside #choice-illustration li .content { | 577 | .aside #choice-illustration li .content { |
578 | padding: 10px 10px; | 578 | padding: 10px 10px; |
579 | } | 579 | } |
580 | 580 | ||
581 | .aside #choice-illustration li .content select{ | 581 | .aside #choice-illustration li .content select{ |
582 | width: 100%; | 582 | width: 100%; |
583 | } | 583 | } |
584 | 584 | ||
585 | .aside #choice-illustration li .content .illustration-list { | 585 | .aside #choice-illustration li .content .illustration-list { |
586 | width: 100%; | 586 | width: 100%; |
587 | border: #bbb solid 1px; | 587 | border: #bbb solid 1px; |
588 | background: #FFF; | 588 | background: #FFF; |
589 | margin-top: 5px; | 589 | margin-top: 5px; |
590 | min-height: 310px; | 590 | min-height: 310px; |
591 | padding-bottom: 20px; | 591 | padding-bottom: 20px; |
592 | } | 592 | } |
593 | 593 | ||
594 | .aside #choice-illustration li .content .illustration-list .illstration-item{ | 594 | .aside #choice-illustration li .content .illustration-list .illstration-item{ |
595 | height: 60px; | 595 | height: 60px; |
596 | overflow: hidden; | 596 | overflow: hidden; |
597 | float: left; | 597 | float: left; |
598 | margin-left: 6px; | 598 | margin-left: 6px; |
599 | margin-top: 5px; | 599 | margin-top: 5px; |
600 | margin-bottom: 5px; | 600 | margin-bottom: 5px; |
601 | padding: 2px; | 601 | padding: 2px; |
602 | background: #e2e2e2; | 602 | background: #e2e2e2; |
603 | border: solid 2px #d7d7d7; | 603 | border: solid 2px #d7d7d7; |
604 | cursor: pointer; | 604 | cursor: pointer; |
605 | } | 605 | } |
606 | 606 | ||
607 | .aside #choice-illustration li .content .illustration-list .illstration-item:hover { | 607 | .aside #choice-illustration li .content .illustration-list .illstration-item:hover { |
608 | outline: 2px solid #ed1d24; | 608 | outline: 2px solid #ed1d24; |
609 | } | 609 | } |
610 | 610 | ||
611 | .aside #choice-illustration li .content .illustration-list .illstration-item img { | 611 | .aside #choice-illustration li .content .illustration-list .illstration-item img { |
612 | width: 50px; | 612 | width: 50px; |
613 | cursor: pointer; | 613 | cursor: pointer; |
614 | } | 614 | } |
615 | 615 | ||
616 | .aside #choice-illustration li .content .illustration-list .footer-bar { | 616 | .aside #choice-illustration li .content .illustration-list .footer-bar { |
617 | text-align: center; | 617 | text-align: center; |
618 | margin-top: 5px; | 618 | margin-top: 5px; |
619 | bottom: 10px; | 619 | bottom: 10px; |
620 | position: absolute; | 620 | position: absolute; |
621 | width: 100%; | 621 | width: 100%; |
622 | padding-right: 20px; | 622 | padding-right: 20px; |
623 | } | 623 | } |
624 | .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination { | 624 | .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination { |
625 | margin-right: 5px; | 625 | margin-right: 5px; |
626 | cursor: pointer; | 626 | cursor: pointer; |
627 | font-size: 9px; | 627 | font-size: 9px; |
628 | color: #FFF; | 628 | color: #FFF; |
629 | background: #666666; | 629 | background: #666666; |
630 | text-transform: uppercase; | 630 | text-transform: uppercase; |
631 | padding: 2px 5px; | 631 | padding: 2px 5px; |
632 | } | 632 | } |
633 | 633 | ||
634 | .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination:hover { | 634 | .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination:hover { |
635 | background: #999999; | 635 | background: #999999; |
636 | } | 636 | } |
637 | .tooltip-arrow, | 637 | .tooltip-arrow, |
638 | .red-tooltip + .tooltip > .tooltip-inner { | 638 | .red-tooltip + .tooltip > .tooltip-inner { |
639 | background-color: #FFF; | 639 | background-color: #FFF; |
640 | margin:0; | 640 | margin:0; |
641 | padding:0; | 641 | padding:0; |
642 | } | 642 | } |
643 | 643 | ||
644 | /* Insert image*/ | 644 | /* Insert image*/ |
645 | #btn-choose-image { | 645 | #btn-choose-image { |
646 | background: #ff0f00; | 646 | background: #ff0f00; |
647 | cursor: pointer; | 647 | cursor: pointer; |
648 | margin: 10px 0px; | 648 | margin: 10px 0px; |
649 | padding: 0 10px; | 649 | padding: 0 10px; |
650 | color: #FFF; | 650 | color: #FFF; |
651 | font-size: 12px; | 651 | font-size: 12px; |
652 | } | 652 | } |
653 | 653 | ||
654 | #btn-choose-image:hover { | 654 | #btn-choose-image:hover { |
655 | background: #f8aeae; | 655 | background: #f8aeae; |
656 | } | 656 | } |
657 | 657 | ||
658 | .aside #choice-image li .content { | 658 | .aside #choice-image li .content { |
659 | margin: 0 10px; | 659 | margin: 0 10px; |
660 | padding: 10px 0; | 660 | padding: 10px 0; |
661 | } | 661 | } |
662 | 662 | ||
663 | .aside #choice-image li .content .small-text { | 663 | .aside #choice-image li .content .small-text { |
664 | font-size:10px; | 664 | font-size:10px; |
665 | margin-bottom: 10px; | 665 | margin-bottom: 10px; |
666 | } | 666 | } |
667 | 667 | ||
668 | .aside #choice-image { | 668 | .aside #choice-image { |
669 | font-size: 13px; | 669 | font-size: 13px; |
670 | } | 670 | } |
671 | 671 | ||
672 | .aside #imgLoader{ | 672 | .aside #imgLoader{ |
673 | display: none; | 673 | display: none; |
674 | } | 674 | } |
675 | 675 | ||
676 | .aside #choice-image li .content .list-images { | 676 | .aside #choice-image li .content .list-images { |
677 | height: 300px; | 677 | height: 300px; |
678 | background: #FFF; | 678 | background: #FFF; |
679 | border: 1px solid #DDD; | 679 | border: 1px solid #DDD; |
680 | } | 680 | } |
681 | 681 | ||
682 | .aside #choice-image li .content .list-images .recent-img{ | 682 | .aside #choice-image li .content .list-images .recent-img{ |
683 | height: 60px; | 683 | height: 60px; |
684 | overflow: hidden; | 684 | overflow: hidden; |
685 | float: left; | 685 | float: left; |
686 | margin-left: 6px; | 686 | margin-left: 6px; |
687 | margin-top: 5px; | 687 | margin-top: 5px; |
688 | margin-bottom: 5px; | 688 | margin-bottom: 5px; |
689 | padding: 2px; | 689 | padding: 2px; |
690 | background: #e2e2e2; | 690 | background: #e2e2e2; |
691 | border: solid 2px #d7d7d7; | 691 | border: solid 2px #d7d7d7; |
692 | cursor: pointer; | 692 | cursor: pointer; |
693 | } | 693 | } |
694 | 694 | ||
695 | .aside #choice-image li .content .list-images .recent-img:hover { | 695 | .aside #choice-image li .content .list-images .recent-img:hover { |
696 | outline: 2px solid #ed1d24; | 696 | outline: 2px solid #ed1d24; |
697 | } | 697 | } |
698 | 698 | ||
699 | .aside #choice-image li .content .list-images .recent-img img { | 699 | .aside #choice-image li .content .list-images .recent-img img { |
700 | width: 50px; | 700 | width: 50px; |
701 | cursor: pointer; | 701 | cursor: pointer; |
702 | } | 702 | } |
703 | 703 | ||
704 | /*Design content*/ | 704 | /*Design content*/ |
705 | .tshirt-design-container{ | 705 | .tshirt-design-container{ |
706 | position: relative; | 706 | |
707 | } | 707 | } |
708 | .tshirt-design-container .design-content{ | 708 | .tshirt-design-container .design-content{ |
709 | padding: 10px 0; | 709 | padding: 10px 0; |
710 | /*width: 100%;*/ | 710 | /*min-height: 580px;*/ |
711 | } | 711 | } |
712 | .tshirt-design-container .design-content .content{ | 712 | .tshirt-design-container .design-content .content{ |
713 | width: 100%; | 713 | width: 100%; |
714 | height: 100%; | 714 | height: 100%; |
715 | min-height: 650px; | 715 | min-height: 600px; |
716 | background-color: #f0efea; | 716 | position: relative; |
717 | padding: 40px 40px; | 717 | padding: 40px 40px; |
718 | /*display: table-cell;*/ | ||
719 | } | 718 | } |
720 | .tshirt-design-container .design-content .content .selection-design{ | 719 | .tshirt-design-container .design-content .content .selection-design{ |
721 | border: 1px solid #ff0000; | 720 | border: 1px solid #ff0000; |
722 | } | 721 | } |
723 | .tshirt-design-container .agree-design{ | 722 | .tshirt-design-container .agree-design{ |
724 | position: absolute; | 723 | position: absolute; |
725 | right: -16px; | 724 | right: -16px; |
726 | top: 40%; | 725 | top: 40%; |
727 | cursor: pointer; | 726 | cursor: pointer; |
728 | } | 727 | } |
729 | .tshirt-design-container .agree-design:hover{ | 728 | .tshirt-design-container .agree-design:hover{ |
730 | opacity: 0.8; | 729 | opacity: 0.8; |
731 | } | 730 | } |
732 | .tshirt-design-container .trash-design{ | 731 | .tshirt-design-container .trash-design{ |
733 | position: absolute; | 732 | position: absolute; |
734 | right: 5px; | 733 | right: 5px; |
735 | bottom: 0; | 734 | bottom: 0; |
736 | } | 735 | } |
737 | .tshirt-design-container .trash-design:hover{ | 736 | .tshirt-design-container .trash-design:hover{ |
738 | opacity: 0.5; | 737 | opacity: 0.5; |
739 | } | 738 | } |
740 | 739 | ||
741 | .object-border{ | 740 | .object-border{ |
742 | position: absolute; | 741 | position: absolute; |
743 | background-color: rgb(0, 108, 255); | 742 | background-color: rgb(0, 108, 255); |
744 | border: 0; | 743 | border: 0; |
745 | display:none; | 744 | display:none; |
746 | transform-origin: 0% 0%; | 745 | transform-origin: 0% 0%; |
747 | } | 746 | } |
748 | #object-border-top, #object-border-bottom{ | 747 | #object-border-top, #object-border-bottom{ |
749 | height: 2px; | 748 | height: 2px; |
750 | } | 749 | } |
751 | #object-border-right, #object-border-left{ | 750 | #object-border-right, #object-border-left{ |
752 | width: 2px; | 751 | width: 2px; |
753 | } | 752 | } |
754 | 753 | ||
755 | 754 | ||
756 | /*FOOTER*/ | 755 | /*FOOTER*/ |
757 | footer{ | 756 | footer{ |
758 | background-color: #333333; | 757 | background-color: #333333; |
759 | } | 758 | } |
760 | footer ul.nav-footer{ | 759 | footer ul.nav-footer{ |
761 | padding-left: 0; | 760 | padding-left: 0; |
762 | list-style: none; | 761 | list-style: none; |
763 | } | 762 | } |
764 | footer ul.nav-footer li{ | 763 | footer ul.nav-footer li{ |
765 | float: left; | 764 | float: left; |
766 | padding: 3px 10px; | 765 | padding: 3px 10px; |
767 | border-right: 1px dotted #ffffff; | 766 | border-right: 1px dotted #ffffff; |
768 | 767 | ||
769 | } | 768 | } |
770 | footer ul.nav-footer li a{ | 769 | footer ul.nav-footer li a{ |
771 | color: #ffffff; | 770 | color: #ffffff; |
772 | font-size: 11px; | 771 | font-size: 11px; |
773 | } | 772 | } |
774 | /* Customize container */ | 773 | /* Customize container */ |
775 | @media (min-width: 768px) { | 774 | @media (min-width: 768px) { |
776 | .container { | 775 | .container { |
777 | /*max-width: 730px;*/ | 776 | /*max-width: 730px;*/ |
778 | } | 777 | } |
779 | } | 778 | } |
780 | 779 | ||
781 | /* Responsive: Portrait tablets and up */ | 780 | /* Responsive: Portrait tablets and up */ |
782 | @media screen and (min-width: 768px) { | 781 | @media screen and (min-width: 768px) { |
783 | /* Remove the padding we set earlier */ | 782 | /* Remove the padding we set earlier */ |
784 | 783 | ||
785 | } | 784 | } |
786 | 785 | ||
787 | @media (min-width: 1024px) { | 786 | @media (min-width: 1024px) { |
788 | #tshirt-design .modal-dialog{ | 787 | #tshirt-design .modal-dialog{ |
789 | min-width: 1000px; | 788 | min-width: 1000px; |
790 | width: 1000px; | 789 | width: 1000px; |
791 | } | 790 | } |
792 | } | 791 | } |
793 | 792 | ||
794 | @media (max-width: 762px) { | 793 | @media (max-width: 762px) { |
795 | .modal-dialog{ | 794 | .modal-dialog{ |
796 | margin: 0 0!important; | 795 | margin: 0 0!important; |
797 | } | 796 | } |
798 | #tshirt-design header .menu-nav{ | 797 | #tshirt-design header .menu-nav{ |
799 | overflow-x: scroll!important; | 798 | overflow-x: scroll!important; |
800 | -webkit-overflow-scrolling: touch; | 799 | -webkit-overflow-scrolling: touch; |
801 | } | 800 | } |
802 | 801 | ||
803 | #tshirt-design header ul.nav { | 802 | #tshirt-design header ul.nav { |
804 | text-align: justify; | 803 | text-align: justify; |
805 | width: 680px; | 804 | width: 680px; |
806 | } | 805 | } |
807 | 806 | ||
808 | #tshirt-design header ul.nav li { | 807 | #tshirt-design header ul.nav li { |
809 | display: inline-block; /* 6 */ | 808 | display: inline-block; /* 6 */ |
810 | } | 809 | } |
811 | 810 | ||
812 | .tshirt-design-container .design-content .content{ | 811 | .tshirt-design-container .design-content .content{ |
813 | padding: 14px 14px; | 812 | padding: 14px 14px; |
814 | } | 813 | } |
815 | .tshirt-design-container .design-content{ | 814 | .tshirt-design-container .design-content{ |
816 | padding: 0 0; | 815 | padding: 0 0; |
817 | } | 816 | } |
818 | } | 817 | } |
app/styles/placedesign.css
1 | #preview-design { | 1 | #preview-design { |
2 | position: absolute; | 2 | position: absolute; |
3 | border: dashed 2px #DDD; | 3 | border: dashed 2px #DDD; |
4 | cursor: pointer; | 4 | cursor: pointer; |
5 | } | 5 | } |
6 | 6 | ||
7 | #preview-design img { | 7 | #preview-design img { |
8 | width: 150px; | 8 | width: 150px; |
9 | } | 9 | } |
10 | 10 | ||
11 | .t_shirt_p_1{ | 11 | .t_shirt_p_1{ |
12 | left: 50%; | 12 | left: 50%; |
13 | top: 50%; | 13 | top: 50%; |
14 | transform: translateX(-50%) translateY(-50%); | 14 | transform: translateX(-50%) translateY(-50%); |
15 | -webkit-transform: translateX(-50%) translateY(-50%); | 15 | -webkit-transform: translateX(-50%) translateY(-50%); |
16 | } | 16 | } |
17 | .t_shirt_p_2{ | 17 | .t_shirt_p_2{ |
18 | left: 50%; | 18 | left: 50%; |
19 | top: 80%; | 19 | top: 80%; |
20 | transform: translateX(-50%) translateY(-80%); | 20 | transform: translateX(-50%) translateY(-80%); |
21 | -webkit-transform: translateX(-50%) translateY(-80%); | 21 | -webkit-transform: translateX(-50%) translateY(-80%); |
22 | } | 22 | } |
23 | |||
24 | /**/ | ||
25 | .design-content-t_shirt_p_1{ | ||
26 | |||
27 | } | ||
28 | .design-content-t_shirt_p_2{ | ||
29 | padding: 200px 40px!important; | ||
30 | } |
app/views/main.html
1 | <div ng-controller="MainCtrl" class="col-sm-10 col-sm-offset-1" id="tshirt-container"> | 1 | <div ng-controller="MainCtrl" class="col-sm-10 col-sm-offset-1" id="tshirt-container"> |
2 | <div class="row"> | 2 | <div class="row"> |
3 | <header> | 3 | <header> |
4 | <div class="logo"> | 4 | <div class="logo"> |
5 | <img src="images/logo_mobile_world.png" alt="Logo Mobile World" /> | 5 | <img src="images/logo_mobile_world.png" alt="Logo Mobile World" /> |
6 | MOBILE WORLD | 6 | MOBILE WORLD |
7 | </div> | 7 | </div> |
8 | </header> | 8 | </header> |
9 | <nav class="clearfix"> | 9 | <nav class="clearfix"> |
10 | <div class="col-sm-12"> | 10 | <div class="col-sm-12"> |
11 | <h2 class="pull-left">加工箇所を選択してデザインしてください。</h2> | 11 | <h2 class="pull-left">加工箇所を選択してデザインしてください。</h2> |
12 | <ul class="pull-right"> | 12 | <ul class="pull-right"> |
13 | <li><a href="#">商品に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li> | 13 | <li><a href="#">商品に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li> |
14 | <li><a href="#">加工方法に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li> | 14 | <li><a href="#">加工方法に戻る</a><i class="fa fa-caret-left" aria-hidden="true"></i></li> |
15 | <li class="action">デザインする</li> | 15 | <li class="action">デザインする</li> |
16 | </ul> | 16 | </ul> |
17 | </div> | 17 | </div> |
18 | </nav> | 18 | </nav> |
19 | <article class="clearfix"> | 19 | <article class="clearfix"> |
20 | <aside class="col-sm-5"> | 20 | <aside class="col-sm-5"> |
21 | <div class="step"> | 21 | <div class="step"> |
22 | <div class="title"> | 22 | <div class="title"> |
23 | 1. デザインを作る | 23 | 1. デザインを作る |
24 | </div> | 24 | </div> |
25 | <div class="step-box"> | 25 | <div class="step-box"> |
26 | <div class="tshirt-design clearfix"> | 26 | <div class="tshirt-design clearfix"> |
27 | <div class="icon"> | 27 | <div class="icon"> |
28 | <img src="images/t-shirt_icon/tshirt1.gif" alt="icon t-shirt" /> | 28 | <img src="images/t-shirt_icon/tshirt1.gif" alt="icon t-shirt" /> |
29 | </div> | 29 | </div> |
30 | <div class="name"> | 30 | <div class="name"> |
31 | 背中背中 (28x22) | 31 | 背中背中 (28x22) |
32 | </div> | 32 | </div> |
33 | <div class="action"> | 33 | <div class="action"> |
34 | <button class="red" ng-click="modalTShirtDesign()"> | 34 | <button class="red" ng-click="modalTShirtDesign()"> |
35 | <i class="fa fa-caret-right" aria-hidden="true"></i> デザインを作る | 35 | <i class="fa fa-caret-right" aria-hidden="true"></i> デザインを作る |
36 | </button> | 36 | </button> |
37 | </div> | 37 | </div> |
38 | </div> | 38 | </div> |
39 | </div> | 39 | </div> |
40 | </div> | 40 | </div> |
41 | 41 | ||
42 | <!-- BREAK DOWN--> | 42 | <!-- BREAK DOWN--> |
43 | <div class="text-center break-down"> | 43 | <div class="text-center break-down"> |
44 | <img src="images/bg_step_arrow.gif" alt="arrow" /> | 44 | <img src="images/bg_step_arrow.gif" alt="arrow" /> |
45 | </div> | 45 | </div> |
46 | 46 | ||
47 | <!-- STEP 2--> | 47 | <!-- STEP 2--> |
48 | <div class="step"> | 48 | <div class="step"> |
49 | <div class="title"> | 49 | <div class="title"> |
50 | 2.アイテムカラーを変更する | 50 | 2.アイテムカラーを変更する |
51 | </div> | 51 | </div> |
52 | <div class="step-box clearfix"> | 52 | <div class="step-box clearfix"> |
53 | <div class="tshirt-color"> | 53 | <div class="tshirt-color"> |
54 | <ul class="choice-color clearfix"> | 54 | <ul class="choice-color clearfix"> |
55 | <li ng-repeat="(key,color) in tShirtColor" ng-click="choiceTShirtColor(key)" ng-class="key == tShirtColorKey ? 'action' : ''"> | 55 | <li ng-repeat="(key,color) in tShirtColor" ng-click="choiceTShirtColor(key)" ng-class="key == tShirtColorKey ? 'action' : ''"> |
56 | <div ng-style="{'background-color' : color.code}"></div> | 56 | <div ng-style="{'background-color' : color.code}"></div> |
57 | </li> | 57 | </li> |
58 | </ul> | 58 | </ul> |
59 | <div class="color-name" ng-bind="tShirtColorName"></div> | 59 | <div class="color-name" ng-bind="tShirtColorName"></div> |
60 | <div class="view-more"> | 60 | <div class="view-more"> |
61 | 在庫確認 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> | 61 | 在庫確認 <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> |
62 | </div> | 62 | </div> |
63 | </div> | 63 | </div> |
64 | </div> | 64 | </div> |
65 | </div> | 65 | </div> |
66 | 66 | ||
67 | <!-- BREAK DOWN--> | 67 | <!-- BREAK DOWN--> |
68 | <div class="text-center break-down"> | 68 | <div class="text-center break-down"> |
69 | <img src="images/bg_step_arrow.gif" alt="arrow" /> | 69 | <img src="images/bg_step_arrow.gif" alt="arrow" /> |
70 | </div> | 70 | </div> |
71 | 71 | ||
72 | <!-- STEP 3--> | 72 | <!-- STEP 3--> |
73 | <div class="step"> | 73 | <div class="step"> |
74 | <div class="step-box clearfix"> | 74 | <div class="step-box clearfix"> |
75 | <div class="tshirt-saveorder"> | 75 | <div class="tshirt-saveorder"> |
76 | <div class="clearfix"> | 76 | <div class="clearfix"> |
77 | <div class="action"> | 77 | <div class="action"> |
78 | <button class="white"> | 78 | <button class="white"> |
79 | <div class="text"> | 79 | <div class="text"> |
80 | このデザインを保存する | 80 | このデザインを保存する |
81 | </div> | 81 | </div> |
82 | <div class="arrow"> | 82 | <div class="arrow"> |
83 | <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> | 83 | <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> |
84 | </div> | 84 | </div> |
85 | </button> | 85 | </button> |
86 | </div> | 86 | </div> |
87 | <div class="action"> | 87 | <div class="action"> |
88 | <button class="red"> | 88 | <button class="red"> |
89 | <div class="text"> | 89 | <div class="text"> |
90 | このデザインで注文する | 90 | このデザインで注文する |
91 | </div> | 91 | </div> |
92 | <div class="arrow clearfix"> | 92 | <div class="arrow clearfix"> |
93 | <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> | 93 | <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> |
94 | </div> | 94 | </div> |
95 | </button> | 95 | </button> |
96 | </div> | 96 | </div> |
97 | </div> | 97 | </div> |
98 | <div class="notice"> | 98 | <div class="notice"> |
99 | デザインを保存するには、ログインしてください | 99 | デザインを保存するには、ログインしてください |
100 | </div> | 100 | </div> |
101 | </div> | 101 | </div> |
102 | </div> | 102 | </div> |
103 | 103 | ||
104 | <!-- BREAL LINE--> | 104 | <!-- BREAL LINE--> |
105 | <div class="text-center break-line"> | 105 | <div class="text-center break-line"> |
106 | <hr /> | 106 | <hr /> |
107 | </div> | 107 | </div> |
108 | 108 | ||
109 | <!-- STEP 4--> | 109 | <!-- STEP 4--> |
110 | <div class="step"> | 110 | <div class="step"> |
111 | <div class="title-notice"> | 111 | <div class="title-notice"> |
112 | 商品・デザインの変更はこちら <span class="require">作業中のデザインは破棄されます</span> | 112 | 商品・デザインの変更はこちら <span class="require">作業中のデザインは破棄されます</span> |
113 | </div> | 113 | </div> |
114 | <div class="step-box"> | 114 | <div class="step-box"> |
115 | <div class="change-design"> | 115 | <div class="change-design"> |
116 | <table> | 116 | <table> |
117 | <tr> | 117 | <tr> |
118 | <td class="text-center">商品</td> | 118 | <td class="text-center">商品</td> |
119 | <td>MENドライカノコポロシャツ・ポケツキ半袖(ホワイト)</td> | 119 | <td>MENドライカノコポロシャツ・ポケツキ半袖(ホワイト)</td> |
120 | <td class="text-right"> | 120 | <td class="text-right"> |
121 | <button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button> | 121 | <button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button> |
122 | </td> | 122 | </td> |
123 | </tr> | 123 | </tr> |
124 | <tr> | 124 | <tr> |
125 | <td width="10%" class="text-center">加工方法</td> | 125 | <td width="10%" class="text-center">加工方法</td> |
126 | <td width="70%">シルク:胸中央 (27×27)</td> | 126 | <td width="70%">シルク:胸中央 (27×27)</td> |
127 | <td width="20%" class="text-right"> | 127 | <td width="20%" class="text-right"> |
128 | <button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button> | 128 | <button class="brown"><i class="fa fa-caret-right" aria-hidden="true"></i> 変更</button> |
129 | </td> | 129 | </td> |
130 | </tr> | 130 | </tr> |
131 | </table> | 131 | </table> |
132 | </div> | 132 | </div> |
133 | </div> | 133 | </div> |
134 | </div> | 134 | </div> |
135 | <!-- STEP 5- finish--> | 135 | <!-- STEP 5- finish--> |
136 | <div class="step"> | 136 | <div class="step"> |
137 | <div class="finish-design"> | 137 | <div class="finish-design"> |
138 | <button class="white"> | 138 | <button class="white"> |
139 | 自分で保存したデザインを呼び出す <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> | 139 | 自分で保存したデザインを呼び出す <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> |
140 | </button> | 140 | </button> |
141 | </div> | 141 | </div> |
142 | 142 | ||
143 | </div> | 143 | </div> |
144 | </div> | 144 | </div> |
145 | </aside> | 145 | </aside> |
146 | <section id="tshirt-content" class="col-sm-7 text-center"> | 146 | <section id="tshirt-content" class="col-sm-7 text-center"> |
147 | <div class="switch-border-design"> | 147 | <div class="switch-border-design"> |
148 | <i class="fa fa-square-o" aria-hidden="true"></i> 枠線を消す | 148 | <i class="fa fa-square-o" aria-hidden="true"></i> 枠線を消す |
149 | </div> | 149 | </div> |
150 | <div class="tshirt-image"> | 150 | <div class="tshirt-image"> |
151 | <img ng-src="{{ tShirtImg }}" alt="" /> | 151 | <img ng-src="{{ tShirtImg }}" alt="" /> |
152 | <div class="{{ placeTshirt.place }}" id="preview-design" ng-show="placeTshirt.face === tShirtChoiceBackFrontKey" ng-click="modalTShirtDesign()"> | 152 | <div ng-class="placeTshirt.place" id="preview-design" ng-show="placeTshirt.face === tShirtChoiceBackFrontKey" ng-click="modalTShirtDesign()"> |
153 | <img ng-src="{{outputImage}}" ng-show="outputImage"/> | 153 | <img ng-src="{{outputImage}}" ng-show="outputImage"/> |
154 | </div> | 154 | </div> |
155 | </div> | 155 | </div> |
156 | <div class="tshirt-choice"> | 156 | <div class="tshirt-choice"> |
157 | <ul> | 157 | <ul> |
158 | <li ng-class="'front' === tShirtChoiceBackFrontKey ? 'focus' : ''"> | 158 | <li ng-class="'front' === tShirtChoiceBackFrontKey ? 'focus' : ''"> |
159 | <div>前</div> | 159 | <div>前</div> |
160 | <div class="image" ng-click="choiceTShirtBackFront('front')"> | 160 | <div class="image" ng-click="choiceTShirtBackFront('front')"> |
161 | <img ng-src="{{ tShirtImgFront }}" alt="" /> | 161 | <img ng-src="{{ tShirtImgFront }}" alt="" /> |
162 | </div> | 162 | </div> |
163 | 163 | ||
164 | </li> | 164 | </li> |
165 | <li ng-class="'back' === tShirtChoiceBackFrontKey ? 'focus' : ''"> | 165 | <li ng-class="'back' === tShirtChoiceBackFrontKey ? 'focus' : ''"> |
166 | <div>後</div> | 166 | <div>後</div> |
167 | <div class="image" ng-click="choiceTShirtBackFront('back')"> | 167 | <div class="image" ng-click="choiceTShirtBackFront('back')"> |
168 | <img ng-src="{{ tShirtImgBack }}" alt="" /> | 168 | <img ng-src="{{ tShirtImgBack }}" alt="" /> |
169 | </div> | 169 | </div> |
170 | 170 | ||
171 | </li> | 171 | </li> |
172 | </ul> | 172 | </ul> |
173 | </div> | 173 | </div> |
174 | </section> | 174 | </section> |
175 | </article> | 175 | </article> |
176 | <footer class="clearfix"> | 176 | <footer class="clearfix"> |
177 | <ul class="nav-footer"> | 177 | <ul class="nav-footer"> |
178 | <li><a href="#">店舗検索</a></li> | 178 | <li><a href="#">店舗検索</a></li> |
179 | <li><a href="#">お客様窓口</a></li> | 179 | <li><a href="#">お客様窓口</a></li> |
180 | <li><a href="#">企業情報</a></li> | 180 | <li><a href="#">企業情報</a></li> |
181 | <li><a href="#">採用情報</a></li> | 181 | <li><a href="#">採用情報</a></li> |
182 | <li><a href="#">プライバシーポリシー</a></li> | 182 | <li><a href="#">プライバシーポリシー</a></li> |
183 | </ul> | 183 | </ul> |
184 | </footer> | 184 | </footer> |
185 | 185 | ||
186 | <!--MODAL CONTENT--> | 186 | <!--MODAL CONTENT--> |
187 | <div ng-include="designFrameView"></div> | 187 | <div ng-include="designFrameView"></div> |
188 | </div> | 188 | </div> |
189 | 189 | ||
190 | 190 | ||
191 | </div> | 191 | </div> |
192 | 192 |
app/views/tshirt-design.html
1 | <!-- Modal --> | 1 | <!-- Modal --> |
2 | <div class="modal fade" id="tshirt-design" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" ng-controller="TshirtdesignCtrl"> | 2 | <div class="modal fade" id="tshirt-design" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" ng-controller="TshirtdesignCtrl"> |
3 | <div class="modal-dialog" role="document"> | 3 | <div class="modal-dialog" role="document"> |
4 | <div class="modal-content"> | 4 | <div class="modal-content"> |
5 | <div class="modal-header"> | 5 | <div class="modal-header"> |
6 | <button class="black" ng-click="modalClose()"><i class="fa fa-times" aria-hidden="true"></i> キャンセル</button> | 6 | <button class="black" ng-click="modalClose()"><i class="fa fa-times" aria-hidden="true"></i> キャンセル</button> |
7 | <button class="black"> <i class="fa fa-angle-right" aria-hidden="true"></i> はじめての方へ</button> | 7 | <button class="black"> <i class="fa fa-angle-right" aria-hidden="true"></i> はじめての方へ</button> |
8 | </div> | 8 | </div> |
9 | <div class="modal-body"> | 9 | <div class="modal-body"> |
10 | <header class="clearfix"> | 10 | <header class="clearfix"> |
11 | <div class="menu-nav"> | 11 | <div class="menu-nav"> |
12 | <ul class="nav pull-left"> | 12 | <ul class="nav pull-left"> |
13 | <li ng-class="{'active': isShowLeftPanel=='text'}" ng-click="showDesignTab('text')"> | 13 | <li ng-class="{'active': isShowLeftPanel=='text'}" ng-click="showDesignTab('text')"> |
14 | <i class="fa fa-jpy" aria-hidden="true"></i> 文字 | 14 | <i class="fa fa-jpy" aria-hidden="true"></i> 文字 |
15 | </li> | 15 | </li> |
16 | <li ng-class="{'active': isShowLeftPanel=='illustration'}" ng-click="showDesignTab('illustration')"> | 16 | <li ng-class="{'active': isShowLeftPanel=='illustration'}" ng-click="showDesignTab('illustration')"> |
17 | <i class="fa fa-btc" aria-hidden="true"></i> イラスト・イメージ | 17 | <i class="fa fa-btc" aria-hidden="true"></i> イラスト・イメージ |
18 | </li> | 18 | </li> |
19 | <li ng-class="{'active': isShowLeftPanel=='image'}" ng-click="showDesignTab('image')"> | 19 | <li ng-class="{'active': isShowLeftPanel=='image'}" ng-click="showDesignTab('image')"> |
20 | <i class="fa fa-money" aria-hidden="true"></i> 自分の画像・写真 | 20 | <i class="fa fa-money" aria-hidden="true"></i> 自分の画像・写真 |
21 | </li> | 21 | </li> |
22 | <li ng-click="canvasClearAll()"> | 22 | <li ng-click="canvasClearAll()"> |
23 | <i class="fa fa-minus-circle" aria-hidden="true"></i> 全消去 | 23 | <i class="fa fa-minus-circle" aria-hidden="true"></i> 全消去 |
24 | </li> | 24 | </li> |
25 | </ul> | 25 | </ul> |
26 | </div> | 26 | </div> |
27 | 27 | ||
28 | <div class="action pull-right"> | 28 | <div class="action pull-right"> |
29 | <button class="white"> | 29 | <button class="white"> |
30 | アルバムを開く | 30 | アルバムを開く |
31 | </button> | 31 | </button> |
32 | <button class="white"> | 32 | <button class="white"> |
33 | アルバムに入れる | 33 | アルバムに入れる |
34 | </button> | 34 | </button> |
35 | </div> | 35 | </div> |
36 | </header> | 36 | </header> |
37 | <section class="tshirt-design-container clearfix"> | 37 | <section class="tshirt-design-container clearfix"> |
38 | <div class="aside col-sm-4"> | 38 | <div class="aside col-sm-4"> |
39 | <!-- Default--> | 39 | <!-- Default--> |
40 | <ul class="box-design-option" id="choice-design-option" ng-show="isShowLeftPanel=='default' " ng-include="designPartDefault"> | 40 | <ul class="box-design-option" id="choice-design-option" ng-show="isShowLeftPanel=='default' " ng-include="designPartDefault"> |
41 | </ul> | 41 | </ul> |
42 | <!-- Illustration design--> | 42 | <!-- Illustration design--> |
43 | <ul class="box-design-option" id="choice-illustration" ng-show="isShowLeftPanel=='illustration'" ng-include="designPartIllustration"> | 43 | <ul class="box-design-option" id="choice-illustration" ng-show="isShowLeftPanel=='illustration'" ng-include="designPartIllustration"> |
44 | </ul> | 44 | </ul> |
45 | <!-- Custom image design--> | 45 | <!-- Custom image design--> |
46 | <ul class="box-design-option" id="choice-image" ng-show="isShowLeftPanel=='image'" ng-include="designPartImage"> | 46 | <ul class="box-design-option" id="choice-image" ng-show="isShowLeftPanel=='image'" ng-include="designPartImage"> |
47 | </ul> | 47 | </ul> |
48 | <!-- Text design--> | 48 | <!-- Text design--> |
49 | <ul class="box-design-option" id="choice-text" ng-show="isShowLeftPanel=='text'" ng-include="designPartText"> | 49 | <ul class="box-design-option" id="choice-text" ng-show="isShowLeftPanel=='text'" ng-include="designPartText"> |
50 | </ul> | 50 | </ul> |
51 | </div> | 51 | </div> |
52 | <div class="col-sm-8"> | 52 | <div class="col-sm-8"> |
53 | <div class="design-content " id="main-design-content"> | 53 | <div class="design-content" id="main-design-content"> |
54 | <div class="content" id="main-design" ng-style="{'background-color' : tShirtColorCode}"> | 54 | <div class="content" id="main-design" ng-style="{'background-color' : tShirtColorCode}" ng-class="designCanvasClass"> |
55 | <div class="object-border" id="object-border-top"></div> | 55 | <div class="object-border" id="object-border-top"></div> |
56 | <div class="object-border" id="object-border-right"></div> | 56 | <div class="object-border" id="object-border-right"></div> |
57 | <div class="object-border" id="object-border-bottom"></div> | 57 | <div class="object-border" id="object-border-bottom"></div> |
58 | <div class="object-border" id="object-border-left"></div> | 58 | <div class="object-border" id="object-border-left"></div> |
59 | <canvas id="main-design-container" class="selection-design lower-canvas" style="width: 100%"> | 59 | <canvas id="main-design-container" class="selection-design lower-canvas"> |
60 | |||
60 | </canvas> | 61 | </canvas> |
61 | </div> | 62 | </div> |
62 | <div class="agree-design" ng-click="outputDesign()"> | 63 | <div class="agree-design" ng-click="outputDesign()"> |
63 | <img src="images/agree-design.png" alt="agree design" /> | 64 | <img src="images/agree-design.png" alt="agree design" /> |
64 | </div> | 65 | </div> |
65 | <div class="trash-design"> | 66 | <div class="trash-design"> |
66 | <img src="images/trash.png" alt="trash design" /> | 67 | <img src="images/trash.png" alt="trash design" /> |
67 | </div> | 68 | </div> |
68 | </div> | 69 | </div> |
69 | <img style="display:none" src="images/trash-hover.png" alt="trash-hover cache" /> | 70 | <img style="display:none" src="images/trash-hover.png" alt="trash-hover cache" /> |
70 | </div> | 71 | </div> |
71 | 72 | ||
72 | </section> | 73 | </section> |
73 | </div> | 74 | </div> |
74 | </div> | 75 | </div> |
75 | </div> | 76 | </div> |
76 | </div> | 77 | </div> |