임시커밋

src/main/java/com/style24/front/biz/web/TsfMypageController.java

@@ -1511,7 +1511,7 @@ public class TsfMypageController extends TsfBaseController {
 	 * @since 2021. 03. 24
 	 */
 	@GetMapping("/review/form")
-	public ModelAndView mypageReviewForm(Review review, Device device) {
+	public ModelAndView mypageReviewForm(Review review) {
 		ModelAndView mav = new ModelAndView();
 
 		review.setCustNo(TsfSession.getInfo().getCustNo());
@@ -1587,10 +1587,8 @@ public class TsfMypageController extends TsfBaseController {
 		TscPageRequest pageable2 = new TscPageRequest((review.getPageNo2() > 0 ? review.getPageNo2() - 1 : 0), review.getPageSize2(), review.getPageUnit2());
 		pageable2.setTotalCount(reviewService.getAlreadyReviewCount(review));
 
-		review.setPageable2(pageable2);
-		log.info("pageable2: {}", pageable2);
-		log.info("totalCount2 {}", pageable2.getTotalCount());
 		review.setReviewExpireDay(eventService.getGoodsReviewPointExpireDays(TscConstants.Site.STYLE24.value()));
+		review.setPageable2(pageable2);
 		result.set("paging2", review);
 		result.set("alreadyReviewCount", reviewService.getAlreadyReviewCount(review));
 		result.set("dataList2", reviewService.getAlreadyReviewList(review));

src/main/java/com/style24/persistence/domain/Review.java

@@ -104,6 +104,7 @@ public class Review extends TscBaseDomain {
 	private int prevReviewSq;
 	private int nextReviewSq;
 	private int reviewExpireDay;
+	private String kmcKey;
 
 	@JsonFormat(with = JsonFormat.Feature.ACCEPT_SINGLE_VALUE_AS_ARRAY)
 	private String[] orgFileNmArr;

src/main/java/com/style24/persistence/mybatis/shop/TsfReview.xml

@@ -1083,6 +1083,8 @@
 			 , RA.FILE_GB
 			 , RA.ORG_FILE_NM
 			 , RA.SYS_FILE_NM
+			 , RA.KMC_KEY
+			 , RA.FILE_GB
 			 , RA.DEL_YN
 		FROM TB_REVIEW R LEFT JOIN TB_REVIEW_ATTACH RA ON R.REVIEW_SQ = RA.REVIEW_SQ 
 		WHERE 1=1
@@ -1091,6 +1093,10 @@
 		 AND R.DEL_YN = 'N'
 		 AND R.DISP_YN = 'Y'
 		 AND RA.DEL_YN = 'N'
+		 AND (RA.FILE_GB  = 'I'
+		      OR
+		      RA.FILE_GB = 'M' AND R.CONFIRM_YN = 'Y'  AND  RA.KMC_KEY IS NOT NULL
+		     )
 	</select>
 	
 	<select id="getAdminConfirmCount" parameterType="Review" resultType="Review">

src/main/webapp/WEB-INF/views/web/mypage/MypageReviewCreateFormWeb.html

@@ -573,8 +573,8 @@ var fnChooseFile = function(obj) {
 						}
 				); 
 		}else if((new RegExp("mp4", "i")).test(file.name)){
-			$(".pics").eq(0).find('removes').append("<input type='hidden' name='kufKey' id='kufKey"+(picLength+1)+"'>");
-			$(".pics").eq(0).find('removes').append("<input type='hidden' name='kmcKey' id='kmcKey"+(picLength+1)+"'>");
+			$(".pics").children().eq(0).append("<input type='hidden' name='kufKey' id='kufKey"+(picLength+1)+"'>");
+			$(".pics").children().eq(0).append("<input type='hidden' name='kmcKey' id='kmcKey"+(picLength+1)+"'>");
 			//gagaKollus.upload('Review', file, $('#kufKey'+(picLength+1)));
 		}else{
 			mcxDialog.alertC('첨부할 수 없는 파일 형식입니다.', {

src/main/webapp/WEB-INF/views/web/mypage/MypageReviewFormWeb.html

@@ -327,7 +327,7 @@
 						html+='										<a onclick="cfGoodsReviewDetail(\''+item.goodsCd+'\',\'\', \'Y\',\''+item.reviewSq+'\');">';
 						html+='											<div class="pic">';
 						if (attachList[i].fileGb == 'M') {
-							html+='												<span class="thumb mov" style="background-image:url(' + reviewUrl + '/' + attachList[i].sysFileNm + ');"></span>';
+							html+='												<span class="thumb mov" style="background-image:url(' + _kollusMediaUrl + '/' + attachList[i].kmcKey + '?player_version=html5);"></span>';
 						}else{
 							html+='												<span class="thumb" style="background-image:url(' + reviewUrl + '/' + attachList[i].sysFileNm + ');"></span>';
 						}

src/main/webapp/ux/pc/css/common.css

@@ -783,7 +783,7 @@ content: "〉";font-size: 12px;padding-left: 8px;
 .fgRDJH {padding: 0px 40px;font-size: 0px;box-sizing: border-box;}
 	@media (max-width: 1919px) and (min-width: 1401px){.fgRDJH {padding-left: 38px;padding-right: 38px;}}
 
-.itemLike {position: absolute;top: 20px;right: 18px;font-size: 0px;z-index: 10;width: 23px;height: 23px; background: url('/images/pc/ico_like.png');background-size: 46px;background-position:0px 0px;background-repeat: no-repeat;}
+.itemLike {position: absolute;top: 20px;right: 18px;font-size: 0px;z-index: 99;width: 23px;height: 23px; background: url('/images/pc/ico_like.png');background-size: 46px;background-position:0px 0px;background-repeat: no-repeat;}
 .itemLike::before, .itemLike::after {
 	content: "";position: absolute;top: 0px;right: 0px;width: 100%;height: 100%;
 	background-repeat: no-repeat;background-position: right top;background-size: contain;opacity: 0;transition: opacity 200ms ease 0s;
@@ -794,15 +794,15 @@ content: "〉";font-size: 12px;padding-left: 8px;
 .itemLike.active::before {opacity: 1;}
 .itemLike.likeit::before {opacity: 1;}
 
-.itemLink {position: relative;text-decoration: none;color: rgb(102, 102, 102);cursor: pointer;display: block;}
+.itemLink {z-index:20;position: relative;text-decoration: none;color: rgb(102, 102, 102);cursor: pointer;display: block;}
 .itemPic {position: relative;width: 100%;margin-bottom:20px;padding-top: 150%;font-size: 0px;overflow: hidden;background: #ffffff;}
 .itemPic::after {content: "";display: block;position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;opacity: 0.03;background-color: rgb(0, 0, 0);}
 .itemPic .pd_img,
 .itemPic .pd_mov {position: absolute;width: 100%;height: auto;top: 50%;left: 0px;transform: translateY(-50%);}
-.itemPic .pd_mov {z-index: 3;height: 100%;}
-.itemPic .pd_img {z-index: 2;transition: 0.5s;}
+.itemPic .pd_mov {z-index: 2;height: 100%;}
+.itemPic .pd_img {z-index: 1;transition: 0.5s;}
 /* .itemPic .pd_img {position: absolute;width: 100%;width: auto; height: auto;max-height: 500px;top: 50%;left: 50%;transform: translate(-50%,-50%);} */
-.itemOpt{z-index:3;position: absolute;bottom: -120px; left: 0; right: 0; width: 100%; height:111px;padding: 32px 0; text-align:center; color: #fff; background: rgb(0 0 0 / 0.8); }
+.itemOpt{z-index:3; pointer-events:none;position: absolute;bottom: -120px; left: 0; right: 0; width: 100%; height:111px;padding: 32px 0; text-align:center; color: #fff; background: rgb(0 0 0 / 0.8); }
 .itemOpt p{font-size: 12px;line-height: 1.2;padding-bottom: 15px;}
 .itemOpt ul{display: block;margin: 0 auto;width: auto;}
 .itemOpt ul li{font-size: 14px;line-height: 1.2;display: inline-block;margin-left: 10px;}
@@ -827,7 +827,7 @@ content: "〉";font-size: 12px;padding-left: 8px;
 
 /* common.css로 이동 예정 */
 .itemcolorchip {margin:20px 5px 0px; max-width: 208px;}
-.itemcolorchip [class*="chip_"] {position: relative;display: inline-block;width: 15px;height: 15px;font-size: 0; vertical-align: middle; margin:0 0 0 4px;}
+.itemcolorchip [class*="chip_"] {position: relative;display: inline-block;width: 15px;height: 15px;font-size: 0; vertical-align: middle; margin:0 0 0 4px;border-radius: 50%;box-sizing: border-box;}
 .itemcolorchip [class*="chip_"]:before {content: "";display: inline-block;width: 100%;height: 100%;border-radius: 50%;box-sizing: border-box;}
 .itemcolorchip [class*="chip_"]:first-child {margin-left:0}
 
@@ -1234,7 +1234,39 @@ input[type="file"] {
 
 /* sort */
 
-
+/* datePicker */
+/* jquery ui datepicker month year picker */
+.ui-datepicker { font-family:arial,verdana,sans-serif }
+.ui-datepicker .ui-datepicker-select-month td ,
+.ui-datepicker .ui-datepicker-select-year td {
+	line-height: 3.4em;
+}
+.ui-datepicker .ui-datepicker-select-month td span,
+.ui-datepicker .ui-datepicker-select-month td a,
+.ui-datepicker .ui-datepicker-select-year td span,
+.ui-datepicker .ui-datepicker-select-year td a  {
+	font-size: 1.5em;
+	text-align: center;
+}
+.ui-datepicker .ui-datepicker-select-year td.outoffocus {
+	opacity: 0.5;
+}
+.ui-datepicker .ui-datepicker-prev { left: 15px;cursor: pointer;  }
+.ui-datepicker .ui-datepicker-next { right: 15px;cursor: pointer;  }
+.ui-datepicker .ui-datepicker-header { height: 40px  }
+.ui-widget.ui-widget-content { width: 300px;padding:5px 8px;border-radius: 0   }
+.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active{
+	border-color: #fff;background: #fff;font-size: 14px;padding: .6em 0.5em;color:#454545;text-align: center; 
+}
+.ui-datepicker-today a.ui-state-active, .ui-datepicker-current-day a.ui-state-active{  background-color:rgba(159,121,82,1);   }
+.ui-state-default:hover { background-color:rgba(159,121,82,0.6);color:#fff;   }
+.ui-widget-header {  font-size: 18px;font-weight: normal;line-height: 40px;background: transparent;border-width: 0;border-radius: 0;   }
+.ui-datepicker th {  border-bottom:1px #9f7952 solid;color:#9f7952; font-weight: normal;font-size: 14px }
+
+.ui-datepicker-prev:hover, .ui-datepicker-next:hover { border-width:0 ;background: transparent;  }
+.ui-datepicker-prev:before, .ui-datepicker-next:before { content: "";position:absolute;top:50%;left:50%;transform: translate3d(-50%,-50%,0);width: 8px;height: 16px;vertical-align: middle;background:url(../images/icon_bg.png) no-repeat -81px 0;   }
+.ui-icon {display: none;}
+.ui-datepicker-next:before {background-position: -95px 0}
 
 
 /* tab */

src/main/webapp/ux/pc/css/layout.css

@@ -112,7 +112,7 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 .depth_menu.brand .head_category .menu .row ul li {margin-left:4px; width:182px;}
 .depth_menu.brand .head_category .menu .row ul li:first-child {margin-left:0}
 .depth_menu.brand .head_category .menu .row ul li a {position:relative; display:table-cell; width:182px; height:80px; text-align:center; vertical-align:middle;}
-.depth_menu.brand .head_category .menu .row ul li a img {display:inline-block; z-index:1; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out;}
+.depth_menu.brand .head_category .menu .row ul li a img {display:inline-block; width: 74%; z-index:1; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out;}
 .depth_menu.brand .head_category .menu .row ul li a span {display:none; position:absolute; left:0; top:0; right:0; bottom:0; width:100%; height:100%; padding:10px; box-sizing:border-box; border:1px solid #222; background:#fff; color:#222; font-size:18px; font-weight:500; text-align:center; z-index:2;}
 .depth_menu.brand .head_category .menu .row ul li a span em {position:absolute; left:0; top:50%; width:100%; transform:translateY(-50%);}
 .depth_menu.brand .head_category .menu .row ul li a:hover span,
@@ -2613,7 +2613,7 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 	.pd_detail .thumb img,
 	.pd_detail .thumb video {position:absolute; left:0; top:50%; width:100%; transform:translateY(-50%) ; z-index:2;}
 	.pd_detail .movbox {position: relative;height: 0;padding-top: 100%;padding-bottom:50.25%;overflow: hidden;transition: all 300ms ease;transform: scale(1);}
-	.pd_detail .movbox iframe{position: absolute;left: 0;right: 0;top: 0;bottom: 0;width: 100%;height: 100%;z-index: 1;}
+	.pd_detail .movbox iframe{position: absolute;left: 0;right: 0;top: 0;bottom: 0;width: 100%;height: 100%;z-index: 1;pointer-events:none;}
 	.pd_detail .btn_popup {display:inline-block; padding:0px; box-sizing:border-box;}
 	.pd_detail .btn_popup span {color:#888; font-size:12px; font-weight:200; border-bottom:1px solid #888; /*vertical-align:top;*/}
 
@@ -3058,6 +3058,11 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 		.pd_desc_wrap .item_descrp .area_option .opt_wrap.absbottom {position:relative; top:auto; bottom:auto; right:auto;}
 	}
 
+	.pd_desc_wrap .btn_box .ui_row {margin-bottom: 0;}
+	.pd_desc_wrap .btn_box .ui_row [class^='ui_col_']:first-child {margin-right: 0;}
+	.pd_desc_wrap .btn_box .ui_row [class^='ui_col_']:last-child {margin-left: 0;}
+	.pd_desc_wrap .btn_box .btn {height:60px; font-size:18px; font-weight:300;}
+	.pd_desc_wrap .btn_box .btn:disabled{background:#aaa; border-color:#aaa; opacity:1;}
 
 	/* pd_popup */
 	.modal.pd_pop a.close-modal:last-child {display: none;}
@@ -3445,6 +3450,11 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 		.full_pop.pd_descrp_pop .full_pop_fix_r {padding-left:20px; padding-right:20px;}
 	}
 
+	.full_pop.pd_descrp_pop .btn_box .ui_row {margin-bottom: 0;}
+	.full_pop.pd_descrp_pop .btn_box .ui_row [class^='ui_col_']:first-child {margin-right: 0;}
+	.full_pop.pd_descrp_pop .btn_box .ui_row [class^='ui_col_']:last-child {margin-left: 0;}
+	.full_pop.pd_descrp_pop .btn_box .btn {height:60px; font-size:18px; font-weight:300;}
+	.full_pop.pd_descrp_pop .btn_box .btn:disabled{background:#aaa; border-color:#aaa; opacity:1;}
 
 	/* pd_pop > 상품문의 페이지 */
 	.pd_qnalist_pop {}
@@ -3757,7 +3767,7 @@ ul.maintabs li [class^='box_depth'] {display:none; position:absolute; left:100%;
 	.br_sch_result .brand_banner_list ul {margin-top:-20px;}
 	.br_sch_result .brand_banner_list ul li {float:left; width:calc((100% - 140.1px)/8); margin-left:20px; margin-top:20px; background:#f5f5f5;}
 	.br_sch_result .brand_banner_list ul li:nth-child(8n - 7) {margin-left:0;}
-	.br_sch_result .brand_banner_list ul li a {display:block; position:relative; width:100%; height:0; padding-bottom:70.244%; background-repeat:no-repeat; background-position:50% 50%; box-sizing:border-box;}
+	.br_sch_result .brand_banner_list ul li a {display:block; position:relative; width:100%; height:0; padding-bottom:70.244%; background-repeat:no-repeat; background-position:50% 50%; box-sizing:border-box; background-size:80%;}
 	.br_sch_result .brand_banner_list ul li a span {display:none; position:absolute; top:0%; left:0%; width:100%; height:100%; background:#f5f5f5; border:1px solid #222; z-index:1;}
 	.br_sch_result .brand_banner_list ul li a span em {position:absolute;  top:50%; left:0%; width:100%; padding:10px; transform:translateY(-50%); color:#222; font-size:20px; font-weight:300; text-align:center; word-break:break-word; box-sizing:border-box;}
 	.br_sch_result .brand_banner_list ul li a:hover span,

src/main/webapp/ux/pc/css/main.css

@@ -415,14 +415,14 @@
 .main .wrap .content.main_pick {}
 .main_pick .cont_head {padding-bottom:60px;}
 .main_pick .cont_body {padding:0;position:relative;}
-.main_pick .cont_body .post-pick-nav {width:1250px; height:52px; background:#ffffff;margin:0 auto; cursor:pointer; padding:0 20px;}
+.main_pick .cont_body .post-pick-nav {width:1250px; height:auto; background:#ffffff;margin:0 auto; cursor:pointer; padding:0 20px;}
 .main_pick .post-pick-nav .swiper-button-next, 
 .main_pick .post-pick-nav .swiper-button-prev {position:absolute; top:50%; transform:translateY(-50%); width:13px; height:24px; margin:0; background-image:url('/images/pc/ico_arr_sm.png');}
 .main_pick .post-pick-nav .swiper-button-prev {left:0;}
 .main_pick .post-pick-nav .swiper-button-next {right:0;}
-.main_pick .post-pick-nav .swiper-slide{height:auto; text-align:center; cursor:pointer; /* border-bottom:2px solid transparent; */}
-.main_pick .post-pick-nav .swiper-slide img {opacity:0.4;}
-.main_pick .post-pick-nav .swiper-slide.swiper-slide-thumb-active img{opacity:1;}
+.main_pick .post-pick-nav .swiper-slide{width:auto; height:auto; text-align:center; cursor:pointer; /* border-bottom:2px solid transparent; */}
+.main_pick .post-pick-nav .swiper-slide img {opacity:0.2; width: 100%; height:auto;}
+.main_pick .post-pick-nav .swiper-slide.swiper-slide-thumb-active img{opacity:1; }
 .main_pick .post-pick-for {margin-top:60px; box-sizing:border-box; border:1px solid #dddddd;}
 .main_pick .post-pick-for::after {content:'';display:block; clear:both;}
 .main_pick .post-pick-for .pick_look {float:left; width:38.2022%; background:#888888;}

src/main/webapp/ux/pc/css/mcxdialog_ui.css

@@ -0,0 +1,331 @@
+/**
+ * Mcx Dialog Mobile v0.1.0
+ * Copyright (C) 2018 mcx
+ * https://github.com/code-mcx/mcx-dialog-mobile
+ */
+.dialog-mobile-bg {
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 19;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0.3);
+	-ms-transform: translate3d(0, 0, 0);
+	-webkit-transform: translate3d(0, 0, 0);
+	transform: translate3d(0, 0, 0);
+}
+/*alert confirm*/
+.dialog-mobile {
+	padding: 0 40px 40px 40px;
+	text-align:center;
+	position: fixed;
+	top: 50%;
+	left: 0;
+	z-index: 20;
+	min-width:200px;
+	background-color: #FFFFFF;
+	border-radius: 0px;
+	-ms-transform: translate3d(0, 0, 0);
+	-webkit-transform: translate3d(0, 0, 0);
+	transform: translate3d(0, 0, 0);
+}
+.dialog-mobile .dialog-title {
+    padding: 0.8em 1em 0.5em;
+    text-align: center;
+    color: #333333;
+	font-size: 18px;
+    font-weight: 500;
+    border-radius: 5px 5px 0 0;
+}
+.dialog-mobile .dialog-content {
+	position: relative;
+	padding:50px 0 40px 0;
+	line-height: 2em;
+	text-align: left;
+	color: #000;
+	font-size:15px;
+	text-align:center;
+}
+.dialog-mobile .dialog-content em {
+	color:#df6400
+}
+.dialog-mobile .dialog-button,
+.dialog-mobile .dialog-sure-button,
+.dialog-mobile .dialog-cancel-button {
+	display:inline-block;
+	position: relative;
+	margin:0 5px;
+	padding:0 30px;
+	min-width: 70px;
+	height: 38px;
+	line-height: 38px;
+	text-align: center;
+	font-size:14px;
+	cursor:pointer;
+	border-radius:0px;
+}
+.dialog-mobile .dialog-button{
+	color: #fff;
+	background:#000;
+	border:1px solid #000;
+	min-width:100px;
+}
+.dialog-mobile .dialog-cancel-button {
+	color: #000;
+	background: #fff;
+	border:1px solid #999;
+	min-width:100px;
+}
+.dialog-mobile .dialog-sure-button{
+	color: #fff;
+	background:#000;
+	border:1px solid #000;
+	min-width:100px;
+}
+.dialog-mobile button[i='1']{
+	color: #000 !important;
+	background:#fff !important;
+	border:1px solid #777;
+	min-width:100px;
+}
+
+/* 닫기 아이콘 */
+.dialog-close-btn {
+	position:absolute;
+	top:0;
+	right:0;
+	padding:20px;
+	width: 17px;
+	height: 17px;
+	cursor:pointer;
+	background:url('/image/btn_top_close.png') no-repeat 50% 50%;
+}
+
+/*bottom dialog*/
+.dialog-mobile-bottom {
+	position: fixed;
+	left: 0;
+	bottom: 0;
+	z-index: 10001;
+	width: 100%;
+	color: #333333;
+	background-color: #EEEEEE;
+}
+.dialog-mobile-bottom .bottom-btn-item {
+	text-align: center;
+}
+.bottom-btn-item .dialog-item-btn {
+	background: #FFFFFF;
+	padding: 0.5em 0;
+	border-bottom: 1px solid #EEEEEE;
+}
+.bottom-btn-item .dialog-item-btn:last-child {
+	border-bottom: none;
+}
+.dialog-mobile-bottom .dialog-cancel-btn {
+	margin-top: 0.6em;
+	text-align: center;
+	background: #FFFFFF;
+	padding: 0.5em 0;
+}
+/*toast*/
+.dialog-mobile-toast {
+	position: fixed;
+	bottom: 5em;
+}
+.dialog-mobile-toast .toast-content {
+	padding: 0.5em 1em;
+	color: #FFFFFF;
+	border-radius: 2px;
+	background-color: #333333;
+}
+/*loading*/
+.mobile-loading-bg {
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 10000;
+	width: 100%;
+	height: 100%;
+	background-color: rgba(0, 0, 0, 0.3);
+	-webkit-transform: translate3d(0, 0, 0);
+	transform: translate3d(0, 0, 0);
+}
+.mobile-loading {
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 10001;
+	min-width: 2em;
+	min-height: 2em;
+	padding: 0.8em 1.6em;
+	text-align: center;
+	border-radius: 2px;
+	color: #FFFFF0;
+	background-color: #0A0A0A;
+	-webkit-transform: translate3d(0, 0, 0);
+	transform: translate3d(0, 0, 0);
+}
+/*animation*/
+.animation-zoom-in, .animation-zoom-out,
+.animation-bottom-in, .animation-bottom-out,
+.animation-bg-fadeIn {
+	-webkit-animation-duration: 0.3s;
+	-webkit-animation-fill-mode: both;
+	animation-duration: 0.3s;
+	animation-fill-mode: both;
+}
+.animation-fade-in, .animation-fade-out {
+	-webkit-animation-duration: 1s;
+	-webkit-animation-timing-function: ease-out;
+	-webkit-animation-fill-mode: both;
+	animation-duration: 1s;
+	animation-timing-function: ease-out;
+	animation-fill-mode: both;
+}
+.animation-zoom-in {
+	-webkit-animation-name: zoomIn;
+	animation-name: zoomIn;
+}
+.animation-zoom-out {
+	-webkit-animation-name: zoomOut;
+	animation-name: zoomOut;
+}
+.animation-fade-in {
+	-webkit-animation-name: fadeIn;
+	animation-name: fadeIn;
+}
+.animation-fade-out {
+	-webkit-animation-name: fadeOut;
+	animation-name: fadeOut;
+}
+.animation-bottom-in {
+	-webkit-animation-name: bottomIn;
+	animation-name: bottomIn;
+}
+.animation-bottom-out {
+	-webkit-animation-name: bottomOut;
+	animation-name: bottomOut;
+}
+.animation-bg-fadeIn {
+	-webkit-animation-name: fadeIn;
+	animation-name: fadeIn;
+}
+
+@-webkit-keyframes zoomIn {
+	from{
+		opacity: 0;
+		-webkit-transform: scale(0, 0);
+	}
+	to{
+		opacity: 1;
+		-webkit-transform: scale(1, 1);
+	}
+}
+@-webkit-keyframes zoomOut {
+	from{
+		opacity: 1;
+		-webkit-transform: scale(1, 1);
+	}
+	90%{
+		-webkit-transform: scale(0.3, 0.3);
+	}
+	to{
+		opacity: 0;
+		-webkit-transform: scale(0, 0);
+	}
+}
+@keyframes zoomIn {
+	from{
+		opacity: 0;
+		transform: scale(0, 0);
+	}
+	to{
+		opacity: 1;
+		transform: scale(1, 1);
+	}
+}
+@keyframes zoomOut {
+	from{
+		opacity: 1;
+		transform: scale(1, 1);
+	}
+	90%{
+		transform: scale(0.3, 0.3);
+	}
+	to{
+		opacity: 0;
+		transform: scale(0, 0);
+	}
+}
+@-webkit-keyframes fadeIn {
+	from{
+		opacity: 0;
+	}
+	to{
+		opacity: 1;
+	}
+}
+@-webkit-keyframes fadeOut {
+	from{
+		opacity: 1;
+	}
+	30%{
+		opacity: 0.3;
+	}
+	to{
+		opacity: 0;
+	}
+}
+@keyframes fadeIn {
+	from{
+		opacity: 0;
+	}
+	to{
+		opacity: 1;
+	}
+}
+@keyframes fadeOut {
+	from{
+		opacity: 1;
+	}
+	30%{
+		opacity: 0.3;
+	}
+	to{
+		opacity: 0;
+	}
+}
+@-webkit-keyframes bottomIn {
+	from{
+		bottom: -1000px;
+	}
+	to{
+		bottom: 0;
+	}
+}
+@-webkit-keyframes bottomOut {
+	from{
+		bottom: 0;
+	}
+	to{
+		bottom: -1000px;
+	}
+}
+@keyframes bottomIn {
+	from{
+		bottom: -1000px;
+	}
+	to{
+		bottom: 0;
+	}
+}
+@keyframes bottomOut {
+	from{
+		bottom: 0;
+	}
+	to{
+		bottom: -1000px;
+	}
+}

src/main/webapp/ux/pc/js/common-ui.js

@@ -84,10 +84,19 @@ $(document).ready(function() {
 				var fileReader = new FileReader();
 				fileReader.onload = (function(e) {
 					var file = e.target;
-					$("<span class=\"pics\">" +
+					if(file.result.indexOf("video/mp4") > -1){
+						$("<span class=\"pics\">" +
+						"<ifram class=\"picsThumbs\" src=\"" + e.target.result + "\" />" +
+						"<br/><span class=\"removes\">Removes image</span>" +
+						"</span>").insertAfter("#fileAdd");
+					}else{
+						$("<span class=\"pics\">" +
 						"<img class=\"picsThumbs\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" +
 						"<br/><span class=\"removes\">Removes image</span>" +
 						"</span>").insertAfter("#fileAdd");
+					}
+					
+					
 					$(".removes").click(function(){
 						$(this).parent(".pics").remove();
 					});