add adbanner widget 5

assets/stylesheets/template/modules/ad_banner.scss

@@ -131,28 +131,23 @@
 }
 
 ul.button-mid{
-  width: 100%;
-  top: 50%;
-  position: absolute;
-  padding: 0;
-  margin-top: 0;
-  margin: 0;
-  transform: translateY(-50%);
-  z-index: 999;
-
 	.prev-button{
 	  transition: 0.4s;
 		position: relative;
 		float:left;
     left: 0.5rem;
     width: 2.5rem;
-    /* background: url(/assets/next.png) no-repeat center; */
     height: 2.5rem;
     font-size: 2.2rem;
     color: #ffffff;
     background: rgba(0,0,0,0.2);
     text-align: center;
     line-height: 2.5rem;
+    top: 50%;
+    position: absolute;
+    transform: translateY(-50%);
+    z-index: 999;
+
     &:hover {
       background: rgba(0,0,0,0.1);
     }
@@ -169,13 +164,17 @@ ul.button-mid{
     position: relative;
     right: 0.5rem;
     width: 2.5rem;
-    /* background: url(/assets/next.png) no-repeat center; */
     height: 2.5rem;
     font-size: 2.2rem;
     color: $theme-white;
     background: rgba(0,0,0,0.2);
     text-align: center;
     line-height: 2.5rem;
+    top: 50%;
+    position: absolute;
+    transform: translateY(-50%);
+    z-index: 999;
+
     &:hover {
       background: rgba(0,0,0,0.1);
     }
@@ -282,4 +281,61 @@ ul.button-mid{
   .cycle-slide-active {
     z-index: 101 !important;
   }
+}
+
+//Widget 5
+.ba-banner-widget-5 {
+  background: url(/assets/BANNER-BG-01.jpg) 0 0 no-repeat;
+  .slide-img { padding: 1rem 1.5rem; }
+  .slide-content {
+    z-index: 200;
+    font-family: $main-font;
+    padding-top: 0.5rem;
+    padding-left: 0;
+    
+    h3 {
+      font-size: 1rem;
+      margin: 0.5em 0;
+      color: #12517a;
+    }
+
+    div {
+      white-space: normal;
+      word-break: break-all;
+      font-size: 1rem;
+      color: #373634;
+      padding: 0 2em 0.5em 0;
+    }
+  }
+  .controlplay { display: none; }
+  .banner-pager {
+    right: 1rem;
+    top: 0;
+    width: unset;
+   li { height: unset; width: unset; }
+   a { background: #a0d2f3;}
+  }
+
+  @media(max-width: $screen-sm) {
+    .slide-content { 
+      padding: 0.5em 1em; 
+      position: relative;
+      background: #a0d2f3;
+      h3 { font-size: 1em; }
+      div { font-size: 0.75em; }
+    }
+    .controlplay { 
+      right: 0; 
+      a { padding: 0 5px;}
+      a i { font-size: 0.75em; }
+    }
+  }
+  @media(max-width: $screen-sm -1) {
+    ul.button-mid.next-button, ul.button-mid.prev-button{
+      top: 35%;
+      transform: translateY(-35%);
+    }
+    .slide-content h3, .slide-content div { color: $theme-white; }
+    .w-ba-banner__wrap { overflow: visible;}
+  }
 }

assets/stylesheets/template/template.scss

@@ -33,6 +33,11 @@
 .response-container {
   position: relative;
 
+  @media (min-width: $screen-xs) {
+    width: 100%;
+    padding: 0;
+  }
+
   @media (min-width: $screen-sm) {
     width: 100%;
   }

modules/ad_banner/_ad_banner_widget5.html.erb

@@ -0,0 +1,59 @@
+<div class="w-ba-banner ba-banner-widget-5">
+  <div class="w-ba-banner__wrap  cycle-slideshow"
+      data-list="images"
+      data-level="0"
+      data-cycle-slides=".w-ba-banner__slide"
+      data-cycle-log="false"
+      data-overlay=".w-ad-banner__overlay_{{subpart-id}}"
+      data-cycle-auto-height="{{base_image}}"
+      data-cycle-speed="{{speed}}"
+      data-cycle-timeout="{{timeout}}"
+      data-cycle-fx="{{ad_fx}}"
+      data-cycle-pager=".banner_caption_{{subpart-id}}"
+      data-pager-template="<li><a></a></li>"
+      data-pager-active-class="active-slide"
+      data-cycle-swipe=true
+      data-cycle-swipe-fx="scrollHorz"
+    >
+    <div class="w-ba-banner__slide {{class}}"
+        data-link="{{link}}"
+        data-cycle-title="{{title}}"
+        data-cycle-desc="{{context}}"
+        data-target="{{target}}"
+      >
+       <div class="slide-img col-md-4 col-sm-4">
+       <a href="{{link}}" target="{{target}}" title="{{alt_title}}">
+           <img class="w-ba-banner__image banner-responsive" src="{{image_link}}" alt="{{alt_title}}">
+       </a>
+       </div>
+       <div class="slide-content col-md-8 col-sm-8">
+       <a href="{{link}}" target="{{target}}" title="{{alt_title}}"><h3>{{title}}</h3></a>
+       <div>{{context}}</div>
+       </div>
+
+    </div>
+  </div>
+    <div class="w-ba-banner__caption banner-pager banner_caption_{{subpart-id}}"></div>
+    <ul class="controlplay"><a class="resume-slide" title = "<%= (I18n.locale.to_s =="zh_tw") ? "繼續播放" : "resume" %>"><i></i></a><a class="pause-slide" title = "<%= (I18n.locale.to_s =="zh_tw") ? "暫停播放" : "pause"%>"><i></i></a></ul>
+	<ul class="button-mid">
+    <i class="fa fa-angle-left prev-button" aria-hidden="true" title = "<%= (I18n.locale.to_s =="zh_tw") ? "上一張" : "prev" %>"></i>
+    <i class="fa fa-angle-right next-button" aria-hidden="true" title = "<%= (I18n.locale.to_s =="zh_tw") ? "下一張" : "next" %>"></i>
+	</ul>
+</div>
+<script>
+	var flag = 1;
+	$('.pause-slide').click(function(){
+		$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('pause');
+	});
+	$('.resume-slide').click(function(){
+		$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle('resume');
+	});
+	$('.next-button').off('click').on('click',function(){
+		$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("next");
+		
+	})
+	$('.prev-button').off('click').on('click',function(){
+		$(this).parent("ul").parent('.w-ba-banner').find(".cycle-slideshow").cycle("prev");
+  })
+  
+</script>

modules/ad_banner/info.json

@@ -39,7 +39,14 @@
                 "en" : "4. Pro Carousel ( image, Youtube video, navigation )"
             },
             "thumbnail" : "thumb.png"
+        },
+        {
+            "filename" : "ad_banner_widget5",
+            "name" : {
+                "zh_tw" : "5. 橫幅文字輪播 ( 圖片, 文字區域, 導航圖示 )",
+                "en" : "5. Carousel ( image, title, description, navigation )"
+                },
+            "thumbnail" : "thumb.png"
         }
-
     ]
 }