ngohungcuong.windy@gmail.com / T-Shats Frontend

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 = '15-11_01';	49	var VERSION = new Date().getTime();
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/app.js

Diff comments View file @ 19a5416

1	/jshint unused: vars /	1	/jshint unused: vars /
2		2
3	define(['angular','routes']/deps/, function (angular, configRoutes)/invoke/ {	3	define(['angular','routes']/deps/, function (angular, configRoutes)/invoke/ {
4	'use strict';	4	'use strict';
5		5
6	var app = angular.module('tshatsApp', [/angJSDeps/	6	var app = angular.module('tshatsApp', [/angJSDeps/
7	'ngCookies',	7	'ngCookies',
8	'ngRoute',	8	'ngRoute',
9	'ui.select2'	9	'ui.select2'
10	]);	10	]);
11	app.config([	11	app.config([
12	'$routeProvider',	12	'$routeProvider',
13	'$locationProvider',	13	'$locationProvider',
14	'$controllerProvider',	14	'$controllerProvider',
15	'$compileProvider',	15	'$compileProvider',
16	'$filterProvider',	16	'$filterProvider',
17	'$provide',	17	'$provide',
18	function ($routeProvider, $locationProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {	18	function ($routeProvider, $locationProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {
19		19
20	app.controller = $controllerProvider.register;	20	app.controller = $controllerProvider.register;
21	app.directive = $compileProvider.directive;	21	app.directive = $compileProvider.directive;
22	app.filter = $filterProvider.register;	22	app.filter = $filterProvider.register;
23	app.factory = $provide.factory;	23	app.factory = $provide.factory;
24	app.service = $provide.service;	24	app.service = $provide.service;
25		25
26	// enable below line for enable html5 mode	26	// enable below line for enable html5 mode
27	// $locationProvider.html5Mode({	27	// $locationProvider.html5Mode({
28	// enabled: true,	28	// enabled: true,
29	// requireBase: false	29	// requireBase: false
30	// });	30	// });
31		31
32	/* resolve controller function for lazyload */	32	/* resolve controller function for lazyload */
33	var resolveController = function (dependencies){	33	var resolveController = function (dependencies){
34	return {	34	return {
35	load: ['$q', '$rootScope', function ($q, $rootScope) {	35	load: ['$q', '$rootScope', function ($q, $rootScope) {
36	var defer = $q.defer();	36	var defer = $q.defer();
37	require(dependencies, function () {	37	require(dependencies, function () {
38	$rootScope.$apply(function() {	38	$rootScope.$apply(function() {
39	defer.resolve();	39	defer.resolve();
40	});	40	});
41	});	41	});
42	return defer.promise;	42	return defer.promise;
43	}]	43	}]
44	};	44	};
45	};	45	};
46		46
47	if (configRoutes.routes !== undefined){	47	if (configRoutes.routes !== undefined){
48	angular.forEach(configRoutes.routes, function(route, path)	48	angular.forEach(configRoutes.routes, function(route, path)
49	{	49	{
50	$routeProvider.when(path, {templateUrl: route.templateUrl, resolve: resolveController(route.dependencies)});	50	$routeProvider.when(path, {templateUrl: route.templateUrl+'?ver='+VERSION, resolve: resolveController(route.dependencies)});
51	});	51	});
52	}	52	}
53		53
54	if (configRoutes.defaultRoutePaths !== undefined){	54	if (configRoutes.defaultRoutePaths !== undefined){
55	$routeProvider.otherwise({redirectTo: configRoutes.defaultRoutePaths});	55	$routeProvider.otherwise({redirectTo: configRoutes.defaultRoutePaths});
56	}	56	}
57	}	57	}
58	]);	58	]);
59	return app;	59	return app;
60	});	60	});
61		61

app/scripts/controllers/main.js

Diff comments View file @ 19a5416

 define(['app'], function (app) {
 	'use strict';
 	app.controller('MainCtrl', function ($rootScope, $scope, $illustration, $t_shirt) {
 		$scope.designFrameView = 'views/tshirt-design.html?ver='+VERSION;
 		$scope.designPartIllustration = 'views/design_part/illustration.html?ver='+VERSION;
+		$scope.designPartImage = 'views/design_part/image.html?ver='+VERSION;
+		$scope.designPartText = 'views/design_part/text.html?ver='+VERSION;
+		$scope.designPartDefault = 'views/design_part/default.html?ver='+VERSION;
 		//Action T-Shirt choice color and Back or Front
 		$scope.tShirtColor = $t_shirt.getTShirtColor(0);
 		//Set color name default
 		var tShirtColorFirstKey = 0;
 		$scope.tShirtChoiceBackFrontKey = 'front';
 		$scope.tShirtColorKey = tShirtColorFirstKey;
 		$rootScope.tShirtColorCode = $scope.tShirtColor[tShirtColorFirstKey].code;
 		$scope.tShirtColorName = $scope.tShirtColor[tShirtColorFirstKey].name;
 		$scope.tShirtImgFront = $scope.tShirtColor[tShirtColorFirstKey].img.front;
 		$scope.tShirtImgBack = $scope.tShirtColor[tShirtColorFirstKey].img.back;
 		$scope.tShirtImg = $scope.tShirtImgFront;
 		$scope.choiceTShirtColor = function(key) {
 			$scope.tShirtColorKey = key;
 			$rootScope.tShirtColorCode = $scope.tShirtColor[key].code;
 			$scope.tShirtColorName = $scope.tShirtColor[key].name;
 			$scope.tShirtImgFront = $scope.tShirtColor[key].img.front;
 			$scope.tShirtImgBack = $scope.tShirtColor[key].img.back;
 			if($scope.tShirtChoiceBackFrontKey == 'front') {
 				$scope.tShirtImg = $scope.tShirtImgFront;
 			} else {
 				$scope.tShirtImg = $scope.tShirtImgBack;
 			}
 		};
 		$scope.choiceTShirtBackFront = function(choice) {
 			if(choice == 'front') {
 				$scope.tShirtImg = $scope.tShirtImgFront;
 			} else {
 				$scope.tShirtImg = $scope.tShirtImgBack;
 			}
 			$scope.tShirtChoiceBackFrontKey = choice;
 		};
-		$scope.showIllustration = function(tab){
+		$scope.showDesignTab = function(tab){
 			$rootScope.isShowLeftPanel = tab;
 			switch (tab) {
 				case 'illustration': {
 					$scope.IllustrationList = $illustration.getAll();
 					$scope.illustrationSelectConfig = {
 						allowClear:true
 					};
 					break;
 				}
 				case 'text': {
 					break;
 				}
 			}
 		};
 		//safeApply
 		$rootScope.safeApply = function(fn) {
 			var phase = this.$root.$$phase;
 			if(phase == '$apply' || phase == '$digest') {
 				if(fn && (typeof(fn) === 'function')) {
 					fn();
 				}
 			} else {
 				this.$apply(fn);
 			}
 		};
 		$scope.modalTShirtDesign = function() {
 			$('#tshirt-design').modal(
 				{
 					backdrop: 'static',
 					keyboard: false
 				}
 			);
-			$scope.showIllustration('default');
+			$scope.showDesignTab('default');
 		};
 		$scope.modalClose = function(){
 			$('#tshirt-design').modal('hide');
 		};
 	});
 });

app/scripts/routes.js

Diff comments View file @ 19a5416

1	define([], function(){	1	define([], function(){
2	'use strict';	2	'use strict';
3	return {	3	return {
4	defaultRoutePaths: '/',	4	defaultRoutePaths: '/',
5	routes: {	5	routes: {
6	/* add more routes */	6	/* add more routes */
7	'/': {	7	'/': {
8	templateUrl: 'views/main.html?ver='+VERSION,	8	templateUrl: 'views/main.html',
9	dependencies: [	9	dependencies: [
10	'scripts/controllers/main.js',	10	'scripts/controllers/main.js',
11	'scripts/controllers/tshirtdesign.js',	11	'scripts/controllers/tshirtdesign.js',
12	'scripts/services/illustration.js',	12	'scripts/services/illustration.js',
13	'scripts/services/tshirt.js'	13	'scripts/services/tshirt.js'
14	]	14	]
15	}	15	}
16	}	16	}
17	};	17	};
18	});	18	});

app/styles/main.css

Diff comments View file @ 19a5416

 /* Space out content a bit */
 @import "../fonts/font.css";
 @import "../fonts/font_canvas/font-canvas.css";
 body {
   font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
   /*font-family: 'gn_aki_iro_sesami_cookies';*/
 }
 .padding-right-0{
   padding-right: 0!important;
 }
 .padding-left-0{
   padding-left: 0!important;
 }
 button.red{
   color: #ffffff;
   background-color: #ff0000;
   border: 1px solid #ff0000;
 }
 button.white{
   border: 1px solid #ff8080;
   color: #ff8080;
   background-color: #ffffff;
 }
 button.brown{
   background-color: #666666;
   border: 1px solid #666666;
   color: #ffffff;
   border-radius: 5px;
 }
 button.black{
   border: 1px solid #c9c9c9;
   background-color: #343434;
   color: #ffffff;
   padding: 1px 6px;
 }
 #tshirt-container{
   border-left: 1px solid #dcdcdc;
   border-right: 1px solid #dcdcdc;
 }
 /*HEADER*/
 header{
   border-bottom: 1px solid #dcdcdc;
 }
 header .logo{
   color: #ed1d24;
   font-size: 30px;
   text-transform: uppercase;
   font-weight: bold;
 }
 header .logo img{
   width: 60px;
 }
 /*NAVIGATION*/
 nav{
   border-bottom: 1px solid #dcdcdc;
   padding: 10px 0;
 }
 nav h2{
   font-size: 27px;
   margin: 0 0;
 }
 nav ul{
   list-style: none;
   padding-left: 0;
   margin-bottom: 0;
 }
 nav ul li{
   margin-left: 2px;
   float: left;
   padding: 6px 12px;
   background-color: #999999;
   position: relative;
 }
 nav ul li i.fa{
   position: absolute;
   color: #ffffff;
   font-size: 18px;
   right: -4px;
   top: 50%;
   transform: translateX(-50%) translateY(-50%);
   -webkit-transform: translateX(-50%) translateY(-50%);
 }
 nav ul li a{
   color: #ffffff;
 }
 nav ul li:hover a{
   text-decoration: none;
   color: #ffffff;
 }
 nav ul li.action{
   color: #ffffff;
   background-color: #ed1d24;
 }
 /*ASIDE*/
 aside{
   margin: 10px 0;
 }
 aside .break-down{
   padding: 0 0;
 }
 aside .break-down i.fa{
   font-size: 35px;
   color: #ff0000;
 }
 aside .break-line{
   height: 10px;
 }
 aside .break-line hr{
   border-top: 1px dotted #cccccc;
 }
 aside .step{
   margin: 0 0;
 }
 aside .step .title{
   font-size: 15px;
   line-height: 16px;
   font-weight: bold;
   margin-bottom: 3px;
 }
 aside .step .title-notice{
   font-size: 13px;
   line-height: 16px;
   margin-bottom: 3px;
 }
 aside .step .title-notice .require{
   font-size: 10px;
 }
 aside .step .step-box{
   border: 2px solid #dcdcdc;
   font-size: 12px;
 }
 /*Step 1*/
 aside .step .step-box .tshirt-design{
   border: 1px solid #cccccc;
   background-color: #f5f5f5;
   margin: 10px 10px;
 }
 aside .step .step-box .tshirt-design:hover{
   border: 1px solid #ff0000;
 }
 aside .step .step-box .tshirt-design button:hover{
   background-color: #fa7b7b;
   border: 1px solid #fa7b7b;
 }
 aside .step .step-box .tshirt-design div{
   float: left;
 }
 aside .step .step-box .tshirt-design .icon{
   padding: 4px 4px;
   border-right: 1px solid #cccccc;
 }
 aside .step .step-box .tshirt-design .icon img{
   height: 50px;
 }
 aside .step .step-box .tshirt-design .name{
   padding: 10px 10px;
 }
 aside .step .step-box .tshirt-design .action{
   padding: 10px 10px;
   float: right;
 }
 aside .step .step-box .tshirt-design .action button{
   padding: 8px 10px;
 }
 /*Step 2*/
 aside .step .step-box .tshirt-color{
   padding: 6px 10px;
   position: relative;
 }
 aside .step .step-box .tshirt-color ul.choice-color{
   float: left;
   list-style: none;
   padding-left: 0;
   width: 100%;
   margin-bottom: 3px;
 }
 aside .step .step-box .tshirt-color ul.choice-color li{
   margin: 0 10px 0 0;
   border: 1px solid #cccccc;
   padding: 2px 2px;
   float: left;
   cursor: pointer;
 }
 aside .step .step-box .tshirt-color ul.choice-color li.action{
   border: 1px solid #ff0000;
 }
 aside .step .step-box .tshirt-color ul.choice-color li:hover{
   border: 1px solid #ff0000;
 }
 aside .step .step-box .tshirt-color ul.choice-color li div{
   height: 30px;
   width: 30px;
 }
 aside .step .step-box .tshirt-color ul.choice-color li.white div{
   background-color: #ece7e4;
 }
 aside .step .step-box .tshirt-color ul.choice-color li.blue div{
   background-color: #e7dfd0;
 }
 aside .step .step-box .tshirt-color .color-name{
   width: 100%;
   font-size: 10px;
 }
 aside .step .step-box .tshirt-color .view-more{
   position: absolute;
   bottom: 6px;
   right: 10px;
 }
 /*Step 3*/
 aside .step .step-box .tshirt-saveorder{
   padding: 10px 10px 6px 10px;
 }
 aside .step .step-box .tshirt-saveorder .action{
   width: 50%;
   float: left;
 }
 aside .step .step-box .tshirt-saveorder .action:first-child{
   padding-right: 5px;
 }
 aside .step .step-box .tshirt-saveorder .action:last-child{
   padding-left: 5px;
 }
 aside .step .step-box .tshirt-saveorder .action button{
   padding: 8px 10px;
 }
 aside .step .step-box .tshirt-saveorder .action button .text{
   float: left;
   width: 80%;
   text-align: center;
   padding-left: 10px;
   vertical-align: bottom;
 }
 aside .step .step-box .tshirt-saveorder .action button .arrow{
   float: left;
   width: 20%;
   height: 40px;
   position: relative;
 }
 aside .step .step-box .tshirt-saveorder .action button .arrow i.fa{
   position: absolute;
   top: 50%;
   right: -6px;
   transform: translateX(-50%) translateY(-50%);
   -webkit-transform: translateX(-50%) translateY(-50%);
 }
 aside .step .step-box .tshirt-saveorder .notice{
   padding: 5px 0 0 0;
 }
 /*Step 4*/
 aside .step .title-notice{
 }
 aside .step .step-box .change-design{
   padding: 4px 4px;
 }
 aside .step .step-box .change-design table{
 }
 aside .step .step-box .change-design table tr{
   border-bottom: 1px dotted #cccccc;
 }
 aside .step .step-box .change-design table tr:last-child{
   border-bottom: 0;
 }
 /*Step 5- finish*/
 aside .step .finish-design{
   padding: 20px 0;
 }
 aside .step .finish-design button{
   width: 100%;
   padding: 8px 10px;
 }
 /*DESIGN CONTENT*/
 #tshirt-content{
   position: relative;
 }
 #tshirt-content .switch-border-design{
   position: absolute;
   top: 5px;
   right: 10px;
   color: red;
   font-size: 11px;
 }
 #tshirt-content .tshirt-image{
   padding: 20px 0 0 0;
 }
 #tshirt-content .tshirt-choice{
 }
 #tshirt-content .tshirt-choice ul{
   list-style: none;
   padding-left: 0;
   display: table;
   margin: auto;
 }
 #tshirt-content .tshirt-choice ul li{
   float: left;
   margin: 10px 10px;
   cursor: pointer;
 }
 #tshirt-content .tshirt-choice ul li .image{
   border: 1px solid #cccccc;
   padding: 3px 3px;
 }
 #tshirt-content .tshirt-choice ul li.focus{
 }
 #tshirt-content .tshirt-choice ul li.focus .image{
   border: 1px solid #ff0000;
 }
 #tshirt-content .tshirt-choice ul li .image img{
   width: 50px;
   height: auto;
 }
 /*MODAL Design*/
 #tshirt-design{
   background-color: #666666;
 }
 #tshirt-design .modal-dialog{
   width: 75%;
   margin: 0 auto;
 }
 #tshirt-design .modal-dialog .modal-content{
   background-color: transparent;
   border-radius: 0;
   border: 0;
   -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
   box-shadow: 0 0 0 rgba(0, 0, 0, .5)!important;
 }
 #tshirt-design .modal-dialog .modal-content .modal-header{
   padding: 0 0 10px 0;
   border-bottom: 0;
   border-shadow: none!important;
 }
 #tshirt-design .modal-dialog .modal-content .modal-body{
   background-color: #f5f5f5;
   padding: 0 0;
 }
 #tshirt-design header{
   border-bottom: 1px solid #cccccc;
   background-color: #dddddd;
 }
 #tshirt-design header ul.nav{
   padding-left: 0;
   list-style: none;
 }
 #tshirt-design header ul.nav li{
   float: left;
   padding: 8px 26px;
   border-right: 1px solid #cccccc;
   font-size: 14px;
   cursor: pointer;
 }
 #tshirt-design header ul.nav li:hover, #tshirt-design header ul.nav li.active{
   background-color: red;
   color: #ffffff;
 }
 #tshirt-design header ul.nav li:hover i.fa, #tshirt-design header ul.nav li.active i.fa{
   color: #ffffff;
 }
 #tshirt-design header ul.nav li i.fa{
   color: #fe070f;
   font-size: 20px;
   margin-right: 10px;
 }
 #tshirt-design header .action{
 }
 #tshirt-design header .action button{
   padding: 2px 10px;
   margin: 6px 10px;
 }
 #tshirt-design header .action button:hover{
   background-color: red;
   color: #ffffff;
 }
 /*Aside modal*/
 .aside{
 }
 .aside .box-design-option{
   list-style: none;
   padding-left: 0;
   margin-top: 10px;
 }
 .aside .box-design-option li{
 }
 .aside .box-design-option li{
   border: 1px solid #cdcdcd;
   position: relative;
   cursor: pointer;
 }
 .aside .box-design-option li .hover{
   background-color: #fddad4;
   opacity: 0.6;
   position: absolute;
   width: 100%;
   height: 100%;
   display: none;
 }
 .aside .box-design-option li:hover .hover{
   display: block;
 }
 .aside .box-design-option li .title{
   background: url("../images/bg1.png") repeat #cdcdcd;
   padding: 3px 10px;
 }
 .aside .box-design-option li .title i.fa{
   color: #000000;
 }
 .aside .box-design-option li .content{
 }
 .aside .box-design-option li .content i.fa{
   font-size: 30px;
   color: #fe070f;
   margin: 8px 0;
 }
 .aside .box-design-option li .content .des{
   padding: 3px 10px 3px 0;
 }
 /*Design Choice Illustration*/
 .aside #choice-illustration li .content {
   padding: 10px 10px;
 }
 .aside #choice-illustration li .content select{
   width: 100%;
 }
 .aside #choice-illustration li .content .illustration-list {
   width: 100%;
   border: #bbb solid 1px;
   background: #FFF;
   margin-top: 5px;
 }
 .aside #choice-illustration li .content .illustration-list .illstration-item{
-  height: 65px;
+  height: 60px;
   overflow: hidden;
   float: left;
-  margin-left: 5px;
+  margin-left: 6px;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  padding: 2px;
+  background: #e2e2e2;
+  border: solid 2px #d7d7d7;
+  overflow: pointer;
 }
 .aside #choice-illustration li .content .illustration-list .illstration-item:hover {
   outline: 2px solid #ed1d24;
 }
 .aside #choice-illustration li .content .illustration-list .illstration-item img {
-  width: 62px;
+  width: 50px;
   cursor: pointer;
 }
 .aside #choice-illustration li .content .color-patterns {
   width: 100%;
   border: #bbb solid 1px;
   background: #FFF;
   margin-top: 5px;
 }
 .aside #choice-illustration li .content .color-patterns .color-pattern-item{
   height: 20px;
   float: left;
   margin-left: 4px;
   margin-top: 2px;
   width: 20px;
   cursor: pointer;
   border: 1px solid #ddd;
 }
 .aside #choice-illustration li .content .color-patterns .color-pattern-item:hover {
   outline: 1px solid #ed1d24;
 }
 /*Design content*/
 .tshirt-design-container{
   position: relative;
 }
 .tshirt-design-container .design-content{
   padding: 10px 30px 10px 15px;
 }
 .tshirt-design-container .design-content .content{
   width: 100%;
   min-height: 650px;
   background-color: #f0efea;
   padding: 40px 40px;
   height: 100%;
 }
 .tshirt-design-container .design-content .content .selection-design{
   border: 1px solid #ff0000;
   width: 100%;
   height: 620px;
 }
 .tshirt-design-container .agree-design{
   position: absolute;
   right: -16px;
   top: 40%;
 }
 .tshirt-design-container .trash-design{
   position: absolute;
   right: 5px;
   bottom: 0;
 }
 /*FOOTER*/
 footer{
   background-color: #333333;
 }
 footer ul.nav-footer{
   padding-left: 0;
   list-style: none;
 }
 footer ul.nav-footer li{
   float: left;
   padding: 3px 10px;
   border-right: 1px dotted #ffffff;
 }
 footer ul.nav-footer li a{
   color: #ffffff;
   font-size: 11px;
 }
 /* Customize container */
 @media (min-width: 768px) {
   .container {
     /*max-width: 730px;*/
   }
 }
 /* Responsive: Portrait tablets and up */
 @media screen and (min-width: 768px) {
   /* Remove the padding we set earlier */
 }

app/views/design_part/default.html

Diff comments View file @ 19a5416

1	<li>	1	<li ng-click="showDesignTab('text')">
2	<div class="hover"></div>	2	<div class="hover"></div>
3	<div class="title">	3	<div class="title">
4	<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>	4	<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
5	文字を追加	5	文字を追加
6	</div>	6	</div>
7	<div class="content clearfix">	7	<div class="content clearfix">
8	<div class="col-xs-2 text-center">	8	<div class="col-xs-2 text-center">
9	<i class="fa fa-jpy" aria-hidden="true"></i>	9	<i class="fa fa-jpy" aria-hidden="true"></i>
10	</div>	10	</div>
11	<div class="col-xs-10 des padding-left-0">	11	<div class="col-xs-10 des padding-left-0">
12	書体を選んでお好きな文字を入力できます	12	書体を選んでお好きな文字を入力できます
13	</div>	13	</div>
14	</div>	14	</div>
15	</li>	15	</li>
16	<li>	16	<li ng-click="showDesignTab('illustration')">
17	<div class="hover"></div>	17	<div class="hover"></div>
18	<div class="title">	18	<div class="title">
19	<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>	19	<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
20	イラストやイメージを追加	20	イラストやイメージを追加
21	</div>	21	</div>
22	<div class="content clearfix">	22	<div class="content clearfix">
23	<div class="col-xs-2 text-center">	23	<div class="col-xs-2 text-center">
24	<i class="fa fa-btc" aria-hidden="true"></i>	24	<i class="fa fa-btc" aria-hidden="true"></i>
25	</div>	25	</div>
26	<div class="col-xs-10 des padding-left-0">	26	<div class="col-xs-10 des padding-left-0">
27	自由にお使いいただけるデザイン画像をご用意しました	27	自由にお使いいただけるデザイン画像をご用意しました
28	</div>	28	</div>
29	</div>	29	</div>
30	</li>	30	</li>
31	<li>	31	<li ng-click="showDesignTab('image')">
32	<div class="hover"></div>	32	<div class="hover"></div>
33	<div class="title">	33	<div class="title">
34	<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>	34	<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
35	自分の画像・写真を追加	35	自分の画像・写真を追加
36	</div>	36	</div>
37	<div class="content clearfix">	37	<div class="content clearfix">
38	<div class="col-xs-2 text-center">	38	<div class="col-xs-2 text-center">
39	<i class="fa fa-jpy" aria-hidden="true"></i>	39	<i class="fa fa-jpy" aria-hidden="true"></i>
40	</div>	40	</div>
41	<div class="col-xs-10 des padding-left-0">	41	<div class="col-xs-10 des padding-left-0">
42	ご自分で用意した画像をアップロードして使えます	42	ご自分で用意した画像をアップロードして使えます
43	</div>	43	</div>
44	</div>	44	</div>
45	</li>	45	</li>
46	<li>	46	<li>
47	<div class="hover"></div>	47	<div class="hover"></div>
48	<div class="title">	48	<div class="title">
49	<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>	49	<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
50	おすすめデザインを使う	50	おすすめデザインを使う
51	</div>	51	</div>
52	<div class="content clearfix">	52	<div class="content clearfix">
53	<div class="col-xs-2 text-center">	53	<div class="col-xs-2 text-center">
54	<i class="fa fa-jpy" aria-hidden="true"></i>	54	<i class="fa fa-jpy" aria-hidden="true"></i>
55	</div>	55	</div>
56	<div class="col-xs-10 des padding-left-0">	56	<div class="col-xs-10 des padding-left-0">
57	おすすめデザインデータをご自由にカスタマイズしてお使いください	57	おすすめデザインデータをご自由にカスタマイズしてお使いください
58	</div>	58	</div>
59	</div>	59	</div>
60	</li>	60	</li>

app/views/design_part/image.html

Diff comments View file @ 19a5416

File was created	1	<li>
	2	<div class="title">
	3	<!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
	4	イラスト・イメージ選択
	5	</div>
	6	<div class="content clearfix">
	7
	8	</div>
	9	</li>
	10	<li>
	11	<div class="title">
	12	<!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
	13	カラー変更
	14	<div class="pull-right">元の色に戻す</div>
	15	</div>
	16	<div class="content clearfix">
	17
	18	</div>
	19	</li>
	20	<li>
	21	<div class="title">
	22	<!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
	23	重ね順変更
	24	</div>
	25	<div class="content clearfix">
	26
	27	</div>
	28	</li>

app/views/tshirt-design.html

Diff comments View file @ 19a5416

 <!-- Modal -->
 <div class="modal fade" id="tshirt-design" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" ng-controller="TshirtdesignCtrl">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <button class="black" ng-click="modalClose()"><i class="fa fa-times" aria-hidden="true"></i> キャンセル</button>
                 <button class="black"> <i class="fa fa-angle-right" aria-hidden="true"></i> はじめての方へ</button>
             </div>
             <div class="modal-body">
                 <header class="clearfix">
                     <ul class="nav pull-left">
-                        <li ng-class="{'active': isShowLeftPanel=='text'}" ng-click="showIllustration('text')">
+                        <li ng-class="{'active': isShowLeftPanel=='text'}" ng-click="showDesignTab('text')">
                             <i class="fa fa-jpy" aria-hidden="true"></i> 文字
                         </li>
-                        <li ng-class="{'active': isShowLeftPanel=='illustration'}" ng-click="showIllustration('illustration')">
+                        <li ng-class="{'active': isShowLeftPanel=='illustration'}" ng-click="showDesignTab('illustration')">
                             <i class="fa fa-btc" aria-hidden="true"></i> イラスト・イメージ
                         </li>
-                        <li>
+                        <li ng-class="{'active': isShowLeftPanel=='image'}" ng-click="showDesignTab('image')">
                             <i class="fa fa-money" aria-hidden="true"></i> 自分の画像・写真
                         </li>
                         <li>
                             <i class="fa fa-minus-circle" aria-hidden="true"></i> 全消去
                         </li>
                     </ul>
                     <div class="action pull-right">
                         <button class="white">
                             アルバムを開く
                         </button>
                         <button class="white">
                             アルバムに入れる
                         </button>
                     </div>
                 </header>
                 <section class="tshirt-design-container clearfix">
                     <div class="aside col-xs-4">
                         <!-- Default-->
-                        <ul class="box-design-option" id="choice-design-option" ng-show="isShowLeftPanel=='default' " ng-include="'views/design_part/default.html'">
+                        <ul class="box-design-option" id="choice-design-option" ng-show="isShowLeftPanel=='default' " ng-include="designPartDefault">
                         </ul>
                         <!-- Illustration design-->
                         <ul class="box-design-option" id="choice-illustration" ng-show="isShowLeftPanel=='illustration'" ng-include="designPartIllustration">
                         </ul>
+                        <!-- Custom image design-->
+                        <ul class="box-design-option" id="choice-image" ng-show="isShowLeftPanel=='image'" ng-include="designPartImage">
+                        </ul>
                         <!-- Text design-->
-                        <ul class="box-design-option" id="choice-text" ng-show="isShowLeftPanel=='text'" ng-include="'views/design_part/text.html'">
+                        <ul class="box-design-option" id="choice-text" ng-show="isShowLeftPanel=='text'" ng-include="designPartText">
                         </ul>
                     </div>
                     <div class="design-content col-xs-8">
                         <div class="content" ng-style="{'background-color' : tShirtColorCode}">
                             <canvas id="main-design-container" width="510px" height="620px" class="selection-design lower-canvas">
                             </canvas>
                         </div>
                         <div class="agree-design">
                             <img src="images/agree-design.png" alt="agree design" />
                         </div>
                         <div class="trash-design">
                             <img src="images/trash.png" alt="trash design" />
                         </div>
                     </div>
                 </section>
             </div>
         </div>
     </div>
 </div>