Merge frio-specific share block template into the base template

- Add BIDI support for share blocks
- Remove redundant share block styles

view/global.css

@@ -151,13 +151,36 @@ span.connector {
 }
 
 /* Shared Messages */
+
 .shared_header {
+  display: flex;
+  justify-content: space-between;
   min-height: 32px;
   color: #999;
   border-top: 1px solid #D2D2D2;
   padding-top: 5px;
   margin-top: 5px;
 }
+.shared_header > .avatar {
+  display: block;
+  flex: 0 0 41px;
+  margin-inline-end: 9px;
+}
+.shared_header > .avatar > img {
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+.shared_header > .metadata {
+  flex: 1 0 auto;
+}
+.shared_header > .metadata > p {
+  margin: 0;
+}
+.shared_header > .preferences {
+  position: static;
+  flex: 0 0 auto;
+}
 
 .shared_header a {
   -webkit-transition: all 0.2s ease-in-out;
@@ -167,16 +190,8 @@ span.connector {
   transition: all 0.2s ease-in-out;
 }
 
-.shared_header img {
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  float: left;
-  margin-right: 9px;
-}
-
 blockquote.shared_content {
-  margin-left: 32px;
+  margin-inline-start: 32px;
   color: #000;
   border: none;
 }

view/templates/shared_content.tpl

@@ -1,12 +1,38 @@
-<div class="shared-wrapper">
+<div class="shared-wrapper well well-sm">
 	<div class="shared_header">
 		{{if $avatar}}
-			<a href="{{$profile}}" target="_blank" rel="noopener noreferrer" class="shared-userinfo">
+			<a href="{{$profile}}" target="_blank" rel="noopener noreferrer" class="avatar shared-userinfo">
-			<img src="{{$avatar}}" height="32" width="32">
+				<img src="{{$avatar}}" alt="">
 			</a>
 		{{/if}}
-		<div><a href="{{$profile}}" target="_blank" rel="noopener noreferrer" class="shared-wall-item-name"><span class="shared-author">{{$author}}</span></a></div>
+		<div class="metadata">
-		<div class="shared-wall-item-ago"><small><a href="{{$link}}" target="_blank" rel="noopener noreferrer"><span class="shared-time">{{$posted}}</a></a></small></div>
+			<p class="shared-author">
+				<a href="{{$profile}}" target="_blank" rel="noopener noreferrer" class="shared-wall-item-name">
+					{{$author}}
+				</a>
+			</p>
+			<p class="shared-wall-item-ago">
+				{{if $guid}}
+				<a href="/display/{{$guid}}">
+					{{/if}}
+					<span class="shared-time">{{$posted}}</span>
+					{{if $guid}}
+				</a>
+				{{/if}}
+			</p>
+		</div>
+		<div class="preferences">
+			{{if $network_icon}}
+				<span class="wall-item-network"><i class="fa fa-{{$network_icon}}" title="{{$network_name}}" aria-hidden="true"></i></span>
+			{{else}}
+				<span class="wall-item-network">{{$network_name}}</span>
+			{{/if}}
+			{{if $link}}
+				<a href="{{$link}}" class="plink u-url" aria-label="{{$link_title}}" title="{{$link_title}}">
+					<i class="fa fa-external-link"></i>
+				</a>
+			{{/if}}
+		</div>
 	</div>
 	<blockquote class="shared_content">{{$content nofilter}}</blockquote>
 </div>

view/theme/duepuntozero/style.css

@@ -1238,44 +1238,13 @@ input#dfrn-url {
     background: rgba(0, 0, 0, 0.5) url(shiny.png) no-repeat scroll center center;
 }
 
-.shared_header {
-  height: 32px;
-  color: #999;
-  border-top: 1px solid #D2D2D2;
-  padding-top: 5px;
-  margin-top: 5px;
-}
-
 .shared_header a {
   color: black;
-  -webkit-transition: all 0.2s ease-in-out;
-  -moz-transition: all 0.2s ease-in-out;
-  -o-transition: all 0.2s ease-in-out;
-  -ms-transition: all 0.2s ease-in-out;
-  transition: all 0.2s ease-in-out;
 }
-
 .shared_header a:hover {
   color: #36c;
 }
 
-.shared_header img {
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  float: left;
-}
-
-.shared_header span {
-  margin-left: 9px;
-}
-
-blockquote.shared_content {
-  margin-left: 32px;
-  color: #000;
-  border: none;
-}
-
 .wall-item-title {
 	float: left;
 	font-weight: bold;
@@ -3244,10 +3213,6 @@ div.jGrowl div.info {
 	width: 20px;
 }
 
-.shared_header span {
-	margin-left: 10px;
-}
-
 /* small screens */
 @media all and (max-width: 1089px) {
     .field label { width: 90%; }

view/theme/frio/css/style.css

@@ -1709,10 +1709,20 @@ aside .panel-body {
 	right: 0;
 	top: 0;
 }
-.shared_header .preferences {
+.shared_header {
-	top: 7px;
+	margin-left: 0px;
-	right: 9px;
+	margin-top: 0px;
+	padding-top: 0px;
+	margin-bottom: 10px;
+	border-top: none;
+	color: inherit;
 }
+blockquote.shared_content {
+	padding: 0px;
+	margin-inline-start: 0px;
+	color: inherit;
+}
+
 .wall-item-network {
 	font-size: 13px;
 }
@@ -1837,19 +1847,6 @@ aside .panel-body {
 .vevent:hover {
 	box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.15) inset, 0 1px 1px rgba(0, 0, 0, 0.05);
 }
-.shared_header {
-	margin-left: 0px;
-	margin-top: 0px;
-	padding-top: 0px;
-	margin-bottom: 10px;
-	border-top: none;
-	color: inherit;
-}
-blockquote.shared_content {
-	padding: 0px;
-	margin-left: 0px;
-	color: inherit;
-}
 code > .hl-main {
 	padding: 10px 10px 1px 0;
 }

view/theme/frio/templates/shared_content.tpl

@@ -1,32 +0,0 @@
-<div class="shared-wrapper well well-sm">
-	<div class="shared_header">
-		{{if $avatar}}
-			<a href="{{$profile}}" target="_blank" rel="noopener noreferrer" class="shared-userinfo">
-				<img src="{{$avatar}}" height="32" width="32">
-			</a>
-		{{/if}}
-		<div><a href="{{$profile}}" target="_blank" rel="noopener noreferrer" class="shared-wall-item-name"><span class="shared-author">{{$author}}</span></a></div>
-		<div class="preferences">
-			{{if $network_icon}}
-				<span class="wall-item-network"><i class="fa fa-{{$network_icon}}" title="{{$network_name}}" aria-hidden="true"></i></span>
-			{{else}}
-				<span class="wall-item-network">{{$network_name}}</span>
-			{{/if}}
-			{{if $link}}
-				<a href="{{$link}}" class="plink u-url" aria-label="{{$link_title}}" title="{{$link_title}}">
-					<i class="fa fa-external-link"></i>
-				</a>
-			{{/if}}
-		</div>
-		<div class="shared-wall-item-ago"><small>
-			{{if $guid}}
-			<a href="/display/{{$guid}}">
-			{{/if}}
-				<span class="shared-time">{{$posted}}</span>
-			{{if $guid}}
-			</a>
-			{{/if}}
-		</small></div>
-	</div>
-	<blockquote class="shared_content">{{$content nofilter}}</blockquote>
-</div>

view/theme/quattro/dark/style.css

@@ -1437,27 +1437,6 @@ section {
 .type-video blockquote {
   padding-left: 1em;
 }
-.shared_header {
-  height: 32px;
-  color: #999;
-  border-top: 1px solid #cccccc;
-  padding-top: 5px;
-  margin-top: 5px;
-}
-.shared_header img {
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  float: left;
-}
-.shared_header span {
-  margin-left: 9px;
-}
-blockquote.shared_content {
-  margin-left: 32px;
-  color: #000;
-  border: none;
-}
 .oembed.video > a.embed_video {
   display: block;
   position: relative;

view/theme/quattro/green/style.css

@@ -1437,27 +1437,6 @@ section {
 .type-video blockquote {
   padding-left: 1em;
 }
-.shared_header {
-  height: 32px;
-  color: #999;
-  border-top: 1px solid #cccccc;
-  padding-top: 5px;
-  margin-top: 5px;
-}
-.shared_header img {
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  float: left;
-}
-.shared_header span {
-  margin-left: 9px;
-}
-blockquote.shared_content {
-  margin-left: 32px;
-  color: #000;
-  border: none;
-}
 .oembed.video > a.embed_video {
   display: block;
   position: relative;

view/theme/quattro/lilac/style.css

@@ -1437,27 +1437,6 @@ section {
 .type-video blockquote {
   padding-left: 1em;
 }
-.shared_header {
-  height: 32px;
-  color: #999;
-  border-top: 1px solid #cccccc;
-  padding-top: 5px;
-  margin-top: 5px;
-}
-.shared_header img {
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  float: left;
-}
-.shared_header span {
-  margin-left: 9px;
-}
-blockquote.shared_content {
-  margin-left: 32px;
-  color: #000;
-  border: none;
-}
 .oembed.video > a.embed_video {
   display: block;
   position: relative;

view/theme/quattro/quattro.less

@@ -770,22 +770,6 @@ section {
         border-top: 1px solid @ThreadBottomBorderColor;
         padding-top: 5px;
         margin-top: 5px;
-
-        img {
-            -webkit-border-radius: 4px;
-            -moz-border-radius: 4px;
-            border-radius: 4px;
-            float: left;
-        }
-
-        span { margin-left: 9px; }
-}
-
-
-blockquote.shared_content {
-        margin-left: 32px;
-        color: #000;
-        border: none;
 }
 
 .oembed.video {

view/theme/smoothly/style.css

@@ -1815,44 +1815,13 @@ ul .sidebar-group-li .icon {
 .type-link .oembed {
 }
 
-.shared_header {
-  height: 32px;
-  color: #999;
-  border-top: 1px solid #D2D2D2;
-  padding-top: 5px;
-  margin-top: 5px;
-}
-
 .shared_header a {
   color: black;
-  -webkit-transition: all 0.2s ease-in-out;
-  -moz-transition: all 0.2s ease-in-out;
-  -o-transition: all 0.2s ease-in-out;
-  -ms-transition: all 0.2s ease-in-out;
-  transition: all 0.2s ease-in-out;
 }
-
 .shared_header a:hover {
   color: #36c;
 }
 
-.shared_header img {
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-  float: left;
-}
-
-.shared_header span {
-  margin-left: 9px;
-}
-
-blockquote.shared_content {
-  margin-left: 32px;
-  color: #000;
-  border: none;
-}
-
 .icon.drop,
 .icon.drophide {
 	float: left;

view/theme/vier/plusminus.css

@@ -345,15 +345,6 @@ div.pager, ul.tabs {
   line-height: normal;
 }
 
-.shared_header {
-  min-height: 32px;;
-  color: #999;
-  border-top: 0px;
-  padding-top: 5px;
-  margin-top: 5px;
-}
-
-
 /* Post footer */
 .wall-item-like { font-size:12px; }
 

view/theme/vier/style.css

@@ -1438,10 +1438,6 @@ section.minimal {
 	font-size: 12px;
 }
 
-.shared_header {
-	line-height: 14px;
-}
-
 .wall-item-network {
 	color: #999;
 	font-size: 12px;