view/theme/frio/templates/media/browser.tpl

   1 <!--
   2         This is the template used by mod/fbrowser.php
   3 -->
   4 <div id="filebrowser" class="fbrowser {{$type}}" data-nickname="{{$nickname}}" data-type="{{$type}}">
   5         <div class="fbrowser-content">
   6                 <div class="error hidden">
   7                         <span></span> <button type="button" class="btn btn-link close" aria-label="Close">X</button>
   8                 </div>
   9
  10                 {{* The breadcrumb navigation *}}
  11                 <ol class="path breadcrumb" aria-label="Breadcrumb" role="menu">
  12                 {{foreach $path as $folder => $name}}
  13                         <li role="presentation">
  14                                 <button type="button" class="btn btn-link" data-folder="{{$folder}}" role="menuitem">{{$name}}</button>
  15                         </li>
  16                 {{/foreach}}
  17
  18                         {{* Switch between image and file mode *}}
  19                         <div class="fbswitcher btn-group btn-group-xs pull-right" aria-label="Switch between photo and attachment mode">
  20                                 <button type="button" class="btn btn-default" data-mode="photo" aria-label="Photo Mode"><i class="fa fa-picture-o" aria-hidden="true"></i></button>
  21                                 <button type="button" class="btn btn-default" data-mode="attachment" aria-label="Attachment Mode"><i class="fa fa-file-o" aria-hidden="true"></i></button>
  22                         </div>
  23                 </ol>
  24
  25                 <div class="upload">
  26                         <button id="upload-{{$type}}" type="button" class="btn btn-primary">{{$upload}}</button>
  27                 </div>
  28
  29                 <div class="media">
  30
  31                         {{* List of photo albums *}}
  32                         {{if $folders }}
  33                         <div class="folders media-left" role="navigation" aria-label="Album Navigation">
  34                                 <ul role="menu">
  35                                         {{foreach $folders as $folder}}
  36                                         <li role="presentation">
  37                                                 <button type="button" data-folder="{{$folder}}" role="menuitem">{{$folder}}</button>
  38                                         </li>
  39                                         {{/foreach}}
  40                                 </ul>
  41                         </div>
  42                         {{/if}}
  43
  44                         {{* The main content (images or files) *}}
  45                         <div class="list {{$type}} media-body" role="main" aria-label="Browser Content">
  46                                 <div class="fbrowser-content-container">
  47                                         {{foreach $files as $f}}
  48                                         <div class="photo-album-image-wrapper">
  49                                                 <a href="#" class="photo-album-photo-link" data-link="{{$f.0}}" data-filename="{{$f.1}}" data-img="{{$f.2}}" data-alt="{{$f.3}}">
  50                                                         <img src="{{$f.2}}" alt="{{$f.1}}">
  51                                                         <p>{{$f.1}}</p>
  52                                                 </a>
  53                                         </div>
  54                                         {{/foreach}}
  55                                 </div>
  56                         </div>
  57                 </div>
  58
  59         </div>
  60
  61         {{* This part contains the content loader icon which is visible when new content is loaded *}}
  62         <div class="profile-rotator-wrapper" aria-hidden="true" style="display: none;">
  63                 <i class="fa fa-circle-o-notch fa-spin" aria-hidden="true"></i>
  64         </div>
  65 </div>