First version

modules/video_program/index1.html.erb

@@ -0,0 +1,36 @@
+<div class="index-video-program video-program card-group index1 {{display_class}}">
+  <h3 class="index-title">
+    <span>{{page-title}}</span>
+  </h3>
+  <link rel="stylesheet" type="text/css" href="/assets/video-program-card.css">
+  <div class="row" data-level="0" data-list="categories">
+    <h4 class="category-title">{{category-title}}</h4>
+    <div class="row" data-level="1" data-list="video-programs">
+      <div class="card card-flip h-100">
+        <div class="card-front">
+          <div class="card-body" style="padding:0;">
+            <img
+              src="{{thumb-src}}"
+              alt="{{title}}"
+            >
+            <div class="card-footer">
+              <h3 class="card-title">{{title}}</h3>
+            </div>
+          </div>
+        </div>
+        <div class="card-back">
+          <div class="card-body">
+            <h3 class="card-title">{{title}}</h3>
+            {{subtitle}}
+            <div class="card-button-group">
+              <a title="{{title}}" href="{{link_to_show}}" class="btn btn-secondary view ">
+                <i class="fa fa-link" aria-hidden="true"></i>
+              </a>
+              <span class="episodes">{{episodes_text}}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

modules/video_program/info.json

@@ -0,0 +1,15 @@
+{
+	"frontend": [
+		{
+			"filename" : "index1",
+			"name" : {
+				"zh_tw" : "1. 標準標題列表-1A ( 模組標題, 類別, 狀態, 標題, 日期 )",
+				"en" : "1. Standard Title List-1 (widget-title, category, status, title, postdate)"
+				},
+			"thumbnail" : "event_news_index1_thumbs.png",
+			"force_cover": "true"
+		}
+	],
+	"widgets" : [
+	]
+}

modules/video_program/show.html.erb

@@ -0,0 +1,148 @@
+<style type="text/css">
+  .btn.disabled {
+    pointer-events: none;
+    cursor: default;
+    background-image: unset;
+    background-color: #292929;
+  }
+  a.play-btn {
+    padding: 1em 2.5em;
+    background: #333;
+    color: #fff;
+    border-radius: 20em;
+    font-size: 1em;
+  }
+  a.play-btn:hover {
+    color: #fff;
+    font-size: 1.1em;
+  }
+  .video-description {
+    margin: 1em 0;
+  }
+  .video-information-wrap {
+    font-size: 1.2em;
+  }
+  .video-short-description {
+  }
+  .video-cover-image-wrap {
+    padding: 0 1em;
+  }
+  .video-cover-image-wrap img {
+    border-radius: 5em;
+  }
+  .clearfix {
+    clear: both;
+  }
+  .episode_tag {
+    font-size: 1.2em;
+    background: none;
+    color: inherit;
+    padding-left: 0;
+    font-weight: normal;
+  }
+  .episode_title {
+    font-size: 1.3em;
+    font-weight: bolder;
+  }
+  .carousel_images{
+    {{carousel_display_style}}
+  }
+  .episode_item {
+    margin-bottom: 1em;
+  }
+  #episodes-head-wrap {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+  #episodes-head, #episodes_tag_box {
+    float: left;
+    vertical-align: middle;
+  }
+  #episodes-head {
+    margin-top: 0.625em;
+    margin-right: 0.5em;
+  }
+  .episodes_albums-list {
+    padding: 0;
+  }
+  @media (max-width: 768px) {
+    .episode_item {
+      padding: 0;
+    }
+  }
+</style>
+<article class="s-video-program show-video-program ">
+  <div class="video-short-description col-md-5 col-xs-12">
+    {{video_image_html}}
+    <a target="_blank" href="{{video_external_link}}" class="btn play-btn {{video_external_link_class}}" title="{{play-head}}">
+      {{play-head}}
+      <i class="fa fa-play"></i>
+    </a>
+    <p class="video-description">{{subtitle}}</p>
+    <h2 class="s-video-program__show-title">
+      {{title}}
+    </h2>
+    <span class="video-information-wrap">
+      <span class="s-video-program__tag-wrap s-video-program__meta--item ">
+        <span data-list="tags" data-level="0">
+          <a href="{{url}}"><span class="s-video-program__tag label label-default">{{tag}}</span></a>
+        </span>
+      </span>
+      <span class="video-information">{{video_notes}}</span>
+    </span>
+  </div>
+  <div class="video-cover-image-wrap col-md-7 col-xs-12">
+    {{image_html}}
+  </div>
+  <div class="clearfix"></div>
+
+  <section class="s-video-program_notes-wrap">
+    <h3>{{program_notes-head}}</h3>
+    <p clas="program_notes">
+      {{program_notes}}
+    </p>
+  </section>
+
+  <section class="s-video-actor_notes-wrap {{actor_notes_class}}">
+    <h3>{{actor_notes-head}}</h3>
+    <p clas="actor_notes">
+      {{actor_notes}}
+    </p>
+  </section>
+
+  <section class="s-video-stage-photo-wrap {{carousel_image_class}}">
+    <h3>{{carousel_image-head}}</h3>
+    {{video_program_carousel_images}}
+  </section>
+
+  <section class="s-video-episodes_albums-wrap {{episodes_albums_class}}">
+    <div id="episodes-head-wrap">
+      <h3 id="episodes-head">{{episodes_albums-head}}</h3>
+      <select id="episodes_tag_box" data-list="episodes_albums" data-level="0">
+        <option value="{{tab-index}}">{{images_tag}}</option>
+      </select>
+    </div>
+    <div class="episodes_albums-list-wrap tab-content" data-list="episodes_albums" data-level="0">
+      <ul class="episodes_albums-list col-sm-12 tab-pane fade {{tab-class}}" data-list="images" data-level="1">
+        <li class="episode_item col-xs-12 col-sm-4">
+          <span class="episode_tag label label-default" data-list="img-tags" data-level="2">
+            {{tag}}
+          </span>
+          <div class="clearfix"></div>
+          <h3 class="episode_title">{{ep_title}}</h3>
+          <p class="episode_description">{{ep_desc}}</p>
+          <img src="{{img-src}}" alt="{{ep_title}}">
+        </li>
+      </ul>
+      <div class="clearfix"></div>
+    </div>
+  </section>
+  <script type="text/javascript">
+    $("#episodes_tag_box").change(function(){
+      var tab_panes = $(".episodes_albums-list.tab-pane");
+      tab_panes.removeClass("active in").eq(parseInt($(this).val())).addClass('active in');
+    })
+  </script>
+</article>
+{{link_to_edit}}