TRUONG / T-Shats Frontend

Download as
Browse Code »

Commit e0ee74c158f31baa5083128faa85bae65bf54471

Authored by TRUONG
1 parent e32d6b2cb5
Exists in master and in 1 other branch develop

update fix layer process

Showing 5 changed files with 30 additions and 6 deletions Inline Diff

1 <!doctype html> 1 <!doctype html>
2 <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" id="ng-app" ng-app=""> <![endif]--> 2 <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" id="ng-app" ng-app=""> <![endif]-->
3 <!--[if IE 8]> <html class="no-js lt-ie9" id="ng-app" ng-app=""> <![endif]--> 3 <!--[if IE 8]> <html class="no-js lt-ie9" id="ng-app" ng-app=""> <![endif]-->
4 <!--[if gt IE 8]><!--> <html class="no-js" ng-app> <!--<![endif]--> 4 <!--[if gt IE 8]><!--> <html class="no-js" ng-app> <!--<![endif]-->
5 <head> 5 <head>
6 <meta charset="utf-8"> 6 <meta charset="utf-8">
7 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge">
8 <title></title> 8 <title></title>
9 <meta name="description" content=""> 9 <meta name="description" content="">
10 <meta name="viewport" content="width=device-width"> 10 <meta name="viewport" content="width=device-width">
11 <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> 11 <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
12 <!-- build:css styles/vendor.css --> 12 <!-- build:css styles/vendor.css -->
13 <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" /> 13 <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
14 <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css" /> 14 <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css" />
15 <link rel="stylesheet" href="bower_components/select2/select2.css"> 15 <link rel="stylesheet" href="bower_components/select2/select2.css">
16 <!-- bower:css --> 16 <!-- bower:css -->
17 <!-- endbower --> 17 <!-- endbower -->
18 <!-- endbuild --> 18 <!-- endbuild -->
19 <!-- build:css({.tmp,app}) styles/main.css --> 19 <!-- build:css({.tmp,app}) styles/main.css -->
20 <link rel="stylesheet" href="styles/main.css"> 20 <link rel="stylesheet" href="styles/main.css">
21 <!-- endbuild --> 21 <!-- endbuild -->
22 </head> 22 </head>
23 <body ng-app="tshatsApp"> 23 <body ng-app="tshatsApp">
24 <!--[if lt IE 7]> 24 <!--[if lt IE 7]>
25 <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> 25 <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
26 <![endif]--> 26 <![endif]-->
27 27
28 <!-- Add your site or application content here --> 28 <!-- Add your site or application content here -->
29 <div class="container" ng-view></div> 29 <div class="container" ng-view></div>
30 30
31 <!-- Google Analytics: change UA-XXXXX-X to be your site's ID --> 31 <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
32 <script> 32 <script>
33 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ 33 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
34 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 34 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
35 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) 35 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
36 })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); 36 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
37 37
38 ga('create', 'UA-XXXXX-X'); 38 ga('create', 'UA-XXXXX-X');
39 ga('send', 'pageview'); 39 ga('send', 'pageview');
40 </script> 40 </script>
41 <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script> 41 <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
42 <script type="text/javascript" src="bower_components/fabric.js/dist/fabric.min.js"></script> 42 <script type="text/javascript" src="bower_components/fabric.js/dist/fabric.min.js"></script>
43 <script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> 43 <script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
44 <!--[if lt IE 9]> 44 <!--[if lt IE 9]>
45 <script src="bower_components/es5-shim/es5-shim.js"></script> 45 <script src="bower_components/es5-shim/es5-shim.js"></script>
46 <script src="bower_components/json3/lib/json3.min.js"></script> 46 <script src="bower_components/json3/lib/json3.min.js"></script>
47 <![endif]--> 47 <![endif]-->
48 <script type="text/javascript"> 48 <script type="text/javascript">
49 var VERSION = '17-11_04'; 49 var VERSION = new Date().getTime();//'17-11_04';
50 var require = { 50 var require = {
51 urlArgs: "ver="+VERSION, 51 urlArgs: "ver="+VERSION,
52 }; 52 };
53 </script> 53 </script>
54 <script src="bower_components/requirejs/require.js" data-main="scripts/main"></script> 54 <script src="bower_components/requirejs/require.js" data-main="scripts/main"></script>
55 </body> 55 </body>
56 </html> 56 </html>
57 57
app/scripts/controllers/main.js
Diff comments   View file @ e0ee74c
1 define(['app'], function (app) { 1 define(['app'], function (app) {
2 'use strict'; 2 'use strict';
3 app.controller('MainCtrl', function ($rootScope, $scope, $illustration, $t_shirt) { 3 app.controller('MainCtrl', function ($rootScope, $scope, $timeout, $illustration, $t_shirt) {
4 $rootScope.API_URL = 'http://domain.com'; 4 $rootScope.API_URL = 'http://domain.com';
5 $scope.designFrameView = 'views/tshirt-design.html?ver='+VERSION; 5 $scope.designFrameView = 'views/tshirt-design.html?ver='+VERSION;
6 $scope.designPartIllustration = 'views/design_part/illustration.html?ver='+VERSION; 6 $scope.designPartIllustration = 'views/design_part/illustration.html?ver='+VERSION;
7 $scope.designPartImage = 'views/design_part/image.html?ver='+VERSION; 7 $scope.designPartImage = 'views/design_part/image.html?ver='+VERSION;
8 $scope.designPartText = 'views/design_part/text.html?ver='+VERSION; 8 $scope.designPartText = 'views/design_part/text.html?ver='+VERSION;
9 $scope.designPartDefault = 'views/design_part/default.html?ver='+VERSION; 9 $scope.designPartDefault = 'views/design_part/default.html?ver='+VERSION;
10 10
11 //Action T-Shirt choice color and Back or Front 11 //Action T-Shirt choice color and Back or Front
12 $scope.tShirtColor = $t_shirt.getTShirtColor(0); 12 $scope.tShirtColor = $t_shirt.getTShirtColor(0);
13 //Set color name default 13 //Set color name default
14 var tShirtColorFirstKey = 0; 14 var tShirtColorFirstKey = 0;
15 $scope.tShirtChoiceBackFrontKey = 'front'; 15 $scope.tShirtChoiceBackFrontKey = 'front';
16 $scope.tShirtColorKey = tShirtColorFirstKey; 16 $scope.tShirtColorKey = tShirtColorFirstKey;
17 $rootScope.tShirtColorCode = $scope.tShirtColor[tShirtColorFirstKey].code; 17 $rootScope.tShirtColorCode = $scope.tShirtColor[tShirtColorFirstKey].code;
18 $scope.tShirtColorName = $scope.tShirtColor[tShirtColorFirstKey].name; 18 $scope.tShirtColorName = $scope.tShirtColor[tShirtColorFirstKey].name;
19 $scope.tShirtImgFront = $scope.tShirtColor[tShirtColorFirstKey].img.front; 19 $scope.tShirtImgFront = $scope.tShirtColor[tShirtColorFirstKey].img.front;
20 $scope.tShirtImgBack = $scope.tShirtColor[tShirtColorFirstKey].img.back; 20 $scope.tShirtImgBack = $scope.tShirtColor[tShirtColorFirstKey].img.back;
21 $scope.tShirtImg = $scope.tShirtImgFront; 21 $scope.tShirtImg = $scope.tShirtImgFront;
22 22
23 $scope.choiceTShirtColor = function(key) { 23 $scope.choiceTShirtColor = function(key) {
24 $scope.tShirtColorKey = key; 24 $scope.tShirtColorKey = key;
25 $rootScope.tShirtColorCode = $scope.tShirtColor[key].code; 25 $rootScope.tShirtColorCode = $scope.tShirtColor[key].code;
26 $scope.tShirtColorName = $scope.tShirtColor[key].name; 26 $scope.tShirtColorName = $scope.tShirtColor[key].name;
27 $scope.tShirtImgFront = $scope.tShirtColor[key].img.front; 27 $scope.tShirtImgFront = $scope.tShirtColor[key].img.front;
28 $scope.tShirtImgBack = $scope.tShirtColor[key].img.back; 28 $scope.tShirtImgBack = $scope.tShirtColor[key].img.back;
29 if($scope.tShirtChoiceBackFrontKey == 'front') { 29 if($scope.tShirtChoiceBackFrontKey == 'front') {
30 $scope.tShirtImg = $scope.tShirtImgFront; 30 $scope.tShirtImg = $scope.tShirtImgFront;
31 } else { 31 } else {
32 $scope.tShirtImg = $scope.tShirtImgBack; 32 $scope.tShirtImg = $scope.tShirtImgBack;
33 } 33 }
34 }; 34 };
35 $scope.choiceTShirtBackFront = function(choice) { 35 $scope.choiceTShirtBackFront = function(choice) {
36 if(choice == 'front') { 36 if(choice == 'front') {
37 $scope.tShirtImg = $scope.tShirtImgFront; 37 $scope.tShirtImg = $scope.tShirtImgFront;
38 } else { 38 } else {
39 $scope.tShirtImg = $scope.tShirtImgBack; 39 $scope.tShirtImg = $scope.tShirtImgBack;
40 } 40 }
41 $scope.tShirtChoiceBackFrontKey = choice; 41 $scope.tShirtChoiceBackFrontKey = choice;
42 }; 42 };
43 43
44 44
45 $scope.showDesignTab = function(tab){ 45 $scope.showDesignTab = function(tab){
46 $rootScope.isShowLeftPanel = tab; 46 $rootScope.isShowLeftPanel = tab;
47 switch (tab) { 47 switch (tab) {
48 case 'illustration': { 48 case 'illustration': {
49 $scope.IllustrationList = $illustration.getAll(); 49 $scope.IllustrationList = $illustration.getAll();
50 $scope.illustrationSelectConfig = { 50 $scope.illustrationSelectConfig = {
51 allowClear:true 51 allowClear:true
52 }; 52 };
53 $timeout(function(){
54 $('.illstration-item').tooltip({
55 animated: 'fade',
56 placement: 'bottom',
57 html: true
58 });
59 console.log('here');
60 },1000);
53 break; 61 break;
54 } 62 }
55 case 'text': { 63 case 'text': {
56 break; 64 break;
57 } 65 }
58 } 66 }
59 }; 67 };
60 68
61 //safeApply 69 //safeApply
62 $rootScope.safeApply = function(fn) { 70 $rootScope.safeApply = function(fn) {
63 var phase = this.$root.$$phase; 71 var phase = this.$root.$$phase;
64 if(phase == '$apply' || phase == '$digest') { 72 if(phase == '$apply' || phase == '$digest') {
65 if(fn && (typeof(fn) === 'function')) { 73 if(fn && (typeof(fn) === 'function')) {
66 fn(); 74 fn();
67 } 75 }
68 } else { 76 } else {
69 this.$apply(fn); 77 this.$apply(fn);
70 } 78 }
71 }; 79 };
72 80
73 $scope.modalTShirtDesign = function() { 81 $scope.modalTShirtDesign = function() {
74 $('#tshirt-design').modal( 82 $('#tshirt-design').modal(
75 { 83 {
76 backdrop: 'static', 84 backdrop: 'static',
77 keyboard: false 85 keyboard: false
78 } 86 }
79 ); 87 );
80 $scope.showDesignTab('default'); 88 $scope.showDesignTab('default');
81 }; 89 };
82 $scope.modalClose = function(){ 90 $scope.modalClose = function(){
83 $('#tshirt-design').modal('hide'); 91 $('#tshirt-design').modal('hide');
84 }; 92 };
85 93
86 94
87 95
88 96
89 }); 97 });
90 }); 98 });
91 99
app/scripts/controllers/tshirtdesign.js
Diff comments   View file @ e0ee74c
1 define(['app'], function (app) { 1 define(['app'], function (app) {
2 //'use strict'; 2 //'use strict';
3 3
4 app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $illustration) { 4 app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $illustration) {
5 var canvas = new fabric.Canvas('main-design-container'); 5 var canvas = new fabric.Canvas('main-design-container');
6 fabric.Object.prototype.transparentCorners = false; 6 fabric.Object.prototype.transparentCorners = false;
7 7
8 canvas.on('after:render', function() { 8 canvas.on('after:render', function() {
9 console.log('after render'); 9 console.log('after render');
10 }); 10 });
11 canvas.on({ 11 canvas.on({
12 'object:added' : onIllustrationAdded, 12 'object:added' : onIllustrationAdded,
13 'object:moving' : onIllustrationChange, 13 'object:moving' : onIllustrationChange,
14 'object:scaling' : onIllustrationChange, 14 'object:scaling' : onIllustrationChange,
15 'object:rotating' : onIllustrationChange, 15 'object:rotating' : onIllustrationChange,
16 'object:selected' : onObjectSelected, 16 'object:selected' : onObjectSelected,
17 'object:modified' : onIllustrationModifield, 17 'object:modified' : onIllustrationModifield,
18 'selection:cleared' : onObjectOut, 18 'selection:cleared' : onObjectOut,
19 }); 19 });
20 20
21 var currentObj; 21 var currentObj;
22 var listObj = []; 22 var listObj = [];
23 var stateObj = []; 23 var stateObj = [];
24 var indexCurr = 0; 24 var indexCurr = 0;
25 var indexCurr2 = 0; 25 var indexCurr2 = 0;
26 var actionObj = false; 26 var actionObj = false;
27 var refreshObj = true; 27 var refreshObj = true;
28 var spacingNum = 0; 28 var spacingNum = 0;
29 29
30 function onIllustrationAdded(options){ 30 function onIllustrationAdded(options){
31 var object = options.target; 31 var object = options.target;
32 console.log('object:added'); 32 console.log('object:added');
33 33
34 if (actionObj === true) { 34 if (actionObj === true) {
35 stateObj = [stateObj[indexCurr2]]; 35 stateObj = [stateObj[indexCurr2]];
36 listObj = [listObj[indexCurr2]]; 36 listObj = [listObj[indexCurr2]];
37 37
38 actionObj = false; 38 actionObj = false;
39 console.log(stateObj); 39 console.log(stateObj);
40 indexCurr = 1; 40 indexCurr = 1;
41 } 41 }
42 object.saveState(); 42 object.saveState();
43 43
44 console.log(object.originalState); 44 console.log(object.originalState);
45 stateObj[indexCurr] = JSON.stringify(object.originalState); 45 stateObj[indexCurr] = JSON.stringify(object.originalState);
46 listObj[indexCurr] = object; 46 listObj[indexCurr] = object;
47 indexCurr++; 47 indexCurr++;
48 indexCurr2 = indexCurr - 1; 48 indexCurr2 = indexCurr - 1;
49 refreshObj = true; 49 refreshObj = true;
50 } 50 }
51 51
52 function onIllustrationModifield(options){ 52 function onIllustrationModifield(options){
53 var objOffset = canvas.getActiveObject().getBoundingRect(); 53 var objOffset = canvas.getActiveObject().getBoundingRect();
54 var cH = canvas.height, cW = canvas.width, H0 = 50, W0 = 50; 54 var cH = canvas.height, cW = canvas.width, H0 = 50, W0 = 50;
55 //console.log(objOffset,canvas.height,canvas.width); 55 //console.log(objOffset,canvas.height,canvas.width);
56 if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){ 56 if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){
57 if (confirm('削除してもよろしいですか')){ 57 if (confirm('削除してもよろしいですか')){
58 canvas.getActiveObject().remove(); 58 canvas.getActiveObject().remove();
59 }else{ 59 }else{
60 undoCanvas(); 60 undoCanvas();
61 return; 61 return;
62 } 62 }
63 } 63 }
64 64
65 var object = options.target; 65 var object = options.target;
66 console.log('object:modified'); 66 console.log('object:modified');
67 if (actionObj === true) { 67 if (actionObj === true) {
68 stateObj = [stateObj[indexCurr2]]; 68 stateObj = [stateObj[indexCurr2]];
69 listObj = [listObj[indexCurr2]]; 69 listObj = [listObj[indexCurr2]];
70 70
71 actionObj = false; 71 actionObj = false;
72 console.log(stateObj); 72 console.log(stateObj);
73 indexCurr = 1; 73 indexCurr = 1;
74 } 74 }
75 75
76 object.saveState(); 76 object.saveState();
77 77
78 stateObj[indexCurr] = JSON.stringify(object.originalState); 78 stateObj[indexCurr] = JSON.stringify(object.originalState);
79 listObj[indexCurr] = object; 79 listObj[indexCurr] = object;
80 indexCurr++; 80 indexCurr++;
81 indexCurr2 = indexCurr - 1; 81 indexCurr2 = indexCurr - 1;
82 console.log(stateObj); 82 console.log(stateObj);
83 refreshObj = true; 83 refreshObj = true;
84 } 84 }
85 85
86 function onIllustrationChange(options) { 86 function onIllustrationChange(options) {
87 // options.target.setCoords(); 87 // options.target.setCoords();
88 // canvas.forEachObject(function(obj) { 88 // canvas.forEachObject(function(obj) {
89 // if (obj === options.target) return; 89 // if (obj === options.target) return;
90 // obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1); 90 // obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1);
91 // }); 91 // });
92
93 } 92 }
94 93
95 function onObjectOut() { 94 function onObjectOut() {
96 delete currentObj; 95 delete currentObj;
97 $scope.designTextValue = ''; 96 $scope.designTextValue = '';
98 } 97 }
99 98
100 function undoCanvas() { 99 function undoCanvas() {
101 if (indexCurr <= 0) { 100 if (indexCurr <= 0) {
102 indexCurr = 0; 101 indexCurr = 0;
103 return; 102 return;
104 } 103 }
105 104
106 if (refreshObj === true) { 105 if (refreshObj === true) {
107 indexCurr--; 106 indexCurr--;
108 refreshObj = false; 107 refreshObj = false;
109 } 108 }
110 109
111 console.log('undo'); 110 console.log('undo');
112 111
113 indexCurr2 = indexCurr - 1; 112 indexCurr2 = indexCurr - 1;
114 currentObj = listObj[indexCurr2]; 113 currentObj = listObj[indexCurr2];
115 if (currentObj){ 114 if (currentObj){
116 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); 115 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
117 } 116 }
118 117
119 indexCurr--; 118 indexCurr--;
120 currentObj.setCoords(); 119 currentObj.setCoords();
121 canvas.renderAll(); 120 canvas.renderAll();
122 actionObj = true; 121 actionObj = true;
123 } 122 }
124 123
125 function redoCanvas() { 124 function redoCanvas() {
126 actionObj = true; 125 actionObj = true;
127 if (indexCurr >= stateObj.length - 1) { 126 if (indexCurr >= stateObj.length - 1) {
128 return; 127 return;
129 } 128 }
130 129
131 console.log('redo'); 130 console.log('redo');
132 131
133 indexCurr2 = indexCurr + 1; 132 indexCurr2 = indexCurr + 1;
134 currentObj = listObj[indexCurr2]; 133 currentObj = listObj[indexCurr2];
135 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); 134 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
136 135
137 indexCurr++; 136 indexCurr++;
138 currentObj.setCoords(); 137 currentObj.setCoords();
139 canvas.renderAll(); 138 canvas.renderAll();
140 } 139 }
141 140
142 function onObjectSelected(options) { 141 function onObjectSelected(options) {
143 var currentObj = options.target; 142 var currentObj = options.target;
144 console.log(currentObj.text); 143 // console.log(currentObj.text);
145 $scope.typeObject = currentObj.type; 144 $scope.typeObject = currentObj.type;
146 switch ($scope.typeObject) { 145 switch ($scope.typeObject) {
147 case 'i-text' : 146 case 'i-text' :
148 $rootScope.isShowLeftPanel = 'text'; 147 $rootScope.isShowLeftPanel = 'text';
149 var text = currentObj.text; 148 var text = currentObj.text;
150 if(text != '') { 149 if(text != '') {
151 $scope.designText = text; 150 $scope.designText = text;
152 $scope.designTextValue = text; 151 $scope.designTextValue = text;
153 } 152 }
154 break; 153 break;
155 154
156 case 'path-group' : 155 case 'path-group' :
157 $rootScope.isShowLeftPanel = 'illustration'; 156 $rootScope.isShowLeftPanel = 'illustration';
158 break; 157 break;
159 158
160 case 'image': 159 case 'image':
161 $rootScope.isShowLeftPanel = 'image'; 160 $rootScope.isShowLeftPanel = 'image';
162 break; 161 break;
163 162
164 default : 163 default :
165 $rootScope.isShowLeftPanel = 'default'; 164 $rootScope.isShowLeftPanel = 'default';
166 break; 165 break;
167 } 166 }
168 $rootScope.safeApply(); 167 $rootScope.safeApply();
169 } 168 }
170 169
171 // Illustration process 170 // Illustration process
172 $scope.changeIllustrationCategory = function(currentIllustration){ 171 $scope.changeIllustrationCategory = function(currentIllustration){
173 $scope.currentIllustrationCate = $illustration.getList(currentIllustration); 172 $scope.currentIllustrationCate = $illustration.getList(currentIllustration);
174 //console.log($scope.currentIllustrationCate); 173 //console.log($scope.currentIllustrationCate);
175 }; 174 };
176 175
177 $scope.insertSvg = function(item){ 176 $scope.insertSvg = function(item){
178 fabric.loadSVGFromURL(item.path, function(objects, options) { 177 fabric.loadSVGFromURL(item.path, function(objects, options) {
179 var shape = fabric.util.groupSVGElements(objects, options); 178 var shape = fabric.util.groupSVGElements(objects, options);
180 // shape.setFill('green'); 179 // shape.setFill('green');
181 canvas.add(shape.scale(0.6)); 180 canvas.add(shape.scale(0.6));
182 shape.set({ left: 150, top: 200 }).setCoords(); 181 shape.set({ left: 150, top: 200 }).setCoords();
183 canvas.renderAll(); 182 canvas.renderAll();
184 canvas.setActiveObject(shape); 183 canvas.setActiveObject(shape);
185 }); 184 });
186 }; 185 };
187 186
188 // color pattern 187 // color pattern
189 $scope.listColorPatterns = [ 188 $scope.listColorPatterns = [
190 '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc', 189 '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc',
191 '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450', 190 '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450',
192 '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666', 191 '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666',
193 '#333333' 192 '#333333'
194 ]; 193 ];
195 //Font 194 //Font
196 $scope.listFontFamily = [ 195 $scope.listFontFamily = [
197 { 196 {
198 name : 'GN Aki iro Sesami Cookies', 197 name : 'GN Aki iro Sesami Cookies',
199 slug : 'gn_aki_iro_sesami_cookies', 198 slug : 'gn_aki_iro_sesami_cookies',
200 }, 199 },
201 { 200 {
202 name : 'GN-Fuyu-iro_Script_Bold', 201 name : 'GN-Fuyu-iro_Script_Bold',
203 slug : 'gn_fuyu_iro_script_bold' 202 slug : 'gn_fuyu_iro_script_bold'
204 }, 203 },
205 { 204 {
206 name : 'GN Killgothic U Kanana', 205 name : 'GN Killgothic U Kanana',
207 slug : 'gn_killgothic_u_kanana' 206 slug : 'gn_killgothic_u_kanana'
208 }, 207 },
209 { 208 {
210 name : 'GN-Kin-iro_Alphabet_Cookies', 209 name : 'GN-Kin-iro_Alphabet_Cookies',
211 slug : 'gn_kin_iro_alphabet_cookies' 210 slug : 'gn_kin_iro_alphabet_cookies'
212 211
213 }, 212 },
214 { 213 {
215 name : 'GN-Kin-iro_SansSerif', 214 name : 'GN-Kin-iro_SansSerif',
216 slug : 'gn_kin_iro_sansserif' 215 slug : 'gn_kin_iro_sansserif'
217 216
218 }, 217 },
219 { 218 {
220 name : 'GN-Koharuiro_Sunray', 219 name : 'GN-Koharuiro_Sunray',
221 slug : 'gn_koharuiro_sunray' 220 slug : 'gn_koharuiro_sunray'
222 221
223 }, 222 },
224 { 223 {
225 name : 'GN-Kyu-pin', 224 name : 'GN-Kyu-pin',
226 slug : 'gn_kyu_pin' 225 slug : 'gn_kyu_pin'
227 }, 226 },
228 { 227 {
229 name : 'gn_natsu_iro_schedule', 228 name : 'gn_natsu_iro_schedule',
230 slug : 'gn_natsu_iro_schedule' 229 slug : 'gn_natsu_iro_schedule'
231 230
232 }, 231 },
233 { 232 {
234 name : 'gnkana_kiniro_sansserif_l', 233 name : 'gnkana_kiniro_sansserif_l',
235 slug : 'gnkana_kiniro_sansserif_l' 234 slug : 'gnkana_kiniro_sansserif_l'
236 235
237 }, 236 },
238 { 237 {
239 name : 'gnkana_kiniro_sansserif_st', 238 name : 'gnkana_kiniro_sansserif_st',
240 slug : 'gnkana_kiniro_sansserif_st' 239 slug : 'gnkana_kiniro_sansserif_st'
241 }, 240 },
242 { 241 {
243 name : 'gnkana_kon_iro_nightfall', 242 name : 'gnkana_kon_iro_nightfall',
244 slug : 'gnkana_kon_iro_nightfall' 243 slug : 'gnkana_kon_iro_nightfall'
245 244
246 }, 245 },
247 { 246 {
248 name : 'ms_gothic', 247 name : 'ms_gothic',
249 slug : 'ms_gothic' 248 slug : 'ms_gothic'
250 249
251 }, 250 },
252 { 251 {
253 name : 'msmincho', 252 name : 'msmincho',
254 slug : 'msmincho' 253 slug : 'msmincho'
255 }, 254 },
256 { 255 {
257 name : 'ufonts_com_ms_pgothic', 256 name : 'ufonts_com_ms_pgothic',
258 slug : 'ufonts_com_ms_pgothic' 257 slug : 'ufonts_com_ms_pgothic'
259 } 258 }
260 ]; 259 ];
261 260
262 $scope.changeColorPattern = function(color){ 261 $scope.changeColorPattern = function(color){
263 if (canvas.getActiveObject()){ 262 if (canvas.getActiveObject()){
264 canvas.getActiveObject().set("fill", color); 263 canvas.getActiveObject().set("fill", color);
265 canvas.renderAll(); 264 canvas.renderAll();
266 } 265 }
267 }; 266 };
268 267
269 // layer process 268 // layer process
270 $scope.layerProcess = function(mode) { 269 $scope.layerProcess = function(mode) {
271 // console.log('layerProcess'); 270 // console.log('layerProcess');
272 var activeObject = canvas.getActiveObject(); 271 var activeObject = canvas.getActiveObject();
273 272
274 console.log(activeObject); 273 console.log(activeObject);
275 274
276 if (activeObject){ 275 if (activeObject){
277 switch (mode) { 276 switch (mode) {
278 case 1: 277 case 1:
279 // canvas.bringForward(activeObject); 278 // canvas.bringForward(activeObject);
280 activeObject.bringForward(); 279 activeObject.bringForward();
281 break; 280 break;
282 case 2: 281 case 2:
283 // canvas.sendBackwards(activeObject); 282 // canvas.sendBackwards(activeObject);
284 activeObject.sendBackwards(); 283 activeObject.sendBackwards();
285 break; 284 break;
286 case 3: 285 case 3:
287 // canvas.bringToFront(activeObject); 286 // canvas.bringToFront(activeObject);
288 activeObject.bringToFront(); 287 activeObject.bringToFront();
289 break; 288 break;
290 case 4: 289 case 4:
291 // canvas.sendToBack(activeObject); 290 // canvas.sendToBack(activeObject);
292 activeObject.sendToBack(); 291 activeObject.sendToBack();
293 break; 292 break;
294 } 293 }
295 canvas.renderAll(); 294 canvas.deactivateAll().renderAll();
296 } 295 }
297 }; 296 };
298 297
299 $scope.focusInputText = function(text) { 298 $scope.focusInputText = function(text) {
300 currentObj = canvas.getActiveObject(); 299 currentObj = canvas.getActiveObject();
301 if(typeof currentObj == 'undefined' || currentObj == null) { 300 if(typeof currentObj == 'undefined' || currentObj == null) {
302 $scope.iText = new fabric.IText('', { 301 $scope.iText = new fabric.IText('', {
303 left: 150, 302 left: 150,
304 top: 200, 303 top: 200,
305 fontFamily: 'Arial', 304 fontFamily: 'Arial',
306 fontWeight: 'normal', 305 fontWeight: 'normal',
307 textAlign: 'center', 306 textAlign: 'center',
308 fontSize: 28, 307 fontSize: 28,
309 fill: 'black' 308 fill: 'black'
310 }); 309 });
311 } else { 310 } else {
312 if(currentObj.type != 'i-text') { 311 if(currentObj.type != 'i-text') {
313 $scope.iText = new fabric.IText('', { 312 $scope.iText = new fabric.IText('', {
314 left: 150, 313 left: 150,
315 top: 200, 314 top: 200,
316 fontFamily: 'Arial', 315 fontFamily: 'Arial',
317 fontWeight: 'normal', 316 fontWeight: 'normal',
318 textAlign: 'center', 317 textAlign: 'center',
319 fontSize: 28, 318 fontSize: 28,
320 fill: 'black' 319 fill: 'black'
321 }); 320 });
322 } else{ 321 } else{
323 $scope.iText = currentObj; 322 $scope.iText = currentObj;
324 } 323 }
325 } 324 }
326 }; 325 };
327 326
328 //Design text 327 //Design text
329 $scope.inputText = function(e) { 328 $scope.inputText = function(e) {
330 if(typeof $scope.iText != "undefined") { 329 if(typeof $scope.iText != "undefined") {
331 var iText = $scope.iText; 330 var iText = $scope.iText;
332 iText.text = e; 331 iText.text = e;
333 canvas.add(iText); 332 canvas.add(iText);
334 canvas.renderAll(); 333 canvas.renderAll();
335 canvas.setActiveObject(iText); 334 canvas.setActiveObject(iText);
336 } 335 }
337 }; 336 };
338 $scope.setFontFamily = function(font) { 337 $scope.setFontFamily = function(font) {
339 if(canvas.getActiveObject()) { 338 if(canvas.getActiveObject()) {
340 var currentObj = canvas.getActiveObject(); 339 var currentObj = canvas.getActiveObject();
341 if(currentObj.type == 'i-text') { 340 if(currentObj.type == 'i-text') {
342 currentObj.set('fontFamily', font); 341 currentObj.set('fontFamily', font);
343 canvas.renderAll(); 342 canvas.renderAll();
344 canvas.setActiveObject(currentObj); 343 canvas.setActiveObject(currentObj);
345 } 344 }
346 345
347 } 346 }
348 }; 347 };
349 //Set letter spacing text 348 //Set letter spacing text
350 $scope.setLetterSpacingText = function(e) { 349 $scope.setLetterSpacingText = function(e) {
351 if(canvas.getActiveObject()) { 350 if(canvas.getActiveObject()) {
352 var currentObj = canvas.getActiveObject(); 351 var currentObj = canvas.getActiveObject();
353 if(currentObj.type == 'i-text') { 352 if(currentObj.type == 'i-text') {
354 if(e == 'plus') 353 if(e == 'plus')
355 spacingNum = spacingNum + 30; 354 spacingNum = spacingNum + 30;
356 else if (spacingNum >= 30){ 355 else if (spacingNum >= 30){
357 spacingNum = spacingNum - 30; 356 spacingNum = spacingNum - 30;
358 } 357 }
359 currentObj.set('charSpacing', spacingNum); 358 currentObj.set('charSpacing', spacingNum);
360 canvas.renderAll(); 359 canvas.renderAll();
361 canvas.setActiveObject(currentObj); 360 canvas.setActiveObject(currentObj);
362 } 361 }
363 } 362 }
364 } 363 }
365 364
366 365
367 /**** process insert image */ 366 /**** process insert image */
368 $scope.chooseImage = function(e){console.log(e); 367 $scope.chooseImage = function(e){console.log(e);
369 var reader = new FileReader(); 368 var reader = new FileReader();
370 reader.onload = function (event) { console.log('fdsf'); 369 reader.onload = function (event) { console.log('fdsf');
371 var imgObj = new Image(); 370 var imgObj = new Image();
372 imgObj.src = event.target.result; 371 imgObj.src = event.target.result;
373 imgObj.onload = function () { 372 imgObj.onload = function () {
374 // start fabricJS stuff 373 // start fabricJS stuff
375 374
376 var image = new fabric.Image(imgObj); 375 var image = new fabric.Image(imgObj);
377 image.set({ 376 image.set({
378 left: 50, 377 left: 50,
379 top: 50 378 top: 50
380 }); 379 });
381 //image.scale(getRandomNum(0.1, 0.25)).setCoords(); 380 //image.scale(getRandomNum(0.1, 0.25)).setCoords();
382 image.scaleToWidth(200); 381 image.scaleToWidth(200);
383 canvas.add(image); 382 canvas.add(image);
384 } 383 }
385 } 384 }
386 reader.readAsDataURL(e.target.files[0]); 385 reader.readAsDataURL(e.target.files[0]);
387 } 386 }
388 387
389 //Traslation text 388 //Traslation text
390 $scope.rotateText = function(style) { 389 $scope.rotateText = function(style) {
391 if(canvas.getActiveObject()) { 390 if(canvas.getActiveObject()) {
392 var currentObj = canvas.getActiveObject(); 391 var currentObj = canvas.getActiveObject();
393 if(currentObj.type == 'i-text') { 392 if(currentObj.type == 'i-text') {
394 currentObj.set('rotate', Math.PI / 4); 393 currentObj.set('rotate', Math.PI / 4);
395 canvas.renderAll(); 394 canvas.renderAll();
396 canvas.setActiveObject(currentObj); 395 canvas.setActiveObject(currentObj);
397 } 396 }
398 } 397 }
399 }; 398 };
400 }); 399 });
401 }); 400 });
402 401
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 body { 4 body {
5 font-family: 'Hiragino Kaku Gothic Pro', sans-serif; 5 font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
6 /*font-family: 'gn_aki_iro_sesami_cookies';*/ 6 /*font-family: 'gn_aki_iro_sesami_cookies';*/
7 } 7 }
8 /*Scroll bar style*/ 8 /*Scroll bar style*/
9 ::-webkit-scrollbar { 9 ::-webkit-scrollbar {
10 -webkit-appearance: none; 10 -webkit-appearance: none;
11 width: 7px; 11 width: 7px;
12 } 12 }
13 ::-webkit-scrollbar-thumb { 13 ::-webkit-scrollbar-thumb {
14 border-radius: 4px; 14 border-radius: 4px;
15 background-color: rgba(0,0,0,.5); 15 background-color: rgba(0,0,0,.5);
16 -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5); 16 -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
17 } 17 }
18 /*End scroll bar style*/ 18 /*End scroll bar style*/
19 .padding-right-0{ 19 .padding-right-0{
20 padding-right: 0!important; 20 padding-right: 0!important;
21 } 21 }
22 .padding-left-0{ 22 .padding-left-0{
23 padding-left: 0!important; 23 padding-left: 0!important;
24 } 24 }
25 button.red{ 25 button.red{
26 color: #ffffff; 26 color: #ffffff;
27 background-color: #ff0000; 27 background-color: #ff0000;
28 border: 1px solid #ff0000; 28 border: 1px solid #ff0000;
29 29
30 } 30 }
31 button.white{ 31 button.white{
32 border: 1px solid #ff8080; 32 border: 1px solid #ff8080;
33 color: #ff8080; 33 color: #ff8080;
34 background-color: #ffffff; 34 background-color: #ffffff;
35 } 35 }
36 button.brown{ 36 button.brown{
37 background-color: #666666; 37 background-color: #666666;
38 border: 1px solid #666666; 38 border: 1px solid #666666;
39 color: #ffffff; 39 color: #ffffff;
40 border-radius: 5px; 40 border-radius: 5px;
41 } 41 }
42 button.black{ 42 button.black{
43 border: 1px solid #c9c9c9; 43 border: 1px solid #c9c9c9;
44 background-color: #343434; 44 background-color: #343434;
45 color: #ffffff; 45 color: #ffffff;
46 padding: 1px 6px; 46 padding: 1px 6px;
47 } 47 }
48 #tshirt-container{ 48 #tshirt-container{
49 border-left: 1px solid #dcdcdc; 49 border-left: 1px solid #dcdcdc;
50 border-right: 1px solid #dcdcdc; 50 border-right: 1px solid #dcdcdc;
51 } 51 }
52 /*HEADER*/ 52 /*HEADER*/
53 header{ 53 header{
54 border-bottom: 1px solid #dcdcdc; 54 border-bottom: 1px solid #dcdcdc;
55 } 55 }
56 header .logo{ 56 header .logo{
57 color: #ed1d24; 57 color: #ed1d24;
58 font-size: 30px; 58 font-size: 30px;
59 text-transform: uppercase; 59 text-transform: uppercase;
60 font-weight: bold; 60 font-weight: bold;
61 } 61 }
62 header .logo img{ 62 header .logo img{
63 width: 60px; 63 width: 60px;
64 } 64 }
65 /*NAVIGATION*/ 65 /*NAVIGATION*/
66 nav{ 66 nav{
67 border-bottom: 1px solid #dcdcdc; 67 border-bottom: 1px solid #dcdcdc;
68 padding: 10px 0; 68 padding: 10px 0;
69 } 69 }
70 nav h2{ 70 nav h2{
71 font-size: 27px; 71 font-size: 27px;
72 margin: 0 0; 72 margin: 0 0;
73 } 73 }
74 nav ul{ 74 nav ul{
75 list-style: none; 75 list-style: none;
76 padding-left: 0; 76 padding-left: 0;
77 margin-bottom: 0; 77 margin-bottom: 0;
78 78
79 } 79 }
80 nav ul li{ 80 nav ul li{
81 margin-left: 2px; 81 margin-left: 2px;
82 float: left; 82 float: left;
83 padding: 6px 12px; 83 padding: 6px 12px;
84 background-color: #999999; 84 background-color: #999999;
85 position: relative; 85 position: relative;
86 } 86 }
87 nav ul li i.fa{ 87 nav ul li i.fa{
88 position: absolute; 88 position: absolute;
89 color: #ffffff; 89 color: #ffffff;
90 font-size: 18px; 90 font-size: 18px;
91 right: -4px; 91 right: -4px;
92 top: 50%; 92 top: 50%;
93 transform: translateX(-50%) translateY(-50%); 93 transform: translateX(-50%) translateY(-50%);
94 -webkit-transform: translateX(-50%) translateY(-50%); 94 -webkit-transform: translateX(-50%) translateY(-50%);
95 } 95 }
96 nav ul li a{ 96 nav ul li a{
97 color: #ffffff; 97 color: #ffffff;
98 } 98 }
99 nav ul li:hover a{ 99 nav ul li:hover a{
100 text-decoration: none; 100 text-decoration: none;
101 color: #ffffff; 101 color: #ffffff;
102 } 102 }
103 nav ul li.action{ 103 nav ul li.action{
104 color: #ffffff; 104 color: #ffffff;
105 background-color: #ed1d24; 105 background-color: #ed1d24;
106 } 106 }
107 /*ASIDE*/ 107 /*ASIDE*/
108 aside{ 108 aside{
109 margin: 10px 0; 109 margin: 10px 0;
110 } 110 }
111 111
112 aside .break-down{ 112 aside .break-down{
113 padding: 0 0; 113 padding: 0 0;
114 } 114 }
115 aside .break-down i.fa{ 115 aside .break-down i.fa{
116 font-size: 35px; 116 font-size: 35px;
117 color: #ff0000; 117 color: #ff0000;
118 } 118 }
119 aside .break-line{ 119 aside .break-line{
120 height: 10px; 120 height: 10px;
121 } 121 }
122 aside .break-line hr{ 122 aside .break-line hr{
123 border-top: 1px dotted #cccccc; 123 border-top: 1px dotted #cccccc;
124 } 124 }
125 aside .step{ 125 aside .step{
126 margin: 0 0; 126 margin: 0 0;
127 } 127 }
128 aside .step .title{ 128 aside .step .title{
129 font-size: 15px; 129 font-size: 15px;
130 line-height: 16px; 130 line-height: 16px;
131 font-weight: bold; 131 font-weight: bold;
132 margin-bottom: 3px; 132 margin-bottom: 3px;
133 } 133 }
134 aside .step .title-notice{ 134 aside .step .title-notice{
135 font-size: 13px; 135 font-size: 13px;
136 line-height: 16px; 136 line-height: 16px;
137 margin-bottom: 3px; 137 margin-bottom: 3px;
138 } 138 }
139 aside .step .title-notice .require{ 139 aside .step .title-notice .require{
140 font-size: 10px; 140 font-size: 10px;
141 } 141 }
142 aside .step .step-box{ 142 aside .step .step-box{
143 border: 2px solid #dcdcdc; 143 border: 2px solid #dcdcdc;
144 font-size: 12px; 144 font-size: 12px;
145 145
146 } 146 }
147 /*Step 1*/ 147 /*Step 1*/
148 aside .step .step-box .tshirt-design{ 148 aside .step .step-box .tshirt-design{
149 border: 1px solid #cccccc; 149 border: 1px solid #cccccc;
150 background-color: #f5f5f5; 150 background-color: #f5f5f5;
151 margin: 10px 10px; 151 margin: 10px 10px;
152 } 152 }
153 aside .step .step-box .tshirt-design:hover{ 153 aside .step .step-box .tshirt-design:hover{
154 border: 1px solid #ff0000; 154 border: 1px solid #ff0000;
155 } 155 }
156 aside .step .step-box .tshirt-design button:hover{ 156 aside .step .step-box .tshirt-design button:hover{
157 background-color: #fa7b7b; 157 background-color: #fa7b7b;
158 border: 1px solid #fa7b7b; 158 border: 1px solid #fa7b7b;
159 } 159 }
160 aside .step .step-box .tshirt-design div{ 160 aside .step .step-box .tshirt-design div{
161 float: left; 161 float: left;
162 } 162 }
163 aside .step .step-box .tshirt-design .icon{ 163 aside .step .step-box .tshirt-design .icon{
164 padding: 4px 4px; 164 padding: 4px 4px;
165 border-right: 1px solid #cccccc; 165 border-right: 1px solid #cccccc;
166 166
167 } 167 }
168 aside .step .step-box .tshirt-design .icon img{ 168 aside .step .step-box .tshirt-design .icon img{
169 height: 50px; 169 height: 50px;
170 } 170 }
171 aside .step .step-box .tshirt-design .name{ 171 aside .step .step-box .tshirt-design .name{
172 padding: 10px 10px; 172 padding: 10px 10px;
173 173
174 } 174 }
175 aside .step .step-box .tshirt-design .action{ 175 aside .step .step-box .tshirt-design .action{
176 padding: 10px 10px; 176 padding: 10px 10px;
177 float: right; 177 float: right;
178 178
179 } 179 }
180 aside .step .step-box .tshirt-design .action button{ 180 aside .step .step-box .tshirt-design .action button{
181 padding: 8px 10px; 181 padding: 8px 10px;
182 } 182 }
183 /*Step 2*/ 183 /*Step 2*/
184 aside .step .step-box .tshirt-color{ 184 aside .step .step-box .tshirt-color{
185 padding: 6px 10px; 185 padding: 6px 10px;
186 position: relative; 186 position: relative;
187 } 187 }
188 aside .step .step-box .tshirt-color ul.choice-color{ 188 aside .step .step-box .tshirt-color ul.choice-color{
189 float: left; 189 float: left;
190 list-style: none; 190 list-style: none;
191 padding-left: 0; 191 padding-left: 0;
192 width: 100%; 192 width: 100%;
193 margin-bottom: 3px; 193 margin-bottom: 3px;
194 } 194 }
195 aside .step .step-box .tshirt-color ul.choice-color li{ 195 aside .step .step-box .tshirt-color ul.choice-color li{
196 margin: 0 10px 0 0; 196 margin: 0 10px 0 0;
197 border: 1px solid #cccccc; 197 border: 1px solid #cccccc;
198 padding: 2px 2px; 198 padding: 2px 2px;
199 float: left; 199 float: left;
200 cursor: pointer; 200 cursor: pointer;
201 } 201 }
202 aside .step .step-box .tshirt-color ul.choice-color li.action{ 202 aside .step .step-box .tshirt-color ul.choice-color li.action{
203 border: 1px solid #ff0000; 203 border: 1px solid #ff0000;
204 } 204 }
205 aside .step .step-box .tshirt-color ul.choice-color li:hover{ 205 aside .step .step-box .tshirt-color ul.choice-color li:hover{
206 border: 1px solid #ff0000; 206 border: 1px solid #ff0000;
207 } 207 }
208 aside .step .step-box .tshirt-color ul.choice-color li div{ 208 aside .step .step-box .tshirt-color ul.choice-color li div{
209 height: 30px; 209 height: 30px;
210 width: 30px; 210 width: 30px;
211 } 211 }
212 212
213 aside .step .step-box .tshirt-color ul.choice-color li.white div{ 213 aside .step .step-box .tshirt-color ul.choice-color li.white div{
214 background-color: #ece7e4; 214 background-color: #ece7e4;
215 } 215 }
216 aside .step .step-box .tshirt-color ul.choice-color li.blue div{ 216 aside .step .step-box .tshirt-color ul.choice-color li.blue div{
217 background-color: #e7dfd0; 217 background-color: #e7dfd0;
218 } 218 }
219 aside .step .step-box .tshirt-color .color-name{ 219 aside .step .step-box .tshirt-color .color-name{
220 width: 100%; 220 width: 100%;
221 font-size: 10px; 221 font-size: 10px;
222 } 222 }
223 aside .step .step-box .tshirt-color .view-more{ 223 aside .step .step-box .tshirt-color .view-more{
224 position: absolute; 224 position: absolute;
225 bottom: 6px; 225 bottom: 6px;
226 right: 10px; 226 right: 10px;
227 } 227 }
228 /*Step 3*/ 228 /*Step 3*/
229 aside .step .step-box .tshirt-saveorder{ 229 aside .step .step-box .tshirt-saveorder{
230 padding: 10px 10px 6px 10px; 230 padding: 10px 10px 6px 10px;
231 } 231 }
232 aside .step .step-box .tshirt-saveorder .action{ 232 aside .step .step-box .tshirt-saveorder .action{
233 width: 50%; 233 width: 50%;
234 float: left; 234 float: left;
235 } 235 }
236 aside .step .step-box .tshirt-saveorder .action:first-child{ 236 aside .step .step-box .tshirt-saveorder .action:first-child{
237 padding-right: 5px; 237 padding-right: 5px;
238 } 238 }
239 aside .step .step-box .tshirt-saveorder .action:last-child{ 239 aside .step .step-box .tshirt-saveorder .action:last-child{
240 padding-left: 5px; 240 padding-left: 5px;
241 } 241 }
242 aside .step .step-box .tshirt-saveorder .action button{ 242 aside .step .step-box .tshirt-saveorder .action button{
243 padding: 8px 10px; 243 padding: 8px 10px;
244 244
245 } 245 }
246 aside .step .step-box .tshirt-saveorder .action button .text{ 246 aside .step .step-box .tshirt-saveorder .action button .text{
247 float: left; 247 float: left;
248 width: 80%; 248 width: 80%;
249 text-align: center; 249 text-align: center;
250 padding-left: 10px; 250 padding-left: 10px;
251 vertical-align: bottom; 251 vertical-align: bottom;
252 } 252 }
253 aside .step .step-box .tshirt-saveorder .action button .arrow{ 253 aside .step .step-box .tshirt-saveorder .action button .arrow{
254 float: left; 254 float: left;
255 width: 20%; 255 width: 20%;
256 height: 40px; 256 height: 40px;
257 position: relative; 257 position: relative;
258 } 258 }
259 aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{ 259 aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{
260 position: absolute; 260 position: absolute;
261 top: 50%; 261 top: 50%;
262 right: -6px; 262 right: -6px;
263 transform: translateX(-50%) translateY(-50%); 263 transform: translateX(-50%) translateY(-50%);
264 -webkit-transform: translateX(-50%) translateY(-50%); 264 -webkit-transform: translateX(-50%) translateY(-50%);
265 } 265 }
266 aside .step .step-box .tshirt-saveorder .notice{ 266 aside .step .step-box .tshirt-saveorder .notice{
267 padding: 5px 0 0 0; 267 padding: 5px 0 0 0;
268 } 268 }
269 /*Step 4*/ 269 /*Step 4*/
270 aside .step .title-notice{ 270 aside .step .title-notice{
271 271
272 } 272 }
273 aside .step .step-box .change-design{ 273 aside .step .step-box .change-design{
274 padding: 4px 4px; 274 padding: 4px 4px;
275 } 275 }
276 aside .step .step-box .change-design table{ 276 aside .step .step-box .change-design table{
277 277
278 } 278 }
279 aside .step .step-box .change-design table tr{ 279 aside .step .step-box .change-design table tr{
280 border-bottom: 1px dotted #cccccc; 280 border-bottom: 1px dotted #cccccc;
281 } 281 }
282 aside .step .step-box .change-design table tr:last-child{ 282 aside .step .step-box .change-design table tr:last-child{
283 border-bottom: 0; 283 border-bottom: 0;
284 } 284 }
285 285
286 /*Step 5- finish*/ 286 /*Step 5- finish*/
287 aside .step .finish-design{ 287 aside .step .finish-design{
288 padding: 20px 0; 288 padding: 20px 0;
289 } 289 }
290 aside .step .finish-design button{ 290 aside .step .finish-design button{
291 width: 100%; 291 width: 100%;
292 padding: 8px 10px; 292 padding: 8px 10px;
293 } 293 }
294 294
295 /*DESIGN CONTENT*/ 295 /*DESIGN CONTENT*/
296 #tshirt-content{ 296 #tshirt-content{
297 position: relative; 297 position: relative;
298 } 298 }
299 #tshirt-content .switch-border-design{ 299 #tshirt-content .switch-border-design{
300 position: absolute; 300 position: absolute;
301 top: 5px; 301 top: 5px;
302 right: 10px; 302 right: 10px;
303 color: red; 303 color: red;
304 font-size: 11px; 304 font-size: 11px;
305 } 305 }
306 #tshirt-content .tshirt-image{ 306 #tshirt-content .tshirt-image{
307 padding: 20px 0 0 0; 307 padding: 20px 0 0 0;
308 } 308 }
309 #tshirt-content .tshirt-choice{ 309 #tshirt-content .tshirt-choice{
310 310
311 } 311 }
312 #tshirt-content .tshirt-choice ul{ 312 #tshirt-content .tshirt-choice ul{
313 list-style: none; 313 list-style: none;
314 padding-left: 0; 314 padding-left: 0;
315 display: table; 315 display: table;
316 margin: auto; 316 margin: auto;
317 } 317 }
318 #tshirt-content .tshirt-choice ul li{ 318 #tshirt-content .tshirt-choice ul li{
319 float: left; 319 float: left;
320 margin: 10px 10px; 320 margin: 10px 10px;
321 cursor: pointer; 321 cursor: pointer;
322 } 322 }
323 #tshirt-content .tshirt-choice ul li .image{ 323 #tshirt-content .tshirt-choice ul li .image{
324 border: 1px solid #cccccc; 324 border: 1px solid #cccccc;
325 padding: 3px 3px; 325 padding: 3px 3px;
326 } 326 }
327 #tshirt-content .tshirt-choice ul li.focus{ 327 #tshirt-content .tshirt-choice ul li.focus{
328 328
329 } 329 }
330 #tshirt-content .tshirt-choice ul li.focus .image{ 330 #tshirt-content .tshirt-choice ul li.focus .image{
331 border: 1px solid #ff0000; 331 border: 1px solid #ff0000;
332 } 332 }
333 #tshirt-content .tshirt-choice ul li .image img{ 333 #tshirt-content .tshirt-choice ul li .image img{
334 width: 50px; 334 width: 50px;
335 height: auto; 335 height: auto;
336 } 336 }
337 /*MODAL Design*/ 337 /*MODAL Design*/
338 #tshirt-design{ 338 #tshirt-design{
339 background-color: #666666; 339 background-color: #666666;
340 } 340 }
341 #tshirt-design .modal-dialog{ 341 #tshirt-design .modal-dialog{
342 width: 75%; 342 width: 75%;
343 margin: 0 auto; 343 margin: 0 auto;
344 } 344 }
345 #tshirt-design .modal-dialog .modal-content{ 345 #tshirt-design .modal-dialog .modal-content{
346 background-color: transparent; 346 background-color: transparent;
347 border-radius: 0; 347 border-radius: 0;
348 border: 0; 348 border: 0;
349 -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; 349 -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
350 box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important; 350 box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
351 } 351 }
352 #tshirt-design .modal-dialog .modal-content .modal-header{ 352 #tshirt-design .modal-dialog .modal-content .modal-header{
353 padding: 0 0 10px 0; 353 padding: 0 0 10px 0;
354 border-bottom: 0; 354 border-bottom: 0;
355 border-shadow: none!important; 355 border-shadow: none!important;
356 } 356 }
357 #tshirt-design .modal-dialog .modal-content .modal-body{ 357 #tshirt-design .modal-dialog .modal-content .modal-body{
358 background-color: #f5f5f5; 358 background-color: #f5f5f5;
359 padding: 0 0; 359 padding: 0 0;
360 } 360 }
361 #tshirt-design header{ 361 #tshirt-design header{
362 border-bottom: 1px solid #cccccc; 362 border-bottom: 1px solid #cccccc;
363 background-color: #dddddd; 363 background-color: #dddddd;
364 } 364 }
365 #tshirt-design header ul.nav{ 365 #tshirt-design header ul.nav{
366 padding-left: 0; 366 padding-left: 0;
367 list-style: none; 367 list-style: none;
368 } 368 }
369 #tshirt-design header ul.nav li{ 369 #tshirt-design header ul.nav li{
370 float: left; 370 float: left;
371 padding: 8px 26px; 371 padding: 8px 26px;
372 border-right: 1px solid #cccccc; 372 border-right: 1px solid #cccccc;
373 font-size: 14px; 373 font-size: 14px;
374 cursor: pointer; 374 cursor: pointer;
375 } 375 }
376 #tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{ 376 #tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{
377 background-color: red; 377 background-color: red;
378 color: #ffffff; 378 color: #ffffff;
379 } 379 }
380 #tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{ 380 #tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{
381 color: #ffffff; 381 color: #ffffff;
382 } 382 }
383 #tshirt-design header ul.nav li i.fa{ 383 #tshirt-design header ul.nav li i.fa{
384 color: #fe070f; 384 color: #fe070f;
385 font-size: 20px; 385 font-size: 20px;
386 margin-right: 10px; 386 margin-right: 10px;
387 } 387 }
388 #tshirt-design header .action{ 388 #tshirt-design header .action{
389 389
390 } 390 }
391 #tshirt-design header .action button{ 391 #tshirt-design header .action button{
392 padding: 2px 10px; 392 padding: 2px 10px;
393 margin: 6px 10px; 393 margin: 6px 10px;
394 } 394 }
395 #tshirt-design header .action button:hover{ 395 #tshirt-design header .action button:hover{
396 background-color: red; 396 background-color: red;
397 color: #ffffff; 397 color: #ffffff;
398 } 398 }
399 399
400 /*Aside modal*/ 400 /*Aside modal*/
401 .aside{ 401 .aside{
402 } 402 }
403 403
404 .aside .box-design-option{ 404 .aside .box-design-option{
405 list-style: none; 405 list-style: none;
406 padding-left: 0; 406 padding-left: 0;
407 margin-top: 10px; 407 margin-top: 10px;
408 } 408 }
409 409
410 .aside .box-design-option li{ 410 .aside .box-design-option li{
411 border: 1px solid #cdcdcd; 411 border: 1px solid #cdcdcd;
412 position: relative; 412 position: relative;
413 /*cursor: pointer;*/ 413 /*cursor: pointer;*/
414 margin-bottom: 10px; 414 margin-bottom: 10px;
415 } 415 }
416 .aside .box-design-option li .hover{ 416 .aside .box-design-option li .hover{
417 background-color: #fddad4; 417 background-color: #fddad4;
418 opacity: 0.6; 418 opacity: 0.6;
419 position: absolute; 419 position: absolute;
420 width: 100%; 420 width: 100%;
421 height: 100%; 421 height: 100%;
422 display: none; 422 display: none;
423 } 423 }
424 .aside .box-design-option li:hover .hover{ 424 .aside .box-design-option li:hover .hover{
425 display: block; 425 display: block;
426 } 426 }
427 427
428 .aside .box-design-option li .title{ 428 .aside .box-design-option li .title{
429 background: url("../images/bg1.png") repeat #cdcdcd; 429 background: url("../images/bg1.png") repeat #cdcdcd;
430 padding: 3px 10px; 430 padding: 3px 10px;
431 } 431 }
432 .aside .box-design-option li .title i.fa{ 432 .aside .box-design-option li .title i.fa{
433 color: #000000; 433 color: #000000;
434 } 434 }
435 435
436 .aside .box-design-option li .content{ 436 .aside .box-design-option li .content{
437 437
438 } 438 }
439 .aside .box-design-option li .content i.fa{ 439 .aside .box-design-option li .content i.fa{
440 font-size: 30px; 440 font-size: 30px;
441 color: #fe070f; 441 color: #fe070f;
442 margin: 8px 0; 442 margin: 8px 0;
443 } 443 }
444 .aside .box-design-option li .content .des{ 444 .aside .box-design-option li .content .des{
445 padding: 3px 10px 3px 0; 445 padding: 3px 10px 3px 0;
446 } 446 }
447 .aside .box-design-option li .content .color-patterns { 447 .aside .box-design-option li .content .color-patterns {
448 width: 100%; 448 width: 100%;
449 border: #bbb solid 1px; 449 border: #bbb solid 1px;
450 background: #FFF; 450 background: #FFF;
451 margin-top: 5px; 451 margin-top: 5px;
452 min-height: 65px; 452 min-height: 65px;
453 } 453 }
454 454
455 .aside .box-design-option li .content .color-patterns .color-pattern-item{ 455 .aside .box-design-option li .content .color-patterns .color-pattern-item{
456 height: 20px; 456 height: 20px;
457 float: left; 457 float: left;
458 margin-left: 4px; 458 margin-left: 4px;
459 margin-top: 2px; 459 margin-top: 2px;
460 width: 20px; 460 width: 20px;
461 cursor: pointer; 461 cursor: pointer;
462 border: 1px solid #ddd; 462 border: 1px solid #ddd;
463 } 463 }
464 464
465 .aside .box-design-option li .content .color-patterns .color-pattern-item:hover { 465 .aside .box-design-option li .content .color-patterns .color-pattern-item:hover {
466 outline: 1px solid #ed1d24; 466 outline: 1px solid #ed1d24;
467 } 467 }
468 .aside .box-design-option li .content .layer-item { 468 .aside .box-design-option li .content .layer-item {
469 text-align: center; 469 text-align: center;
470 border: 1px #ddd solid; 470 border: 1px #ddd solid;
471 background: #FFF; 471 background: #FFF;
472 padding: 5px; 472 padding: 5px;
473 font-size: 12px; 473 font-size: 12px;
474 cursor: pointer; 474 cursor: pointer;
475 } 475 }
476 476
477 .aside .box-design-option li .content .layer-item:hover { 477 .aside .box-design-option li .content .layer-item:hover {
478 background: #ffcccc; 478 background: #ffcccc;
479 } 479 }
480 480
481 481
482 /*Design Text*/ 482 /*Design Text*/
483 .aside #choice-text{ 483 .aside #choice-text{
484 484
485 } 485 }
486 .aside #choice-text .content{ 486 .aside #choice-text .content{
487 padding: 10px 10px; 487 padding: 10px 10px;
488 } 488 }
489 .aside #choice-text .content ul.font-family-box{ 489 .aside #choice-text .content ul.font-family-box{
490 list-style: none; 490 list-style: none;
491 margin: 10px 0; 491 margin: 10px 0;
492 padding-left: 0; 492 padding-left: 0;
493 height: 180px; 493 height: 180px;
494 width: 100%; 494 width: 100%;
495 overflow-y: scroll; 495 overflow-y: scroll;
496 border: 1px solid #c0c0c0; 496 border: 1px solid #c0c0c0;
497 } 497 }
498 498
499 .aside #choice-text .content .font-family-box li{ 499 .aside #choice-text .content .font-family-box li{
500 cursor: pointer; 500 cursor: pointer;
501 padding: 4px 8px; 501 padding: 4px 8px;
502 border: 0; 502 border: 0;
503 border-bottom: 1px solid #c0c0c0; 503 border-bottom: 1px solid #c0c0c0;
504 border-right: 1px solid #c0c0c0; 504 border-right: 1px solid #c0c0c0;
505 font-size: 16px; 505 font-size: 16px;
506 } 506 }
507 .aside #choice-text .content .spacing-letter{ 507 .aside #choice-text .content .spacing-letter{
508 508
509 } 509 }
510 .aside #choice-text .content .spacing-letter .text-label{ 510 .aside #choice-text .content .spacing-letter .text-label{
511 font-size: 16px; 511 font-size: 16px;
512 padding: 4px 0; 512 padding: 4px 0;
513 } 513 }
514 .aside #choice-text .content .spacing-letter .box{ 514 .aside #choice-text .content .spacing-letter .box{
515 border: 1px solid #8c8c8c; 515 border: 1px solid #8c8c8c;
516 box-shadow: 0 0 5px #888888; 516 box-shadow: 0 0 5px #888888;
517 background-color: #f0f0f0; 517 background-color: #f0f0f0;
518 } 518 }
519 .aside #choice-text .content .spacing-letter .item{ 519 .aside #choice-text .content .spacing-letter .item{
520 float: left; 520 float: left;
521 } 521 }
522 522
523 .aside #choice-text .content .spacing-letter .item i.fa{ 523 .aside #choice-text .content .spacing-letter .item i.fa{
524 font-size: 22px; 524 font-size: 22px;
525 margin: 0 0; 525 margin: 0 0;
526 color: #000000; 526 color: #000000;
527 } 527 }
528 .aside #choice-text .content .spacing-letter .item-text{ 528 .aside #choice-text .content .spacing-letter .item-text{
529 padding: 6px 20px; 529 padding: 6px 20px;
530 font-size: 12px; 530 font-size: 12px;
531 } 531 }
532 .aside #choice-text .content .spacing-letter .item-plus{ 532 .aside #choice-text .content .spacing-letter .item-plus{
533 border-right: 1px solid #8c8c8c; 533 border-right: 1px solid #8c8c8c;
534 } 534 }
535 .aside #choice-text .content .spacing-letter .item-minus{ 535 .aside #choice-text .content .spacing-letter .item-minus{
536 border-left: 1px solid #8c8c8c; 536 border-left: 1px solid #8c8c8c;
537 } 537 }
538 .aside #choice-text .content .spacing-letter .item-plus, .aside #choice-text .content .spacing-letter .item-minus { 538 .aside #choice-text .content .spacing-letter .item-plus, .aside #choice-text .content .spacing-letter .item-minus {
539 padding: 5px 6px 1px 6px; 539 padding: 5px 6px 1px 6px;
540 cursor: pointer; 540 cursor: pointer;
541 } 541 }
542 /*Design Choice Illustration*/ 542 /*Design Choice Illustration*/
543 .aside #choice-illustration li .content { 543 .aside #choice-illustration li .content {
544 padding: 10px 10px; 544 padding: 10px 10px;
545 } 545 }
546 546
547 .aside #choice-illustration li .content select{ 547 .aside #choice-illustration li .content select{
548 width: 100%; 548 width: 100%;
549 } 549 }
550 550
551 .aside #choice-illustration li .content .illustration-list { 551 .aside #choice-illustration li .content .illustration-list {
552 width: 100%; 552 width: 100%;
553 border: #bbb solid 1px; 553 border: #bbb solid 1px;
554 background: #FFF; 554 background: #FFF;
555 margin-top: 5px; 555 margin-top: 5px;
556 min-height: 310px; 556 min-height: 310px;
557 padding-bottom: 20px; 557 padding-bottom: 20px;
558 } 558 }
559 559
560 .aside #choice-illustration li .content .illustration-list .illstration-item{ 560 .aside #choice-illustration li .content .illustration-list .illstration-item{
561 height: 60px; 561 height: 60px;
562 overflow: hidden; 562 overflow: hidden;
563 float: left; 563 float: left;
564 margin-left: 6px; 564 margin-left: 6px;
565 margin-top: 5px; 565 margin-top: 5px;
566 margin-bottom: 5px; 566 margin-bottom: 5px;
567 padding: 2px; 567 padding: 2px;
568 background: #e2e2e2; 568 background: #e2e2e2;
569 border: solid 2px #d7d7d7; 569 border: solid 2px #d7d7d7;
570 cursor: pointer; 570 cursor: pointer;
571 } 571 }
572 572
573 .aside #choice-illustration li .content .illustration-list .illstration-item:hover { 573 .aside #choice-illustration li .content .illustration-list .illstration-item:hover {
574 outline: 2px solid #ed1d24; 574 outline: 2px solid #ed1d24;
575 } 575 }
576 576
577 .aside #choice-illustration li .content .illustration-list .illstration-item img { 577 .aside #choice-illustration li .content .illustration-list .illstration-item img {
578 width: 50px; 578 width: 50px;
579 cursor: pointer; 579 cursor: pointer;
580 } 580 }
581 581
582 .aside #choice-illustration li .content .illustration-list .footer-bar { 582 .aside #choice-illustration li .content .illustration-list .footer-bar {
583 text-align: center; 583 text-align: center;
584 margin-top: 5px; 584 margin-top: 5px;
585 bottom: 10px; 585 bottom: 10px;
586 position: absolute; 586 position: absolute;
587 width: 100%; 587 width: 100%;
588 padding-right: 20px; 588 padding-right: 20px;
589 } 589 }
590 .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination { 590 .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination {
591 margin-right: 5px; 591 margin-right: 5px;
592 cursor: pointer; 592 cursor: pointer;
593 font-size: 9px; 593 font-size: 9px;
594 color: #FFF; 594 color: #FFF;
595 background: #666666; 595 background: #666666;
596 text-transform: uppercase; 596 text-transform: uppercase;
597 padding: 2px 5px; 597 padding: 2px 5px;
598 } 598 }
599 599
600 .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination:hover { 600 .aside #choice-illustration li .content .illustration-list .footer-bar .footer-pagination:hover {
601 background: #999999; 601 background: #999999;
602 } 602 }
603 .tooltip-arrow,
604 .red-tooltip + .tooltip > .tooltip-inner {
605 background-color: #FFF;
606 margin:0;
607 padding:0;
608 }
603 609
610 /* Insert image*/
604 #btn-choose-image { 611 #btn-choose-image {
605 background: #ff0f00; 612 background: #ff0f00;
606 cursor: pointer; 613 cursor: pointer;
607 margin: 10px 0px; 614 margin: 10px 0px;
608 padding: 0 10px; 615 padding: 0 10px;
609 color: #FFF; 616 color: #FFF;
610 font-size: 12px; 617 font-size: 12px;
611 } 618 }
612 619
613 #btn-choose-image:hover { 620 #btn-choose-image:hover {
614 background: #f8aeae; 621 background: #f8aeae;
615 } 622 }
616 623
617 .aside #choice-image li .content { 624 .aside #choice-image li .content {
618 margin: 0 10px; 625 margin: 0 10px;
619 padding: 10px 0; 626 padding: 10px 0;
620 } 627 }
621 628
622 .aside #choice-image li .content .small-text { 629 .aside #choice-image li .content .small-text {
623 font-size:10px; 630 font-size:10px;
624 margin-bottom: 10px; 631 margin-bottom: 10px;
625 } 632 }
626 633
627 .aside #choice-image { 634 .aside #choice-image {
628 font-size: 13px; 635 font-size: 13px;
629 } 636 }
630 637
631 .aside #imgLoader{ 638 .aside #imgLoader{
632 display: none; 639 display: none;
633 } 640 }
634 641
635 .aside #choice-image li .content .list-images { 642 .aside #choice-image li .content .list-images {
636 height: 300px; 643 height: 300px;
637 background: #FFF; 644 background: #FFF;
638 border: 1px solid #DDD; 645 border: 1px solid #DDD;
639 } 646 }
640 647
641 /*Design content*/ 648 /*Design content*/
642 .tshirt-design-container{ 649 .tshirt-design-container{
643 position: relative; 650 position: relative;
644 } 651 }
645 .tshirt-design-container .design-content{ 652 .tshirt-design-container .design-content{
646 padding: 10px 30px 10px 15px; 653 padding: 10px 30px 10px 15px;
647 } 654 }
648 .tshirt-design-container .design-content .content{ 655 .tshirt-design-container .design-content .content{
649 width: 100%; 656 width: 100%;
650 min-height: 650px; 657 min-height: 650px;
651 background-color: #f0efea; 658 background-color: #f0efea;
652 padding: 40px 40px; 659 padding: 40px 40px;
653 height: 100%; 660 height: 100%;
654 } 661 }
655 .tshirt-design-container .design-content .content .selection-design{ 662 .tshirt-design-container .design-content .content .selection-design{
656 border: 1px solid #ff0000; 663 border: 1px solid #ff0000;
657 width: 100%; 664 width: 100%;
658 height: 620px; 665 height: 620px;
659 } 666 }
660 .tshirt-design-container .agree-design{ 667 .tshirt-design-container .agree-design{
661 position: absolute; 668 position: absolute;
662 right: -16px; 669 right: -16px;
663 top: 40%; 670 top: 40%;
664 } 671 }
665 .tshirt-design-container .trash-design{ 672 .tshirt-design-container .trash-design{
666 position: absolute; 673 position: absolute;
667 right: 5px; 674 right: 5px;
668 bottom: 0; 675 bottom: 0;
669 } 676 }
677 .tshirt-design-container .trash-design:hover{
678 opacity: 0.5;
679 }
670 680
671 681
682
672 /*FOOTER*/ 683 /*FOOTER*/
673 footer{ 684 footer{
674 background-color: #333333; 685 background-color: #333333;
675 } 686 }
676 footer ul.nav-footer{ 687 footer ul.nav-footer{
677 padding-left: 0; 688 padding-left: 0;
678 list-style: none; 689 list-style: none;
679 } 690 }
680 footer ul.nav-footer li{ 691 footer ul.nav-footer li{
681 float: left; 692 float: left;
682 padding: 3px 10px; 693 padding: 3px 10px;
683 border-right: 1px dotted #ffffff; 694 border-right: 1px dotted #ffffff;
684 695
685 } 696 }
686 footer ul.nav-footer li a{ 697 footer ul.nav-footer li a{
687 color: #ffffff; 698 color: #ffffff;
688 font-size: 11px; 699 font-size: 11px;
689 } 700 }
690 /* Customize container */ 701 /* Customize container */
691 @media (min-width: 768px) { 702 @media (min-width: 768px) {
692 .container { 703 .container {
693 /*max-width: 730px;*/ 704 /*max-width: 730px;*/
694 } 705 }
695 } 706 }
696 707
697 /* Responsive: Portrait tablets and up */ 708 /* Responsive: Portrait tablets and up */
698 @media screen and (min-width: 768px) { 709 @media screen and (min-width: 768px) {
699 /* Remove the padding we set earlier */ 710 /* Remove the padding we set earlier */
700 711
712 }
713
714 @media (min-width: 1024px) {
715 #tshirt-design .modal-dialog{
716 min-width: 1000px;
717 }
701 } 718 }
app/views/design_part/illustration.html
Diff comments   View file @ e0ee74c
1 <li> 1 <li>
2 <div class="title"> 2 <div class="title">
3 <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>--> 3 <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
4 イラスト・イメージ選択 4 イラスト・イメージ選択
5 </div> 5 </div>
6 <div class="content clearfix"> 6 <div class="content clearfix">
7 <select id="illustration-select-category" ui-select2="illustrationSelectConfig" ng-model="currentIllustration" ng-change="changeIllustrationCategory(currentIllustration);currentIllustrationPage=1;" data-placeholder="Choose category" style="width: 100%"> 7 <select id="illustration-select-category" ui-select2="illustrationSelectConfig" ng-model="currentIllustration" ng-change="changeIllustrationCategory(currentIllustration);currentIllustrationPage=1;" data-placeholder="Choose category" style="width: 100%">
8 <option ng-repeat="(key,cate) in IllustrationList" value="{{key}}">{{cate.name}}</option> 8 <option ng-repeat="(key,cate) in IllustrationList" value="{{key}}">{{cate.name}}</option>
9 </select> 9 </select>
10 <div class="illustration-list" ng-init="currentIllustrationPage=1;perIllustrationPage=16"> 10 <div class="illustration-list" ng-init="currentIllustrationPage=1;perIllustrationPage=16">
11 <div class="illstration-item" ng-repeat="item in currentIllustrationCate.list | limitTo:perIllustrationPage:((currentIllustrationPage-1)*perIllustrationPage)" ng-click="insertSvg(item)"> 11 <div class="illstration-item" ng-repeat="item in currentIllustrationCate.list | limitTo:perIllustrationPage:((currentIllustrationPage-1)*perIllustrationPage)" ng-click="insertSvg(item)" title="<img src='{{item.path}}' style='width:200px;background:#e2e2e2;margin:0;padding:0;margin-left:-8px;border:0'/>" data-toggle="tooltip">
12 <img ng-src="{{item.path}}"/> 12 <img ng-src="{{item.path}}"/>
13 </div> 13 </div>
14 <div class="clearfix"></div> 14 <div class="clearfix"></div>
15 <div class="footer-bar"> 15 <div class="footer-bar">
16 <div class="pull-left footer-pagination" ng-click="currentIllustrationPage=currentIllustrationPage-1" ng-show="currentIllustrationPage > 1">< Back</div> 16 <div class="pull-left footer-pagination" ng-click="currentIllustrationPage=currentIllustrationPage-1" ng-show="currentIllustrationPage > 1">< Back</div>
17 {{currentIllustrationPage}}/{{currentIllustrationCate.list.length/perIllustrationPage | number:0}} 17 {{currentIllustrationPage}}/{{currentIllustrationCate.list.length/perIllustrationPage | number:0}}
18 <div class="pull-right footer-pagination" ng-click="currentIllustrationPage=currentIllustrationPage+1" ng-show="currentIllustrationPage < (currentIllustrationCate.list.length/perIllustrationPage|number:0)">Next ></div> 18 <div class="pull-right footer-pagination" ng-click="currentIllustrationPage=currentIllustrationPage+1" ng-show="currentIllustrationPage < (currentIllustrationCate.list.length/perIllustrationPage|number:0)">Next ></div>
19 </div> 19 </div>
20 </div> 20 </div>
21 </div> 21 </div>
22 </li> 22 </li>
23 <li> 23 <li>
24 <div class="title"> 24 <div class="title">
25 <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>--> 25 <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
26 カラー変更 26 カラー変更
27 <div class="pull-right">元の色に戻す</div> 27 <div class="pull-right">元の色に戻す</div>
28 </div> 28 </div>
29 <div class="content clearfix"> 29 <div class="content clearfix">
30 <div class="color-patterns"> 30 <div class="color-patterns">
31 <div class="color-pattern-item" ng-repeat="color in listColorPatterns track by $index" ng-click="changeColorPattern(color)" ng-style="{'background-color': color}"> 31 <div class="color-pattern-item" ng-repeat="color in listColorPatterns track by $index" ng-click="changeColorPattern(color)" ng-style="{'background-color': color}">
32 </div> 32 </div>
33 <div class="clearfix"></div> 33 <div class="clearfix"></div>
34 </div> 34 </div>
35 </div> 35 </div>
36 </li> 36 </li>
37 <li> 37 <li>
38 <div class="title"> 38 <div class="title">
39 <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>--> 39 <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
40 重ね順変更 40 重ね順変更
41 </div> 41 </div>
42 <div class="content clearfix"> 42 <div class="content clearfix">
43 <div class="col-xs-3 layer-item" ng-click="layerProcess(1)"> 43 <div class="col-xs-3 layer-item" ng-click="layerProcess(1)">
44 <img src="images/layer-icon-1.png"/> 44 <img src="images/layer-icon-1.png"/>
45 <div>前面へ</div> 45 <div>前面へ</div>
46 </div> 46 </div>
47 <div class="col-xs-3 layer-item" ng-click="layerProcess(2)"> 47 <div class="col-xs-3 layer-item" ng-click="layerProcess(2)">
48 <img src="images/layer-icon-2.png"/> 48 <img src="images/layer-icon-2.png"/>
49 <div>背面へ</div> 49 <div>背面へ</div>
50 </div> 50 </div>
51 <div class="col-xs-3 layer-item" ng-click="layerProcess(3)"> 51 <div class="col-xs-3 layer-item" ng-click="layerProcess(3)">
52 <img src="images/layer-icon-3.png"/> 52 <img src="images/layer-icon-3.png"/>
53 <div>最前面へ</div> 53 <div>最前面へ</div>
54 </div> 54 </div>
55 <div class="col-xs-3 layer-item" ng-click="layerProcess(4)"> 55 <div class="col-xs-3 layer-item" ng-click="layerProcess(4)">
56 <img src="images/layer-icon-4.png"/> 56 <img src="images/layer-icon-4.png"/>
57 <div>最前面へ</div> 57 <div>最前面へ</div>
58 </div> 58 </div>
59 </div> 59 </div>
60 </li> 60 </li>