diff --git a/common/static/scss/_feed.scss b/common/static/scss/_feed.scss index fc866bea..4a7343f3 100644 --- a/common/static/scss/_feed.scss +++ b/common/static/scss/_feed.scss @@ -1,87 +1,23 @@ .feed-page { .feed { - word-break: break-word; - - .avatar { - height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 4 - 8px); - width: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 4 - 8px); - - img { - height: 100%; - width: 100%; - } - } - - > section { - margin-bottom: var(--pico-spacing); - display: grid; - grid-template-columns: auto 1fr; - grid-template-rows: auto; - grid-column-gap: 1em; - grid-row-gap: 0px; - // align-items: center; - // justify-content: left; - - .nickname a { - word-break: break-all; - } - - .time { - width: max-content; - float: right; - color: var(--pico-muted-color); - opacity: 0.5; - margin-left: 1em; - } - - .rating-star { - margin: 0 0.5em; - } - - .rating-star, - .rating-star>* { - color: var(--pico-primary); - } - - article { - padding: calc(var(--pico-block-spacing-horizontal) / 2); - margin-bottom: var(--pico-block-spacing-horizontal); - - >div.item { - column-gap: calc(var(--pico-block-spacing-horizontal) / 2); - + .post { + .cover { + img { + max-width:6em; + max-height:12em; + margin:1em; + box-shadow: var(--pico-card-box-shadow); @media (max-width: 768px) { - grid-template-columns: calc(2.5rem * var(--pico-line-height)) auto + max-width:4em; + max-height:8em; + margin:0.5em 0 0.5em 0.5em; + } + @media (min-width: 1280px) { + max-width:8em; + max-height:16em; + margin:1em 1em 2em 2em; } } - - footer { - padding: calc(var(--pico-block-spacing-horizontal) / 2); - margin-left: calc(var(--pico-block-spacing-horizontal) * -0.5); - margin-right: calc(var(--pico-block-spacing-horizontal) * -0.5); - margin-top: calc(var(--pico-block-spacing-horizontal)/2); - } - - // margin-right: 4px; - } - - blockquote { - padding-top: 0; - padding-bottom: 0; - margin: 0; - color: var(--pico-muted-color); - - a { - color: var(--pico-muted-color); - } - } - - p:last-child { - margin-bottom: 0; - } - - .spacing { - margin-bottom: calc(var(--pico-block-spacing-horizontal)/2); } } } diff --git a/common/static/scss/neodb.scss b/common/static/scss/neodb.scss index 9aa66d03..e684a80c 100644 --- a/common/static/scss/neodb.scss +++ b/common/static/scss/neodb.scss @@ -1,4 +1,5 @@ @import '_header.scss'; +@import '_feed.scss'; @import '_footer.scss'; @import '_dialog.scss'; @import '_rating.scss'; diff --git a/common/templates/common_libs.html b/common/templates/common_libs.html index c01313c6..15d6102c 100644 --- a/common/templates/common_libs.html +++ b/common/templates/common_libs.html @@ -21,7 +21,7 @@ - - {% if event.type == "boost" %} -
- - {{ event.subject_identity.name }} - {% trans 'boosted' %} -
- {% endif %} -
-
-
- @{{ post.author.handle }} -
-
-
- - {{ post.published|naturaldelta }} - {% if post.piece and post.piece.item and post.piece.item.classname != 'tvepisode' %} - - {% if post.piece.item.classname == 'podcastepisode' %} - - {% else %} - - - - {% endif %} - - {% endif %} - {% include "action_reply_post.html" %} - {% include "action_like_post.html" %} - {% include "action_boost_post.html" %} - {% include "action_open_post.html" %} - - - + {% else %} +
+ {% if event.type == "boost" %} +
+ + {{ post.author.name }} - {% if post.piece and post.piece.classname == 'note' %} - {% trans "wrote a note" %} - {% endif %} - -
{{ post.summary|default:'' }}
-
-
- {% for attachment in post.attachments.all %} - {% if attachment.is_image %} - - image attachment - - - - - {% endif %} - {% endfor %} -
- {% if post.piece and post.piece.classname == 'note' %} -
- {{ post.content|bleach:"a,p,span,br,div,img"|default:"" }} -
- {% else %} - {{ post.content|bleach:"a,p,span,br,div,img"|default:"" }} - {% endif %} + title="@{{ event.subject_identity.handle }}">{{ event.subject_identity.name }} + {% trans 'boosted' %} +
+ {% endif %} +
+
+
+ + @{{ post.author.handle }} + +
+
+
+ + {{ post.published|naturaldelta }} + {% if post.piece and post.piece.item and post.piece.item.class_name != 'tvepisode' %} + + {% if post.piece.item.class_name == 'podcastepisode' %} + + {% else %} + + + + {% endif %} + + {% endif %} + {% include "action_reply_post.html" %} + {% include "action_like_post.html" %} + {% include "action_boost_post.html" %} + {% include "action_open_post.html" %} + + + {{ post.author.name }} + {% if post.piece and post.piece.classname == 'note' %} + {% trans "wrote a note" %} + {% endif %} + +
{{ post.summary|default:'' }}
+
+
+
+ {% for attachment in post.attachments.all %} + {% if attachment.is_image %} + + image attachment + + + + + {% endif %} + {% endfor %} +
+ {% if post.piece and post.piece.classname == 'note' %} +
+ {{ post.content|bleach:"a,p,span,br,div,img"|default:"" }} +
+ {% else %} + {{ post.content|bleach:"a,p,span,br,div,img"|default:"" }} + {% endif %} +
+
+ {% if post.piece %} + {% if post.piece.item %} + {#
{% include "_item_card.html" with item=post.piece.item allow_embed=1 %}
#} + + cover + + {% endif %} + {% endif %} +
+
- {% if post.piece %} - {% if post.piece.item %} -
{% include "_item_card.html" with item=post.piece.item allow_embed=1 %}
- {% endif %} - {% endif %}
-
-
-
+
+ + {% endif %} {% endwith %} {% if forloop.last %}