friendica
/
friendica
mirror of https://github.com/friendica/friendica
6
0
Fork 1
Code Issues Packages Projects Releases 1 Wiki Activity

Merge pull request #9806 from Extarys/actionfade 

Frio: Improve readability and navigation, first pass
This commit is contained in:
Hypolite Petovan 2021-01-19 14:14:20 -05:00 committed by GitHub
parent 4908afad8f 5d42ab9c29
commit ee5207410c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 56 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
view/theme/frio/css/style.css
View File

@ -417,6 +417,10 @@ nav.navbar {
z-index: 1030; z-index: 1030;
color: $nav_icon_color; color: $nav_icon_color;
} }
#topbar-first .navbar-toggle {
margin-top: 5px;
margin-bottom: 0;
}
#topbar-first .nav > li > a, #topbar-first .nav > li > a,
#topbar-first .nav > li > button, #topbar-first .nav > li > button,
nav.navbar .nav > li > a, nav.navbar .nav > li > a,
@ -657,6 +661,21 @@ nav.navbar .nav > li > button:focus
margin: 0px; margin: 0px;
padding: 12px 12px; 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 { #search-mobile .navbar-form {
margin: 0; margin: 0;
} }
@ -1398,9 +1417,9 @@ textarea.comment-edit-text:focus + .comment-edit-form .preview {
.panel { .panel {
border: none; border: none;
background-color: rgba(255,255,255,$contentbg_transp); background-color: rgba(255,255,255,$contentbg_transp);
box-shadow: 0 0 3px #dadada; box-shadow: 0 0 2px #dadada;
-webkit-box-shadow: 0 0 3px #dadada; -webkit-box-shadow: 0 0 2px #dadada;
-moz-box-shadow: 0 0 3px #dadada; -moz-box-shadow: 0 0 2px #dadada;
border-radius: 4px; border-radius: 4px;
position: relative; position: relative;
} }
@ -1460,6 +1479,13 @@ aside .panel-body {
border-top: none; 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 { .wall-item-container .media {
margin-top: 0; margin-top: 0;
padding: 10px; padding: 10px;
@ -1847,6 +1873,7 @@ wall-item-comment-wrapper.well {
background-color: rgba(237, 237, 237, $contentbg_transp); background-color: rgba(237, 237, 237, $contentbg_transp);
background-image: none; background-image: none;
margin-bottom: 1px; margin-bottom: 1px;
background-color: red;
} }
wall-item-comment-wrapper.well-small { wall-item-comment-wrapper.well-small {
padding: 10px; padding: 10px;
@ -1908,6 +1935,7 @@ wall-item-comment-wrapper.well hr {
.comment-edit-submit-wrapper { .comment-edit-submit-wrapper {
text-align: right; text-align: right;
margin-bottom: 0;
} }
.comment-icon-list { .comment-icon-list {
@ -3420,7 +3448,6 @@ section .profile-match-wrapper {
left: 10%; left: 10%;
z-index: -1; z-index: -1;
} }
} }
/* Mobile display */ /* Mobile display */

7
view/theme/frio/scheme/dark.php
View File

@ -16,13 +16,14 @@ switch ($scheme_accent) {
default: default:
$link_color = '#' . $accentColor->lighten(25); $link_color = '#' . $accentColor->lighten(25);
} }
$nav_icon_color = $scheme_accent; $nav_icon_color = '#' . $accentColor->lighten(40);
$nav_icon_hover_color = '#' . $accentColor->darken(20); $nav_icon_hover_color = '#' . $accentColor->darken(20);
switch ($scheme_accent) { switch ($scheme_accent) {
case FRIO_SCHEME_ACCENT_GREEN: case FRIO_SCHEME_ACCENT_GREEN:
case FRIO_SCHEME_ACCENT_RED: case FRIO_SCHEME_ACCENT_RED:
$nav_bg = '#' . $accentColor->darken(25); $nav_bg = '#' . $accentColor->darken(27);
$background_color = '#' . $accentColor->darken(27); $background_color = '#' . $accentColor->darken(29);
break; break;
default: default:
$nav_bg = '#' . $accentColor->darken(30); $nav_bg = '#' . $accentColor->darken(30);

4
view/theme/frio/style.php
View File

@ -188,8 +188,8 @@ $options = [
'$background_repeat' => $background_repeat, '$background_repeat' => $background_repeat,
'$login_bg_image' => $login_bg_image, '$login_bg_image' => $login_bg_image,
'$login_bg_color' => $login_bg_color, '$login_bg_color' => $login_bg_color,
'$font_color_darker' => $font_color_darker ?? '#555', '$font_color_darker' => $font_color_darker ?? '#222',
'$font_color' => $font_color ?? '#777', '$font_color' => $font_color ?? '#444',
]; ];
$css_tpl = file_get_contents('view/theme/frio/css/style.css'); $css_tpl = file_get_contents('view/theme/frio/css/style.css');

36
view/theme/frio/templates/nav.tpl
View File

@ -25,51 +25,51 @@
{{* Buttons for the mobile view *}} {{* 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"> <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> <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>
<button type="button" class="navbar-toggle collapsed pull-right" data-toggle="collapse" data-target="#search-mobile" aria-expanded="false" aria-controls="search-mobile"> <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> <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>
<button type="button" class="navbar-toggle collapsed pull-left visible-sm visible-xs" data-toggle="offcanvas" data-target="aside" aria-haspopup="true"> <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> <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>
{{* Left section of the NavBar with navigation shortcuts/icons *}} {{* Left section of the NavBar with navigation shortcuts/icons *}}
<ul class="nav navbar-left" role="menubar"> <ul class="nav navbar-left" role="menubar">
{{if $nav.network}} {{if $nav.network}}
<li class="nav-segment"> <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> </li>
{{/if}} {{/if}}
{{if $nav.home}} {{if $nav.home}}
<li class="nav-segment"> <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> </li>
{{/if}} {{/if}}
{{if $nav.community}} {{if $nav.community}}
<li class="nav-segment"> <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> </li>
{{/if}} {{/if}}
{{if $nav.messages}} {{if $nav.messages}}
<li class="nav-segment hidden-xs"> <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> </li>
{{/if}} {{/if}}
{{if $nav.events}} {{if $nav.events}}
<li class="nav-segment hidden-xs"> <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> </li>
{{/if}} {{/if}}
{{if $nav.contacts}} {{if $nav.contacts}}
<li class="nav-segment hidden-xs"> <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> </li>
{{/if}} {{/if}}
@ -264,14 +264,16 @@
{{/if}} {{/if}}
{{* provide a a search input for mobile view, which expands by pressing the search icon *}} {{* 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"> <div id="search-mobile" class="hidden-lg hidden-md hidden-sm collapse row well">
<form class="navbar-form" role="search" method="get" action="{{$nav.search.0}}"> <div class="col-xs-12">
<!-- <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;"> --> <form class="navbar-form" role="search" method="get" action="{{$nav.search.0}}">
<div class="form-group form-group-search"> <!-- <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;"> -->
<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}}"> <div class="form-group form-group-search">
<button class="btn btn-default btn-sm form-button-search" type="submit">{{$nav.search.1}}</button> <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}}">
</div> <button class="btn btn-default btn-sm form-button-search" type="submit">{{$nav.search.1}}</button>
</form> </div>
</form>
</div>
</div> </div>
{{* The second navbar which contains nav points of the actual page - (nav points are actual handled by this theme throug js *}} {{* The second navbar which contains nav points of the actual page - (nav points are actual handled by this theme throug js *}}