Updated.

assets/stylesheets/template/base/_variables.scss

@@ -14,197 +14,63 @@ $theme-gray-darker: #242424;
 $theme-white: #fff;
 $theme-red: #d20001;
 $theme-blue: #003d7e;
-
 $theme-color-main: #333333;
 $theme-color-second: #E4002B;
 $theme-color-third: #ed4c43;
 $theme-color-green:  #288E8E;
-
 // Font stacks
 $main-font: "Calibri","Barlow", "Roboto", "微軟正黑體", "Helvetica Neue", Helvetica, sans-serif;
 $sub-font: "Calibri","Roboto", "微軟正黑體", "Helvetica Neue", Helvetica, sans-serif;
-
 @font-face {font-family: "IndustryW00-Medium"; src: url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.eot"); src: url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.woff") format("woff"), url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/b8e20323f8f36e06f87745c93c45afcd.svg#IndustryW00-Medium") format("svg"); }
-
 // Font sizes
 $font-15: 0.9375rem;
 $font-13:1.2rem;
-
 $font-h1: 1.6rem;
 $font-h2: 1.5rem;
 $font-h3: 1.2rem;
 $font-h4: 1.1rem;
 $font-h5: 1rem;
 $font-h6: 0.9rem;
-
 //
 // Modules
 // --------------------------------------------------
 // ## commonly use in all widgets
-
 // Font sizes
 $w-widget-title-font-size: 1.5rem;
-
 // Colors
 $w-border-color: $theme-gray-lighter;
-
 //
 // AD banner Module
 // --------------------------------------------------
-
 // Font sizes
 $w-caption-font-size: 1.2rem;
 $w-caption-desc: 1rem;
-
 //
 // Announcement Module
 // --------------------------------------------------
-
 // Font sizes
 $w-title-font-size-small: 0.75rem;
 $w-subtitle-font-size: 0.75rem;
 $w-meta-font-size: 0.75rem;
-
 $w-table-th-font-size: 0.75em;
 $w-table-td-font-size: 0.75em;
-
 $i-title-font-size-large: 2em;
-
 // colors
-
 $link-color: $theme-color-main;
 $link-hover-color: lighten($theme-color-main, 10%);
-
 $table-th-bgcolor: $theme-color-main;
-
 //
 // Archive Module
 // --------------------------------------------------
-
 // Font sizes
 $w-item-heading-font-size: 0.85rem;
-
 //
 // Member Module
 // --------------------------------------------------
-
 $border-width: 0.25em;
-
+.response-content {
-
+  justify-self: auto;
-
+}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 
 .response-content {
   justify-self: auto;

modules/calendar/_calendar_widget1.html.erb

@@ -28,9 +28,7 @@
     <div class="calendar-events" style="display: none;">
         <div class="close_box">X</div>
         <div class="event-header"></div>
-        <div class="event-containers">
+        <div class="event-containers"></div>
-            
-        </div>
     </div> 
 </div>
 <%= stylesheet_link_tag "calendar_widget1" %>

modules/calendar/_calendar_widget2.html.erb

@@ -42,9 +42,7 @@
                 </div>
             </div>
             <div class="event-wraper">
-                <div class="event-containers">
+                <div class="event-containers"></div>
-                    
-                </div>
             </div>
         </div>
     </div> 

modules/video_pro/_video_pro_widget1.html.erb

@@ -0,0 +1,46 @@
+<div class="w-video_data video_data-widget-1">
+  <ul class="video_data_wrap col-sm-12" data-list="videos" data-level="0">
+    <li class="video_data col-xs-12 col-sm-4" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
+      <a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">
+        <img class="video_snapshot" src="{{snapshot_url}}"/>
+        <div class="video_info">
+          <div class="video_group_time">{{video_post_agency}} | {{video_postdate}}</div>
+          <div data-list="video_tags" data-level="1" class="video_tag"><div>{{video_tag}}</div></div>
+          <div class="video_title"><h4>{{video_title}}</h4></div>
+          <div class="video_desc">{{video_desc}}</div>
+          <div class="view_info">
+            <span><img src="{{hd_icon_url}}" alt="HD"></span>
+            <span><img src="{{view_icon_url}}" alt="{{view_count_trans}}>">x {{view_count}}</span>
+          </div>
+        </div>
+      </a>
+    </li>
+  </ul>
+  <div class="clearfix"></div>
+  <style>
+    .video_data_wrap{
+      display: flex;
+      flex-wrap: wrap;
+    }
+    .video_group_time{
+      color: #4487cb;
+    }
+    .video_tag{
+      color: #e4374a;
+    }
+    .video_title h4{
+      font-size: 1.6em;
+      font-weight: bold;
+      margin-bottom: 0;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+    .view_info{
+      float: right;
+    }
+    .view_info img{
+      margin-right: 5px;
+    }
+  </style>
+</div>

modules/video_pro/_video_pro_widget_jqcloud1.html.erb

@@ -0,0 +1,50 @@
+<div class="w-video_data video_data-widget-2">
+  <%= javascript_include_tag 'video_pro/wordcloud2.js' %>
+  <div style="width: 100%; height: 40vw; max-height: 17em;" class="my_favorite_latin_words jqcloud wordcloud2"><div>
+  <script>
+    var container_{{subpart-id}} = $('[data-subpart-id="{{subpart-id}}"] .my_favorite_latin_words');
+    var jqcloud_words_{{subpart-id}} = {{jqcloud_words}};
+    var text_map_{{subpart-id}} = {};
+    var max_value_{{subpart-id}} = 1;
+    $.each(jqcloud_words_{{subpart-id}}, function(i, v){
+      if (max_value_{{subpart-id}} < v.weight){
+        max_value_{{subpart-id}} = v.weight;
+      }
+    });
+    var list_{{subpart-id}} = $.map(jqcloud_words_{{subpart-id}}, function(v){
+      text_map_{{subpart-id}}[v.text] = v.link;
+
+
+      return [[v.text, Math.ceil(v.weight/max_value_{{subpart-id}}*3), v.link]];
+    });
+    container_{{subpart-id}}.on('wordcloudstop', function (e) {
+      $(this).children('span').each(function (i, v) {
+        var text = $(this).html();
+        $(this).html('<a title="'+ list_{{subpart-id}}[i][0] + '" style="color: inherit" href="' + list_{{subpart-id}}[i][2]  +'">' + text + '</a>');
+      });
+    });
+    function wordCloud_{{subpart-id}}(){
+      var width = container_{{subpart-id}}.width();
+      var height = container_{{subpart-id}}.height();
+      container_{{subpart-id}}.attr('width', width);
+      WordCloud(container_{{subpart-id}}[0], {
+        list: list_{{subpart-id}},
+        gridSize: 3,
+        weightFactor: jqcloud_words_{{subpart-id}}.length * Math.min(width, 1200) / 770,
+        rotateRatio: 0,
+        shuffle: false,
+        drawOutOfBound: false,
+        shrinkToFit: true,
+        shape: 'square',
+        color: 'random-dark',
+        ellipticity: height/(width-40)
+      });
+    }
+    $(window).resize(function(){
+      wordCloud_{{subpart-id}}();
+    })
+    $(document).ready(function(){
+     wordCloud_{{subpart-id}}();
+    });
+  </script>
+</div>

modules/video_pro/info.json

@@ -0,0 +1,69 @@
+{
+    "widgets" : [
+        {
+            "filename" : "video_pro_widget1",
+            "force_cover": "true",
+            "name" : {
+                "zh_tw" : "1. 影片列表1 ( 縮圖, 影片資訊, 頁面連結)",
+                "en" : "1. Video List 1 ( snapshot, video info, page link)"
+                },
+            "thumbnail" : "thumb.png"
+        },
+        {
+            "filename" : "video_pro_widget_jqcloud1",
+            "force_cover": "true",
+            "name" : {
+                "zh_tw" : "2. 影片文字雲(標籤)",
+                "en" : "2. Video Word Cloud(tags)"
+                },
+            "thumbnail" : "thumb.png"
+        }
+    ],
+    "frontend" : [
+        {
+            "filename" : "video_pro_index1",
+            "force_cover": "true",
+            "name" : {
+                "zh_tw" : "1. 影片列表1 ( 縮圖, 影片資訊, 頁面連結)",
+                "en" : "1. Video List 1 ( snapshot, video info, page link)"
+                },
+            "thumbnail" : "thumb.png"
+        },
+        {
+            "filename" : "video_pro_index2",
+            "force_cover": "true",
+            "name" : {
+                "zh_tw" : "2. 影片列表1 + 類別 + 搜尋 ( 縮圖, 影片資訊, 頁面連結)",
+                "en" : "2. Video List 1 + Category filter + Search ( snapshot, video info, page link)"
+                },
+            "thumbnail" : "thumb.png"
+        },
+        {
+            "filename" : "video_pro_index2_tag",
+            "force_cover": "true",
+            "name" : {
+                "zh_tw" : "2-1. 影片列表1 + 標籤 + 搜尋 ( 縮圖, 影片資訊, 頁面連結)",
+                "en" : "2-1. Video List 1 + Tag filter + Search ( snapshot, video info, page link)"
+                },
+            "thumbnail" : "thumb.png"
+        },
+        {
+            "filename" : "video_pro_index3",
+            "force_cover": "true",
+            "name" : {
+                "zh_tw" : "3. 影片列表2 + 懸浮框 ( 縮圖, 影片資訊)",
+                "en" : "3. Video List 2 + Modal window ( snapshot, video info)"
+                },
+            "thumbnail" : "thumb.png"
+        },
+        {
+            "filename" : "video_pro_index_post_agency1",
+            "force_cover": "true",
+            "name" : {
+                "zh_tw" : "4. 影片列表3 + 發佈單位篩選 ( 縮圖, 影片資訊, 關鍵字, 頁面連結)",
+                "en" : "4. Video List 3 + Post Agency filter ( snapshot, video info, keyword, page link)"
+                },
+            "thumbnail" : "thumb.png"
+        }
+    ]
+}

modules/video_pro/video_pro_index1.html.erb

@@ -0,0 +1,48 @@
+<div class="i-video_data video_data-index-1">
+  <h3 class="i-annc__page-title">{{page-title}}</h3>
+  <ul class="video_data_wrap col-sm-12" data-list="videos" data-level="0">
+    <li class="video_data col-xs-12 col-sm-4" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
+      <a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">
+        <img class="video_snapshot" src="{{snapshot_url}}"/>
+        <div class="video_info">
+          <div class="video_group_time">{{video_post_agency}} | {{video_postdate}}</div>
+          <div data-list="video_tags" data-level="1" class="video_tag"><div>{{video_tag}}</div></div>
+          <div class="video_title"><h4>{{video_title}}</h4></div>
+          <div class="video_desc">{{video_desc}}</div>
+          <div class="view_info">
+            <span><img src="{{hd_icon_url}}" alt="HD"></span>
+            <span><img src="{{view_icon_url}}" alt="{{view_count_trans}}>">x {{view_count}}</span>
+          </div>
+        </div>
+      </a>
+    </li>
+  </ul>
+  <div class="clearfix"></div>
+  <style>
+    .video_data_wrap{
+      display: flex;
+      flex-wrap: wrap;
+    }
+    .video_group_time{
+      color: #4487cb;
+    }
+    .video_tag{
+      color: #e4374a;
+    }
+    .video_title h4{
+      font-size: 1.6em;
+      font-weight: bold;
+      margin-bottom: 0;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+    .view_info{
+      float: right;
+    }
+    .view_info img{
+      margin-right: 5px;
+    }
+  </style>
+</div>
+{{pagination_goes_here}}

modules/video_pro/video_pro_index2.html.erb

@@ -0,0 +1,146 @@
+<div class="i-video_data video_data-index-2">
+  <h3 class="i-annc__page-title">{{page-title}}</h3>
+  <div class="video_filter_area col-sm-12">
+    <form>
+      <div class="category_box col-sm-6">
+        <select name="category" id="filter_category_box" data-list="categories" data-level="0">
+          {{option}}
+        </select>
+      </div>
+      <div class="search_box col-sm-6">
+        <div class="search_input">
+          <div class="search_keyword"><input accesskey="S" type="text" id="search" name="search" value="{{search_value}}" placeholder="{{search_placeholder}}"></div>
+          <div class="search_submit"><input type="submit" value="{{search_text1}}" title="{{search_text2}}"></div>
+        </div>
+      </div>
+    </form>
+    <div class="clearfix"></div>
+  </div>
+  <div class="page_tab_box col-sm-12">
+    <ul class="video_tablist" data-list="page_tabs" data-level="0">
+      <li class="{{klass}}"><a title="{{title}}" href="{{url}}">{{title}}</a></li>
+    </ul>
+  </div>
+  <ul class="video_data_wrap col-sm-12" data-list="videos" data-level="0">
+    <li class="video_data col-xs-12 col-sm-4" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
+      <a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">
+        <img class="video_snapshot" src="{{snapshot_url}}"/>
+        <div class="video_info">
+          <div class="video_group_time">{{video_post_agency}} | {{video_postdate}}</div>
+          <div data-list="video_tags" data-level="1" class="video_tag"><div>{{video_tag}}</div></div>
+          <div class="video_title"><h4>{{video_title}}</h4></div>
+          <div class="video_desc">{{video_desc}}</div>
+          <div class="view_info">
+            <span><img src="{{hd_icon_url}}" alt="HD"></span>
+            <span><img src="{{view_icon_url}}" alt="{{view_count_trans}}>">x {{view_count}}</span>
+          </div>
+        </div>
+      </a>
+    </li>
+  </ul>
+  <div class="clearfix"></div>
+  <style>
+    .video_data_wrap{
+      display: flex;
+      flex-wrap: wrap;
+    }
+    .video_filter_area {
+      margin-bottom: 20px;
+    }
+    #filter_category_box {
+      width: 100%;
+      line-height: 50px;
+      height: 50px;
+      max-width: none;
+      border: none;
+      padding: 0 1em;
+    }
+    .category_box {
+      padding: 0;
+    }
+    .search_box {
+      padding-right: 0;
+    }
+    @media (max-width: 767px){
+      .search_box {
+        padding: 0;
+        margin-top: 0.5em;
+      }
+    }
+    .search_keyword {
+      margin-right: 50px;
+    }
+    .search_input input[type=text] {
+      padding: 0 1em;
+      line-height: 50px;
+    }
+    .search_input input {
+      max-width: none;
+      width: 100%;
+      height: 50px;
+      border: none;
+    }
+    .search_submit {
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 50px;
+      height: 100%;
+    }
+    .search_input input[type=submit] {
+      background: url(/assets/video_pro/search_btn.png) center center no-repeat #c9c9c9;
+      font-size: 0;
+    }
+    .video_tablist {
+      overflow: hidden;
+      letter-spacing: 0.1em;
+      margin-bottom: 15px;
+      padding: 0;
+    }
+    .video_tablist>li, .album_tablist>li {
+      width: 50%;
+      float: left;
+    }
+    .video_tablist li.now_view a {
+      background-color: #c47f27;
+    }
+    .video_tablist a {
+      display: block;
+      padding: 10px 0;
+      text-align: center;
+      background-color: #8d681e;
+      color: #fff;
+      text-decoration: none;
+      font-size: 120%;
+    }
+    .video_data_wrap {
+      padding-left: 0;
+    }
+    .video_group_time {
+      color: #4487cb;
+    }
+    .video_tag {
+      color: #e4374a;
+    }
+    .video_title h4 {
+      font-size: 1.6em;
+      font-weight: bold;
+      margin-bottom: 0;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+    .view_info {
+      float: right;
+    }
+    .view_info img {
+      margin-right: 5px;
+    }
+  </style>
+  <script>
+    $('#filter_category_box').on('change', function(){
+      $(this).prop('form').submit();
+    })
+  </script>
+</div>
+{{pagination_goes_here}}

modules/video_pro/video_pro_index2_tag.html.erb

@@ -0,0 +1,146 @@
+<div class="i-video_data video_data-index-2">
+  <h3 class="i-annc__page-title">{{page-title}}</h3>
+  <div class="video_filter_area col-sm-12">
+    <form>
+      <div class="category_box col-sm-6">
+        <select name="tag" id="filter_category_box" data-list="tags" data-level="0">
+          {{option}}
+        </select>
+      </div>
+      <div class="search_box col-sm-6">
+        <div class="search_input">
+          <div class="search_keyword"><input accesskey="S" type="text" id="search" name="search" value="{{search_value}}" placeholder="{{search_placeholder}}"></div>
+          <div class="search_submit"><input type="submit" value="{{search_text1}}" title="{{search_text2}}"></div>
+        </div>
+      </div>
+    </form>
+    <div class="clearfix"></div>
+  </div>
+  <div class="page_tab_box col-sm-12">
+    <ul class="video_tablist" data-list="page_tabs" data-level="0">
+      <li class="{{klass}}"><a title="{{title}}" href="{{url}}">{{title}}</a></li>
+    </ul>
+  </div>
+  <ul class="video_data_wrap col-sm-12" data-list="videos" data-level="0">
+    <li class="video_data col-xs-12 col-sm-4" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
+      <a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">
+        <img class="video_snapshot" src="{{snapshot_url}}"/>
+        <div class="video_info">
+          <div class="video_group_time">{{video_post_agency}} | {{video_postdate}}</div>
+          <div data-list="video_tags" data-level="1" class="video_tag"><div>{{video_tag}}</div></div>
+          <div class="video_title"><h4>{{video_title}}</h4></div>
+          <div class="video_desc">{{video_desc}}</div>
+          <div class="view_info">
+            <span><img src="{{hd_icon_url}}" alt="HD"></span>
+            <span><img src="{{view_icon_url}}" alt="{{view_count_trans}}>">x {{view_count}}</span>
+          </div>
+        </div>
+      </a>
+    </li>
+  </ul>
+  <div class="clearfix"></div>
+  <style>
+    .video_data_wrap{
+      display: flex;
+      flex-wrap: wrap;
+    }
+    .video_filter_area {
+      margin-bottom: 20px;
+    }
+    #filter_category_box {
+      width: 100%;
+      line-height: 50px;
+      height: 50px;
+      max-width: none;
+      border: none;
+      padding: 0 1em;
+    }
+    .category_box {
+      padding: 0;
+    }
+    .search_box {
+      padding-right: 0;
+    }
+    @media (max-width: 767px){
+      .search_box {
+        padding: 0;
+        margin-top: 0.5em;
+      }
+    }
+    .search_keyword {
+      margin-right: 50px;
+    }
+    .search_input input[type=text] {
+      padding: 0 1em;
+      line-height: 50px;
+    }
+    .search_input input {
+      max-width: none;
+      width: 100%;
+      height: 50px;
+      border: none;
+    }
+    .search_submit {
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: 50px;
+      height: 100%;
+    }
+    .search_input input[type=submit] {
+      background: url(/assets/video_pro/search_btn.png) center center no-repeat #c9c9c9;
+      font-size: 0;
+    }
+    .video_tablist {
+      overflow: hidden;
+      letter-spacing: 0.1em;
+      margin-bottom: 15px;
+      padding: 0;
+    }
+    .video_tablist>li, .album_tablist>li {
+      width: 50%;
+      float: left;
+    }
+    .video_tablist li.now_view a {
+      background-color: #c47f27;
+    }
+    .video_tablist a {
+      display: block;
+      padding: 10px 0;
+      text-align: center;
+      background-color: #8d681e;
+      color: #fff;
+      text-decoration: none;
+      font-size: 120%;
+    }
+    .video_data_wrap {
+      padding-left: 0;
+    }
+    .video_group_time {
+      color: #4487cb;
+    }
+    .video_tag {
+      color: #e4374a;
+    }
+    .video_title h4 {
+      font-size: 1.6em;
+      font-weight: bold;
+      margin-bottom: 0;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+    .view_info {
+      float: right;
+    }
+    .view_info img {
+      margin-right: 5px;
+    }
+  </style>
+  <script>
+    $('#filter_category_box').on('change', function(){
+      $(this).prop('form').submit();
+    })
+  </script>
+</div>
+{{pagination_goes_here}}

modules/video_pro/video_pro_index3.html.erb

@@ -0,0 +1,75 @@
+<div class="i-video_data video_data-index-3 video_data-modal-view">
+  <div class="modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" title="<%= I18n.t(:close) %>" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="modal-body video_goes_here">
+        </div>
+      </div>
+    </div>
+  </div>
+  <h3 class="i-annc__page-title">{{page-title}}</h3>
+  <ul class="video_data_wrap col-sm-12" data-list="videos" data-level="0">
+    <li class="video_data col-xs-12 col-sm-4" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
+      <a class="video_link" href="javascript:void(0)" title="{{video_title_escape}}" data-api-url="{{api_url}}">
+        <div class="video_snapshot_wrap">
+          <img class="video_snapshot" src="{{snapshot_url}}"/>
+          <img src="/assets/video_pro/btn-play.png" alt="" class="play_icon">
+        </div>
+        <div class="video_info">
+          <div class="video_time"><span date-format="%Y/%m/%d">{{video_postdate}}</span></div>
+          <div class="video_title"><h4>{{video_title}}</h4></div>
+          <div class="video_desc">{{video_desc}}</div>
+        </div>
+      </a>
+    </li>
+  </ul>
+  <div class="clearfix"></div>
+  <style>
+    .video_data_wrap{
+      display: flex;
+      flex-wrap: wrap;
+    }
+    .video_title h4{
+      font-size: 1.1em;
+      font-weight: bold;
+      margin-bottom: 0;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+    .video_snapshot_wrap {
+      position: relative;
+    }
+    .video_data-modal-view .modal-dialog {
+      width: 80%;
+    }
+    .video_data-modal-view .play_icon {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      -webkit-transform: translateX(-50%) translateY(-50%);
+      -moz-transform: translateX(-50%) translateY(-50%);
+      transform: translateX(-50%) translateY(-50%);
+      width: 55px;
+    }
+  </style>
+  <script>
+    $(".video_data-modal-view .video_link").off('click').on('click', function(){
+      var _this = $(this);
+      var modal_window = _this.parents('.video_data-modal-view').find('.modal');
+      if(modal_window.length != 0){
+        var api_url = _this.data('api-url');
+        $.get(api_url).done(function(html){
+          modal_window.find('.video_goes_here').html(html);
+          modal_window.modal('show');
+        })
+      }
+    })
+  </script>
+</div>
+{{pagination_goes_here}}

modules/video_pro/video_pro_index_post_agency1.html.erb

@@ -0,0 +1,97 @@
+<div class="i-video_data video_data-post-agency-1">
+  <div class="video_filter_area col-sm-12">
+    <form>
+      <div class="category_box col-sm-12">
+        <select name="poster" id="filter_category_box" data-list="post_agencies" data-level="0">
+          {{option}}
+        </select>
+      </div>
+    </form>
+    <div class="clearfix"></div>
+  </div>
+  <ul class="video_data_wrap" data-list="videos" data-level="0">
+    <li class="video_data col-sm-4" data-video-url="{{video_url}}" data-video-webm-url="{{video_webm_url}}" data-type="{{video_type}}">
+      <a class="video_link" href="{{video_show_url}}" title="{{video_title_escape}}">
+        <img class="video_snapshot" src="{{snapshot_url}}"/>
+        <div class="video_info">
+          <div class="video_group_time">{{video_post_agency}} | {{video_postdate}}</div>
+          <div class="video_keyword">{{keyword_trans}}: {{video_keyword}}</div>
+          <div class="video_title"><h4>{{video_title}}</h4></div>
+          <div class="video_desc">{{video_desc}}</div>
+          <div class="view_info">
+            <span><img src="{{hd_icon_url}}" alt="HD"></span>
+            <span><img src="{{view_icon_url}}" alt="{{view_count_trans}}>">x {{view_count}}</span>
+          </div>
+        </div>
+      </a>
+    </li>
+  </ul>
+  <div class="clearfix"></div>
+  <style>
+    .video_filter_area {
+      margin-bottom: 20px;
+    }
+    #filter_category_box {
+      width: 100%;
+      line-height: 50px;
+      height: 50px;
+      max-width: none;
+      border: none;
+      padding: 0 1em;
+    }
+    .category_box {
+      padding: 0;
+    }
+    .video_tablist {
+      overflow: hidden;
+      letter-spacing: 0.1em;
+      margin-bottom: 15px;
+      padding: 0;
+    }
+    .video_tablist>li, .album_tablist>li {
+      width: 50%;
+      float: left;
+    }
+    .video_tablist li.now_view a {
+      background-color: #c47f27;
+    }
+    .video_tablist a {
+      display: block;
+      padding: 10px 0;
+      text-align: center;
+      background-color: #8d681e;
+      color: #fff;
+      text-decoration: none;
+      font-size: 120%;
+    }
+    .video_data_wrap {
+      padding-left: 0;
+    }
+    .video_group_time {
+      color: #4487cb;
+    }
+    .video_tag {
+      color: #e4374a;
+    }
+    .video_title h4 {
+      font-size: 1.6em;
+      font-weight: bold;
+      margin-bottom: 0;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+    .view_info {
+      float: right;
+    }
+    .view_info img {
+      margin-right: 5px;
+    }
+  </style>
+  <script>
+    $('#filter_category_box').on('change', function(){
+      $(this).prop('form').submit();
+    })
+  </script>
+</div>
+{{pagination_goes_here}}