Add display of cards. This is not 100% complete.

This commit is contained in:
McBrayer 2018-11-30 14:30:46 -05:00
parent 4676c49482
commit 673d7adedd
5 changed files with 88 additions and 9 deletions

View File

@ -23,14 +23,25 @@ img.fav-avatar {
padding: 1.5ex; padding: 1.5ex;
} }
.is-max-128 img, .is-max-256 img
{
bottom: 0;
left: 0;
position: absolute;
right:0;
top: 0;
}
.is-max-128 { .is-max-128 {
max-height: 128px; max-height: 128px;
max-width: 128px; max-width: 128px;
padding-top: 75%;
} }
.is-max-256 { .is-max-256 {
max-height: 256px; max-height: 256px;
max-width: 256px; max-width: 256px;
padding-top: 75%;
} }
figure.media-left p.image a img figure.media-left p.image a img
@ -195,3 +206,14 @@ input#id_poll_frequency
{ {
max-width: 10em; max-width: 10em;
} }
.card
{
margin-top: 1em;
}
.card-image
{
padding: 1em;
margin 0, auto;
}

View File

@ -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 { .media-content {
padding: 1.5ex; padding: 1.5ex;
} }
.is-max-128 img, .is-max-256 img
{
bottom: 0;
left: 0;
position: absolute;
right:0;
top: 0;
}
.is-max-128 { .is-max-128 {
max-height: 128px; max-height: 128px;
max-width: 128px; max-width: 128px;
padding-top: 75%;
} }
.is-max-256 { .is-max-256 {
max-height: 256px; max-height: 256px;
max-width: 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 { body.has-navbar-fixed-top, html.has-navbar-fixed-top {
padding-top: 5rem; padding-top: 5rem;
} }
.card
{
margin-top: 1em;
}
.card-image
{
padding: 1em;
margin 0, auto;
}

View File

@ -218,6 +218,11 @@ img.is-32x32 {
height: 96px; height: 96px;
} }
.is-max-128 img, .is-max-256 img
{
display: block;
clear: both;
}
.is-max-128 { .is-max-128 {
max-height: 128px; max-height: 128px;
max-width: 128px; max-width: 128px;
@ -339,3 +344,21 @@ img.emoji
display: flex; 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;
}

View File

@ -4,6 +4,7 @@
{% load taglinks %} {% load taglinks %}
{% load static %} {% load static %}
{% if active %} {% if active %}
<article id="toot-{{toot.id}}" class="media box active-context"> <article id="toot-{{toot.id}}" class="media box active-context">
{% else %} {% else %}
@ -51,6 +52,26 @@
</div> </div>
{% endif %} {% 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 %} {% if toot.media_attachments %}
<br> <br>
<div class="level attachments"> <div class="level attachments">

View File

@ -9,7 +9,7 @@ Brutaldon ({{ own_acct.username }}) - {{ user.acct }} timelime
{% block content %} {% block content %}
<div class="card"> <div class="card user-card">
{% if not preferences.theme.is_brutalist %} {% if not preferences.theme.is_brutalist %}
<div class="card-header" style="background-image: url({{ user.header }});"> <div class="card-header" style="background-image: url({{ user.header }});">
{% else %} {% else %}