[frio] Prevent more action menu to be clipped by the post box

- Address https://friendica.mrpetovan.com/display/0b6b25a8-615e-3dda-937e-21e937937450
- Move external link back to the post top right
- Prevent more action menu to become semi-transparent on post mouseout

view/theme/frio/css/style.css

@@ -524,17 +524,6 @@ nav.navbar .nav > li > button:focus
     top: 4px;
     right: -2px;
     background-color: #ff8989;
-
-/*    text-transform: uppercase;
-    display: inline-block;
-    padding: 3px 5px 4px;
-    font-weight: 600;
-    font-size: 10px!important;
-    color: #fff!important;
-    vertical-align: baseline;
-    white-space: nowrap;
-    text-shadow: none;
-    display: none;*/
 }
 #topbar-first #intro-update{
     cursor: pointer;
@@ -961,19 +950,6 @@ nav.navbar .nav > li > button:focus
     color: #555;
     margin-bottom: 15px;
 }
-.nav-pills.preferences .dropdown .dropdown-toggle,
-.nav-pills.preferences > li > .btn {
-    color: #bebebe;
-}
-.nav-pills.preferences .dropdown.open .dropdown-toggle,
-.nav-pills.preferences .dropdown.open .dropdown-toggle:hover {
-    background-color: $nav_bg;
-}
-
-.nav-pills.preferences .dropdown .dropdown-toggle,
-.nav-pills.preferences > li > .btn {
-    padding: 2px 10px;
-}
 
 #newmember-tab > a {
   font-size: 1.2em;
@@ -1681,13 +1657,13 @@ aside .panel-body {
 }
 
 /* wall items action dropdown menu */
-.nav-pills.preferences {
+.preferences {
     position: absolute;
     right: 15px;
     top: 10px;
 }
-.comment .nav-pills.preferences {
+.comment .preferences {
-    right: 5px;
+    right: 10px;
     top: 5px;
 }
 .wall-item-network {
@@ -1931,6 +1907,9 @@ code > .hl-main {
 .wall-item-actions .separator {
     margin: 0 .3em;
 }
+.wall-item-actions .more-links {
+    position: absolute;
+}
 
 .wall-item-responses > div > p {
     margin: 0;
@@ -1938,7 +1917,7 @@ code > .hl-main {
 
 /* wall item hover effects */
 .wall-item-container .wall-item-links,
-.wall-item-container .wall-item-actions,
+.wall-item-container .wall-item-actions button,
 .wall-item-container .body-attach > a {
     opacity: 0.3;
     -webkit-transition: all 0.25s ease-in-out;
@@ -1948,7 +1927,7 @@ code > .hl-main {
     transition: all 0.25s ease-in-out;
 }
 .wall-item-container:hover .wall-item-links,
-.wall-item-container:hover .wall-item-actions,
+.wall-item-container:hover .wall-item-actions button,
 .wall-item-container:hover .body-attach > a {
     opacity: 1;
     -webkit-transition: all 0.25s ease-in-out;
@@ -1962,7 +1941,7 @@ code > .hl-main {
 }
 
 /*
-/* Comments
+* Comments
 */
 .well {
     border: none;
@@ -3523,7 +3502,7 @@ section .profile-match-wrapper {
 		margin-top: 0;
 	}
 
-	.nav-pills.preferences {
+	.preferences {
 		right: 10px;
 	}
 

view/theme/frio/templates/wall_thread.tpl

@@ -208,13 +208,19 @@ as the value of $top_child_total (this is done at the end of this file)
 		</div>
 		{{/if}}
 
-		<ul class="nav nav-pills preferences">
+		<div class="preferences">
 		{{if $item.network_icon != ""}}
-			<li><span class="wall-item-network"><i class="fa fa-{{$item.network_icon}}" title="{{$item.network_name}}" aria-hidden="true"></i></span></li>
+			<span class="wall-item-network"><i class="fa fa-{{$item.network_icon}}" title="{{$item.network_name}}" aria-hidden="true"></i></span>
 		{{else}}
-			<li><span class="wall-item-network" title="{{$item.app}}">{{$item.network_name}}</span></li>
+			<span class="wall-item-network" title="{{$item.app}}">{{$item.network_name}}</span>
 		{{/if}}
-		</ul>
+		{{if $item.plink}}	{{*link to the original source of the item *}}
+			&nbsp;
+			<a href="{{$item.plink.href}}" class="plink u-url" aria-label="{{$item.plink.title}}" title="{{$item.plink.title}}">
+				<i class="fa fa-external-link"></i>
+			</a>
+		{{/if}}
+		</div>
 
 		<div class="clearfix"></div>
 
@@ -263,13 +269,6 @@ as the value of $top_child_total (this is done at the end of this file)
 		<div class="wall-item-actions">
 			{{* Action buttons to interact with the item (like: like, dislike, share and so on *}}
 			<span class="wall-item-actions-left">
-				<!--comment this out to try something different {{if $item.threaded}}{{if $item.comment}}
-				<div id="button-reply" class="pull-left">
-					<button type="button" class="btn-link" id="comment-{{$item.id}}" onclick="openClose('item-comments-{{$item.id}}'); commentExpand({{$item.id}});"><i class="fa fa-reply" title="{{$item.switchcomment}}"></i> </span>
-				</div>
-				{{/if}}{{/if}}-->
-
-				{{if $item.threaded}}{{/if}}
 
 			{{* Buttons for like and dislike *}}
 			{{if $item.vote}}
@@ -304,17 +303,11 @@ as the value of $top_child_total (this is done at the end of this file)
 			{{/if}}
 
 			{{* Put additional actions in a dropdown menu *}}
-				{{if $item.plink || $item.drop.dropping || $item.edpost || $item.ignore || $item.tagger || $item.star || $item.filer || $item.subthread}}
+			{{if $item.edpost || $item.tagger || $item.filer || $item.pin || $item.star || $item.subthread || $item.ignore || $item.drop.dropping}}
 				<span role="presentation" class="separator"></span>
-				<span class="btn-group dropup">
+				<span class="more-links btn-group{{if $item.thread_level > 1}} dropup{{/if}}">
 					<button type="button" class="btn-link 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>&nbsp;{{$item.menu}}</button>
-				<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenuOptions-{{$item.id}}">
+					<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenuOptions-{{$item.id}}">
-					{{if $item.plink}}	{{*link to the original source of the item *}}
-					<li role="menuitem">
-						<a title="{{$item.plink.title}}" href="{{$item.plink.href}}" class="navicon plink u-url"><i class="fa fa-external-link" aria-hidden="true"></i> {{$item.plink.title}}</a>
-					</li>
-					{{/if}}
-
 						{{if $item.edpost}} {{* edit the posting *}}
 						<li role="menuitem">
 							<a href="javascript:editpost('{{$item.edpost.0}}?mode=none');" title="{{$item.edpost.1}}" class="btn-link navicon pencil"><i class="fa fa-pencil" aria-hidden="true"></i> {{$item.edpost.1}}</a>
@@ -372,10 +365,13 @@ as the value of $top_child_total (this is done at the end of this file)
 						</li>
 						{{/if}}
 					</ul>
-				</span>
-				{{/if}}
 					<img id="like-rotator-{{$item.id}}" class="like-rotator" src="images/rotator.gif" alt="{{$item.wait}}" title="{{$item.wait}}" style="display: none;" />
 				</span>
+			{{else}}
+				<img id="like-rotator-{{$item.id}}" class="like-rotator" src="images/rotator.gif" alt="{{$item.wait}}" title="{{$item.wait}}" style="display: none;" />
+			{{/if}}
+
+			</span>
 
 			<span class="wall-item-actions-right">
 				{{* Event attendance buttons *}}