From 4ae9cc6345dbc166316b94bdae232f56b339a968 Mon Sep 17 00:00:00 2001
From: BuiDang <bdangvn@gmail.com>
Date: Sat, 26 Nov 2016 20:32:21 +0700
Subject: [PATCH] fix reponsive

---
 app/scripts/controllers/tshirtdesign.js | 38 ++++++++++++++++++++++++++-------
 app/styles/main.css                     |  9 ++++----
 app/styles/placedesign.css              |  8 +++++++
 app/views/main.html                     |  2 +-
 app/views/tshirt-design.html            |  7 +++---
 5 files changed, 47 insertions(+), 17 deletions(-)

diff --git a/app/scripts/controllers/tshirtdesign.js b/app/scripts/controllers/tshirtdesign.js
index 8955e58..4750bd8 100644
--- a/app/scripts/controllers/tshirtdesign.js
+++ b/app/scripts/controllers/tshirtdesign.js
@@ -1,21 +1,43 @@
 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
diff --git a/app/styles/main.css b/app/styles/main.css
index 0aa52de..cd82323 100644
--- a/app/styles/main.css
+++ b/app/styles/main.css
@@ -703,19 +703,18 @@ aside .step .finish-design button{
 
 /*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;
diff --git a/app/styles/placedesign.css b/app/styles/placedesign.css
index 62cc01d..661d432 100644
--- a/app/styles/placedesign.css
+++ b/app/styles/placedesign.css
@@ -19,4 +19,12 @@
     top: 80%;
     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;
 }
\ No newline at end of file
diff --git a/app/views/main.html b/app/views/main.html
index a1afc1b..cc84388 100644
--- a/app/views/main.html
+++ b/app/views/main.html
@@ -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>
diff --git a/app/views/tshirt-design.html b/app/views/tshirt-design.html
index 0ffd2c5..51d50d6 100644
--- a/app/views/tshirt-design.html
+++ b/app/views/tshirt-design.html
@@ -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.8.5.3