Actions

Template

Videos: Difference between revisions

From Dune Awakening DB

← Older editNewer edit →
VisualWikitext
mNo edit summary
mNo edit summary
Line 1: Line 1:
{{TemplateStyles|Template:VideoGallery/styles.css}}
{{#css:Template:VideoGallery/styles.css}}
 
<div class="video-gallery-main-container">
<div class="video-gallery-main-container">
  <!-- 60 % column – categories -->
    <!-- Video Categories Section (60% width) -->
  <div class="video-categories">
    <div class="video-categories">
    <!-- Search -->
        <!-- Tab Navigation -->
    <div class="video-search-bar">
        <div class="video-tabs-nav">
      <input type="text" class="video-search-input" placeholder="Search videos…">
            <button class="video-tab active" data-tab="featured">◆ Featured</button>
      <button class="video-search-button">Search</button>
            <button class="video-tab" data-tab="leveling">⬆ Leveling</button>
    </div>
            <button class="video-tab" data-tab="crafting">⚒ Crafting</button>
 
            <button class="video-tab" data-tab="building">⌂ Building</button>
    <!-- Tabs -->
            <button class="video-tab" data-tab="pve">⚔ PVE</button>
    <div class="video-tabs-nav">
            <button class="video-tab" data-tab="pvp">⚔ PVP</button>
      <button class="video-tab active" data-tab="featured">◆ Featured</button>
        </div>
      <button class="video-tab" data-tab="leveling">⬆ Leveling</button>
       
      <button class="video-tab" data-tab="crafting">⚒ Crafting</button>
        <!-- Tab Content Containers -->
      <button class="video-tab" data-tab="building">⌂ Building</button>
        <div class="video-tab-content active" data-content="featured">
      <button class="video-tab" data-tab="pve">⚔ PVE</button>
            {{VideoGalleryCategory|tag=Featured}}
      <button class="video-tab" data-tab="pvp">⚔ PVP</button>
        </div>
    </div>
       
 
        <div class="video-tab-content" data-content="leveling">
    <!-- Tab panes -->
            {{VideoGalleryCategory|tag=Leveling}}
    <div class="video-tab-content active" data-content="featured">
        </div>
      {{#invoke:VideoGallery|renderVideos|category=featured}}
       
        <div class="video-tab-content" data-content="crafting">
            {{VideoGalleryCategory|tag=Crafting}}
        </div>
       
        <div class="video-tab-content" data-content="building">
            {{VideoGalleryCategory|tag=Building}}
        </div>
       
        <div class="video-tab-content" data-content="pve">
            {{VideoGalleryCategory|tag=PVE}}
        </div>
       
        <div class="video-tab-content" data-content="pvp">
            {{VideoGalleryCategory|tag=PVP}}
        </div>
     </div>
     </div>
     <div class="video-tab-content" data-content="leveling">
      
      {{#invoke:VideoGallery|renderVideos|category=leveling}}
     <!-- Video Player Panel (40% width) -->
    </div>
    <div class="video-player-panel" id="videoPlayerPanel">
    <div class="video-tab-content" data-content="crafting">
        <div class="no-video-selected">
      {{#invoke:VideoGallery|renderVideos|category=crafting}}
            <div class="placeholder-icon">▶</div>
     </div>
            <p>Select a video to watch</p>
    <div class="video-tab-content" data-content="building">
        </div>
      {{#invoke:VideoGallery|renderVideos|category=building}}
    </div>
    <div class="video-tab-content" data-content="pve">
      {{#invoke:VideoGallery|renderVideos|category=pve}}
    </div>
    <div class="video-tab-content" data-content="pvp">
      {{#invoke:VideoGallery|renderVideos|category=pvp}}
    </div>
  </div>
 
  <!-- 40 % column – player -->
  <div class="video-player-panel" id="videoPlayerPanel">
    <div class="no-video-selected">
      <div class="placeholder-icon">▶</div>
      <p>Select a video to watch</p>
     </div>
     </div>
  </div>
</div>
</div>


<!-- JSON payload for JS -->
<!-- Store video data for JavaScript -->
<script type="application/json" id="video-gallery-data">
<script type="application/json" id="video-gallery-data">
{{#invoke:VideoGallery|getVideoData}}
{{VideoGalleryData}}
</script>
</script>


<!-- Load the VideoGallery gadget -->
<!-- Include JavaScript -->
{{#tag:script|mw.loader.load('ext.gadget.VideoGallery');}}
{{#widget:VideoGalleryJS}}

Revision as of 04:06, 2 June 2025

{{#css:Template:VideoGallery/styles.css}} 

           <button class="video-tab active" data-tab="featured">◆ Featured</button>
           <button class="video-tab" data-tab="leveling">⬆ Leveling</button>
           <button class="video-tab" data-tab="crafting">⚒ Crafting</button>
           <button class="video-tab" data-tab="building">⌂ Building</button>
           <button class="video-tab" data-tab="pve">⚔ PVE</button>
           <button class="video-tab" data-tab="pvp">⚔ PVP</button>

           Template:VideoGalleryCategory

           Template:VideoGalleryCategory

           Template:VideoGalleryCategory

           Template:VideoGalleryCategory

           Template:VideoGalleryCategory

           Template:VideoGalleryCategory
▶

Select a video to watch

<script type="application/json" id="video-gallery-data"> Template:VideoGalleryData </script>

{{#widget:VideoGalleryJS}}

Retrieved from "https://dunedb.com/index.php?title=Template:Videos&oldid=853"