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