Post access indicator

This commit is contained in:
Sodbileg Gansukh 2022-05-26 14:31:14 +08:00
parent 7a86c6fd92
commit 0bf84b2b80
5 changed files with 63 additions and 18 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -624,6 +624,7 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
.post-card-image-link {
position: relative;
overflow: hidden;
display: block;
margin-bottom: 32px;
}
@ -634,6 +635,12 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
padding-bottom: 55%;
}
.post-card:not(.post-access-public) .post-card-image-link::after {
position: relative;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(3px);
}
.post-card.keep-ratio:not(.post-card-large):not(.post-card-full) .post-card-image-link::after {
display: none;
}
@ -651,6 +658,19 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
position: static;
}
.post-card-access {
position: absolute;
inset: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
font-size: 1.5rem;
font-weight: 600;
color: #fff;
}
.post-card-content-link {
position: relative;
display: block;
@ -703,6 +723,11 @@ body:not(.gh-head-open) .gh-burger:hover .gh-burger-inner::after {
letter-spacing: -0.005em;
}
.post-card-title svg {
margin-top: -3px;
margin-left: -1px;
}
.post-card-content {
flex-grow: 1;
display: flex;

5
partials/icons/lock.hbs Normal file
View File

@ -0,0 +1,5 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.25 6.875H3.75C3.40482 6.875 3.125 7.15482 3.125 7.5V16.25C3.125 16.5952 3.40482 16.875 3.75 16.875H16.25C16.5952 16.875 16.875 16.5952 16.875 16.25V7.5C16.875 7.15482 16.5952 6.875 16.25 6.875Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M7.1875 6.875V4.0625C7.1875 3.31658 7.48382 2.60121 8.01126 2.07376C8.53871 1.54632 9.25408 1.25 10 1.25C10.7459 1.25 11.4613 1.54632 11.9887 2.07376C12.5162 2.60121 12.8125 3.31658 12.8125 4.0625V6.875" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
<path d="M10 13.125C10.6904 13.125 11.25 12.5654 11.25 11.875C11.25 11.1846 10.6904 10.625 10 10.625C9.30964 10.625 8.75 11.1846 8.75 11.875C8.75 12.5654 9.30964 13.125 10 13.125Z" fill="currentColor"></path>
</svg>

After

Width:  |  Height:  |  Size: 932 B

View File

@ -1,10 +1,11 @@
{{!-- This is a partial file used to generate a post "card"
which templates loop over to generate a list of posts. --}}
<article class="post-card {{post_class}}{{#match @custom.feed_layout "Classic"}}{{#is "home"}}{{#has index="0"}} post-card-large{{/has}}{{#has index="1,2"}} dynamic{{/has}}{{/is}}{{/match}}{{#match @custom.feed_layout "Grid"}} keep-ratio{{/match}}{{#match @custom.feed_layout "List"}}{{#is "home"}} post-card-large{{/is}}{{/match}}">
<article class="post-card {{post_class}}{{#match @custom.feed_layout "Classic"}}{{#is "home"}}{{#has index="0"}} post-card-large{{/has}}{{#has index="1,2"}} dynamic{{/has}}{{/is}}{{/match}}{{#match @custom.feed_layout "Grid"}} keep-ratio{{/match}}{{#match @custom.feed_layout "List"}}{{#is "home"}} post-card-large{{/is}}{{/match}} post-access-{{visibility}}">
{{#if feature_image}}
<a class="post-card-image-link" href="{{url}}">
{{!-- This is a responsive image, it loads different sizes depending on device
https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
<img class="post-card-image"
@ -17,6 +18,13 @@ which templates loop over to generate a list of posts. --}}
alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
loading="lazy"
/>
{{^has visibility="public"}}
<div class="post-card-access">
{{> "icons/lock"}} Members-only
</div>
{{/has}}
</a>
{{/if}}
@ -32,7 +40,14 @@ which templates loop over to generate a list of posts. --}}
<span class="post-card-featured">{{> "icons/fire"}} Featured</span>
{{/if}}
</div>
<h2 class="post-card-title">{{title}}</h2>
<h2 class="post-card-title">
{{^has visibility="public"}}
{{#unless feature_image}}
{{> "icons/lock"}}
{{/unless}}
{{/has}}
{{title}}
</h2>
</header>
{{#if excerpt}}
<div class="post-card-excerpt">{{excerpt}}</div>