mirror of https://gitlab.com/brutaldon/brutaldon
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;
|
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;
|
||||||
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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 %}
|
||||||
|
|
Loading…
Reference in New Issue