frio: add intro action buttons for mobile devices

[friendica.git] / view / theme / frio / templates / nav.tpl

diff --git a/view/theme/frio/templates/nav.tpl b/view/theme/frio/templates/nav.tpl
index b8d5b2307ee33ea0699dcf048ae827911eeafe4c..a72a29a3883bebb4a4c7593671f77ed81a17216a 100644 (file)
--- a/view/theme/frio/templates/nav.tpl
+++ b/view/theme/frio/templates/nav.tpl
@@ -27,7 +27,7 @@
                                        <span class="sr-only">Toggle navigation</span>
                                        <i class="fa fa-ellipsis-v"></i>
                                </button>
-                               <button type="button" class="navbar-toggle collapsed pull-right" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+                               <button type="button" class="navbar-toggle collapsed pull-right" data-toggle="collapse" data-target="#search-mobile" aria-expanded="false" aria-controls="navbar">
                                        <span class="sr-only">Toggle Search</span>
                                        <i class="fa fa-search" style="color:#FFF;"></i>
                                </button>
@@ -240,17 +240,34 @@
                <div class="hidden-sm hidden-xs">
                        <ul class="nav navbar-nav navbar-right">
                                <li><a href="register" data-toggle="tooltip" title="{{$register.title}}"><i class="fa fa-street-view fa-fw"></i> {{$register.desc}}</a></li>
-                               <li><a href="login?mode=none" data-toggle="tooltip" title="{{$login}}"><i class="fa fa-sign-in fa-fw"></i> {{$login}}</a></li>
+                               <li>
+                                       <a href="login?mode=none" id="nav-login"
+                                               data-toggle="tooltip" title="{{$nav.login.3}}">
+                                                       <i class="fa fa-sign-in fa-fw"></i>
+                                       </a>
+                               </li>
                        </ul>
                </div>
        </div>
 </nav>
+
 {{/if}}
 
+{{* provide a a search input for mobile view, which expands by pressing the search icon *}}
+<div id="search-mobile" class="hidden-lg hidden-md collapse">
+       <form class="navbar-form" role="search" method="get" action="{{$nav.search.0}}">
+               <!-- <img class="hidden-xs" src="{{$nav.userinfo.icon}}" alt="{{$nav.userinfo.name}}" style="max-width:33px; max-height:33px; min-width:33px; min-height:33px; width:33px; height:33px;"> -->
+               <div class="form-group form-group-search">
+                       <input id="nav-search-input-field-mobile" class="form-control form-search" type="text" name="search" data-toggle="tooltip" title="{{$search_hint}}" placeholder="{{$nav.search.1}}">
+                       <button class="btn btn-default btn-sm form-button-search" type="submit">{{$nav.search.1}}</button>
+               </div>
+       </form>
+</div>
+
 {{* The second navbar which contains nav points of the actual page - (nav points are actual handled by this theme throug js *}}
 <div id="topbar-second" class="topbar">
        <div class="container">
-               <div class="col-lg-3 col-md-3 hidden-sm hidden-xs"></div>
+               <div class="col-lg-3 col-md-3 hidden-sm hidden-xs" id="nav-short-info"></div>
                <div class="col-lg-7 col-md-7 col-sm-11 col-xs-10" id="tabmenu"></div>
                <div class="col-lg-2 col-md-2 col-sm-1 col-xs-2" id="navbar-button"></div>
        </div>