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

Browse Code »

Commit 6582efe6644d2cddb69622b2c279c1d9c40c7551

Authored by DANG 2016-11-30 22:58:49 +0900

1 parent 97d46dae2b

Exists in master

add css

Showing 3 changed files with 26 additions and 3 deletions Inline Diff

app/scripts/controllers/main.js
app/styles/main.css
app/views/main.html

app/scripts/controllers/main.js

Diff comments View file @ 6582efe

 define(['app'], function (app) {
 	'use strict';
 	app.controller('MainCtrl', function ($rootScope, $scope, $timeout, $illustration, $t_shirt, $routeParams) {
 		//Define and init var
+		$('[data-toggle="tooltip"]').tooltip()
 		$rootScope.API_URL = 'http://domain.com';
 		$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;
 		var currentTShirtKey = 0;
 		var placeTShirtKey = '';
 		var tShirtColorFirstKey = 0;
 		$scope.hideReviewDesign = false;
 		$scope.tShirtChoiceBackFrontKey = 'front';
 		$scope.tShirtColorKey = tShirtColorFirstKey;
 		/**
 		 * Get param route
 		 * @type {any}
 		 * @private
 		 */
 		var _routeParams = $routeParams;
 		if(typeof _routeParams.tShirt != 'undefined')
 			currentTShirtKey = _routeParams.tShirt - 1;
 		if(typeof _routeParams.place != 'undefined')
 			placeTShirtKey = _routeParams.place;
 		/**
 		 * Get all info TShirt
 		 * @param: id
 		 * @return: object
 		 */
 		$rootScope.placeTshirt = $t_shirt.getTShirtPlace(currentTShirtKey, placeTShirtKey);
 		$scope.tShirtColor = $t_shirt.getTShirtColor(currentTShirtKey);
 		$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;
 		/**
 		 * Set preview size and position
 		 */
 		function setSizePreViewDesign() {
 			var _widthTShirtImage = $('.tshirt-image').width();
 			if(typeof $rootScope.placeTshirt.place == 'undefined')
 				return;
 			var place = $rootScope.placeTshirt.place;
 			switch (place) {
 				case 't_shirt_p_1' :
 					var widthPreview = _widthTShirtImage/2.5;
 					var heihtPreview = _widthTShirtImage/2.5;
 					break;
 				case 't_shirt_p_2' :
 					var widthPreview = _widthTShirtImage/2.5;
 					var heihtPreview = _widthTShirtImage/4.5;
 					break;
 				default:
 					break;
 			}
 			$('#preview-design').css({width: widthPreview, height: heihtPreview});
 		}
 		setSizePreViewDesign();
 		$(window).resize(function () {
 			setSizePreViewDesign();
 		});
 		/**
 		 * Choice color t-shirt
 		 * @param key
 		 */
 		$scope.choiceTShirtColor = function(key) {
 			$scope.tShirtColorKey = key;
 			var tShirtColor = $scope.tShirtColor[key];
 			$rootScope.tShirtColorCode = tShirtColor.code;
 			$scope.tShirtColorName = tShirtColor.name;
 			$scope.tShirtImgFront = tShirtColor.img.front;
 			$scope.tShirtImgBack = tShirtColor.img.back;
 			if($scope.tShirtChoiceBackFrontKey == 'front') {
 				$scope.tShirtImg = $scope.tShirtImgFront;
 			} else {
 				$scope.tShirtImg = $scope.tShirtImgBack;
 			}
 		};
 		/**
 		 * Choice back or front t-shirt
 		 * @param choice
 		 */
 		$scope.choiceTShirtBackFront = function(choice) {
 			if(choice == 'front') {
 				$scope.tShirtImg = $scope.tShirtImgFront;
 			} else {
 				$scope.tShirtImg = $scope.tShirtImgBack;
 			}
 			$scope.tShirtChoiceBackFrontKey = choice;
 		};
 		//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);
 			}
 		};
 		/**
 		 * Open modal design
 		 */
 		$scope.modalTShirtDesign = function() {
 			$('#tshirt-design').modal(
 				{
 					backdrop: 'static',
 					keyboard: false
 				}
 			);
 		};
 		/**
 		 * Close modal design
 		 */
 		$scope.modalClose = function(){
 			$('#tshirt-design').modal('hide');
 		};
 		/**
 		 *Show/Hide review design
 		 */
 		$scope.hideShowReviewDesign = function () {
 			if($scope.hideReviewDesign == true)
 				$scope.hideReviewDesign = false;
 			else
 				$scope.hideReviewDesign = true;
 		}
 	});
 });

app/styles/main.css

Diff comments View file @ 6582efe

 /* Space out content a bit */
 @import "../fonts/font.css";
 /*@import "../fonts/font_canvas/font-canvas.css";*/
 @import url('https://fonts.googleapis.com/css?family=Abel|Amatic+SC|Anton|Aref+Ruqaa|Bitter|Bree+Serif|Bungee|Bungee+Inline|Cabin|Crimson+Text|Dancing+Script|Dosis|Fjalla+One|Gloria+Hallelujah|Hind|Inconsolata|Indie+Flower|Josefin+Sans|Lato|Lobster|Lora|Maitree|Merriweather|Merriweather+Sans|Montserrat|Muli|Noto+Sans|Nunito|Open+Sans|Open+Sans+Condensed:300|Orbitron|Oswald|Oxygen|PT+Sans+Narrow|Permanent+Marker|Playfair+Display|Raleway|Reem+Kufi|Roboto|Shadows+Into+Light|Slabo+27px|Source+Code+Pro|Source+Sans+Pro|Tillana|Titillium+Web|Yanone+Kaffeesatz|Yrsa');
 @import "placedesign.css";
 html{
   height:100%;
   width:100%;
 }
 body {
   font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
   height:100%;
   width:100%;
 }
+a:hover{
+  text-transform: none;
+}
 /*Scroll bar style*/
 ::-webkit-scrollbar {
   -webkit-appearance: none;
   width: 7px;
 }
 ::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
 }
 ::-webkit-scrollbar-thumb {
   border-radius: 4px;
   background-color: rgba(0,0,0,.5);
   -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
 }
 /*End scroll bar style*/
 .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.yellow1{
   background:url("../images/bgbutton1.png") repeat #ff801d;
   color: #ffffff;
   border: 1px solid #ff801d;
 }
 button.yellow2{
   background:url("../images/bgbutton2.png") repeat #ff801d;
   color: #ffffff;
   border: 1px solid #ff801d;
 }
 button.white{
   border: 1px solid #ff801d;
   color: #ff801d;
   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;
 }
 button.none{
   border: 0;
   background-color: transparent;
 }
 #tshirt-container{
   border-left: 1px solid #dcdcdc;
   border-right: 1px solid #dcdcdc;
 }
 /*HEADER*/
 header{
   border-bottom: 1px solid #dcdcdc;
 }
 header .logo{
   padding-left: 0!important;
 }
 header .logo img{
   height: 60px;
 }
 header .social-share{
   list-style: none;
   background-color: #eeeeee;
   display: table;
   padding-left: 0;
   margin-bottom: 0;
 }
 header .social-share li{
   float: left;
   margin: 15px 15px;
   background-color: #c5c5c5;
   width: 30px;
   height: 30px;
   -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
   border-radius: 15px;
   text-align: center;
   padding: 6px 0;
 }
 header .social-share li i{
   font-size: 20px;
   color: #ffffff;
 }
 header .top-menu{
   list-style: none;
   padding-left: 0;
   margin-bottom: 5px;
 }
 header .top-menu li{
   float: left;
   padding: 6px 0;
 }
 header .top-menu li a{
   color: #000000;
   padding: 0 10px;
   border-right: 1px solid #000000;
   font-size: 12px;
 }
+header .top-menu li a:hover{
+  color: #cccccc;
+  text-decoration: none;
+}
 header .top-menu li:last-child a{
   border-right: 0;
 }
 header .top-control{
   list-style: none;
   padding-left: 0;
   margin-bottom: 0;
 }
 header .top-control li{
   float: left;
   margin: 0 10px;
 }
+header .top-control li div{
+  cursor: pointer;
+}
 header .top-control li .bt-yellow{
   background-color: #fe6a00;
   color: #ffffff;
   padding: 3px 10px;
   font-size: 12px;
 }
+header .top-control li .bt-yellow:hover{
+  background-color: #fe913e;
+}
 header .user-control{
   background-color: #888888;
   text-align: center;
+  cursor: pointer;
 }
 header .user-control div{
   font-size: 12px;
   color: #ffffff;
 }
+header .user-control div:first-child:hover{
+  background-color: #b2b1b1;
+}
 header .user-control div:first-child{
   padding: 10px 10px;
 }
 header .user-control div:last-child{
   background-color: #fe6a00;
   padding: 3px 10px;
 }
+header .user-control div:last-child:hover{
+  background-color: #fe913e;
+}
 /*NAVIGATION*/
 nav{
   border-bottom: 1px solid #dcdcdc;
   padding: 5px 0;
 }
 nav h2{
   font-size: 27px;
   margin: 20px 0;
 }
 nav ul{
   list-style: none;
   padding-left: 0;
   margin-bottom: 0;
 }
 nav ul li{
   float: left;
 }
 nav ul li.line{
   border-bottom: 2px dashed #000000;
   width: 34px;
   height: 34px;
 }
 nav ul li.line-action{
   border-bottom: 2px dashed #fe6a00;
 }
 nav ul li.circle{
   width: 70px;
   height: 70px;
   -moz-border-radius: 35px;
   -webkit-border-radius: 35px;
   border-radius: 35px;
   text-align: center;
   font-size: 12px;
   /*margin-left: 26px;*/
   background-color: #999999;
   position: relative;
   display: inline;
   cursor: pointer;
 }
 nav ul li.circle a{
   color: #ffffff;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
   -webkit-transform: translateX(-50%) translateY(-50%);
 }
 nav ul li:hover a{
   text-decoration: none;
   color: #ffffff;
 }
 nav ul li.action{
   background-color: #fe6a00;
 }
 /*ASIDE*/
 aside{
   margin: 10px 0;
 }
 aside .break-left{
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translateX(-50%) translateY(-50%);
   -webkit-transform: translateX(-50%) translateY(-50%);
 }
 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 span:first-child {
   float: left;
   width: 28%
 }
 aside .step .title span:last-child{
   float: left;
   width: 72%;
   padding: 6px 0;
 }
 aside .step .title span:last-child {
 }
 aside .step .title-notice{
   font-size: 13px;
   line-height: 16px;
   margin-bottom: 5px;
 }
 aside .step .title-notice .require{
   font-size: 10px;
 }
 aside .step .step-box{
   border: 2px solid #dcdcdc;
   font-size: 12px;
   position: relative;
 }
 /*Step 1*/
 aside .step .step-box .tshirt-design{
   margin: 4px 4px;
 }
 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;
   text-align: center;
   width: 100%;
 }
 aside .step .step-box .tshirt-design .icon img{
   max-width: 100%;
 }
 aside .step .step-box .tshirt-design .name{
   padding: 2px 4px;
   text-align: center;
 }
 aside .step .step-box .tshirt-design .action{
   /*padding: 10px 10px;*/
   /*float: right;*/
 }
 aside .step .step-box .tshirt-design .action button{
   padding: 6px 8px;
   width: 100%;
 }
 /*Step 2*/
 aside .step .step-box .tshirt-color{
   padding: 6px 6px;
   height: 100%;
   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 6px 6px 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: 26px;
   width: 26px;
   margin: 0;
 }
 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 .choice-color-bottom{
   position: absolute;
   bottom: 0;
   left: 0;
   width: 80%;
   margin: 0 10%;
 }
 aside .step .step-box .choice-color-bottom .color-name{
   width: 100%;
   font-size: 12px;
   text-align: center;
   padding: 4px 0;
 }
 aside .step .step-box .choice-color-bottom .view-more{
   text-align: right;
 }
 /*Step 3*/
 aside .step .step-box .tshirt-saveorder{
   padding: 10px 10px 10px 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: 4px 10px;
+  padding: 4px 35px;
   width: 100%;
 }
 /*Step 4*/
 aside .step .step-box .change-design{
   /*padding: 4px 4px;*/
 }
 aside .step .step-box .change-design table{
   width: 100%;
 }
 aside .step .step-box .change-design table tr{
   border-bottom: 1px dotted #cccccc;
 }
 aside .step .step-box .change-design table tr td{
   padding: 4px 3px;
 }
 aside .step .step-box .change-design table tr td:first-child{
   background-color: #ededed;
 }
 aside .step .step-box .change-design table tr td:last-child{
   background: url("../images/bgbutton2.png");
   color: #ffffff;
   font-size: 15px;
 }
 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;
   cursor: pointer;
   z-index: 99;
 }
 #tshirt-content .tshirt-image{
   padding: 20px 0 0 0;
   position: relative;
   height: 100%;
   width: 100%;
 }
 #tshirt-content .tshirt-image img{
   width: 100%;
 }
 #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: 800px!important;*/
   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: #ff7200;
   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: #fc7500;
   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{
   border: 1px solid #cdcdcd;
   position: relative;
   /*cursor: pointer;*/
   margin-bottom: 10px;
 }
 .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: #ff7200;
   margin: 8px 0;
 }
 .aside .box-design-option li .content .des{
   padding: 3px 10px 3px 0;
 }
 .aside .box-design-option li .content .color-patterns {
   width: 100%;
   border: #bbb solid 1px;
   background: #FFF;
   margin-top: 5px;
   min-height: 65px;
 }
 .aside .box-design-option 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 .box-design-option li .content .color-patterns .color-pattern-item:hover {
   outline: 1px solid #ed1d24;
 }
 .aside .box-design-option li .title .reset-color-patterns {
   cursor: pointer;
 }
 .aside .box-design-option li .title .reset-color-patterns:hover {
   opacity: 0.6;
 }
 .aside .box-design-option li .content .layer-item {
   text-align: center;
   border: 1px #ddd solid;
   background: #FFF;
   padding: 5px;
   font-size: 12px;
   cursor: pointer;
 }
 .aside .box-design-option li .content .layer-item:hover {
   background: #ffcccc;
 }
 /*Design Text*/
 .aside #choice-text{
 }
 .aside #choice-text .content{
   padding: 10px 10px;
 }
 .aside #choice-text .content ul.font-family-box{
   list-style: none;
   margin: 10px 0;
   padding-left: 0;
   height: 180px;
   width: 100%;
   overflow-y: scroll;
   border: 1px solid #c0c0c0;
 }
 .aside #choice-text .content .font-family-box li{
   cursor: pointer;
   padding: 4px 8px;
   border: 0;
   border-bottom: 1px solid #c0c0c0;
   border-right: 1px solid #c0c0c0;
   font-size: 16px;
   margin-bottom: 0;
 }
 .aside #choice-text .content .font-family-box li.active{
   border: 1px solid #fe070f;
 }
 .aside #choice-text .content .spacing-letter{
 }
 .aside #choice-text .content .spacing-letter .text-label{
   font-size: 16px;
   padding: 4px 0;
 }
 .aside #choice-text .content .spacing-letter .box{
   border: 1px solid #8c8c8c;
   box-shadow: 0 0 5px #888888;
   background-color: #f0f0f0;
 }
 .aside #choice-text .content .spacing-letter .item{
   float: left;
 }
 .aside #choice-text .content .spacing-letter .item:hover{
   background-color: #fddad4;
 }
 .aside #choice-text .content .spacing-letter .item i.fa{
   font-size: 22px;
   margin: 0 0;
   color: #000000;
 }
 .aside #choice-text .content .spacing-letter .item-text{
   padding: 6px 20px;
   font-size: 13px;
 }
 .aside #choice-text .content .spacing-letter .item-plus{
   border-right: 1px solid #8c8c8c;
 }
 .aside #choice-text .content .spacing-letter .item-minus{
   border-left: 1px solid #8c8c8c;
 }
 .aside #choice-text .content .spacing-letter .item-plus, .aside #choice-text .content .spacing-letter .item-minus {
   padding: 5px 6px 1px 6px;
   cursor: pointer;
 }
 /*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;
   min-height: 310px;
   padding-bottom: 20px;
 }
 .aside #choice-illustration li .content .illustration-list .illstration-item{
   height: 60px;
   overflow: hidden;
   float: left;
   margin-left: 6px;
   margin-top: 5px;
   margin-bottom: 5px;
   padding: 2px;
   background: #e2e2e2;
   border: solid 2px #d7d7d7;
   cursor: 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: 50px;
   cursor: pointer;
 }
 .illustration-list .footer-bar, .saved-list .footer-bar {
     text-align: center;
     margin-top: 5px;
     bottom: 10px;
     position: absolute;
     width: 100%;
     padding-right: 20px;
 }
 .footer-bar .footer-pagination {
   margin-right: 5px;
   cursor: pointer;
   font-size: 9px;
   color: #FFF;
   background: #666666;
   text-transform: uppercase;
   padding: 2px 5px;
 }
 .footer-bar .footer-pagination:hover {
   background: #999999;
 }
 .tooltip-arrow,
 .red-tooltip + .tooltip > .tooltip-inner {
   background-color: #FFF;
   margin:0;
   padding:0;
 }
 /* Insert image*/
 #btn-choose-image {
   background: #ff0f00;
   cursor: pointer;
   margin: 10px 0px;
   padding: 0 10px;
   color: #FFF;
   font-size: 12px;
 }
 #btn-choose-image:hover {
   background: #f8aeae;
 }
 .aside #choice-image li .content {
   margin: 0 10px;
   padding: 10px 0;
 }
 .aside #choice-image li .content .small-text {
   font-size:10px;
   margin-bottom: 10px;
 }
 .aside #choice-image {
   font-size: 13px;
 }
 .aside #imgLoader{
   display: none;
 }
 .aside #choice-image li .content .list-images {
   height: 300px;
   background: #FFF;
   border: 1px solid #DDD;
 }
 .aside #choice-image li .content .list-images .recent-img{
   height: 60px;
   overflow: hidden;
   float: left;
   margin-left: 6px;
   margin-top: 5px;
   margin-bottom: 5px;
   padding: 2px;
   background: #e2e2e2;
   border: solid 2px #d7d7d7;
   cursor: pointer;
 }
 .aside #choice-image li .content .list-images .recent-img:hover {
   outline: 2px solid #ed1d24;
 }
 .aside #choice-image li .content .list-images .recent-img img {
   width: 50px;
   cursor: pointer;
 }
 /*Design content*/
 .tshirt-design-container{
 }
 .tshirt-design-container .design-content{
   padding: 10px 0;
 }
 .tshirt-design-container .design-content .content{
   width: 100%;
   height: 100%;
   min-height: 600px;
   position: relative;
   padding: 40px 40px;
 }
 .tshirt-design-container .design-content .content .selection-design{
   border: 1px solid #ff0000;
 }
 .tshirt-design-container .agree-design{
   position: absolute;
   right: -16px;
   top: 40%;
   cursor: pointer;
 }
 .tshirt-design-container .agree-design:hover{
   opacity: 0.8;
 }
 .tshirt-design-container .trash-design{
   position: absolute;
   right: 5px;
   bottom: 0;
 }
 .tshirt-design-container .trash-design:hover{
   opacity: 0.5;
 }
 .object-border{
   position: absolute;
   background-color: rgb(0, 108, 255);
   border: 0;
   display:none;
   transform-origin: 0% 0%;
 }
 #object-border-top, #object-border-bottom{
   height: 2px;
 }
 #object-border-right, #object-border-left{
   width: 2px;
 }
 /*FOOTER*/
 footer{
   background-color: #333333;
 }
 footer ul.nav-footer{
   padding-left: 0;
   list-style: none;
   float: left;
   width: 80%;
   margin-bottom: 0
 }
 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;
 }
 footer .logo-bottom{
   float: left;
   width: 20%;
   margin-bottom: 0;
   text-align: right;
 }
 footer .logo-bottom img{
   height: 25px;
   max-width: 100%;
 }
 .footer{
   padding: 15px 0;
   text-align: center;
 }
 /* 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 */
 }
 @media (min-width: 1024px) {
   #tshirt-design .modal-dialog{
     min-width: 1000px;
     width: 1000px;
   }
 }
 /*Mobile responsive*/
 @media (max-width: 762px) {
   .modal-dialog{
     margin: 0 0!important;
   }
   #tshirt-design header .menu-nav{
     overflow-x: scroll!important;
     -webkit-overflow-scrolling: touch;
   }
   #tshirt-design header ul.nav {
     text-align: justify;
     width: 680px;
   }
   #tshirt-design header ul.nav li {
     display: inline-block; /* 6 */
   }
   .tshirt-design-container .design-content .content{
     padding: 14px 14px;
   }
   .tshirt-design-container .design-content{
     padding: 0 0;
   }
   /*Header*/
   header .logo{
     text-align: left;
   }
   header .top-control li{
     margin: 0 4px;
   }
   header .top-menu{
     display: table;
     margin: auto;
   }
   header .social-share{
     display: none;
   }
   header .col-sm-6{
     padding: 0!important;
   }
   header .user-control{
     position: absolute;
     right: 0;
     top: -120%;
   }
   /*Footer*/
   footer ul.nav-footer{
     width: 100%;
   }
   footer .logo-bottom{
     display: none;
   }
 }
 #tshirt-design-saved .subframe-design {
   width: 80%;
   margin: auto;
   margin-top: 100px;
   border: 10px solid rgb(0, 0, 0);
   border: 20px solid rgba(0, 0, 0, .5);
   -webkit-background-clip: padding-box; /* for Safari */
   background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
   background: #FFF;
 }
 #tshirt-design-saved .modal-content button.close {
   margin-right: 103px;
   font-size: 41px;
   margin-top: -8px;
 }
 #tshirt-design-saved .subframe-design .nav-tabs {
   background: rgba(0, 0, 0, .5);
   border-bottom: 1px solid #F5F5F5;
 }
 #tshirt-design-saved .subframe-design .nav-tabs li a {
   text-decoration: none;
   background-color: #CCC;
   cursor: pointer;
   margin-right: 10px;
   padding: 2px 30px;
   color: #000;
   font-weight: 600;
   border-bottom: 1px solid #F5F5F5
 }
 #tshirt-design-saved .subframe-design .nav-tabs li.active a {
   background: #F5F5F5;
   color: #fe070f;
 }
 #tshirt-design-saved .subframe-design .tab-content {
   background: #F5F5F5;
     width: 100%;
     min-height: 400px;
 }
 #tshirt-design-saved .saved-list {
   width: 100%;
   border: #bbb solid 1px;
   background: #FFF;
   margin-top: 0px;
   min-height: 400px;
   padding: 10px;
 }
 #tshirt-design-saved .saved-list .saved-item{
   width: 100px;
   height: 100px;
   overflow: hidden;
   float: left;
   margin-left: 6px;
   margin-top: 5px;
   margin-bottom: 5px;
   padding: 2px;
   background: #e2e2e2;
   border: solid 2px #d7d7d7;
   cursor: pointer;
 }
 #tshirt-design-saved .saved-list .saved-item:hover {
   outline: 2px solid #ed1d24;
 }
 #tshirt-design-saved .saved-list .saved-item img {
   width: 100px;
   cursor: pointer;
 }
 #tshirt-design-saved .saved-list .saved-item button {
   background: #ff0f00;
   color: #FFF;
   border: 0;
   position: absolute;
   margin-left: -5px;
   margin-top: -5px;
   padding: 0 5px;
 }
 #tshirt-design-saved .saved-list .saved-item button:hover {
   background: #ffcccc;
 }
 #tshirt-design-saved .saved-list .footer-bar {
   bottom: 20px;
   width: 75%;
 }

app/views/main.html

Diff comments View file @ 6582efe

1	<div ng-controller="MainCtrl" class="col-sm-10 col-sm-offset-1" id="tshirt-container">	1	<div ng-controller="MainCtrl" class="col-sm-10 col-sm-offset-1" id="tshirt-container">
2	<div class="row">	2	<div class="row">
3	<header class="clearfix">	3	<header class="clearfix">
4	<div class="col-sm-4 logo">	4	<div class="col-sm-4 logo">
5	<img src="images/logo.png" alt="Logo Mobile World" />	5	<img src="images/logo.png" alt="Logo Mobile World" />
6	</div>	6	</div>
7	<div class="col-sm-2">	7	<div class="col-sm-2">
8	<ul class="social-share clearfix">	8	<ul class="social-share clearfix">
9	<li>	9	<li>
10	<a href="#">	10	<a href="#">
11	<i class="fa fa-facebook"></i>	11	<i class="fa fa-facebook"></i>
12	</a>	12	</a>
13	</li>	13	</li>
14	<li>	14	<li>
15	<a href="#">	15	<a href="#">
16	<i class="fa fa-twitter"></i>	16	<i class="fa fa-twitter"></i>
17	</a>	17	</a>
18	</li>	18	</li>
19	</ul>	19	</ul>
20	</div>	20	</div>
21	<div class="col-sm-6 clearfix" style="padding-right: 0">	21	<div class="col-sm-6 clearfix" style="padding-right: 0">
22	<div class="pull-left">	22	<div class="pull-left">
23	<ul class="top-menu clearfix">	23	<ul class="top-menu clearfix">
24	<li>	24	<li>
25	<a href="#">はじめての方へ</a>	25	<a href="#">はじめての方へ</a>
26	</li>	26	</li>
27	<li>	27	<li>
28	<a href="#">料金表</a>	28	<a href="#">料金表</a>
29	</li>	29	</li>
30	<li>	30	<li>
31	<a href="#">新規会員登録</a>	31	<a href="#">新規会員登録</a>
32	</li>	32	</li>
33	</ul>	33	</ul>
34	<ul class="top-control clearfix">	34	<ul class="top-control clearfix">
35	<li>	35	<li>
36	<div class="bt-yellow">	36	<div class="bt-yellow">
37	<i class="fa fa-shirtsinbulk" aria-hidden="true"></i> DESIGN　デザイン作成	37	<i class="fa fa-shirtsinbulk" aria-hidden="true"></i> DESIGN　デザイン作成
38	</div>	38	</div>
39	</li>	39	</li>
40	<li>	40	<li>
41	<div class="bt-yellow">	41	<div class="bt-yellow">
42	<i class="fa fa-shopping-cart" aria-hidden="true"></i> ショッピングカート	42	<i class="fa fa-shopping-cart" aria-hidden="true"></i> ショッピングカート
43	</div>	43	</div>
44	</li>	44	</li>
45	</ul>	45	</ul>
46	</div>	46	</div>
47	<div class="pull-right">	47	<div class="pull-right">
48	<div class="user-control">	48	<div class="user-control">
49	<div>	49	<div>
50	マイページ	50	マイページ
51	</div>	51	</div>
52	<div class="login">	52	<div class="login">
53	<i class="fa fa-lock" aria-hidden="true"></i> ログイン	53	<i class="fa fa-lock" aria-hidden="true"></i> ログイン
54	</div>	54	</div>
55	</div>	55	</div>
56	</div>	56	</div>
57	</div>	57	</div>
58	</header>	58	</header>
59	<nav class="clearfix">	59	<nav class="clearfix">
60	<div class="col-sm-12">	60	<div class="col-sm-12">
61	<h2 class="pull-left">加工箇所を選択してデザインしてください。</h2>	61	<h2 class="pull-left">加工箇所を選択してデザインしてください。</h2>
62	<ul class="pull-right">	62	<ul class="pull-right">
63	<li class="circle"><a href="#">商品に戻る</a></li>	63	<li class="circle" data-toggle="tooltip" data-placement="bottom" title="前の画面に戻るときはこのボタンをお使いください。"><a href="#">商品に戻る</a></li>
64	<li class="line"></li>	64	<li class="line"></li>
65	<li class="circle"><a href="#">加工方法に戻る</a></li>	65	<li class="circle" data-toggle="tooltip" data-placement="bottom" title="前の画面に戻るときはこのボタンをお使いください。"><a href="#">加工方法に戻る</a></li>
66	<li class="line line-action"></li>	66	<li class="line line-action"></li>
67	<li class="circle action"><a href="#">デザインする</a></li>	67	<li class="circle action"><a href="#">デザインする</a></li>
68	</ul>	68	</ul>
69	</div>	69	</div>
70	</nav>	70	</nav>
71	<div style="height: 29px; width: 100%; background: url('images/linebg.png') repeat-x">	71	<div style="height: 29px; width: 100%; background: url('images/linebg.png') repeat-x">
72		72
73	</div>	73	</div>
74	<article class="clearfix">	74	<article class="clearfix">
75	<aside class="col-sm-5">	75	<aside class="col-sm-5">
76	<div class="clearfix row" style="position: relative">	76	<div class="clearfix row" style="position: relative">
77	<div class="step col-xs-6">	77	<div class="step col-xs-6">
78	<div class="title clearfix">	78	<div class="title clearfix">
79	<span><img src="images/stepicon1.png" alt="1" /></span> <span>デザインを作る</span>	79	<span><img src="images/stepicon1.png" alt="1" /></span> <span>デザインを作る</span>
80	</div>	80	</div>
81	<div class="step-box">	81	<div class="step-box">
82	<div class="tshirt-design clearfix">	82	<div class="tshirt-design clearfix">
83	<div class="icon">	83	<div class="icon">
84	<img src="images/t-shirt_icon/tshirt1.gif" alt="icon t-shirt" />	84	<img src="images/t-shirt_icon/tshirt1.gif" alt="icon t-shirt" />
85	</div>	85	</div>
86	<div class="name">	86	<div class="name">
87	背中背中 (28x22)	87	背中背中 (28x22)
88	</div>	88	</div>
89	<div class="action">	89	<div class="action">
90	<button class="yellow2" ng-click="modalTShirtDesign()">	90	<button class="yellow2" ng-click="modalTShirtDesign()">
91	デザインを作る	91	デザインを作る
92	</button>	92	</button>
93	</div>	93	</div>
94	</div>	94	</div>
95	</div>	95	</div>
96	</div>	96	</div>
97		97
98	<!--<!– BREAK DOWN–>-->	98	<!--<!– BREAK DOWN–>-->
99	<div class="text-center break-left">	99	<div class="text-center break-left">
100	<img src="images/arrow1.png" alt="arrow" />	100	<img src="images/arrow1.png" alt="arrow" />
101	</div>	101	</div>
102		102
103	<!-- STEP 2-->	103	<!-- STEP 2-->
104	<div class="step col-xs-6">	104	<div class="step col-xs-6">
105	<div class="title clearfix">	105	<div class="title clearfix">
106	<span><img src="images/stepicon2.png" alt="2" /></span><span> アイテムカラーを変更する</span>	106	<span><img src="images/stepicon2.png" alt="2" /></span><span> アイテムカラーを変更する</span>
107	</div>	107	</div>
108	<div class="step-box clearfix" style="min-height: 150px;">	108	<div class="step-box clearfix" style="min-height: 150px;">
109	<div class="tshirt-color">	109	<div class="tshirt-color">
110	<ul class="choice-color clearfix">	110	<ul class="choice-color clearfix">
111	<li ng-repeat="(key,color) in tShirtColor" ng-click="choiceTShirtColor(key)" ng-class="key == tShirtColorKey ? 'action' : ''">	111	<li ng-repeat="(key,color) in tShirtColor" ng-click="choiceTShirtColor(key)" ng-class="key == tShirtColorKey ? 'action' : ''">
112	<div ng-style="{'background-color' : color.code}"></div>	112	<div ng-style="{'background-color' : color.code}"></div>
113	</li>	113	</li>
114	</ul>	114	</ul>
115	</div>	115	</div>
116	<div class="choice-color-bottom">	116	<div class="choice-color-bottom">
117	<div class="color-name" ng-bind="tShirtColorName"></div>	117	<div class="color-name" ng-bind="tShirtColorName"></div>
118	<div class="view-more">	118	<div class="view-more">
119	在庫確認	119	在庫確認
120	</div>	120	</div>
121	</div>	121	</div>
122	</div>	122	</div>
123	</div>	123	</div>
124	</div>	124	</div>
125		125
126		126
127	<!-- BREAK DOWN-->	127	<!-- BREAK DOWN-->
128	<div class="text-center break-down">	128	<div class="text-center break-down">
129	<img src="images/arrow2.png" alt="arrow" />	129	<img src="images/arrow2.png" alt="arrow" />
130	</div>	130	</div>
131		131
132	<!-- STEP 3-->	132	<!-- STEP 3-->
133	<div class="step">	133	<div class="step">
134	<div class="step-box clearfix">	134	<div class="step-box clearfix">
135	<div class="tshirt-saveorder">	135	<div class="tshirt-saveorder">
136	<div class="clearfix">	136	<div class="clearfix">
137	<div class="action">	137	<div class="action">
138	<button class="white">	138	<button class="white">
139	このデザインを保存する	139	このデザインを保存する
140	</button>	140	</button>
141	</div>	141	</div>
142	<div class="action">	142	<div class="action">
143	<button class="yellow1">	143	<button class="yellow1">
144	このデザインで注文する	144	このデザインで注文する
145	</button>	145	</button>
146	</div>	146	</div>
147	</div>	147	</div>
148		148
149	</div>	149	</div>
150	</div>	150	</div>
151		151
152	<!-- BREAL LINE-->	152	<!-- BREAL LINE-->
153	<div class="text-center break-line">	153	<div class="text-center break-line">
154	<hr />	154	<hr />
155	</div>	155	</div>
156		156
157	<!-- STEP 4-->	157	<!-- STEP 4-->
158	<div class="step">	158	<div class="step">
159	<div class="title-notice">	159	<div class="title-notice">
160	<strong>商品・デザインの変更はこちら</strong> <span class="require">作業中のデザインは破棄されます</span>	160	<strong>商品・デザインの変更はこちら</strong> <span class="require">作業中のデザインは破棄されます</span>
161	</div>	161	</div>
162	<div class="step-box">	162	<div class="step-box">
163	<div class="change-design">	163	<div class="change-design">
164	<table>	164	<table>
165	<tr>	165	<tr>
166	<td class="text-center">商品</td>	166	<td class="text-center">商品</td>
167	<td>MENドライカノコポロシャツ・ポケツキ半袖（ホワイト）</td>	167	<td>MENドライカノコポロシャツ・ポケツキ半袖（ホワイト）</td>
168	<td class="text-center">	168	<td class="text-center">
169	<button class="none"><i class="fa fa-angle-right" aria-hidden="true"></i> 変更</button>	169	<button class="none"><i class="fa fa-angle-right" aria-hidden="true"></i> 変更</button>
170	</td>	170	</td>
171	</tr>	171	</tr>
172	<tr>	172	<tr>
173	<td width="10%" class="text-center">加工方法</td>	173	<td width="10%" class="text-center">加工方法</td>
174	<td width="70%">シルク：胸中央 (27×27)</td>	174	<td width="70%">シルク：胸中央 (27×27)</td>
175	<td width="20%" class="text-center">	175	<td width="20%" class="text-center">
176	<button class="none"><i class="fa fa-angle-right" aria-hidden="true"></i> 変更</button>	176	<button class="none"><i class="fa fa-angle-right" aria-hidden="true"></i> 変更</button>
177	</td>	177	</td>
178	</tr>	178	</tr>
179	</table>	179	</table>
180	</div>	180	</div>
181	</div>	181	</div>
182	</div>	182	</div>
183	<!-- STEP 5- finish-->	183	<!-- STEP 5- finish-->
184	<div class="step">	184	<div class="step">
185	<div class="finish-design">	185	<div class="finish-design">
186	<button class="white">	186	<button class="white">
187	自分で保存したデザインを呼び出す <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>	187	自分で保存したデザインを呼び出す <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
188	</button>	188	</button>
189	</div>	189	</div>
190		190
191	</div>	191	</div>
192	</div>	192	</div>
193	</aside>	193	</aside>
194	<section id="tshirt-content" class="col-sm-7 text-center">	194	<section id="tshirt-content" class="col-sm-7 text-center">
195	<div class="switch-border-design" ng-click="hideShowReviewDesign()">	195	<div class="switch-border-design" ng-click="hideShowReviewDesign()">
196	<i class="fa fa-square-o" aria-hidden="true"></i> 枠線を消す	196	<i class="fa fa-square-o" aria-hidden="true"></i> 枠線を消す
197	</div>	197	</div>
198	<div class="tshirt-image">	198	<div class="tshirt-image">
199	<img ng-src="{{ tShirtImg }}" alt="" />	199	<img ng-src="{{ tShirtImg }}" alt="" />
200	<div ng-class="placeTshirt.place" id="preview-design" ng-style="hideReviewDesign == true ? {border: 0} : {}" ng-show="(placeTshirt.face === tShirtChoiceBackFrontKey)" ng-click="modalTShirtDesign()">	200	<div ng-class="placeTshirt.place" id="preview-design" ng-style="hideReviewDesign == true ? {border: 0} : {}" ng-show="(placeTshirt.face === tShirtChoiceBackFrontKey)" ng-click="modalTShirtDesign()">
201	<img ng-src="{{outputImage}}" ng-show="outputImage"/>	201	<img ng-src="{{outputImage}}" ng-show="outputImage"/>
202	</div>	202	</div>
203	</div>	203	</div>
204	<div class="tshirt-choice">	204	<div class="tshirt-choice">
205	<ul>	205	<ul>
206	<li ng-class="'front' === tShirtChoiceBackFrontKey ? 'focus' : ''">	206	<li ng-class="'front' === tShirtChoiceBackFrontKey ? 'focus' : ''">
207	<div>前</div>	207	<div>前</div>
208	<div class="image" ng-click="choiceTShirtBackFront('front')">	208	<div class="image" ng-click="choiceTShirtBackFront('front')">
209	<img ng-src="{{ tShirtImgFront }}" alt="" />	209	<img ng-src="{{ tShirtImgFront }}" alt="" />
210	</div>	210	</div>
211		211
212	</li>	212	</li>
213	<li ng-class="'back' === tShirtChoiceBackFrontKey ? 'focus' : ''">	213	<li ng-class="'back' === tShirtChoiceBackFrontKey ? 'focus' : ''">
214	<div>後</div>	214	<div>後</div>
215	<div class="image" ng-click="choiceTShirtBackFront('back')">	215	<div class="image" ng-click="choiceTShirtBackFront('back')">
216	<img ng-src="{{ tShirtImgBack }}" alt="" />	216	<img ng-src="{{ tShirtImgBack }}" alt="" />
217	</div>	217	</div>
218		218
219	</li>	219	</li>
220	</ul>	220	</ul>
221	</div>	221	</div>
222	</section>	222	</section>
223	</article>	223	</article>
224	<footer class="clearfix">	224	<footer class="clearfix">
225	<ul class="nav-footer">	225	<ul class="nav-footer">
226	<li><a href="#">店舗検索</a></li>	226	<li><a href="#">店舗検索</a></li>
227	<li><a href="#">お客様窓口</a></li>	227	<li><a href="#">お客様窓口</a></li>
228	<li><a href="#">企業情報</a></li>	228	<li><a href="#">企業情報</a></li>
229	<li><a href="#">採用情報</a></li>	229	<li><a href="#">採用情報</a></li>
230	<li><a href="#">プライバシーポリシー</a></li>	230	<li><a href="#">プライバシーポリシー</a></li>
231	</ul>	231	</ul>
232	<div class="logo-bottom">	232	<div class="logo-bottom">
233	<img src="images/logobottom.png" alt="Logo" />	233	<img src="images/logobottom.png" alt="Logo" />
234	</div>	234	</div>
235	</footer>	235	</footer>
236	<div class="footer text-center">	236	<div class="footer text-center">
237	Copyright © CREVASSE - All Rights Reserved	237	Copyright © CREVASSE - All Rights Reserved
238	</div>	238	</div>
239		239
240	<!--MODAL CONTENT-->	240	<!--MODAL CONTENT-->
241	<div ng-include="designFrameView"></div>	241	<div ng-include="designFrameView"></div>
242	</div>	242	</div>
243		243
244		244
245	</div>	245	</div>
246		246