friendica/friendica
6
0
Fork 1
mirror of https://github.com/friendica/friendica synced 2024-05-27 18:28:19 +02:00
Code Issues Packages Projects Releases 1 Wiki Activity

Merge pull request #12699 from damianwajer/frio-ux-improvements

Browse source 
[frio] Various UX improvements (mostly larger clickable areas)
This commit is contained in:
Hypolite Petovan 2023-01-19 17:05:22 -05:00 committed by GitHub
parent 15938c5b87 15a60d3b20
commit 208d6db776
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 133 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
view/templates/item/compose.tpl
View file

@ -69,8 +69,8 @@
<img role="presentation" id="profile-rotator" src="images/rotator.gif" alt="{{$l10n.wait}}" title="{{$l10n.wait}}" style="display: none;" /> <img role="presentation" id="profile-rotator" src="images/rotator.gif" alt="{{$l10n.wait}}" title="{{$l10n.wait}}" style="display: none;" />
</span> </span>
<span role="presentation" id="character-counter" class="grey text-info"></span> <span role="presentation" id="character-counter" class="grey text-info"></span>
<button type="button" class="btn btn-defaul btn-sm" onclick="preview_comment({{$id}});" id="comment-edit-preview-link-{{$id}}" tabindex="5"><i class="fa fa-eye"></i> {{$l10n.preview}}</button> <button type="button" class="btn btn-defaul" onclick="preview_comment({{$id}});" id="comment-edit-preview-link-{{$id}}" tabindex="5"><i class="fa fa-eye"></i> {{$l10n.preview}}</button>
<button type="submit" class="btn btn-primary btn-sm" id="comment-edit-submit-{{$id}}" name="submit" tabindex="4"><i class="fa fa-envelope"></i> {{$l10n.submit}}</button> <button type="submit" class="btn btn-primary" id="comment-edit-submit-{{$id}}" name="submit" tabindex="4"><i class="fa fa-envelope"></i> {{$l10n.submit}}</button>
</p> </p>
<div id="comment-edit-preview-{{$id}}" class="comment-edit-preview" style="display:none;"></div> <div id="comment-edit-preview-{{$id}}" class="comment-edit-preview" style="display:none;"></div>

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

@ -367,6 +367,10 @@ btn-eventnav:hover {
aside .badge { aside .badge {
opacity: 0.7; opacity: 0.7;
} }
.forum-widget-entry .badge,
.sidebar-group-li .badge {
margin-top: 6px;
}
/* disabled elements */ /* disabled elements */
.community-content-wrapper > h3, .community-content-wrapper > h3,
@ -807,13 +811,15 @@ nav.navbar .nav > li > button:focus {
} }
#offcanvasUsermenu a { #offcanvasUsermenu a {
display: block; display: block;
margin: -10px -15px;
padding: 10px 15px;
} }
#offcanvasUsermenu li.nav-sitename { #offcanvasUsermenu li.nav-sitename {
font-weight: bold; font-weight: bold;
} }
#topbar-first .dropdown.account li#nav-sitename { #topbar-first .dropdown.account li#nav-sitename {
padding-left: 15px; padding-left: 20px;
padding-right: 15px; padding-right: 20px;
font-weight: bold; font-weight: bold;
word-break: break-word; word-break: break-word;
} }
@ -822,6 +828,10 @@ nav.navbar .nav > li > button:focus {
background-color: $nav_bg; background-color: $nav_bg;
} }
/* Nav Search */ /* Nav Search */
.menu-popup {
max-height: calc(100vh - 55px);
overflow-y: auto;
}
#topbar-first #search-box .navbar-form { #topbar-first #search-box .navbar-form {
margin: 0px; margin: 0px;
padding: 12px 12px; padding: 12px 12px;
@ -963,13 +973,15 @@ ul li .intro-wrapper button.intro-action-link {
background-color: $nav_bg; background-color: $nav_bg;
border: none; border: none;
} }
.dropdown-menu .divider {
margin: 5px 0;
}
.nav-pills .dropdown-menu li.divider, .nav-pills .dropdown-menu li.divider,
.nav-tabs .dropdown-menu li.divider, .nav-tabs .dropdown-menu li.divider,
.account .dropdown-menu li.divider, .account .dropdown-menu li.divider,
.contact-photo-wrapper .dropdown-menu li.divider { .contact-photo-wrapper .dropdown-menu li.divider {
background-color: $menu_background_hover_color; background-color: $menu_background_hover_color;
border-bottom: none; border-bottom: none;
margin: 9px 1px !important;
} }
.nav-pills .dropdown-menu li > a, .nav-pills .dropdown-menu li > a,
.nav-tabs .dropdown-menu li > a, .nav-tabs .dropdown-menu li > a,
@ -987,8 +999,6 @@ ul li .intro-wrapper button.intro-action-link {
.contact-photo-wrapper .dropdown-menu li .btn-link { .contact-photo-wrapper .dropdown-menu li .btn-link {
color: $nav_icon_color; color: $nav_icon_color;
font-weight: 400; font-weight: 400;
font-size: 13px;
padding: 4px 15px;
width: 100%; width: 100%;
text-align: left; text-align: left;
} }
@ -1044,7 +1054,6 @@ aside .widget,
position: relative; position: relative;
margin-bottom: 20px; margin-bottom: 20px;
padding: 10px; padding: 10px;
font-size: 13px;
overflow: auto; overflow: auto;
} }
aside .widget h3, aside .widget h3,
@ -1052,7 +1061,7 @@ aside .widget h3,
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
margin: 0; margin: 0;
padding-bottom: 20px; padding-bottom: 10px;
} }
aside .widget ul, aside .widget ul,
@ -1065,10 +1074,11 @@ aside .widget ul,
list-style: none; list-style: none;
} }
aside .widget li .label {
float: left;
}
aside .widget li, aside .widget li,
.nav-container .widget li { .nav-container .widget li {
padding-top: 2px;
padding-bottom: 2px;
padding-left: 20px; padding-left: 20px;
padding-right: 10px; padding-right: 10px;
} }
@ -1081,6 +1091,12 @@ aside .widget li.selected,
border-left: 3px solid $link_color !important; border-left: 3px solid $link_color !important;
padding-left: 17px; padding-left: 17px;
} }
.side-link-link,
aside .widget li a {
display: block;
padding-top: 6px;
padding-bottom: 6px;
}
aside .widget li a, aside .widget li a,
aside .widget li a:hover { aside .widget li a:hover {
color: $font_color_darker; color: $font_color_darker;
@ -1300,8 +1316,12 @@ div#sidebar-group-list {
} }
.group-edit-tool { .group-edit-tool {
padding-top: 0;
color: $font_color_darker; color: $font_color_darker;
} }
.sidebar-widget-header .group-edit-tool {
margin-top: -5px;
}
.faded-icon { .faded-icon {
color: $font_color_darker; color: $font_color_darker;
@ -1316,9 +1336,12 @@ div#sidebar-group-list {
margin-left: 20px; margin-left: 20px;
} }
aside #group-sidebar .sidebar-group-li:hover .group-edit-tool.faded-icon, aside .widget-action {
aside #saved-search-list .saved-search-li:hover .savedsearchdrop.faded-icon, padding: 5px 10px;
aside .widget:hover .widget-action.faded-icon { }
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: 0.8; opacity: 0.8;
transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;
} }
@ -1328,7 +1351,7 @@ aside .widget .widget-action.faded-icon:hover {
opacity: 1; opacity: 1;
} }
aside #group-sidebar li .group-checkbox { aside #group-sidebar li .group-checkbox {
margin: 0; margin: 6px 0 0;
} }
aside #group-sidebar li .group-edit-tool { aside #group-sidebar li .group-edit-tool {
padding-right: 10px; padding-right: 10px;
@ -1762,9 +1785,6 @@ blockquote.shared_content {
} }
/* wall items contact info */ /* wall items contact info */
.media .media-body {
font-size: 13px;
}
.media .media-body h4.media-heading { .media .media-body h4.media-heading {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
@ -1930,6 +1950,9 @@ code > .hl-main {
margin: 10px 0; margin: 10px 0;
font-size: 13px; font-size: 13px;
} }
.wall-item-tags:empty {
margin: 0;
}
.wall-item-tags a { .wall-item-tags a {
color: $font_color_darker; color: $font_color_darker;
@ -1953,14 +1976,16 @@ code > .hl-main {
margin: 0; margin: 0;
justify-content: space-between; justify-content: space-between;
} }
.wall-item-actions .btn,
.wall-item-actions a, .wall-item-actions a,
.wall-item-actions button { .wall-item-actions button {
font-size: 13px;
color: $font_color_darker; color: $font_color_darker;
background-color: transparent;
} }
.wall-item-actions .active { .wall-item-actions .active {
font-weight: bold; font-weight: bold;
color: $link_color; color: $link_color;
box-shadow: none;
} }
.wall-item-actions-left { .wall-item-actions-left {
display: table-cell; display: table-cell;
@ -1970,17 +1995,31 @@ code > .hl-main {
display: flex; display: flex;
} }
.wall-item-actions .checkbox { .wall-item-actions .checkbox {
margin: 0; margin: 0 0 0 15px;
margin-left: 20px; }
@media screen and (max-width: 767px) {
.wall-item-actions .btn,
.wall-item-actions a,
.wall-item-actions button {
padding-right: 12px;
padding-left: 12px;
}
.wall-item-actions .checkbox {
margin-top: 8px;
}
.wall-item-actions .like-rotator {
padding-top: 8px;
}
} }
.wall-item-actions button:hover { .wall-item-actions button:hover {
color: $font_color_darker;
text-decoration: underline; text-decoration: underline;
} }
.wall-item-actions .separator { .wall-item-actions .separator {
margin: 0 0.3em; margin: 0 0.3em;
} }
.wall-item-responses {
margin-top: .3em;
}
.wall-item-responses > div > p { .wall-item-responses > div > p {
margin: 0; margin: 0;
} }
@ -2174,6 +2213,10 @@ the section element. Only after we have
moved it to the nav through js */ moved it to the nav through js */
display: none !important; display: none !important;
} }
.tabbar-wrapper__link {
padding-right: 10px;
padding-left: 10px;
}
#tabmenu, #tabmenu,
.tabbar-wrapper, .tabbar-wrapper,
.tabbar, .tabbar,
@ -2190,7 +2233,6 @@ ul.tabs {
list-style: none; list-style: none;
height: 100%; height: 100%;
padding: 0; padding: 0;
padding-top: 10px;
margin: 0; margin: 0;
} }
ul.tabs li { ul.tabs li {
@ -2203,8 +2245,9 @@ ul.tabs li {
transition: all 0.15s ease; transition: all 0.15s ease;
} }
ul.tabs li a { ul.tabs li a {
margin-left: 10px; display: block;
margin-right: 10px; padding-top: 11px;
padding-bottom: 11px;
} }
ul.tabs li:hover, ul.tabs li:hover,
ul.tabs li.active { ul.tabs li.active {
@ -2214,7 +2257,7 @@ ul.tabs li.active {
padding-top: 0; padding-top: 0;
} }
#dropdownMenuTools-xs { #dropdownMenuTools-xs {
padding: 9px 10px; padding: 9px 15px;
} }
ul.tabbar ul.tabs-extended:hover li.dropdown { ul.tabbar ul.tabs-extended:hover li.dropdown {
border-bottom: 0; border-bottom: 0;
@ -2236,6 +2279,12 @@ ul.dropdown-menu li:hover {
box-sizing: border-box; box-sizing: border-box;
} }
/* Dropdown Menu */ /* Dropdown Menu */
.dropdown-menu li .btn-link,
.dropdown-menu li a,
.tabs .dropdown-menu li a {
padding: 6px 20px;
font-size: 14px;
}
.dropdown-menu li a, .dropdown-menu li a,
.dropdown-menu li .btn-link { .dropdown-menu li .btn-link {
color: $font_color_darker; color: $font_color_darker;
@ -2493,20 +2542,18 @@ ul.viewcontact_wrapper > li {
} }
.contact-wrapper .contact-actions { .contact-wrapper .contact-actions {
display: flex; display: flex;
position: relative;
margin: -8px -8px 0 0;
} }
.contact-wrapper .contact-action-link, .contact-wrapper .contact-action-link,
.contact-wrapper .contact-action-link:hover, .contact-wrapper .contact-action-link:hover,
.textcomplete-item .contact-wrapper .contact-action-link { .textcomplete-item .contact-wrapper .contact-action-link {
padding: 0 5px;
color: $font_color_darker; color: $font_color_darker;
border: 0; border: 0;
} }
.contact-wrapper .contact-action-link { .contact-wrapper .contact-action-link {
opacity: 0.1; background-color: transparent;
transition: all 0.25s ease-in-out; opacity: 0.3;
}
ul li:hover .contact-wrapper .contact-action-link {
opacity: 0.8;
transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;
} }
ul li:hover .contact-wrapper .contact-action-link:hover { ul li:hover .contact-wrapper .contact-action-link:hover {
@ -2912,6 +2959,10 @@ ul li:hover .contact-wrapper .contact-action-link:hover {
.section-subtitle-wrapper { .section-subtitle-wrapper {
padding: 1px 10px; padding: 1px 10px;
} }
.accordion-toggle {
width: 100%;
text-align: left;
}
details.profile-jot-net[open] summary:before, details.profile-jot-net[open] summary:before,
.panel .section-subtitle-wrapper .accordion-toggle:before { .panel .section-subtitle-wrapper .accordion-toggle:before {
font-family: ForkAwesome; font-family: ForkAwesome;
@ -2976,6 +3027,12 @@ details.profile-jot-net[open] summary:before {
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.section-subtitle-wrapper > h2 .accordion-toggle {
margin-top: -10px;
margin-bottom: -10px;
padding-top: 10px;
padding-bottom: 10px;
}
.section-subtitle-wrapper > h3 { .section-subtitle-wrapper > h3 {
font-size: 16px; font-size: 16px;

2
view/theme/frio/templates/calendar/calendar.tpl
View file

@ -17,7 +17,7 @@
{{* The dropdown to change the callendar view *}} {{* The dropdown to change the callendar view *}}
<ul class="nav nav-pills"> <ul class="nav nav-pills">
<li class="dropdown pull-right"> <li class="dropdown pull-right">
<button class="btn btn-link btn-sm dropdown-toggle" type="button" id="event-calendar-views" data-toggle="dropdown" aria-expanded="false"> <button class="btn btn-link dropdown-toggle" type="button" id="event-calendar-views" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-angle-down" aria-hidden="true"></i> {{$view}} <i class="fa fa-angle-down" aria-hidden="true"></i> {{$view}}
</button> </button>
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="event-calendar-views"> <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="event-calendar-views">

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

@ -54,9 +54,9 @@
<p class="comment-edit-submit-wrapper"> <p class="comment-edit-submit-wrapper">
{{if $preview}} {{if $preview}}
<button type="button" class="btn btn-defaul btn-sm comment-edit-preview" onclick="preview_comment({{$id}});" id="comment-edit-preview-link-{{$id}}"><i class="fa fa-eye"></i> {{$preview}}</button> <button type="button" class="btn btn-defaul comment-edit-preview" onclick="preview_comment({{$id}});" id="comment-edit-preview-link-{{$id}}"><i class="fa fa-eye"></i> {{$preview}}</button>
{{/if}} {{/if}}
<button type="submit" class="btn btn-primary btn-sm comment-edit-submit" id="comment-edit-submit-{{$id}}" name="submit" data-loading-text="{{$loading}}"><i class="fa fa-envelope"></i> {{$submit}}</button> <button type="submit" class="btn btn-primary comment-edit-submit" id="comment-edit-submit-{{$id}}" name="submit" data-loading-text="{{$loading}}"><i class="fa fa-envelope"></i> {{$submit}}</button>
</p> </p>
<div class="comment-edit-end clear"></div> <div class="comment-edit-end clear"></div>

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

@ -6,7 +6,7 @@
<ul class="tabs flex-nav" role="menu"> <ul class="tabs flex-nav" role="menu">
{{foreach $tabs as $tab}} {{foreach $tabs as $tab}}
<li id="{{$tab.id}}" role="presentation" {{if $tab.sel}} class="{{$tab.sel}}" {{/if}}> <li id="{{$tab.id}}" role="presentation" {{if $tab.sel}} class="{{$tab.sel}}" {{/if}}>
<a role="menuitem" href="{{$tab.url}}" {{if $tab.accesskey}}accesskey="{{$tab.accesskey}}" {{/if}} <a role="menuitem" class="tabbar-wrapper__link" href="{{$tab.url}}" {{if $tab.accesskey}}accesskey="{{$tab.accesskey}}" {{/if}}
{{if $tab.title}} title="{{$tab.title}}" {{/if}}> {{if $tab.title}} title="{{$tab.title}}" {{/if}}>
{{$tab.label}} {{$tab.label}}
</a> </a>
@ -37,7 +37,7 @@
{{foreach $tabs as $tab}} {{foreach $tabs as $tab}}
{{if $tab.sel}} {{if $tab.sel}}
<li id="{{$tab.id}}-xs" role="presentation" {{if $tab.sel}} class="{{$tab.sel}}" {{/if}}> <li id="{{$tab.id}}-xs" role="presentation" {{if $tab.sel}} class="{{$tab.sel}}" {{/if}}>
<a role="menuitem" href="{{$tab.url}}" {{if $tab.title}} title="{{$tab.title}}" {{/if}}> <a role="menuitem" class="tabbar-wrapper__link" href="{{$tab.url}}" {{if $tab.title}} title="{{$tab.title}}" {{/if}}>
{{$tab.label}} {{$tab.label}}
</a> </a>
</li> </li>

16
view/theme/frio/templates/contact/entry.tpl
View file

@ -12,7 +12,7 @@
</div> </div>
{{* For very small displays we use a dropdown menu for contact relating actions *}} {{* For very small displays we use a dropdown menu for contact relating actions *}}
<button type="button" class="btn btn-link dropdown-toggle visible-xs" id="contact-photo-menu-button-{{$contact.id}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" class="btn btn-default dropdown-toggle visible-xs" id="contact-photo-menu-button-{{$contact.id}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{* use a smaller picture on very small displays (e.g. mobiles) *}} {{* use a smaller picture on very small displays (e.g. mobiles) *}}
<div class="contact-photo-image-wrapper visible-xs"> <div class="contact-photo-image-wrapper visible-xs">
<img class="contact-photo-xs media-object" src="{{$contact.thumb}}" {{$contact.sparkle}} alt="{{$contact.name}}" /> <img class="contact-photo-xs media-object" src="{{$contact.thumb}}" {{$contact.sparkle}} alt="{{$contact.name}}" />
@ -44,29 +44,29 @@
<div class="media-body"> <div class="media-body">
{{if $contact.photo_menu}} {{if $contact.photo_menu}}
{{* The contact actions like private mail, delete contact, edit contact and so on *}} {{* The contact actions like private mail, delete contact, edit contact and so on *}}
<div class="contact-actions pull-right nav-pills preferences hidden-xs"> <div class="btn-group contact-actions pull-right nav-pills preferences hidden-xs" role="group">
{{if $contact.photo_menu.pm}} {{if $contact.photo_menu.pm}}
<button type="button" class="contact-action-link btn-link" onclick="addToModal('{{$contact.photo_menu.pm.1}}'); return false;" data-toggle="tooltip" title="{{$contact.photo_menu.pm.0}}"> <button type="button" class="contact-action-link btn btn-default" onclick="addToModal('{{$contact.photo_menu.pm.1}}'); return false;" data-toggle="tooltip" title="{{$contact.photo_menu.pm.0}}">
<i class="fa fa-envelope" aria-hidden="true"></i> <i class="fa fa-envelope" aria-hidden="true"></i>
</button> </button>
{{/if}} {{/if}}
{{if $contact.photo_menu.network}} {{if $contact.photo_menu.network}}
<a class="contact-action-link btn-link" href="{{$contact.photo_menu.network.1}}" data-toggle="tooltip" title="{{$contact.photo_menu.network.0}}"> <a class="contact-action-link btn btn-default" href="{{$contact.photo_menu.network.1}}" data-toggle="tooltip" title="{{$contact.photo_menu.network.0}}">
<i class="fa fa-cloud" aria-hidden="true"></i> <i class="fa fa-cloud" aria-hidden="true"></i>
</a> </a>
{{/if}} {{/if}}
{{if $contact.photo_menu.follow}} {{if $contact.photo_menu.follow}}
<a class="contact-action-link btn-link" href="{{$contact.photo_menu.follow.1}}" data-toggle="tooltip" title="{{$contact.photo_menu.follow.0}}"> <a class="contact-action-link btn btn-default" href="{{$contact.photo_menu.follow.1}}" data-toggle="tooltip" title="{{$contact.photo_menu.follow.0}}">
<i class="fa fa-user-plus" aria-hidden="true"></i> <i class="fa fa-user-plus" aria-hidden="true"></i>
</a> </a>
{{/if}} {{/if}}
{{if $contact.photo_menu.unfollow}} {{if $contact.photo_menu.unfollow}}
<a class="contact-action-link btn-link" href="{{$contact.photo_menu.unfollow.1}}" data-toggle="tooltip" title="{{$contact.photo_menu.unfollow.0}}"> <a class="contact-action-link btn btn-default" href="{{$contact.photo_menu.unfollow.1}}" data-toggle="tooltip" title="{{$contact.photo_menu.unfollow.0}}">
<i class="fa fa-user-times" aria-hidden="true"></i> <i class="fa fa-user-times" aria-hidden="true"></i>
</a> </a>
{{/if}} {{/if}}
{{if $contact.photo_menu.hide}} {{if $contact.photo_menu.hide}}
<a class="contact-action-link btn-link" href="{{$contact.photo_menu.hide.1}}" data-toggle="tooltip" title="{{$contact.photo_menu.hide.0}}"> <a class="contact-action-link btn btn-default" href="{{$contact.photo_menu.hide.1}}" data-toggle="tooltip" title="{{$contact.photo_menu.hide.0}}">
<i class="fa fa-times" aria-hidden="true"></i> <i class="fa fa-times" aria-hidden="true"></i>
</a> </a>
{{/if}} {{/if}}
@ -76,7 +76,7 @@
{{* The button to add or remove contacts from a contact group - group edit page *}} {{* The button to add or remove contacts from a contact group - group edit page *}}
{{if $contact.change_member}} {{if $contact.change_member}}
<div class="contact-group-actions pull-right nav-pills preferences"> <div class="contact-group-actions pull-right nav-pills preferences">
<button type="button" class="contact-action-link contact-group-link btn-link" onclick="groupChangeMember({{$contact.change_member.gid}},{{$contact.change_member.cid}},'{{$contact.change_member.sec_token}}'); return true;" data-toggle="tooltip" title="{{$contact.change_member.title}}"> <button type="button" class="contact-action-link btn contact-group-link btn-default" onclick="groupChangeMember({{$contact.change_member.gid}},{{$contact.change_member.cid}},'{{$contact.change_member.sec_token}}'); return true;" data-toggle="tooltip" title="{{$contact.change_member.title}}">
{{if $contact.label == "members"}} {{if $contact.label == "members"}}
<i class="fa fa-times-circle" aria-hidden="true"></i> <i class="fa fa-times-circle" aria-hidden="true"></i>
{{elseif $contact.label == "contacts"}} {{elseif $contact.label == "contacts"}}

2
view/theme/frio/templates/contact_edit.tpl
View file

@ -14,7 +14,7 @@
{{* This is the Action menu where contact related actions like 'ignore', 'hide' can be performed *}} {{* This is the Action menu where contact related actions like 'ignore', 'hide' can be performed *}}
<ul id="contact-edit-actions" class="nav nav-pills preferences"> <ul id="contact-edit-actions" class="nav nav-pills preferences">
<li class="dropdown pull-right"> <li class="dropdown pull-right">
<button type="button" class="btn btn-link btn-sm dropdown-toggle" id="contact-edit-actions-button" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-link dropdown-toggle" id="contact-edit-actions-button" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-angle-down" aria-hidden="true"></i>&nbsp;{{$contact_action_button}} <i class="fa fa-angle-down" aria-hidden="true"></i>&nbsp;{{$contact_action_button}}
</button> </button>

2
view/theme/frio/templates/contacts-template.tpl
View file

@ -34,7 +34,7 @@
{{* We put the contact batch actions in a dropdown menu *}} {{* We put the contact batch actions in a dropdown menu *}}
<ul class="nav nav-pills preferences"> <ul class="nav nav-pills preferences">
<li class="dropdown pull-right"> <li class="dropdown pull-right">
<button type="button" class="btn btn-link btn-sm dropdown-toggle" id="BatchActionDropdownMenuTools" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-link dropdown-toggle" id="BatchActionDropdownMenuTools" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-angle-down"></i>&nbsp;{{$h_batch_actions}} <i class="fa fa-angle-down"></i>&nbsp;{{$h_batch_actions}}
</button> </button>
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="BatchActionDropdownMenuTools"> <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="BatchActionDropdownMenuTools">

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

@ -2,7 +2,7 @@
<h3>{{$title}}</h3> <h3>{{$title}}</h3>
</span> </span>
<div class="widget" id="group-sidebar"> <div class="widget" id="group-sidebar">
<div id="sidebar-group-header"> <div id="sidebar-group-header" class="sidebar-widget-header">
<span class="fakelink" onclick="openCloseWidget('group-sidebar', 'group-sidebar-inflated');"> <span class="fakelink" onclick="openCloseWidget('group-sidebar', 'group-sidebar-inflated');">
<h3>{{$title}}</h3> <h3>{{$title}}</h3>
</span> </span>
@ -22,7 +22,7 @@
</form> </form>
{{/if}} {{/if}}
</div> </div>
<div id="sidebar-group-list"> <div id="sidebar-group-list" class="sidebar-widget-list">
{{* The list of available groups *}} {{* The list of available groups *}}
<ul role="menu" id="sidebar-group-ul"> <ul role="menu" id="sidebar-group-ul">
{{foreach $groups as $group}} {{foreach $groups as $group}}

8
view/theme/frio/templates/profile/vcard.tpl
View file

@ -42,12 +42,12 @@
{{if $follow_link || $unfollow_link}} {{if $follow_link || $unfollow_link}}
<div id="dfrn-request-link-button"> <div id="dfrn-request-link-button">
{{if $unfollow_link}} {{if $unfollow_link}}
<a id="dfrn-request-link" class="btn btn-labeled btn-primary btn-sm" href="{{$unfollow_link}}"> <a id="dfrn-request-link" class="btn btn-labeled btn-primary" href="{{$unfollow_link}}">
<span class=""><i class="fa fa-user-times"></i></span> <span class=""><i class="fa fa-user-times"></i></span>
<span class="">{{$unfollow}}</span> <span class="">{{$unfollow}}</span>
</a> </a>
{{else}} {{else}}
<a id="dfrn-request-link" class="btn btn-labeled btn-primary btn-sm" href="{{$follow_link}}"> <a id="dfrn-request-link" class="btn btn-labeled btn-primary" href="{{$follow_link}}">
<span class=""><i class="fa fa-user-plus"></i></span> <span class=""><i class="fa fa-user-plus"></i></span>
<span class="">{{$follow}}</span> <span class="">{{$follow}}</span>
</a> </a>
@ -56,7 +56,7 @@
{{/if}} {{/if}}
{{if $subscribe_feed_link}} {{if $subscribe_feed_link}}
<div id="subscribe-feed-link-button"> <div id="subscribe-feed-link-button">
<a id="subscribe-feed-link" class="btn btn-labeled btn-primary btn-sm" href="{{$subscribe_feed_link}}"> <a id="subscribe-feed-link" class="btn btn-labeled btn-primary" href="{{$subscribe_feed_link}}">
<span class=""><i class="fa fa-rss"></i></span> <span class=""><i class="fa fa-rss"></i></span>
<span class="">{{$subscribe_feed}}</span> <span class="">{{$subscribe_feed}}</span>
</a> </a>
@ -64,7 +64,7 @@
{{/if}} {{/if}}
{{if $wallmessage_link}} {{if $wallmessage_link}}
<div id="wallmessage-link-botton"> <div id="wallmessage-link-botton">
<button type="button" id="wallmessage-link" class="btn btn-labeled btn-primary btn-sm" onclick="openWallMessage('{{$wallmessage_link}}')"> <button type="button" id="wallmessage-link" class="btn btn-labeled btn-primary" onclick="openWallMessage('{{$wallmessage_link}}')">
<span class=""><i class="fa fa-envelope"></i></span> <span class=""><i class="fa fa-envelope"></i></span>
<span class="">{{$wallmessage}}</span> <span class="">{{$wallmessage}}</span>
</button> </button>

2
view/theme/frio/templates/settings/profile/index.tpl
View file

@ -5,7 +5,7 @@
<div id="profile-edit-links"> <div id="profile-edit-links">
<ul class="nav nav-pills preferences"> <ul class="nav nav-pills preferences">
<li class="dropdown pull-right"> <li class="dropdown pull-right">
<button type="button" class="btn btn-link btn-sm dropdown-toggle" id="profile-edit-links-dropdown" data-toggle="dropdown" aria-expanded="false"> <button type="button" class="btn btn-link dropdown-toggle" id="profile-edit-links-dropdown" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-angle-down" aria-hidden="true"></i>&nbsp;{{$profile_action}} <i class="fa fa-angle-down" aria-hidden="true"></i>&nbsp;{{$profile_action}}
</button> </button>
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="profile-edit-links-dropdown"> <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="profile-edit-links-dropdown">

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

@ -436,29 +436,25 @@ as the value of $top_child_total (this is done at the end of this file)
</span> </span>
</span> </span>
<div class="btn-toolbar visible-xs" role="toolbar"> <div class="btn-toolbar btn-group visible-xs" role="group">
{{* Buttons for like and dislike *}} {{* Buttons for like and dislike *}}
{{if $item.vote}} {{if $item.vote}}
<div class="btn-group" role="group">
{{if $item.vote.like}} {{if $item.vote.like}}
<button type="button" class="btn btn-sm button-likes{{if $item.responses.like.self}} active" aria-pressed="true{{/if}}" id="like-{{$item.id}}" title="{{$item.vote.like.0}}" onclick="doActivityItemAction({{$item.id}}, 'like'{{if $item.responses.like.self}}, true{{/if}});" data-toggle="button"><i class="fa fa-thumbs-up" aria-hidden="true"></i></button> <button type="button" class="btn button-likes{{if $item.responses.like.self}} active" aria-pressed="true{{/if}}" id="like-{{$item.id}}" title="{{$item.vote.like.0}}" onclick="doActivityItemAction({{$item.id}}, 'like'{{if $item.responses.like.self}}, true{{/if}});" data-toggle="button"><i class="fa fa-thumbs-up" aria-hidden="true"></i></button>
{{/if}} {{/if}}
{{if $item.vote.dislike}} {{if $item.vote.dislike}}
<button type="button" class="btn btn-sm button-likes{{if $item.responses.dislike.self}} active" aria-pressed="true{{/if}}" id="dislike-{{$item.id}}" title="{{$item.vote.dislike.0}}" onclick="doActivityItemAction({{$item.id}}, 'dislike'{{if $item.responses.dislike.self}}, true{{/if}});" data-toggle="button"><i class="fa fa-thumbs-down" aria-hidden="true"></i></button> <button type="button" class="btn button-likes{{if $item.responses.dislike.self}} active" aria-pressed="true{{/if}}" id="dislike-{{$item.id}}" title="{{$item.vote.dislike.0}}" onclick="doActivityItemAction({{$item.id}}, 'dislike'{{if $item.responses.dislike.self}}, true{{/if}});" data-toggle="button"><i class="fa fa-thumbs-down" aria-hidden="true"></i></button>
{{/if}} {{/if}}
</div>
{{/if}} {{/if}}
{{* Button to open the comment text field *}} {{* Button to open the comment text field *}}
{{if $item.comment_html}} {{if $item.comment_html}}
<div class="btn-group" role="group"> <button type="button" class="btn button-comments" id="comment-{{$item.id}}" title="{{$item.switchcomment}}" {{if $item.thread_level != 1}}onclick="openClose('item-comments-{{$item.id}}'); commentExpand({{$item.id}});" {{else}} onclick="openClose('item-comments-{{$item.id}}'); commentExpand({{$item.id}});"{{/if}}><i class="fa fa-commenting" aria-hidden="true"></i></button>
<button type="button" class="btn btn-sm button-comments" id="comment-{{$item.id}}" title="{{$item.switchcomment}}" {{if $item.thread_level != 1}}onclick="openClose('item-comments-{{$item.id}}'); commentExpand({{$item.id}});" {{else}} onclick="openClose('item-comments-{{$item.id}}'); commentExpand({{$item.id}});"{{/if}}><i class="fa fa-commenting" aria-hidden="true"></i></button>
</div>
{{/if}} {{/if}}
{{if $item.vote.announce OR $item.vote.share}} {{if $item.vote.announce OR $item.vote.share}}
<div class="share-links btn-group{{if $item.thread_level > 1}} dropup{{/if}}"> <div class="share-links btn-group{{if $item.thread_level > 1}} dropup{{/if}}" role="group">
<button type="button" class="btn btn-sm dropdown-toggle{{if $item.responses.announce.self}} active{{/if}}" data-toggle="dropdown" id="shareMenuOptions-{{$item.id}}" aria-haspopup="true" aria-expanded="false" title="{{$item.menu}}"> <button type="button" class="btn dropdown-toggle{{if $item.responses.announce.self}} active{{/if}}" data-toggle="dropdown" id="shareMenuOptions-{{$item.id}}" aria-haspopup="true" aria-expanded="false" title="{{$item.menu}}">
<i class="fa fa-share" aria-hidden="true"></i> <i class="fa fa-share" aria-hidden="true"></i>
</button> </button>
<ul class="dropdown-menu dropdown-menu-left" role="menu" aria-labelledby="shareMenuOptions-{{$item.id}}"> <ul class="dropdown-menu dropdown-menu-left" role="menu" aria-labelledby="shareMenuOptions-{{$item.id}}">
@ -487,28 +483,26 @@ as the value of $top_child_total (this is done at the end of this file)
{{/if}} {{/if}}
{{if $item.browsershare}} {{if $item.browsershare}}
<button type="button" class="btn btn-sm button-browser-share" onclick="navigator.share({url: '{{$item.plink.orig}}'})" title="{{$item.browsershare.1}}"><i class="fa fa-share-alt"></i></button> <button type="button" class="btn button-browser-share" onclick="navigator.share({url: '{{$item.plink.orig}}'})" title="{{$item.browsershare.1}}"><i class="fa fa-share-alt"></i></button>
{{/if}} {{/if}}
{{* Put additional actions in a dropdown menu *}} {{* Put additional actions in a dropdown menu *}}
<div class="btn-group" role="group"> <img id="like-rotator-{{$item.id}}" class="like-rotator" src="images/rotator.gif" alt="{{$item.wait}}" title="{{$item.wait}}" style="display: none;" />
<img id="like-rotator-{{$item.id}}" class="like-rotator" src="images/rotator.gif" alt="{{$item.wait}}" title="{{$item.wait}}" style="display: none;" />
</div>
</div> </div>
<div class="wall-item-actions-right visible-xs"> <div class="wall-item-actions-right visible-xs">
{{* Event attendance buttons *}} {{* Event attendance buttons *}}
{{if $item.isevent}} {{if $item.isevent}}
<div class="btn-group" role="group"> <div class="btn-group" role="group">
<button type="button" class="btn btn-sm btn-default button-event{{if $item.responses.attendyes.self}} active" aria-pressed="true{{/if}}" id="attendyes-{{$item.id}}" title="{{$item.attend.0}}" onclick="doActivityItemAction({{$item.id}}, 'attendyes'{{if $item.responses.attendyes.self}}, true{{/if}});"><i class="fa fa-check" aria-hidden="true"><span class="sr-only">{{$item.attend.0}}</span></i></button> <button type="button" class="btn btn-default button-event{{if $item.responses.attendyes.self}} active" aria-pressed="true{{/if}}" id="attendyes-{{$item.id}}" title="{{$item.attend.0}}" onclick="doActivityItemAction({{$item.id}}, 'attendyes'{{if $item.responses.attendyes.self}}, true{{/if}});"><i class="fa fa-check" aria-hidden="true"><span class="sr-only">{{$item.attend.0}}</span></i></button>
<button type="button" class="btn btn-sm btn-default button-event{{if $item.responses.attendno.self}} active" aria-pressed="true{{/if}}" id="attendno-{{$item.id}}" title="{{$item.attend.1}}" onclick="doActivityItemAction({{$item.id}}, 'attendno'{{if $item.responses.attendno.self}}, true{{/if}});"><i class="fa fa-times" aria-hidden="true"><span class="sr-only">{{$item.attend.1}}</span></i></button> <button type="button" class="btn btn-default button-event{{if $item.responses.attendno.self}} active" aria-pressed="true{{/if}}" id="attendno-{{$item.id}}" title="{{$item.attend.1}}" onclick="doActivityItemAction({{$item.id}}, 'attendno'{{if $item.responses.attendno.self}}, true{{/if}});"><i class="fa fa-times" aria-hidden="true"><span class="sr-only">{{$item.attend.1}}</span></i></button>
<button type="button" class="btn btn-sm btn-default button-event{{if $item.responses.attendmaybe.self}} active" aria-pressed="true{{/if}}" id="attendmaybe-{{$item.id}}" title="{{$item.attend.2}}" onclick="doActivityItemAction({{$item.id}}, 'attendmaybe'{{if $item.responses.attendmaybe.self}}, true{{/if}});"><i class="fa fa-question" aria-hidden="true"><span class="sr-only">{{$item.attend.2}}</span></i></button> <button type="button" class="btn btn-default button-event{{if $item.responses.attendmaybe.self}} active" aria-pressed="true{{/if}}" id="attendmaybe-{{$item.id}}" title="{{$item.attend.2}}" onclick="doActivityItemAction({{$item.id}}, 'attendmaybe'{{if $item.responses.attendmaybe.self}}, true{{/if}});"><i class="fa fa-question" aria-hidden="true"><span class="sr-only">{{$item.attend.2}}</span></i></button>
</div> </div>
{{/if}} {{/if}}
{{if $item.edpost || $item.tagger || $item.filer || $item.pin || $item.star || $item.follow_thread || $item.ignore || ($item.drop && $item.drop.dropping)}} {{if $item.edpost || $item.tagger || $item.filer || $item.pin || $item.star || $item.follow_thread || $item.ignore || ($item.drop && $item.drop.dropping)}}
<div class="more-links btn-group{{if $item.thread_level > 1}} dropup{{/if}}"> <div class="more-links btn-group{{if $item.thread_level > 1}} dropup{{/if}}">
<button type="button" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" id="dropdownMenuOptions-{{$item.id}}" aria-haspopup="true" aria-expanded="false" title="{{$item.menu}}"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></button> <button type="button" class="btn dropdown-toggle" data-toggle="dropdown" id="dropdownMenuOptions-{{$item.id}}" aria-haspopup="true" aria-expanded="false" title="{{$item.menu}}"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></button>
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenuOptions-{{$item.id}}"> <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenuOptions-{{$item.id}}">
{{if $item.edpost}} {{* edit the posting *}} {{if $item.edpost}} {{* edit the posting *}}
<li role="menuitem"> <li role="menuitem">

12
view/theme/frio/templates/widget/peoplefind.tpl
View file

@ -11,14 +11,14 @@
</form> </form>
{{* Directory links *}} {{* Directory links *}}
<div class="side-link" id="side-directory-link"><a href="directory">{{$nv.local_directory}}</a></div> <div class="side-link" id="side-directory-link"><a href="directory" class="side-link-link">{{$nv.local_directory}}</a></div>
<div class="side-link" id="side-directory-link"><a href="{{$nv.global_dir}}" target="extlink">{{$nv.directory}}</a></div> <div class="side-link" id="side-directory-link"><a href="{{$nv.global_dir}}" class="side-link-link" target="extlink">{{$nv.directory}}</a></div>
{{* Additional links *}} {{* Additional links *}}
<div class="side-link" id="side-match-link"><a href="contact/match">{{$nv.similar}}</a></div> <div class="side-link" id="side-match-link"><a href="contact/match" class="side-link-link">{{$nv.similar}}</a></div>
<div class="side-link" id="side-suggest-link"><a href="contact/suggestions">{{$nv.suggest}}</a></div> <div class="side-link" id="side-suggest-link"><a href="contact/suggestions" class="side-link-link">{{$nv.suggest}}</a></div>
<div class="side-link" id="side-random-profile-link"><a href="randprof" target="extlink">{{$nv.random}}</a></div> <div class="side-link" id="side-random-profile-link"><a href="randprof" class="side-link-link" target="extlink">{{$nv.random}}</a></div>
{{if $nv.inv}} {{if $nv.inv}}
<div class="side-link" id="side-invite-link"><button type="button" class="btn-link" onclick="addToModal('invite'); return false;">{{$nv.inv}}</button></div> <div class="side-link" id="side-invite-link"><button type="button" class="btn-link side-link-link" onclick="addToModal('invite'); return false;">{{$nv.inv}}</button></div>
{{/if}} {{/if}}
</div> </div>

6
view/theme/frio/templates/widget/vcard.tpl
View file

@ -36,13 +36,13 @@
<div id="profile-extra-links"> <div id="profile-extra-links">
<div id="dfrn-request-link-button"> <div id="dfrn-request-link-button">
{{if $follow_link}} {{if $follow_link}}
<a id="dfrn-request-link" class="btn btn-labeled btn-primary btn-sm" href="{{$follow_link}}""> <a id="dfrn-request-link" class="btn btn-labeled btn-primary" href="{{$follow_link}}"">
<span class=""><i class="fa fa-user-plus"></i></span> <span class=""><i class="fa fa-user-plus"></i></span>
<span class="">{{$follow}}</span> <span class="">{{$follow}}</span>
</a> </a>
{{/if}} {{/if}}
{{if $unfollow_link}} {{if $unfollow_link}}
<a id="dfrn-request-link" class="btn btn-labeled btn-primary btn-sm" href="{{$unfollow_link}}"> <a id="dfrn-request-link" class="btn btn-labeled btn-primary" href="{{$unfollow_link}}">
<span class=""><i class="fa fa-user-times"></i></span> <span class=""><i class="fa fa-user-times"></i></span>
<span class="">{{$unfollow}}</span> <span class="">{{$unfollow}}</span>
</a> </a>
@ -50,7 +50,7 @@
</div> </div>
{{if $wallmessage_link}} {{if $wallmessage_link}}
<div id="wallmessage-link-botton"> <div id="wallmessage-link-botton">
<button type="button" id="wallmessage-link" class="btn btn-labeled btn-primary btn-sm" onclick="openWallMessage('{{$wallmessage_link}}')"> <button type="button" id="wallmessage-link" class="btn btn-labeled btn-primary" onclick="openWallMessage('{{$wallmessage_link}}')">
<span class=""><i class="fa fa-envelope"></i></span> <span class=""><i class="fa fa-envelope"></i></span>
<span class="">{{$wallmessage}}</span> <span class="">{{$wallmessage}}</span>
</button> </button>