fix reponsive

DANG
1 parent 7e14f17860
Showing 5 changed files with 47 additions and 17 deletions Side-by-side Diff
app/scripts/controllers/tshirtdesign.js
app/styles/main.css
app/styles/placedesign.css
app/views/main.html
app/views/tshirt-design.html
 define(['app'], function (app) {
-	//'use strict';
 	app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $window, $timeout, $illustration) {
-
 		var canvas = new fabric.Canvas('main-design-container');
 		//Set width and height canvas
 		function setSizeCanvas() {
-			console.log($rootScope.placeTshirt);
+			if(typeof $rootScope.placeTshirt.place == 'undefined')
+				return;
+
 			var _modalWidth = $('.modal-dialog').width();
 			var _windowWidth = window.innerWidth;
-			if(_windowWidth > 762) {
-				var _contentCanvasWidth = _modalWidth*8/12 - 100;
-			} else {
-				var _contentCanvasWidth = _windowWidth-70;
+			var place = $rootScope.placeTshirt.place;
+
+			switch (place) {
+				case 't_shirt_p_1' :
+					$scope.designCanvasClass = 'design-content-t_shirt_p_1';
+					if(_windowWidth > 762) {
+						var _contentCanvasWidth = (_modalWidth*8/12)/1.2;
+						var _contentCanvasHeight = _contentCanvasWidth;
+					} else {
+						var _contentCanvasWidth = _windowWidth-70;
+						var _contentCanvasHeight = _contentCanvasWidth;
+					}
+					break;
+				case 't_shirt_p_2' :
+					$scope.designCanvasClass = 'design-content-t_shirt_p_2';
+					if(_windowWidth > 762) {
+						var _contentCanvasWidth = (_modalWidth*8/12)/1.2;
+						var _contentCanvasHeight = (_modalWidth*8/12)/2.2;
+
+					} else {
+						var _contentCanvasWidth = _windowWidth-70;
+						var _contentCanvasHeight = (_windowWidth)/2.5;
+					}
+					break;
+				default:
+					break;
 			}
  
 			canvas.setWidth(_contentCanvasWidth);
-			canvas.setHeight(650);
+			canvas.setHeight(_contentCanvasHeight);
 		}
 		setSizeCanvas();
 		//Window resize event
@@ -703,19 +703,18 @@
  
 /*Design content*/
 .tshirt-design-container{
-  position: relative;
+
 }
 .tshirt-design-container .design-content{
   padding: 10px 0;
-  /*width: 100%;*/
+  /*min-height: 580px;*/
 }
 .tshirt-design-container .design-content .content{
   width: 100%;
   height: 100%;
-  min-height: 650px;
-  background-color: #f0efea;
+  min-height: 600px;
+  position: relative;
   padding: 40px 40px;
-  /*display: table-cell;*/
 }
 .tshirt-design-container .design-content .content .selection-design{
   border: 1px solid #ff0000;
@@ -20,4 +20,12 @@
     transform: translateX(-50%) translateY(-80%);
     -webkit-transform: translateX(-50%) translateY(-80%);
 }
+
+/**/
+.design-content-t_shirt_p_1{
+
+}
+.design-content-t_shirt_p_2{
+    padding: 200px 40px!important;
+}
@@ -149,7 +149,7 @@
           </div>
           <div class="tshirt-image">
             <img ng-src="{{ tShirtImg }}" alt="" />
-            <div class="{{ placeTshirt.place }}" id="preview-design" ng-show="placeTshirt.face === tShirtChoiceBackFrontKey" ng-click="modalTShirtDesign()">
+            <div ng-class="placeTshirt.place" id="preview-design" ng-show="placeTshirt.face === tShirtChoiceBackFrontKey" ng-click="modalTShirtDesign()">
               <img ng-src="{{outputImage}}" ng-show="outputImage"/>
             </div>
           </div>
@@ -50,13 +50,14 @@
                         </ul>
                     </div>
                     <div class="col-sm-8">
-                        <div class="design-content " id="main-design-content">
-                            <div class="content" id="main-design" ng-style="{'background-color' : tShirtColorCode}">
+                        <div class="design-content" id="main-design-content">
+                            <div class="content" id="main-design" ng-style="{'background-color' : tShirtColorCode}" ng-class="designCanvasClass">
                                 <div class="object-border" id="object-border-top"></div>
                                 <div class="object-border" id="object-border-right"></div>
                                 <div class="object-border" id="object-border-bottom"></div>
                                 <div class="object-border" id="object-border-left"></div>
-                                <canvas id="main-design-container" class="selection-design lower-canvas" style="width: 100%">
+                                <canvas id="main-design-container" class="selection-design lower-canvas">
+
                                 </canvas>
                             </div>
                             <div class="agree-design" ng-click="outputDesign()">
1	1	define(['app'], function (app) {
2		- //'use strict';
3	2	app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $window, $timeout, $illustration) {
4		-
5	3	var canvas = new fabric.Canvas('main-design-container');
6	4	//Set width and height canvas
7	5	function setSizeCanvas() {
8		- console.log($rootScope.placeTshirt);
	6	+ if(typeof $rootScope.placeTshirt.place == 'undefined')
	7	+ return;
	8	+
9	9	var _modalWidth = $('.modal-dialog').width();
10	10	var _windowWidth = window.innerWidth;
11		- if(_windowWidth > 762) {
12		- var _contentCanvasWidth = _modalWidth*8/12 - 100;
13		- } else {
14		- var _contentCanvasWidth = _windowWidth-70;
	11	+ var place = $rootScope.placeTshirt.place;
	12	+
	13	+ switch (place) {
	14	+ case 't_shirt_p_1' :
	15	+ $scope.designCanvasClass = 'design-content-t_shirt_p_1';
	16	+ if(_windowWidth > 762) {
	17	+ var _contentCanvasWidth = (_modalWidth*8/12)/1.2;
	18	+ var _contentCanvasHeight = _contentCanvasWidth;
	19	+ } else {
	20	+ var _contentCanvasWidth = _windowWidth-70;
	21	+ var _contentCanvasHeight = _contentCanvasWidth;
	22	+ }
	23	+ break;
	24	+ case 't_shirt_p_2' :
	25	+ $scope.designCanvasClass = 'design-content-t_shirt_p_2';
	26	+ if(_windowWidth > 762) {
	27	+ var _contentCanvasWidth = (_modalWidth*8/12)/1.2;
	28	+ var _contentCanvasHeight = (_modalWidth*8/12)/2.2;
	29	+
	30	+ } else {
	31	+ var _contentCanvasWidth = _windowWidth-70;
	32	+ var _contentCanvasHeight = (_windowWidth)/2.5;
	33	+ }
	34	+ break;
	35	+ default:
	36	+ break;
15	37	}
16	38
17	39	canvas.setWidth(_contentCanvasWidth);
18		- canvas.setHeight(650);
	40	+ canvas.setHeight(_contentCanvasHeight);
19	41	}
20	42	setSizeCanvas();
21	43	//Window resize event
...	...	@@ -703,19 +703,18 @@
703	703
704	704	/Design content/
705	705	.tshirt-design-container{
706		- position: relative;
	706	+
707	707	}
708	708	.tshirt-design-container .design-content{
709	709	padding: 10px 0;
710		- /width: 100%;/
	710	+ /min-height: 580px;/
711	711	}
712	712	.tshirt-design-container .design-content .content{
713	713	width: 100%;
714	714	height: 100%;
715		- min-height: 650px;
716		- background-color: #f0efea;
	715	+ min-height: 600px;
	716	+ position: relative;
717	717	padding: 40px 40px;
718		- /display: table-cell;/
719	718	}
720	719	.tshirt-design-container .design-content .content .selection-design{
721	720	border: 1px solid #ff0000;
...	...	@@ -20,4 +20,12 @@
20	20	transform: translateX(-50%) translateY(-80%);
21	21	-webkit-transform: translateX(-50%) translateY(-80%);
22	22	}
	23	+
	24	+/**/
	25	+.design-content-t_shirt_p_1{
	26	+
	27	+}
	28	+.design-content-t_shirt_p_2{
	29	+ padding: 200px 40px!important;
	30	+}
...	...	@@ -149,7 +149,7 @@
149	149	</div>
150	150	<div class="tshirt-image">
151	151	<img ng-src="{{ tShirtImg }}" alt="" />
152		- <div class="{{ placeTshirt.place }}" id="preview-design" ng-show="placeTshirt.face === tShirtChoiceBackFrontKey" ng-click="modalTShirtDesign()">
	152	+ <div ng-class="placeTshirt.place" id="preview-design" ng-show="placeTshirt.face === tShirtChoiceBackFrontKey" ng-click="modalTShirtDesign()">
153	153	<img ng-src="{{outputImage}}" ng-show="outputImage"/>
154	154	</div>
155	155	</div>
...	...	@@ -50,13 +50,14 @@
50	50	</ul>
51	51	</div>
52	52	<div class="col-sm-8">
53		- <div class="design-content " id="main-design-content">
54		- <div class="content" id="main-design" ng-style="{'background-color' : tShirtColorCode}">
	53	+ <div class="design-content" id="main-design-content">
	54	+ <div class="content" id="main-design" ng-style="{'background-color' : tShirtColorCode}" ng-class="designCanvasClass">
55	55	<div class="object-border" id="object-border-top"></div>
56	56	<div class="object-border" id="object-border-right"></div>
57	57	<div class="object-border" id="object-border-bottom"></div>
58	58	<div class="object-border" id="object-border-left"></div>
59		- <canvas id="main-design-container" class="selection-design lower-canvas" style="width: 100%">
	59	+ <canvas id="main-design-container" class="selection-design lower-canvas">
	60	+
60	61	</canvas>
61	62	</div>
62	63	<div class="agree-design" ng-click="outputDesign()">