Add display of cards. This is not 100% complete.
This commit is contained in:
parent
4676c49482
commit
673d7adedd
|
@ -23,14 +23,25 @@ img.fav-avatar {
|
|||
padding: 1.5ex;
|
||||
}
|
||||
|
||||
.is-max-128 img, .is-max-256 img
|
||||
{
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right:0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.is-max-128 {
|
||||
max-height: 128px;
|
||||
max-width: 128px;
|
||||
padding-top: 75%;
|
||||
}
|
||||
|
||||
.is-max-256 {
|
||||
max-height: 256px;
|
||||
max-width: 256px;
|
||||
padding-top: 75%;
|
||||
}
|
||||
|
||||
figure.media-left p.image a img
|
||||
|
@ -195,3 +206,14 @@ input#id_poll_frequency
|
|||
{
|
||||
max-width: 10em;
|
||||
}
|
||||
|
||||
.card
|
||||
{
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.card-image
|
||||
{
|
||||
padding: 1em;
|
||||
margin 0, auto;
|
||||
}
|
||||
|
|
|
@ -15,27 +15,29 @@ img.fav-avatar {
|
|||
}
|
||||
|
||||
|
||||
div.card-header-title, div.card-header-icon {
|
||||
color: black;
|
||||
-webkit-text-stroke: 2px white;
|
||||
-moz-text-stroke: 2px white;
|
||||
text-stroke: 2px white;
|
||||
}
|
||||
|
||||
|
||||
.media-content {
|
||||
padding: 1.5ex;
|
||||
}
|
||||
|
||||
.is-max-128 img, .is-max-256 img
|
||||
{
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right:0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.is-max-128 {
|
||||
max-height: 128px;
|
||||
max-width: 128px;
|
||||
padding-top: 75%;
|
||||
}
|
||||
|
||||
.is-max-256 {
|
||||
max-height: 256px;
|
||||
max-width: 256px;
|
||||
padding-top: 75%;
|
||||
}
|
||||
|
||||
|
||||
|
@ -187,3 +189,14 @@ input#id_poll_frequency
|
|||
body.has-navbar-fixed-top, html.has-navbar-fixed-top {
|
||||
padding-top: 5rem;
|
||||
}
|
||||
|
||||
.card
|
||||
{
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.card-image
|
||||
{
|
||||
padding: 1em;
|
||||
margin 0, auto;
|
||||
}
|
||||
|
|
|
@ -218,6 +218,11 @@ img.is-32x32 {
|
|||
height: 96px;
|
||||
}
|
||||
|
||||
.is-max-128 img, .is-max-256 img
|
||||
{
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
.is-max-128 {
|
||||
max-height: 128px;
|
||||
max-width: 128px;
|
||||
|
@ -339,3 +344,21 @@ img.emoji
|
|||
display: flex;
|
||||
}
|
||||
|
||||
.card
|
||||
{
|
||||
padding: 1em;
|
||||
margin-top: 1em;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.card-header
|
||||
{
|
||||
padding-bottom: 1em;
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
|
||||
.card-image
|
||||
{
|
||||
padding: 1em;
|
||||
margin 0, auto;
|
||||
}
|
||||
|
|
|
@ -4,6 +4,7 @@
|
|||
{% load taglinks %}
|
||||
{% load static %}
|
||||
|
||||
|
||||
{% if active %}
|
||||
<article id="toot-{{toot.id}}" class="media box active-context">
|
||||
{% else %}
|
||||
|
@ -51,6 +52,26 @@
|
|||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if toot.card %}
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-header-title">
|
||||
<a href="{{ toot.card.url }}"> {{ toot.card.title }} </a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-image">
|
||||
<figure class="image is-max-256">
|
||||
<a href="{{ toot.card.url }}">
|
||||
<img alt="{{ toot.card.title }}" src="{{ toot.card.image }}">
|
||||
</a>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<p>{{ toot.card.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if toot.media_attachments %}
|
||||
<br>
|
||||
<div class="level attachments">
|
||||
|
|
|
@ -9,7 +9,7 @@ Brutaldon ({{ own_acct.username }}) - {{ user.acct }} timelime
|
|||
|
||||
{% block content %}
|
||||
|
||||
<div class="card">
|
||||
<div class="card user-card">
|
||||
{% if not preferences.theme.is_brutalist %}
|
||||
<div class="card-header" style="background-image: url({{ user.header }});">
|
||||
{% else %}
|
||||
|
|
Loading…
Reference in New Issue