TRUONG / T-Shats Frontend

Download as
Browse Code ยป

Commit 7e14f17860926ffe490fd6ac7207c31dbaf8619d

Authored by Dang YoungWorld
1 parent 0136530e3c
Exists in master and in 1 other branch develop

Fix reponsive

Showing 7 changed files with 33 additions and 47 deletions Side-by-side Diff

app/scripts/controllers/main.js
Diff comments   View file @ 7e14f17
... ... @@ -24,16 +24,13 @@
24 24 currentTShirtKey = _routeParams.tShirt - 1;
25 25 if(typeof _routeParams.place != 'undefined')
26 26 placeTShirtKey = _routeParams.place;
27   - console.log(placeTShirtKey);
28 27  
29   -
30 28 /**
31 29 * Get all info TShirt
32 30 * @param: id
33 31 * @return: object
34 32 */
35   - $scope.placeTshirt = $t_shirt.getTShirtPlace(currentTShirtKey, placeTShirtKey);
36   - console.log($scope.placeTshirt);
  33 + $rootScope.placeTshirt = $t_shirt.getTShirtPlace(currentTShirtKey, placeTShirtKey);
37 34 $scope.tShirtColor = $t_shirt.getTShirtColor(currentTShirtKey);
38 35 $rootScope.tShirtColorCode = $scope.tShirtColor[tShirtColorFirstKey].code;
39 36 $scope.tShirtColorName = $scope.tShirtColor[tShirtColorFirstKey].name;
40 37  
... ... @@ -45,10 +42,24 @@
45 42 * Set preview size and position
46 43 */
47 44 function setSizePreViewDesign() {
48   - var _widthPreviewDesign = $('#preview-design').width();
49 45 var _widthTShirtImage = $('.tshirt-image').width();
50   - var leftReviewDesign = _widthTShirtImage/2 - (_widthPreviewDesign/2);
51   - $('#preview-design').css({left: leftReviewDesign});
  46 + if(typeof $rootScope.placeTshirt.place == 'undefined')
  47 + return;
  48 +
  49 + var place = $rootScope.placeTshirt.place;
  50 + switch (place) {
  51 + case 't_shirt_p_1' :
  52 + var widthPreview = _widthTShirtImage/2.5;
  53 + var heihtPreview = _widthTShirtImage/2.5;
  54 + break;
  55 + case 't_shirt_p_2' :
  56 + var widthPreview = _widthTShirtImage/2.5;
  57 + var heihtPreview = _widthTShirtImage/4.5;
  58 + break;
  59 + default:
  60 + break;
  61 + }
  62 + $('#preview-design').css({width: widthPreview, height: heihtPreview});
52 63 }
53 64 setSizePreViewDesign();
54 65 $(window).resize(function () {
... ... @@ -113,6 +124,8 @@
113 124 $scope.modalClose = function(){
114 125 $('#tshirt-design').modal('hide');
115 126 };
  127 +
  128 +
116 129 });
117 130 });
app/scripts/controllers/tshirtdesign.js
Diff comments   View file @ 7e14f17
... ... @@ -5,6 +5,7 @@
5 5 var canvas = new fabric.Canvas('main-design-container');
6 6 //Set width and height canvas
7 7 function setSizeCanvas() {
  8 + console.log($rootScope.placeTshirt);
8 9 var _modalWidth = $('.modal-dialog').width();
9 10 var _windowWidth = window.innerWidth;
10 11 if(_windowWidth > 762) {
... ... @@ -405,8 +406,6 @@
405 406 $scope.layerProcess = function(mode) {
406 407 // console.log('layerProcess');
407 408 var activeObject = canvas.getActiveObject();
408   -
409   - console.log(activeObject);
410 409  
411 410 if (activeObject){
412 411 switch (mode) {
app/scripts/services/tshirt.js
Diff comments   View file @ 7e14f17
... ... @@ -17,7 +17,7 @@
17 17 'place' : 't_shirt_p_1'
18 18 },
19 19 place_2 : {
20   - 'face' : 'back',
  20 + 'face' : 'front',
21 21 'place' : 't_shirt_p_2'
22 22 },
23 23 place_3 : {
... ... @@ -719,8 +719,6 @@
719 719 }
720 720 .tshirt-design-container .design-content .content .selection-design{
721 721 border: 1px solid #ff0000;
722   - width: 100%;
723   - height: 620px;
724 722 }
725 723 .tshirt-design-container .agree-design{
726 724 position: absolute;
... ... @@ -793,16 +791,6 @@
793 791 }
794 792 }
795 793  
796   -@media (max-width: 1200px) {
797   -
798   -}
799   -
800   -@media (max-width: 990px) {
801   -
802   -}
803   -@media (max-width: 762px) and (min-width: 600px) {
804   -
805   -}
806 794 @media (max-width: 762px) {
807 795 .modal-dialog{
808 796 margin: 0 0!important;
app/styles/placedesign.css
Diff comments   View file @ 7e14f17
1 1 #preview-design {
2 2 position: absolute;
3   - width: 190px;
4   - height: 200px;
5 3 border: dashed 2px #DDD;
6   - top: 180px;
7   - /*left: 200px;*/
8 4 cursor: pointer;
9 5 }
10 6  
11 7  
... ... @@ -12,22 +8,16 @@
12 8 width: 150px;
13 9 }
14 10  
15   -@media (max-width: 1200px) {
16   - #preview-design {
17   - left: 155px;
18   - }
19   -}
20   -
21   -@media (max-width: 990px) {
22   - #preview-design {
23   - /*left: 115px;*/
24   - width: 110px;
25   - height: 160px;
26   - top: 110px;
27   - }
28   -}
29   -
30 11 .t_shirt_p_1{
31   -
  12 + left: 50%;
  13 + top: 50%;
  14 + transform: translateX(-50%) translateY(-50%);
  15 + -webkit-transform: translateX(-50%) translateY(-50%);
  16 +}
  17 +.t_shirt_p_2{
  18 + left: 50%;
  19 + top: 80%;
  20 + transform: translateX(-50%) translateY(-80%);
  21 + -webkit-transform: translateX(-50%) translateY(-80%);
32 22 }
... ... @@ -149,7 +149,7 @@
149 149 </div>
150 150 <div class="tshirt-image">
151 151 <img ng-src="{{ tShirtImg }}" alt="" />
152   - <div id="preview-design" ng-show="placeTshirt.face === tShirtChoiceBackFrontKey" class="{{ placeTshirt.place }}" ng-click="modalTShirtDesign()">
  152 + <div 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>
app/views/tshirt-design.html
Diff comments   View file @ 7e14f17
1 1 <!-- Modal -->
2 2 <div class="modal fade" id="tshirt-design" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" ng-controller="TshirtdesignCtrl">
3   -
4 3 <div class="modal-dialog" role="document">
5 4 <div class="modal-content">
6 5 <div class="modal-header">
... ... @@ -52,7 +51,6 @@
52 51 </div>
53 52 <div class="col-sm-8">
54 53 <div class="design-content " id="main-design-content">
55   - <!--<button ng-click="objectDone()" >OK</button>-->
56 54 <div class="content" id="main-design" ng-style="{'background-color' : tShirtColorCode}">
57 55 <div class="object-border" id="object-border-top"></div>
58 56 <div class="object-border" id="object-border-right"></div>
... ... @@ -65,8 +63,6 @@
65 63 <img src="images/agree-design.png" alt="agree design" />
66 64 </div>
67 65 <div class="trash-design">
68   - <!--<span ng-click="undoCanvas()" class="fa fa-undo"> Undo</span><br>-->
69   - <!--<span ng-click="redoCanvas()" class="fa fa-repeat"> Redo</span><br>-->
70 66 <img src="images/trash.png" alt="trash design" />
71 67 </div>
72 68 </div>