Merge frio-specific share block template into the base template

- Add BIDI support for share blocks
- Remove redundant share block styles
This commit is contained in:
Hypolite Petovan 2021-07-09 19:23:01 -04:00
parent 6354d7c81d
commit 540dc90ce1
12 changed files with 68 additions and 220 deletions

View file

@ -151,13 +151,36 @@ span.connector {
} }
/* Shared Messages */ /* Shared Messages */
.shared_header { .shared_header {
display: flex;
justify-content: space-between;
min-height: 32px; min-height: 32px;
color: #999; color: #999;
border-top: 1px solid #D2D2D2; border-top: 1px solid #D2D2D2;
padding-top: 5px; padding-top: 5px;
margin-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 { .shared_header a {
-webkit-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;
@ -167,16 +190,8 @@ span.connector {
transition: all 0.2s ease-in-out; 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 { blockquote.shared_content {
margin-left: 32px; margin-inline-start: 32px;
color: #000; color: #000;
border: none; border: none;
} }

View file

@ -1,12 +1,38 @@
<div class="shared-wrapper"> <div class="shared-wrapper well well-sm">
<div class="shared_header"> <div class="shared_header">
{{if $avatar}} {{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> </a>
{{/if}} {{/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> </div>
<blockquote class="shared_content">{{$content nofilter}}</blockquote> <blockquote class="shared_content">{{$content nofilter}}</blockquote>
</div> </div>

View file

@ -1238,44 +1238,13 @@ input#dfrn-url {
background: rgba(0, 0, 0, 0.5) url(shiny.png) no-repeat scroll center center; 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 { .shared_header a {
color: black; 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 { .shared_header a:hover {
color: #36c; 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 { .wall-item-title {
float: left; float: left;
font-weight: bold; font-weight: bold;
@ -3244,10 +3213,6 @@ div.jGrowl div.info {
width: 20px; width: 20px;
} }
.shared_header span {
margin-left: 10px;
}
/* small screens */ /* small screens */
@media all and (max-width: 1089px) { @media all and (max-width: 1089px) {
.field label { width: 90%; } .field label { width: 90%; }

View file

@ -1709,10 +1709,20 @@ aside .panel-body {
right: 0; right: 0;
top: 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 { .wall-item-network {
font-size: 13px; font-size: 13px;
} }
@ -1837,19 +1847,6 @@ aside .panel-body {
.vevent:hover { .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); 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 { code > .hl-main {
padding: 10px 10px 1px 0; padding: 10px 10px 1px 0;
} }

View file

@ -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 file

@ -1437,27 +1437,6 @@ section {
.type-video blockquote { .type-video blockquote {
padding-left: 1em; 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 { .oembed.video > a.embed_video {
display: block; display: block;
position: relative; position: relative;

View file

@ -1437,27 +1437,6 @@ section {
.type-video blockquote { .type-video blockquote {
padding-left: 1em; 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 { .oembed.video > a.embed_video {
display: block; display: block;
position: relative; position: relative;

View file

@ -1437,27 +1437,6 @@ section {
.type-video blockquote { .type-video blockquote {
padding-left: 1em; 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 { .oembed.video > a.embed_video {
display: block; display: block;
position: relative; position: relative;

View file

@ -770,22 +770,6 @@ section {
border-top: 1px solid @ThreadBottomBorderColor; border-top: 1px solid @ThreadBottomBorderColor;
padding-top: 5px; padding-top: 5px;
margin-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 { .oembed.video {

View file

@ -1815,44 +1815,13 @@ ul .sidebar-group-li .icon {
.type-link .oembed { .type-link .oembed {
} }
.shared_header {
height: 32px;
color: #999;
border-top: 1px solid #D2D2D2;
padding-top: 5px;
margin-top: 5px;
}
.shared_header a { .shared_header a {
color: black; 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 { .shared_header a:hover {
color: #36c; 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.drop,
.icon.drophide { .icon.drophide {
float: left; float: left;

View file

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

View file

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