X-Git-Url: https://git.mxchange.org/?a=blobdiff_plain;ds=sidebyside;f=view%2Ftheme%2Ffrio%2Ftemplates%2Ffilebrowser.tpl;h=6fc091d95250db2b882c6546d8e40e4b75d189aa;hb=ee293f2ce28270e1f8e05ce38991977d41e40c27;hp=20227f87965edda0ce0c1c44bd493b1f5292f8f2;hpb=1ce5cc1b49650faa7b0981fa4d179feade042faa;p=friendica.git

diff --git a/view/theme/frio/templates/filebrowser.tpl b/view/theme/frio/templates/filebrowser.tpl
index 20227f8796..6fc091d952 100644
--- a/view/theme/frio/templates/filebrowser.tpl
+++ b/view/theme/frio/templates/filebrowser.tpl
@@ -12,38 +12,54 @@
 		<input id="fb-nickname" type="hidden" name="type" value="{{$nickname}}" />
 		<input id="fb-type" type="hidden" name="type" value="{{$type}}" />
 
-        <div class="error hidden">
-            <span></span> <button type="button" class="btn btn-link" class="close">X</a>
-        </div>
-
-        <div class="path">
-            {{foreach $path as $p}}<button type="button" class="btn-link" data-folder="{{$p.0}}">{{$p.1}}</button>{{/foreach}}
-        </div>
-
-        {{if $folders }}
-        <div class="folders">
-            <ul>
-                {{foreach $folders as $f}}<li><button type="button" class="btn-link" data-folder="{{$f.0}}">{{$f.1}}</button></li>{{/foreach}}
-            </ul>
-        </div>
-        {{/if}}
-
-        <div class="list">
-            {{foreach $files as $f}}
-            <div class="photo-album-image-wrapper">
-                <button type="button" class="btn btn-link photo-album-photo-link" data-link="{{$f.0}}" data-filename="{{$f.1}}" data-img="{{$f.2}}">
-                    <img src="{{$f.2}}">
-                    <p>{{$f.1}}</p>
-                </button>
+		<div class="error hidden">
+			<span></span> <button type="button" class="btn btn-link" class="close">X</a>
+		</div>
+
+		{{* The breadcrumb navigation *}}
+		<ol class="path breadcrumb">
+			{{foreach $path as $p}}<li><a href="#" data-folder="{{$p.0}}">{{$p.1}}</a></li>{{/foreach}}
+
+			{{* Switch between image and file mode *}}
+			<div class="fbswitcher btn-group btn-group-xs pull-right">
+				<button type="button" class="btn btn-default" data-mode="image"><i class="fa fa-picture-o" aria-hidden="true"></i></button>
+				<button type="button" class="btn btn-default" data-mode="file"><i class="fa fa-file-o" aria-hidden="true"></i></button>
+			</div>
+		</ol>
+
+		<div class="media">
+
+			{{* List of photo albums *}}
+			{{if $folders }}
+			<div class="folders media-left">
+				<ul>
+					{{foreach $folders as $f}}<li><a href="#" data-folder="{{$f.0}}">{{$f.1}}</a></li>{{/foreach}}
+				</ul>
+			</div>
+			{{/if}}
+
+			{{* The main content (images or files) *}}
+			<div class="list {{$type}} media-body">
+				<div class="fbrowser-content-container">
+					{{foreach $files as $f}}
+					<div class="photo-album-image-wrapper">
+						<a href="#" class="photo-album-photo-link" data-link="{{$f.0}}" data-filename="{{$f.1}}" data-img="{{$f.2}}">
+							<img src="{{$f.2}}" alt="{{$f.1}}">
+							<p>{{$f.1}}</p>
+						</a>
+					</div>
+					{{/foreach}}
+				</div>
 			</div>
-			{{/foreach}}
 		</div>
 
 		<div class="upload">
-			<button id="upload-{{$type}}"><img id="profile-rotator" src="images/rotator.gif" alt="{{$wait}}" title="{{$wait|escape:'html'}}" style="display: none;" /> {{"Upload"|t}}</button>
+			<button id="upload-{{$type}}">{{"Upload"|t}}</button>
 		</div>
 	</div>
+
+	{{* This part contains the conent loader icon which is visible when new conent is loaded *}}
 	<div class="profile-rotator-wrapper" style="display: none;">
-		<i class="fa fa-circle-o-notch fa-spin"></i>
+		<i class="fa fa-circle-o-notch fa-spin" aria-hidden="true"></i>
 	</div>
 </div>