Merge pull request #9806 from Extarys/actionfade

Frio: Improve readability and navigation, first pass

diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css
index 7e0752f..2e47761 100644 (file)
--- a/view/theme/frio/css/style.css
+++ b/view/theme/frio/css/style.css
@@ -417,6 +417,10 @@ nav.navbar {
     z-index: 1030;
     color: $nav_icon_color;
 }
+#topbar-first .navbar-toggle {
+    margin-top: 5px;
+    margin-bottom: 0;
+}
 #topbar-first .nav > li > a,
 #topbar-first .nav > li > button,
 nav.navbar .nav > li > a,
@@ -657,6 +661,21 @@ nav.navbar .nav > li > button:focus
     margin: 0px;
     padding: 12px 12px;
 }
+#search-mobile {
+    position: fixed;
+    top: 90px;
+    left: 0;
+    right: 0;
+    z-index: 2;
+
+    background-color: $background_color;
+
+    /* fix bootstrap .well class not playing well with data-target slide animation */
+    margin: 0;
+    padding: 0;
+    min-height: 0;
+    border-radius: 0;
+}
 #search-mobile .navbar-form {
     margin: 0;
 }
@@ -1398,9 +1417,9 @@ textarea.comment-edit-text:focus + .comment-edit-form .preview {
 .panel {
     border: none;
     background-color: rgba(255,255,255,$contentbg_transp);
-    box-shadow: 0 0 3px #dadada;
-    -webkit-box-shadow: 0 0 3px #dadada;
-    -moz-box-shadow: 0 0 3px #dadada;
+    box-shadow: 0 0 2px #dadada;
+    -webkit-box-shadow: 0 0 2px #dadada;
+    -moz-box-shadow: 0 0 2px #dadada;
     border-radius: 4px;
     position: relative;
 }
@@ -1460,6 +1479,13 @@ aside .panel-body {
     border-top: none;
 }
 
+.comment-edit-preview .wall-item-container.panel-body.preview {
+    margin-top: 4px;
+}
+.comment-edit-preview .panel {
+    margin-bottom: 0;
+}
+
 .wall-item-container .media {
     margin-top: 0;
     padding: 10px;
@@ -1847,6 +1873,7 @@ wall-item-comment-wrapper.well {
     background-color: rgba(237, 237, 237, $contentbg_transp);
     background-image: none;
     margin-bottom: 1px;
+    background-color: red;
 }
 wall-item-comment-wrapper.well-small {
     padding: 10px;
@@ -1908,6 +1935,7 @@ wall-item-comment-wrapper.well hr {
 
 .comment-edit-submit-wrapper {
     text-align: right;
+    margin-bottom: 0;
 }
 
 .comment-icon-list {
@@ -3420,7 +3448,6 @@ section .profile-match-wrapper {
         left: 10%;
         z-index: -1;
     }
-
 }
 
 /* Mobile display */

diff --git a/view/theme/frio/scheme/dark.php b/view/theme/frio/scheme/dark.php
index 865f6d8..eb1d3ca 100644 (file)
--- a/view/theme/frio/scheme/dark.php
+++ b/view/theme/frio/scheme/dark.php
@@ -16,13 +16,14 @@ switch ($scheme_accent) {
        default:
                $link_color = '#' . $accentColor->lighten(25);
 }
-$nav_icon_color = $scheme_accent;
+$nav_icon_color = '#' . $accentColor->lighten(40);
 $nav_icon_hover_color = '#' . $accentColor->darken(20);
+
 switch ($scheme_accent) {
        case FRIO_SCHEME_ACCENT_GREEN:
        case FRIO_SCHEME_ACCENT_RED:
-               $nav_bg = '#' . $accentColor->darken(25);
-               $background_color = '#' . $accentColor->darken(27);
+               $nav_bg = '#' . $accentColor->darken(27);
+               $background_color = '#' . $accentColor->darken(29);
                break;
        default:
                $nav_bg = '#' . $accentColor->darken(30);

diff --git a/view/theme/frio/style.php b/view/theme/frio/style.php
index b70f565..0a69fea 100644 (file)
--- a/view/theme/frio/style.php
+++ b/view/theme/frio/style.php
@@ -188,8 +188,8 @@ $options = [
        '$background_repeat'           => $background_repeat,
        '$login_bg_image'              => $login_bg_image,
        '$login_bg_color'              => $login_bg_color,
-       '$font_color_darker'           => $font_color_darker ?? '#555',
-       '$font_color'                  => $font_color ?? '#777',
+       '$font_color_darker'           => $font_color_darker ?? '#222',
+       '$font_color'                  => $font_color ?? '#444',
 ];
 
 $css_tpl = file_get_contents('view/theme/frio/css/style.css');

diff --git a/view/theme/frio/templates/nav.tpl b/view/theme/frio/templates/nav.tpl
index bb999c4..705f023 100644 (file)
--- a/view/theme/frio/templates/nav.tpl
+++ b/view/theme/frio/templates/nav.tpl
@@ -25,51 +25,51 @@
                                {{* Buttons for the mobile view *}}
                                <button type="button" class="navbar-toggle collapsed pull-right" data-toggle="offcanvas" data-target="#myNavmenu" aria-controls="myNavmenu" aria-haspopup="true">
                                        <span class="sr-only">Toggle navigation</span>
-                                       <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
+                                       <i class="fa fa-ellipsis-v fa-fw fa-lg" aria-hidden="true"></i>
                                </button>
                                <button type="button" class="navbar-toggle collapsed pull-right" data-toggle="collapse" data-target="#search-mobile" aria-expanded="false" aria-controls="search-mobile">
                                        <span class="sr-only">Toggle Search</span>
-                                       <i class="fa fa-search" aria-hidden="true" style="color:#FFF;"></i>
+                                       <i class="fa fa-search fa-fw fa-lg" aria-hidden="true" style="color:#FFF;"></i>
                                </button>
                                <button type="button" class="navbar-toggle collapsed pull-left visible-sm visible-xs" data-toggle="offcanvas" data-target="aside" aria-haspopup="true">
                                        <span class="sr-only">Toggle navigation</span>
-                                       <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
+                                       <i class="fa fa-ellipsis-v fa-fw fa-lg" aria-hidden="true"></i>
                                </button>
 
                                {{* Left section of the NavBar with navigation shortcuts/icons *}}
                                <ul class="nav navbar-left" role="menubar">
                                        {{if $nav.network}}
                                        <li class="nav-segment">
-                                               <a accesskey="n" class="nav-menu {{$sel.network}}" href="{{$nav.network.0}}" data-toggle="tooltip" aria-label="{{$nav.network.3}}" title="{{$nav.network.3}}"><i class="fa fa-lg fa-th" aria-hidden="true"></i><span id="net-update" class="nav-network-badge badge nav-notification"></span></a>
+                                               <a accesskey="n" class="nav-menu {{$sel.network}}" href="{{$nav.network.0}}" data-toggle="tooltip" aria-label="{{$nav.network.3}}" title="{{$nav.network.3}}"><i class="fa fa-lg fa-th fa-fw" aria-hidden="true"></i><span id="net-update" class="nav-network-badge badge nav-notification"></span></a>
                                        </li>
                                        {{/if}}
                                        {{if $nav.home}}
                                        <li class="nav-segment">
-                                               <a accesskey="p" class="nav-menu {{$sel.home}}" href="{{$nav.home.0}}" data-toggle="tooltip" aria-label="{{$nav.home.3}}" title="{{$nav.home.3}}"><i class="fa fa-lg fa-home" aria-hidden="true"></i><span id="home-update" class="nav-home-badge badge nav-notification"></span></a>
+                                               <a accesskey="p" class="nav-menu {{$sel.home}}" href="{{$nav.home.0}}" data-toggle="tooltip" aria-label="{{$nav.home.3}}" title="{{$nav.home.3}}"><i class="fa fa-lg fa-home fa-fw" aria-hidden="true"></i><span id="home-update" class="nav-home-badge badge nav-notification"></span></a>
                                        </li>
                                        {{/if}}
 
                                        {{if $nav.community}}
                                        <li class="nav-segment">
-                                               <a accesskey="c" class="nav-menu {{$sel.community}}" href="{{$nav.community.0}}" data-toggle="tooltip" aria-label="{{$nav.community.3}}" title="{{$nav.community.3}}"><i class="fa fa-lg fa-bullseye" aria-hidden="true"></i></a>
+                                               <a accesskey="c" class="nav-menu {{$sel.community}}" href="{{$nav.community.0}}" data-toggle="tooltip" aria-label="{{$nav.community.3}}" title="{{$nav.community.3}}"><i class="fa fa-lg fa-bullseye fa-fw" aria-hidden="true"></i></a>
                                        </li>
                                        {{/if}}
 
                                        {{if $nav.messages}}
                                        <li class="nav-segment hidden-xs">
-                                               <a accesskey="m" id="nav-messages-link" href="{{$nav.messages.0}}" data-toggle="tooltip" aria-label="{{$nav.messages.1}}" title="{{$nav.messages.1}}" class="nav-menu {{$sel.messages}}"><i class="fa fa-envelope fa-lg" aria-hidden="true"></i><span id="mail-update" class="nav-mail-badge badge nav-notification"></span></a>
+                                               <a accesskey="m" id="nav-messages-link" href="{{$nav.messages.0}}" data-toggle="tooltip" aria-label="{{$nav.messages.1}}" title="{{$nav.messages.1}}" class="nav-menu {{$sel.messages}}"><i class="fa fa-envelope fa-lg fa-fw" aria-hidden="true"></i><span id="mail-update" class="nav-mail-badge badge nav-notification"></span></a>
                                        </li>
                                        {{/if}}
 
                                        {{if $nav.events}}
                                        <li class="nav-segment hidden-xs">
-                                               <a accesskey="e" id="nav-events-link" href="{{$nav.events.0}}" data-toggle="tooltip" aria-label="{{$nav.events.1}}" title="{{$nav.events.1}}" class="nav-menu"><i class="fa fa-lg fa-calendar"></i></a>
+                                               <a accesskey="e" id="nav-events-link" href="{{$nav.events.0}}" data-toggle="tooltip" aria-label="{{$nav.events.1}}" title="{{$nav.events.1}}" class="nav-menu"><i class="fa fa-lg fa-calendar fa-fw"></i></a>
                                        </li>
                                        {{/if}}
 
                                        {{if $nav.contacts}}
                                        <li class="nav-segment hidden-xs">
-                                               <a accesskey="k" id="nav-contacts-link" href="{{$nav.contacts.0}}" data-toggle="tooltip" aria-label="{{$nav.contacts.1}}" title="{{$nav.contacts.1}}"class="nav-menu {{$sel.contacts}} {{$nav.contacts.2}}"><i class="fa fa-users fa-lg"></i></a>
+                                               <a accesskey="k" id="nav-contacts-link" href="{{$nav.contacts.0}}" data-toggle="tooltip" aria-label="{{$nav.contacts.1}}" title="{{$nav.contacts.1}}"class="nav-menu {{$sel.contacts}} {{$nav.contacts.2}}"><i class="fa fa-users fa-lg fa-fw"></i></a>
                                        </li>
                                        {{/if}}
 
@@ -264,14 +264,16 @@
 {{/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="q" 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 id="search-mobile" class="hidden-lg hidden-md hidden-sm collapse row well">
+       <div class="col-xs-12">
+               <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="q" 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>
 </div>
 
 {{* The second navbar which contains nav points of the actual page - (nav points are actual handled by this theme throug js *}}