Commit 9c7f9944 authored by Konrad Mohrfeldt's avatar Konrad Mohrfeldt

change how internal content is displayed. refs #487

parent 986513d4
......@@ -2,5 +2,5 @@
{% block content_type %}
<i class="sg sg-content-type-article"></i>
<span>{% if not association.public %}Interner {% endif %}Artikel</span>
<span>Artikel</span>
{% endblock %}
......@@ -4,5 +4,5 @@
{% block content_type %}
<i class="sg sg-content-type-article"></i>
<span>{% if not association.public %}Interner {% endif %}Artikel</span>
<span>Artikel</span>
{% endblock %}
{% if user.is_authenticated %}
{% if association.public %}
<span class="btn has-state has-square-icon has-hover-title is-unresponsive" data-state="inactive">
<i class="sg sg-xl sg-privacy-public"></i>
<span class="btn-htitle" data-position="right"
title="Dieser Beitrag kann von allen Menschen gesehen werden, die diese Seite besuchen."></span>
</span>
{% else %}
<span class="btn has-state has-square-icon has-hover-title is-unresponsive" data-state="active">
<i class="sg sg-xl sg-privacy-private"></i>
<span class="btn-htitle" data-position="right"
title="Du kannst diesen Beitrag sehen, weil du Mitglied der Gruppe „{{ association.entity }}“ bist."></span>
</span>
{% endif %}
{% endif %}
<article class="content-preview{% if not association.public %} content-internal{% endif %}">
<article class="content-preview">
{% if not hide_meta %}
<header class="content-preview-header">
<header class="content-header">
{% block content_meta %}{% include 'content/_info.html' %}{% endblock %}
<span class="content-type" title="{% if association.public %}Beitrag ist öffentlich sichtbar{% else %}Beitrag ist nur für Gruppenmitglieder sichtbar{% endif %}">
{% block content_type %}
<span>{% if not association.public %}Interner {% endif %}Beitrag</span>
{% endblock %}
</span>
<div class="flex-row">
<span class="content-type">
{% block content_type %}
<span>Beitrag</span>
{% endblock %}
</span>
{% include 'content/_content_visibility.html' %}
</div>
</header>
{% endif %}
......@@ -28,6 +31,7 @@
</div>
</div>
</a>
<a href="{{ association.get_absolute_url }}" class="read-more">Zum Beitrag &hellip;</a>
<footer class="content-preview-footer">
<a href="{{ association.get_absolute_url }}" class="read-more">Zum Beitrag &hellip;</a>
</footer>
</article>
......@@ -23,13 +23,14 @@
{% block content %}
<article class="content">
<header class="content-teaser">
<header class="content-header">
{% block content_meta %}{% include 'content/_info.html' %}{% endblock %}
<span class="content-type" title="{% if association.public %}Beitrag ist öffentlich sichtbar{% else %}Beitrag ist nur für Gruppenmitglieder sichtbar{% endif %}">
{% block content_type %}
<span>{% if not association.public %}Interner {% endif %}Beitrag</span>
<span>Beitrag</span>
{% endblock %}
</span>
{% include 'content/_content_visibility.html' %}
</header>
<div class="content-body">
......
{% extends 'content/_preview.html' %}
{% block content_type %}
<span>{% if not association.public %}Interne {% endif %}Veranstaltung</span>
<i class="sg sg-content-type-event" data-day="{{ association.container.time|date:'d' }}"></i>
<span>Veranstaltung</span>
{% endblock %}
{% block content_preview_image %}
......
......@@ -3,8 +3,8 @@
{% block menu %}{% menu 'event' association.entity %}{% endblock %}
{% block content_type %}
<span>{% if not association.public %}Interne {% endif %}Veranstaltung</span>
<i class="sg sg-content-type-event" data-day="{{ association.container.time|date:'d' }}"></i>
<span>Veranstaltung</span>
{% endblock %}
{% block user_content_header %}
......
......@@ -2,5 +2,5 @@
{% block content_type %}
<i class="sg sg-content-type-file"></i>
<span>{% if not association.public %}Interne {% endif %}Datei</span>
<span>Datei</span>
{% endblock %}
......@@ -4,7 +4,7 @@
{% block content_type %}
<i class="sg sg-content-type-file"></i>
<span>{% if not association.public %}Interne {% endif %}Datei</span>
<span>Datei</span>
{% endblock %}
{% block user_content_header %}
......
......@@ -4,7 +4,7 @@
{% block content_type %}
<i class="sg sg-content-type-gallery"></i>
<span>{% if not association.public %}Interne {% endif %}Galerie</span>
<span>Galerie</span>
{% endblock %}
{% block content_preview_image %}
......
......@@ -6,7 +6,7 @@
{% block content_type %}
<i class="sg sg-content-type-gallery"></i>
<span>{% if not association.public %}Interne {% endif %}Galerie</span>
<span>Galerie</span>
{% endblock %}
{% block content_meta %}{% include 'galleries/_info.html' %}{% endblock %}
......
......@@ -2,5 +2,5 @@
{% block content_type %}
<i class="sg sg-poll"></i>
<span>{% if not association.public %}Interne {% endif %}Umfrage</span>
<span>Umfrage</span>
{% endblock %}
......@@ -6,7 +6,7 @@
{% block content_type %}
<i class="sg sg-poll"></i>
<span>{% if not association.public %}Interne {% endif %}Umfrage</span>
<span>Umfrage</span>
{% endblock %}
{% block content_text %}
......
......@@ -15,6 +15,7 @@
@import "components/base";
@import "components/decorations";
@import "components/box";
@import "components/util";
@import "components/entity";
@import "components/button";
@import "components/content";
......
......@@ -480,3 +480,88 @@
top: 0;
}
}
.btn.is-unresponsive {
cursor: default;
&:active,
&:focus,
&:hover {
box-shadow: inherit;
border-color: inherit;
background: inherit;
}
}
.btn.has-state {
&[data-state="active"] {
background: @color-secondary;
color: rgba(0, 0, 0, .6);
}
&[data-state="inactive"] {
background: @component-bg-default;
color: rgba(0, 0, 0, .1);
}
}
.btn.has-square-icon {
@size: 2.5rem;
width: var(--btn-square-size, @size);
height: var(--btn-square-size, @size);
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 0;
padding: 0;
i {
margin: 0;
}
}
.btn.has-hover-title {
overflow: visible;
.btn-htitle {
font-size: .75rem;
font-weight: bold;
pointer-events: none;
&::after {
content: attr(title);
opacity: 0;
pointer-events: none;
background: white;
position: absolute;
z-index: 20;
top: 100%;
margin-top: .5rem;
padding: .5rem;
border-radius: 2px;
font-weight: normal;
color: @color-text-default;
width: 100%;
min-width: 175px;
transform: translateY(.25rem);
transition: transform .1s ease-out, opacity .1s ease-out;
text-align: left;
.material-shadow(1);
}
&[data-position="left"]::after {
left: 0;
}
&[data-position="right"]::after {
right: 0;
}
}
&:hover {
> .btn-htitle:after {
transform: none;
opacity: 1;
}
}
}
......@@ -102,19 +102,24 @@
.content-type {
color: @color-text-extralight;
font-size: 1.1rem;
letter-spacing: -0.02em;
text-transform: uppercase;
display: flex;
align-items: center;
font-weight: bold;
.sg, span {
display: block;
}
.sg {
font-size: 1.5rem;
font-size: 1.5em;
margin-right: .5em;
}
span {
display: inline-block;
margin-left: .5em;
position: relative;
top: 2px;
}
.on-handhelds({
......@@ -164,6 +169,12 @@
}
}
.content-preview-footer {
display: flex;
align-items: center;
justify-content: space-between;
}
.content-meta {
display: flex;
align-items: flex-start;
......@@ -204,18 +215,8 @@
font-size: @font-size-small;
}
.content-teaser,
.content-preview-header {
display: flex;
align-items: center;
justify-content: space-between;
.content-type {
order: 2;
}
}
.content-preview-header {
.content-header {
&:extend(.flex-row all);
margin-bottom: 1rem;
}
......@@ -289,11 +290,9 @@
.content-preview & {
&:extend(.btn all);
&:extend(.btn-link all);
float: right;
padding-left: 0;
padding-right: 0;
transform: translateY(.5rem);
margin-left: auto;
}
}
......@@ -371,7 +370,3 @@
font-size: @font-size-small;
color: @color-text-extralight;
}
.content-internal {
border: 5px solid @brand-secondary;
}
.flex-row {
display: flex;
align-items: center;
justify-content: space-between;
> :not(:first-child) {
margin-left: 1rem;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment