Fixed Vue rendering issues due to custom HTML tags

This commit is contained in:
ポール ウェッブ 2018-05-24 11:45:15 -05:00
parent 16f8667801
commit cd37635658
2 changed files with 52 additions and 53 deletions

View file

@ -8,45 +8,15 @@
padding-top: 2rem; padding-top: 2rem;
} }
.blog-post {
a {
display: inline-block;
position: relative;
&::after {
content: "";
display: block;
}
}
author { .blog-post__title {
&::before { display: inline-block;
content: "by"; position: relative;
left: -1.2rem;
}
}
date { &::after {
margin-right: 1.4rem; content: "";
margin-left: 3.1rem; display: block;
&::before {
content: "posted";
left: -3.1rem;
}
}
author,
date {
display: inline-block;
position: relative;
&::before {
color: rgba($black, 0.5);
font-style: italic;
position: absolute;
vertical-align: bottom;
}
} }
} }
@ -55,4 +25,34 @@
line-height: 1; line-height: 1;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.blog-post__meta__author {
&::before {
content: "by";
left: -1.2rem;
}
}
.blog-post__meta__date {
margin-right: 1.4rem;
margin-left: 3.1rem;
&::before {
content: "posted";
left: -3.1rem;
}
}
.blog-post__meta__author,
.blog-post__meta__date {
display: inline-block;
position: relative;
&::before {
color: rgba($black, 0.5);
font-style: italic;
position: absolute;
vertical-align: bottom;
}
}
} }

View file

@ -149,42 +149,42 @@
<ul class="blog-posts"> <ul class="blog-posts">
<li class="blog-post"> <li class="blog-post">
<a href="https://lbry.io/news/we-are-hiring-our-boss">We're Hiring Our Boss</a> <a class="blog-post__title" href="https://lbry.io/news/we-are-hiring-our-boss">We're Hiring Our Boss</a>
<div class="blog-post__meta"> <div class="blog-post__meta">
<date>2018/05/11</date> <span class="blog-post__meta__date">2018/05/11</span>
<author>Samuel Bryan</author> <span class="blog-post__meta__author">Samuel Bryan</span>
</div> </div>
</li> </li>
<li class="blog-post"> <li class="blog-post">
<a href="https://lbry.io/news/lbry-development-community-update-apr-2018">Development and Community Update April 2018</a> <a class="blog-post__title" href="https://lbry.io/news/lbry-development-community-update-apr-2018">Development and Community Update April 2018</a>
<div class="blog-post__meta"> <div class="blog-post__meta">
<date>2018/05/04</date> <span class="blog-post__meta__date">2018/05/04</span>
<author>Samuel Bryan</author> <span class="blog-post__meta__author">Samuel Bryan</span>
</div> </div>
</li> </li>
<li class="blog-post"> <li class="blog-post">
<a href="https://lbry.io/news/imineblocks">Hey, mine your own business!</a> <a class="blog-post__title" href="https://lbry.io/news/imineblocks">Hey, mine your own business!</a>
<div class="blog-post__meta"> <div class="blog-post__meta">
<date>2018/04/05</date> <span class="blog-post__meta__date">2018/04/05</span>
<author>Reilly Smith</author> <span class="blog-post__meta__author">Reilly Smith</span>
</div> </div>
</li> </li>
<li class="blog-post"> <li class="blog-post">
<a href="https://lbry.io/news/lbry-development-community-update-mar-2018">Development and Community Update March 2018</a> <a class="blog-post__title" href="https://lbry.io/news/lbry-development-community-update-mar-2018">Development and Community Update March 2018</a>
<div class="blog-post__meta"> <div class="blog-post__meta">
<date>2018/04/03</date> <span class="blog-post__meta__date">2018/04/03</span>
<author>Tom Zarebczan</author> <span class="blog-post__meta__author">Tom Zarebczan</span>
</div> </div>
</li> </li>
<li class="blog-post"> <li class="blog-post">
<a href="https://lbry.io/news/if-you-still-havent-found-what-youre-searching-for">If you still haven't found what you're searching for...</a> <a class="blog-post__title" href="https://lbry.io/news/if-you-still-havent-found-what-youre-searching-for">If you still haven't found what you're searching for...</a>
<div class="blog-post__meta"> <div class="blog-post__meta">
<date>2018/03/22</date> <span class="blog-post__meta__date">2018/03/22</span>
<author>Brinck Slattery</author> <span class="blog-post__meta__author">Brinck Slattery</span>
</div> </div>
</li> </li>
</ul> </ul>
@ -296,8 +296,7 @@ export default {
// Toggle beta message if ( // Toggle beta message
if (
localStorage.getItem("hide lbry alert") && localStorage.getItem("hide lbry alert") &&
localStorage.getItem("hide lbry alert") === "true" // cannot set Booleans for some reason localStorage.getItem("hide lbry alert") === "true" // cannot set Booleans for some reason
) { ) {