tobias/friendica
1
0
Fork 0
Code Pull requests Activity

frio - improve some hover effects to action link/buttons

Browse source
This commit is contained in:
rabuzarus 2018-08-11 13:41:55 +02:00
parent bf5896d4e3
commit 7cecc5a24c
9 changed files with 98 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
view/theme/frio/css/style.css
View file

@ -1106,7 +1106,7 @@ aside .vcard .tool .action{
transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;
} }
aside .vcard .tool a { aside .vcard .tool a {
color: rgba(255,255,255,.85); color: rgba(255,255,255,.85);
} }
aside .vcard #profile-photo-wrapper:hover .tool .action { aside .vcard #profile-photo-wrapper:hover .tool .action {
opacity: 1; opacity: 1;
@ -1244,14 +1244,22 @@ div#sidebar-group-list {
transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out;
} }
.faded-icon:hover { .faded-icon:hover {
color: #555;
opacity: 1; opacity: 1;
} }
.icon-padding { .icon-padding {
margin-left: 20px; margin-left: 20px;
} }
aside #group-sidebar .sidebar-group-li .group-edit-tool:hover, aside #group-sidebar .sidebar-group-li:hover .group-edit-tool.faded-icon,
aside #saved-search-list .saved-search-li .savedsearchdrop:hover { aside #saved-search-list .saved-search-li:hover .savedsearchdrop.faded-icon,
aside .widget:hover .widget-action.faded-icon {
opacity: 0.8;
transition: all 0.25s ease-in-out;
}
aside #group-sidebar .sidebar-group-li .group-edit-tool.faded-icon:hover,
aside #saved-search-list .saved-search-li .savedsearchdrop.faded-icon:hover,
aside .widget .widget-action.faded-icon:hover {
opacity: 1; opacity: 1;
} }
aside #group-sidebar li .group-checkbox { aside #group-sidebar li .group-checkbox {
@ -2184,6 +2192,13 @@ ul.dropdown-menu li:hover {
-webkit-box-shadow: 0 0 3px #dadada; -webkit-box-shadow: 0 0 3px #dadada;
-moz-box-shadow: 0 0 3px #dadada; -moz-box-shadow: 0 0 3px #dadada;
} }
#content:hover .page-action.faded-icon {
opacity: 0.8;
transition: all 0.25s ease-in-out;
}
#content .page-action.faded-icon:hover {
opacity: 1;
}
.section-title-wrapper { .section-title-wrapper {
overflow: hidden; overflow: hidden;

17
view/theme/frio/templates/contact_block.tpl
View file

@ -1,15 +1,18 @@
<div id="contact-block"> <div id="contact-block">
<h3 class="contact-block-h4 pull-left">{{$contacts}}</h3> <h3 class="contact-block-h4 pull-left">{{$contacts}}</h3>
{{if $micropro}}
<a class="pull-right" href="viewcontacts/{{$nickname}}"> {{if $micropro}}
<i class="faded-icon fa fa-eye" aria-hidden="true"></i><span class="sr-only">{{$viewcontacts}}</span> <a class="pull-right widget-action faded-icon" id="contact-block-view-contacts" href="viewcontacts/{{$nickname}}">
<i class="fa fa-eye" aria-hidden="true"></i>
<span class="sr-only">{{$viewcontacts}}</span>
</a> </a>
<div class='contact-block-content'> <div class='contact-block-content'>
{{foreach $micropro as $m}} {{foreach $micropro as $m}}
{{$m}} {{$m}}
{{/foreach}} {{/foreach}}
</div> </div>
{{/if}} {{/if}}
</div> </div>
<div class="clear"></div> <div class="clear"></div>

4
view/theme/frio/templates/events_js.tpl
View file

@ -4,8 +4,8 @@
{{* The link to create a new event *}} {{* The link to create a new event *}}
<div class="pull-right" id="new-event-link"> <div class="pull-right" id="new-event-link">
<button type="button" class="btn-link" onclick="addToModal('{{$new_event.0}}')" title="{{$new_event.1}}" data-toggle="tooltip"> <button type="button" class="btn-link page-action faded-icon" onclick="addToModal('{{$new_event.0}}')" title="{{$new_event.1}}" data-toggle="tooltip">
<i class="faded-icon fa fa-plus"></i> <i class="fa fa-plus"></i>
</button> </button>
</div> </div>

36
view/theme/frio/templates/group_side.tpl
View file

@ -1,21 +1,21 @@
<div class="widget" id="group-sidebar"> <div class="widget" id="group-sidebar">
<div id="sidebar-group-header"> <div id="sidebar-group-header">
<h3>{{$title}}</h3> <h3>{{$title}}</h3>
{{if ! $newgroup}} {{if ! $newgroup}}
<a class="group-edit-tool pull-right" href="{{$grouppage}}" data-toggle="tooltip" title="{{$editgroupstext}}"> <a class="group-edit-tool pull-right widget-action faded-icon" id="sidebar-edit-group" href="{{$grouppage}}" data-toggle="tooltip" title="{{$editgroupstext}}">
<i class="faded-icon fa fa-pencil" aria-hidden="true"></i> <i class="fa fa-pencil" aria-hidden="true"></i>
</a> </a>
{{else}} {{else}}
<a class="group-edit-tool pull-right" id="sidebar-new-group" onclick="javascript:$('#group-new-form').fadeIn('fast');" data-toggle="tooltip" title="{{$createtext}}"> <a class="group-edit-tool pull-right widget-action faded-icon" id="sidebar-new-group" onclick="javascript:$('#group-new-form').fadeIn('fast');" data-toggle="tooltip" title="{{$createtext}}">
<i class="faded-icon fa fa-plus" aria-hidden="true"></i> <i class="fa fa-plus" aria-hidden="true"></i>
</a> </a>
<form id="group-new-form" action="group/new" method="post" style="display:none;"> <form id="group-new-form" action="group/new" method="post" style="display:none;">
<div class="form-group"> <div class="form-group">
<input type="hidden" name="form_security_token" value="{{$form_security_token}}"> <input type="hidden" name="form_security_token" value="{{$form_security_token}}">
<input name="groupname" id="id_groupname" class="form-control input-sm" placeholder="{{$creategroup}}"> <input name="groupname" id="id_groupname" class="form-control input-sm" placeholder="{{$creategroup}}">
</div> </div>
</form> </form>
{{/if}} {{/if}}
</div> </div>
<div id="sidebar-group-list"> <div id="sidebar-group-list">
{{* The list of available groups *}} {{* The list of available groups *}}
@ -38,8 +38,8 @@
{{/if}} {{/if}}
{{if $group.edit}} {{if $group.edit}}
{{* if the group is editable show a little pencil for editing *}} {{* if the group is editable show a little pencil for editing *}}
<a id="edit-sidebar-group-element-{{$group.id}}" class="group-edit-tool pull-right" href="{{$group.edit.href}}" data-toggle="tooltip" title="{{$edittext}}"> <a id="edit-sidebar-group-element-{{$group.id}}" class="group-edit-tool pull-right faded-icon" href="{{$group.edit.href}}" data-toggle="tooltip" title="{{$edittext}}">
<i class="faded-icon fa fa-pencil" aria-hidden="true"></i> <i class="fa fa-pencil" aria-hidden="true"></i>
</a> </a>
{{/if}} {{/if}}
<a id="sidebar-group-element-{{$group.id}}" class="sidebar-group-element" href="{{$group.href}}">{{$group.text}}</a> <a id="sidebar-group-element-{{$group.id}}" class="sidebar-group-element" href="{{$group.href}}">{{$group.text}}</a>

10
view/theme/frio/templates/mail_head.tpl
View file

@ -1,16 +1,16 @@
<div class="pull-left"> <div class="pull-left">
<h3 class="heading">{{$messages}}</h3> <h3 class="heading">{{$messages}}</h3>
</div> </div>
<div id="message-new" class="pull-right"> <div id="message-new" class="pull-right">
{{if $button.sel == "new"}} {{if $button.sel == "new"}}
<a href="{{$button.url}}" accesskey="m" class="newmessage-selected" title="{{$button.label}}" data-toggle="tooltip"> <a href="{{$button.url}}" accesskey="m" class="newmessage-selected faded-icon page-action" title="{{$button.label}}" data-toggle="tooltip">
<i class="faded-icon fa fa-plus"></i> <i class="fa fa-plus"></i>
</a> </a>
{{else}} {{else}}
<a href="{{$button.url}}" title="{{$button.label}}" data-toggle="tooltip"> <a href="{{$button.url}}" title="{{$button.label}}" class="faded-icon page-action" data-toggle="tooltip">
<i class="faded-icon fa fa-close"></i> <i class="fa fa-close"></i>
</a> </a>
{{/if}} {{/if}}
</div> </div>

43
view/theme/frio/templates/photo_album.tpl
View file

@ -1,40 +1,43 @@
<div class="generic-page-wrapper"> <div class="generic-page-wrapper">
<div class="pull-left"> <div class="pull-left">
<h3 id="photo-album-title">{{$album}}</h3> <h3 id="photo-album-title">{{$album}}</h3>
</div> </div>
<div class="photo-album-actions pull-right"> <div class="photo-album-actions pull-right">
{{if $can_post}} {{if $can_post}}
<a class="photos-upload-link" href="{{$upload.1}}" title="{{$upload.0}}" data-toggle="tooltip"> <a class="photos-upload-link page-action faded-icon" href="{{$upload.1}}" title="{{$upload.0}}" data-toggle="tooltip">
<i class="faded-icon fa fa-plus"></i></a> <i class="fa fa-plus"></i>
</a>
{{/if}} {{/if}}
{{if $edit}} {{if $edit}}
<span class="icon-padding"> </span> <span class="icon-padding"> </span>
<a id="album-edit-link" href="{{$edit.1}}" title="{{$edit.0}}" data-toggle="tooltip"> <a id="album-edit-link" class="page-action faded-icon" href="{{$edit.1}}" title="{{$edit.0}}" data-toggle="tooltip">
<i class="faded-icon fa fa-pencil"></i></a> <i class="fa fa-pencil"></i>
</a>
{{/if}} {{/if}}
{{if ! $noorder}} {{if ! $noorder}}
<span class="icon-padding"> </span> <span class="icon-padding"> </span>
<a class="photos-order-link" href="{{$order.1}}" title="{{$order.0}}" data-toggle="tooltip"> <a class="photos-order-link page-action faded-icon" href="{{$order.1}}" title="{{$order.0}}" data-toggle="tooltip">
{{if $order.2 == "newest"}} {{if $order.2 == "newest"}}
<i class="faded-icon fa fa-sort-numeric-desc"></i> <i class="fa fa-sort-numeric-desc"></i>
{{else}} {{else}}
<i class="faded-icon fa fa-sort-numeric-asc"></i> <i class="fa fa-sort-numeric-asc"></i>
{{/if}} {{/if}}
</a> </a>
{{/if}} {{/if}}
</div> </div>
<div class="clear"></div> <div class="clear"></div>
<div class="photo-album-wrapper" id="photo-album-contents"> <div class="photo-album-wrapper" id="photo-album-contents">
{{foreach $photos as $photo}} {{foreach $photos as $photo}}
{{include file="photo_top.tpl"}} {{include file="photo_top.tpl"}}
{{/foreach}} {{/foreach}}
</div> </div>
<div class="photo-album-end"></div> <div class="photo-album-end"></div>
{{$paginate}} {{$paginate}}
<script type="text/javascript">$(document).ready(function() { loadingPage = false; justifyPhotos(); });</script>
</div> </div>
<script type="text/javascript">$(document).ready(function() { loadingPage = false; justifyPhotos(); });</script>

30
view/theme/frio/templates/photo_albums.tpl
View file

@ -1,14 +1,18 @@
<div id="sidebar-photos-albums" class="widget"> <div id="sidebar-photos-albums" class="widget">
<div class="pull-left"> <div class="pull-left">
<h3>{{$title}}</h3> <h3>{{$title}}</h3>
</div> </div>
<div class="pull-right"> <div class="pull-right">
{{if $can_post}} {{if $can_post}}
<div class="photos-upload-link" ><a href="{{$upload.1}}" title="{{$upload.0}}" data-toggle="tooltip"> <div class="photos-upload-link">
<i class="faded-icon fa fa-plus"></i> <a href="{{$upload.1}}" title="{{$upload.0}}" class="widget-action faded-icon" data-toggle="tooltip">
</a></div> <i class="fa fa-plus"></i>
{{/if}} </a>
</div> </div>
{{/if}}
</div>
<ul role="menubar" class="sidebar-photos-albums-ul clear"> <ul role="menubar" class="sidebar-photos-albums-ul clear">
<li role="menuitem" class="sidebar-photos-albums-li"> <li role="menuitem" class="sidebar-photos-albums-li">
<a href="{{$baseurl}}/photos/{{$nick}}" class="sidebar-photos-albums-element" title="{{$title}}" >{{$recent}}</a> <a href="{{$baseurl}}/photos/{{$nick}}" class="sidebar-photos-albums-element" title="{{$title}}" >{{$recent}}</a>
@ -16,13 +20,13 @@
{{if $albums}} {{if $albums}}
{{foreach $albums as $al}} {{foreach $albums as $al}}
{{if $al.text}} {{if $al.text}}
<li role="menuitem" class="sidebar-photos-albums-li"> <li role="menuitem" class="sidebar-photos-albums-li">
<a href="{{$baseurl}}/photos/{{$nick}}/album/{{$al.bin2hex}}" class="sidebar-photos-albums-element"> <a href="{{$baseurl}}/photos/{{$nick}}/album/{{$al.bin2hex}}" class="sidebar-photos-albums-element">
<span class="badge pull-right">{{$al.total}}</span>{{$al.text}} <span class="badge pull-right">{{$al.total}}</span>{{$al.text}}
</a> </a>
</li> </li>
{{/if}} {{/if}}
{{/foreach}} {{/foreach}}
{{/if}} {{/if}}
</ul> </ul>

4
view/theme/frio/templates/profile_listing_header.tpl
View file

@ -4,8 +4,8 @@
<h2>{{$header}}</h2> <h2>{{$header}}</h2>
</div> </div>
<div id="profile-listing-new-link-wrapper" class="pull-right" > <div id="profile-listing-new-link-wrapper" class="pull-right" >
<a href="{{$cr_new_link}}" id="profile-listing-new-link" title="{{$cr_new}}" data-toggle="tooltip"> <a href="{{$cr_new_link}}" id="profile-listing-new-link" class="page-action faded-icon" title="{{$cr_new}}" data-toggle="tooltip">
<i class="faded-icon fa fa-plus"></i></a> <i class="fa fa-plus"></i></a>
</div> </div>
<div class="section-content-wrapper"> <div class="section-content-wrapper">

4
view/theme/frio/templates/saved_searches_aside.tpl
View file

@ -6,7 +6,9 @@
<ul role="menu" id="saved-search-ul"> <ul role="menu" id="saved-search-ul">
{{foreach $saved as $search}} {{foreach $saved as $search}}
<li role="menuitem" class="saved-search-li clear"> <li role="menuitem" class="saved-search-li clear">
<a title="{{$search.delete}}" onclick="return confirmDelete();" id="drop-saved-search-term-{{$search.id}}" class="savedsearchdrop pull-right" href="network/?f=&amp;remove=1&amp;search={{$search.encodedterm}}"><i class="faded-icon fa fa-trash" aria-hidden="true"></i></a> <a title="{{$search.delete}}" onclick="return confirmDelete();" id="drop-saved-search-term-{{$search.id}}" class="savedsearchdrop pull-right widget-action faded-icon" href="network/?f=&amp;remove=1&amp;search={{$search.encodedterm}}">
<i class="fa fa-trash" aria-hidden="true"></i>
</a>
<a id="saved-search-term-{{$search.id}}" class="savedsearchterm" href="search?search={{$search.encodedterm}}">{{$search.term}}</a> <a id="saved-search-term-{{$search.id}}" class="savedsearchterm" href="search?search={{$search.encodedterm}}">{{$search.term}}</a>
</li> </li>
{{/foreach}} {{/foreach}}