TRUONG / T-Shats Frontend

Browse Code »

Commit 5fe93ca887dd697a13a618ad20ed0ecedba31413

Authored by Dang YoungWorld 2016-11-09 19:11:09 +0900

1 parent 87c93a0297

Exists in master and in 2 other branches

Theme modal

Showing 3 changed files with 133 additions and 7 deletions Inline Diff

app/scripts/controllers/main.js
app/styles/main.css
app/views/tshirt-design.html

app/scripts/controllers/main.js

Diff comments View file @ 5fe93ca

 define(['app'], function (app) {
 	'use strict';
 	app.controller('MainCtrl', function ($scope) {
 		$scope.modalTShirtDesign = function() {
 			// console.log($('#tshirt-design').length);
-			$('#tshirt-design').modal();
+			$('#tshirt-design').modal(
+				{
+					backdrop: 'static',
+					keyboard: false
+				}
+			);
+		};
+		$scope.modalClose = function(){
+			$('#tshirt-design').modal('hide');
 		}
 	});
 });

app/styles/main.css

Diff comments View file @ 5fe93ca

 /* Space out content a bit */
 @import "../fonts/font.css";
 body {
   font-family: 'Hiragino Kaku Gothic Pro';
 }
 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;
 }
 #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;
 }
 nav h2{
   font-size: 24px;
 }
 nav ul{
   list-style: none;
   padding-left: 0;
 }
 nav ul li{
   margin-left: 2px;
   float: left;
   padding: 6px 12px;
   background-color: #999999;
 }
 nav ul li a{
   color: #ffffff;
 }
 nav ul li.action{
   color: #ffffff;
   background-color: #ed1d24;
 }
 /*ASIDE*/
 aside{
 }
 aside .break-down{
   padding: 0 0;
 }
 aside .break-down i.fa{
   font-size: 35px;
   color: #ff0000;
 }
 aside .break-line{
 }
 aside .break-line hr{
   border-top: 1px dotted #cccccc;
 }
 aside .step{
   margin: 0 0;
 }
 aside .step .title{
   font-size: 13px;
   line-height: 16px;
   font-weight: bold;
 }
 aside .step .title-notice{
   font-size: 13px;
   line-height: 16px;
 }
 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 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%;
 }
 aside .step .step-box .tshirt-color ul.choice-color li{
   margin: 0 10px 0 0;
   border: 1px solid #cccccc;
   padding: 2px 2px;
   float: left;
 }
 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%;
 }
 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;
 }
 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%);
 }
 /*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{
 }
 aside .step .finish-design button{
   width: 100%;
   padding: 6px 10px;
 }
 /*DESIGN CONTENT*/
 #tshirt-content{
 }
 #tshirt-content .tshirt-image{
 }
 #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;
 }
 #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;
 }
+/*MODAL Design*/
+#tshirt-design{
+  background-color: #000;
+}
+#tshirt-design .modal-dialog{
+  width: 75%;
+  margin: 0 auto;
+}
+#tshirt-design .modal-dialog .modal-content{
+  background-color: transparent;
+  border-radius: 0;
+  border: 0;
+}
+#tshirt-design .modal-dialog .modal-content .modal-header{
+  padding: 0 0 10px 0;
+  border-bottom: 0;
+}
+#tshirt-design .modal-dialog .modal-content .modal-body{
+  background-color: #ffffff;
+  padding: 0 0;
+}
+#tshirt-design header{
+  border-bottom: 1px solid #DDDDDD;
+}
+#tshirt-design header ul.nav{
+  padding-left: 0;
+  list-style: none;
+}
+#tshirt-design header ul.nav li{
+  float: left;
+  padding: 10px 15px;
+  border-right: 1px solid #DDDDDD;
+}
+/*Aside modal*/
+.aside{
+}
+.aside #choice-design-option{
+  list-style: none;
+  padding-left: 0;
+}
 /* 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/tshirt-design.html

Diff comments View file @ 5fe93ca

1	<!-- Modal -->	1	<!-- Modal -->
2	<div class="modal fade" id="tshirt-design" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">	2	<div class="modal fade" id="tshirt-design" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		3
3	<div class="modal-dialog" role="document">	4	<div class="modal-dialog" role="document">
4	<div class="modal-content">	5	<div class="modal-content">
5	<div class="modal-header">	6	<div class="modal-header">
6	<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>	7	<button class="" ng-click="modalClose()">Close</button>
7	</div>	8	</div>
8	<div class="modal-body">	9	<div class="modal-body">
9	<h1>Content Design</h1>	10	<header>
10	</div>	11	<ul class="nav">
11	<div class="modal-footer">	12	<li>
12	<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>	13	<i class="fa fa-jpy" aria-hidden="true"></i> 文字
13	<button type="button" class="btn btn-primary">Save changes</button>	14	</li>
		15	<li>
		16	<i class="fa fa-btc" aria-hidden="true"></i> イラスト・イメージ
		17	</li>
		18	<li>
		19	<i class="fa fa-money" aria-hidden="true"></i> 自分の画像・写真
		20	</li>
		21	<li>
		22	<i class="fa fa-minus-circle" aria-hidden="true"></i> 全消去
		23	</li>
		24	</ul>
		25	</header>
		26	<section class="tshirt-design-container clearfix">
		27	<div class="aside col-xs-4">
		28	<ul id="choice-design-option">
		29	<li>
		30	<div class="title">
		31	<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
		32	文字を追加
		33	</div>
		34	<div class="clearfix">
		35	<div class="col-xs-2 text-center">
		36	<i class="fa fa-jpy" aria-hidden="true"></i>
		37	</div>
		38	<div class="col-xs-10">
		39	書体を選んでお好きな文字を入力できます
		40	</div>
		41	</div>
		42	</li>
		43	<li>
		44	<div class="title">
		45	<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
		46	イラストやイメージを追加
		47	</div>
		48	<div class="clearfix">
		49	<div class="col-xs-2 text-center">
		50	<i class="fa fa-btc" aria-hidden="true"></i>
		51	</div>
		52	<div class="col-xs-10">
		53	自由にお使いいただけるデザイン画像をご用意しました
		54	</div>
		55	</div>
		56	</li>
		57	<li>
		58	<div class="title">
		59	<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
		60	自分の画像・写真を追加
		61	</div>
		62	<div class="clearfix">
		63	<div class="col-xs-2 text-center">
		64	<i class="fa fa-jpy" aria-hidden="true"></i>
		65	</div>
		66	<div class="col-xs-10">
		67	ご自分で用意した画像をアップロードして使えます
		68	</div>
		69	</div>
		70	</li>
		71	<li>
		72	<div class="title">
		73	<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
		74	おすすめデザインを使う
		75	</div>
		76	<div class="clearfix">
		77	<div class="col-xs-2 text-center">
		78	<i class="fa fa-jpy" aria-hidden="true"></i>
		79	</div>
		80	<div class="col-xs-10">
		81	おすすめデザインデータをご自由にカスタマイズしてお使いください
		82	</div>
		83	</div>
		84	</li>
		85
		86	</ul>
		87	</div>
		88	<div class="design-contetn col-xs-8">
		89
		90	</div>
		91	</section>
14	</div>	92	</div>
15	</div>	93	</div>
16	</div>	94	</div>
17	</div>	95	</div>