WIP: Design #135
@ -8,6 +8,7 @@ __all__ = ("Article",)
|
||||
|
||||
class Article(Page):
|
||||
detail_url_name = "article-detail"
|
||||
template_prefix = "article"
|
||||
|
||||
objects = ProgramChildQuerySet.as_manager()
|
||||
|
||||
|
||||
@ -279,7 +279,7 @@ class StaticPage(BasePage):
|
||||
return super().get_absolute_url()
|
||||
|
||||
|
||||
class Comment(models.Model):
|
||||
class Comment(Renderable, models.Model):
|
||||
page = models.ForeignKey(
|
||||
Page,
|
||||
models.CASCADE,
|
||||
@ -292,7 +292,7 @@ class Comment(models.Model):
|
||||
date = models.DateTimeField(auto_now_add=True)
|
||||
content = models.TextField(_("content"), max_length=1024)
|
||||
|
||||
item_template_name = "aircox/widgets/comment_item.html"
|
||||
template_prefix = "comment"
|
||||
|
||||
@cached_property
|
||||
def parent(self):
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -1,5 +1,5 @@
|
||||
{% extends "admin/index.html" %}
|
||||
{% load i18n thumbnail %}
|
||||
{% load i18n thumbnail aircox %}
|
||||
|
||||
|
||||
{% block app %}
|
||||
@ -62,10 +62,12 @@
|
||||
<span>{% translate "Latest comments" %}</span>
|
||||
</h1>
|
||||
{% if comments %}
|
||||
{% include "aircox/widgets/page_list.html" with object_list=comments with_title=True %}
|
||||
<div class="has-text-centered">
|
||||
<a href="{% url "admin:aircox_comment_changelist" %}" class="float-center">{% translate "All comments" %}</a>
|
||||
</div>
|
||||
{% for object in comments %}
|
||||
{% page_widget "preview" object with_title=True %}
|
||||
{% endfor %}
|
||||
<div class="has-text-centered">
|
||||
<a href="{% url "admin:aircox_comment_changelist" %}" class="float-center">{% translate "All comments" %}</a>
|
||||
</div>
|
||||
{% else %}
|
||||
<p class="block has-text-centered">{% trans "No comment posted yet" %}</p>
|
||||
{% endif %}
|
||||
|
||||
@ -48,41 +48,26 @@ Usefull context:
|
||||
})
|
||||
</script>
|
||||
<div id="app">
|
||||
{% block top-nav-container %}
|
||||
<nav class="app-nav" role="navigation" aria-label="main navigation">
|
||||
<div class="container">
|
||||
<div class="container">
|
||||
{% block nav %}
|
||||
<nav class="nav primary" role="navigation" aria-label="main navigation">
|
||||
{% block nav-primary %}
|
||||
<a class="navbar-brand" href="{% url "home" %}">
|
||||
<img src="{{ station.logo.url }}">
|
||||
</a>
|
||||
<div class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
{% block top-nav %}
|
||||
{% nav_items "top" css_class="navbar-item" active_class="is-active" as items %}
|
||||
{% for item, render in items %}
|
||||
{{ render }}
|
||||
{% endfor %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
{% comment %}
|
||||
<div class="navbar-end">
|
||||
{% block top-nav-tools %}
|
||||
{% endblock %}
|
||||
{% block top-nav-end %}
|
||||
<div class="navbar-item">
|
||||
<form action="{% url 'page-list' %}" method="GET">
|
||||
<div class="control has-icons-left">
|
||||
<span class="icon is-small is-left">
|
||||
<i class="fa fa-search"></i>
|
||||
</span>
|
||||
<input type="text" name="q" class="input"
|
||||
placeholder="{% translate "Search" %}" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% endblock %}
|
||||
</div>
|
||||
{% endcomment %}
|
||||
{% block nav-primary-menu %}
|
||||
{% nav_items "top" css_class="nav-item" active_class="active" as items %}
|
||||
{% for item, render in items %}
|
||||
{{ render }}
|
||||
{% endfor %}
|
||||
{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
</nav>
|
||||
{% endblock %}
|
||||
{% block secondary-nav %}{% endblock %}
|
||||
</div>
|
||||
|
||||
{% block main-container %}
|
||||
<main class="page">
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
{% extends "aircox/base.html" %}
|
||||
{% extends "./base.html" %}
|
||||
|
||||
{% comment %}Display a list of BasePages{% endcomment %}
|
||||
{% load i18n aircox %}
|
||||
@ -24,14 +24,6 @@
|
||||
|
||||
|
||||
{% block content-container %}
|
||||
{% block secondary-nav-container %}
|
||||
<section class="container">
|
||||
<nav class="secondary-nav">
|
||||
{% block secondary-nav %}{% endblock %}
|
||||
</nav>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
{{ block.super }}
|
||||
|
||||
<div class="container">
|
||||
|
||||
@ -12,12 +12,6 @@
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block filters-item %}
|
||||
<span class="control">
|
||||
<input type="date">
|
||||
</span>
|
||||
{% endblock %}
|
||||
|
||||
{% block header %}
|
||||
{% with "./widgets/dated_list_header.html" as header_template_name %}
|
||||
{{ block.super }}
|
||||
@ -25,7 +19,9 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block secondary-nav %}
|
||||
{% include "./widgets/dates_menu.html" with url_name="diffusion-list" %}
|
||||
<nav class="nav secondary">
|
||||
{% include "./widgets/dates_menu.html" with url_name="diffusion-list" %}
|
||||
</nav>
|
||||
{% endblock %}
|
||||
|
||||
{% block pages_list %}
|
||||
|
||||
@ -1,23 +1,12 @@
|
||||
{% extends "aircox/page_list.html" %}
|
||||
{% comment %}Home page{% endcomment %}
|
||||
{% load i18n aircox %}
|
||||
|
||||
{% block head_title %}{{ station.name }}{% endblock %}
|
||||
|
||||
|
||||
{% block content-container %}
|
||||
{{ block.super }}
|
||||
|
||||
{% if next_diffs %}
|
||||
<section class="container card-grid">
|
||||
{% for obj in next_diffs|slice:"1:4" %}
|
||||
{% if object != diffusion %}
|
||||
{% page_widget "card" obj.episode diffusion=obj timetable=True %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if object_list %}
|
||||
<section class="container">
|
||||
<h2 class="title is-3 p-2">
|
||||
{% with station.name as station %}
|
||||
@ -27,6 +16,28 @@
|
||||
{% endwith %}
|
||||
</h2>
|
||||
|
||||
<div class="mb-3">
|
||||
{% with next_diffs.0 as obj %}
|
||||
{% page_widget "wide" obj.episode diffusion=obj timetable=True %}
|
||||
{% endwith %}
|
||||
</div>
|
||||
|
||||
<div class="card-grid">
|
||||
{% for obj in next_diffs|slice:"1:4" %}
|
||||
{% if object != diffusion %}
|
||||
{% page_widget "card" obj.episode diffusion=obj timetable=True %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if object_list %}
|
||||
<section class="container">
|
||||
<h2 class="title is-3 p-2">
|
||||
</h2>
|
||||
|
||||
<div role="list">
|
||||
{% for object in object_list %}
|
||||
{% page_widget "item" object.episode diffusion=object timetable=True open=True %}
|
||||
@ -37,30 +48,4 @@
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
|
||||
|
||||
|
||||
{% block pages_list %}{% endblock %}
|
||||
|
||||
|
||||
{% block sidebar %}
|
||||
<section>
|
||||
<h4 class="title is-4">{% translate "Previously on air" %}</h4>
|
||||
{% with has_cover=False %}
|
||||
{% with logs as object_list %}
|
||||
{% include "aircox/widgets/log_list.html" %}
|
||||
{% endwith %}
|
||||
{% endwith %}
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4 class="title is-4">{% translate "Last publications" %}</h4>
|
||||
{% with hide_schedule=True %}
|
||||
{% with has_headline=False %}
|
||||
{% for object in last_publications %}
|
||||
{% include object.item_template_name|default:'aircox/widgets/page_item.html' %}
|
||||
{% endfor %}
|
||||
{% endwith %}
|
||||
{% endwith %}
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
@ -23,7 +23,9 @@
|
||||
|
||||
|
||||
{% block secondary-nav %}
|
||||
{% include "./widgets/dates_menu.html" with url_name="log-list" %}
|
||||
<nav class="nav secondary">
|
||||
{% include "./widgets/dates_menu.html" with url_name="log-list" %}
|
||||
</nav>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
|
||||
@ -32,63 +32,52 @@ Context:
|
||||
{{ block.super }}
|
||||
|
||||
{% block comments %}
|
||||
{% if comments or comment_form %}
|
||||
<section class="container mt-6">
|
||||
<a-dropdown item-class="title is-3" button-class="button dropdown-trigger">
|
||||
<template #item>
|
||||
{% translate "Comments" %}
|
||||
</template>
|
||||
{% if comments %}
|
||||
<section class="container">
|
||||
<h2 class="title">{% translate "Comments" %}</h2>
|
||||
|
||||
<template #default>
|
||||
{% for comment in comments %}
|
||||
<div class="media box">
|
||||
<div class="media-content">
|
||||
<p>
|
||||
<strong class="mr-2">{{ comment.nickname }}</strong>
|
||||
<time datetime="{{ comment.date }}" title="{{ comment.date }}">
|
||||
<small>{{ comment.date|naturaltime }}</small>
|
||||
</time>
|
||||
<br>
|
||||
{{ comment.content }}
|
||||
</p>
|
||||
</div>
|
||||
{% for comment in comments %}
|
||||
<div class="media box">
|
||||
<div class="media-content">
|
||||
<p>
|
||||
<strong class="mr-2">{{ comment.nickname }}</strong>
|
||||
<time datetime="{{ comment.date }}" title="{{ comment.date }}">
|
||||
<small>{{ comment.date|naturaltime }}</small>
|
||||
</time>
|
||||
<br>
|
||||
{{ comment.content }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
{% if comment_form %}
|
||||
<section class="container">
|
||||
<form method="POST">
|
||||
<h2 class="title">{% translate "Post a comment" %}</h2>
|
||||
{% csrf_token %}
|
||||
{% render_honeypot_field "website" %}
|
||||
|
||||
{% for field in comment_form %}
|
||||
<div class="field">
|
||||
<label class="label">{{ field.label_tag }}</label>
|
||||
<div class="control">{{ field }}</div>
|
||||
{% if field.errors %}
|
||||
<p class="help is-danger">{{ field.errors }}</p>
|
||||
{% endif %}
|
||||
{% if field.help_text %}
|
||||
<p class="help">{{ field.help_text|safe }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
{% if comment_form %}
|
||||
<form method="POST">
|
||||
<h5 class="title is-5">{% translate "Post a comment" %}</h5>
|
||||
{% csrf_token %}
|
||||
{% render_honeypot_field "website" %}
|
||||
|
||||
{% for field in comment_form %}
|
||||
<div class="field is-horizontal">
|
||||
<div class="field-label is-normal">
|
||||
<label class="label">
|
||||
{{ field.label_tag }}
|
||||
</label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<p class="control is-expanded">{{ field }}</p>
|
||||
{% if field.errors %}
|
||||
<p class="help is-danger">{{ field.errors }}</p>
|
||||
{% endif %}
|
||||
{% if field.help_text %}
|
||||
<p class="help">{{ field.help_text|safe }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="has-text-right">
|
||||
<button type="reset" class="button is-danger">{% translate "Reset" %}</button>
|
||||
<button type="submit" class="button is-success">{% translate "Post comment" %}</button>
|
||||
</div>
|
||||
</form>
|
||||
{% endif %}
|
||||
</template>
|
||||
</a-dropdown>
|
||||
<div class="has-text-right">
|
||||
<button type="reset" class="button is-danger mr-3">{% translate "Reset" %}</button>
|
||||
<button type="submit" class="button is-success">{% translate "Post comment" %}</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
|
||||
4
aircox/templates/aircox/widgets/article.html
Normal file
4
aircox/templates/aircox/widgets/article.html
Normal file
@ -0,0 +1,4 @@
|
||||
{% extends "./page.html" %}
|
||||
{% load humanize %}
|
||||
|
||||
{% block subtitle %}{{ object.pub_date.date }}{% endblock %}
|
||||
@ -2,7 +2,12 @@
|
||||
{% load i18n %}
|
||||
|
||||
{% block tag-class %}{{ block.super }} preview-card{% endblock %}
|
||||
{% block tag-style %}{{ block.super }}{% if cover %} background-image: url({{ cover }});{% endif %}{% endblock %}
|
||||
{% block tag-extra %}
|
||||
{{ block.super }}
|
||||
{% if cover %}
|
||||
style="background-image: url({{ cover }});"
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
{% block headings-class %}{{ block.super }} preview-card-headings{% endblock %}
|
||||
|
||||
{% block inner %}
|
||||
|
||||
50
aircox/templates/aircox/widgets/comment.html
Normal file
50
aircox/templates/aircox/widgets/comment.html
Normal file
@ -0,0 +1,50 @@
|
||||
{% extends "./page.html" %}
|
||||
{% load i18n humanize aircox %}
|
||||
|
||||
{% block tag-class %}{{ block.super }} comment{% endblock %}
|
||||
|
||||
{% block outer %}
|
||||
{% if with_title %}
|
||||
{% with url=object.parent.get_absolute_url %}
|
||||
{{ block.super }}
|
||||
{% endwith %}
|
||||
{% else %}
|
||||
{{ block.super }}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block title %}
|
||||
{{ object.nickname }} — {{ object.date }}
|
||||
{% endblock %}
|
||||
|
||||
{% block subtitle %}
|
||||
{% if with_title %}
|
||||
{{ object.parent.title }}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block content %}{{ object.content }}{% endblock %}
|
||||
|
||||
{% block actions %}
|
||||
{{ block.super }}
|
||||
|
||||
{% if request.user.is_staff %}
|
||||
<span class="float-right">
|
||||
<a href="{% url "admin:aircox_comment_change" object.pk %}"
|
||||
title="{% trans "Edit comment" %}"
|
||||
aria-label="{% trans "Edit comment" %}">
|
||||
<span class="fa fa-edit"></span>
|
||||
</a>
|
||||
<a class="has-text-danger"
|
||||
title="{% trans "Delete comment" %}"
|
||||
aria-label="{% trans "Delete comment" %}"
|
||||
href="{% url "admin:aircox_comment_delete" object.pk %}">
|
||||
<span class="fa fa-trash-alt"></span>
|
||||
</a>
|
||||
|
||||
{# <a href="mailto:{{ object.email }}">{{ object.nickname }}</a> #}
|
||||
</span>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
@ -11,9 +11,16 @@ An empty date results to a title or a separator
|
||||
{% endcomment %}
|
||||
{% load i18n %}
|
||||
|
||||
<a-dropdown class="nav-item dropdown" button-class="dropdown-trigger button"
|
||||
{% for day in dates %}
|
||||
<a href="{% url url_name date=day %}" class="nav-item {% if day == date %}active{% endif %}">
|
||||
{{ day|date:"l d" }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
|
||||
<a-dropdown class="nav-item align-right flex-grow-0 dropdown is-right"
|
||||
content-class="dropdown-menu"
|
||||
buttonIconOpen="fa-solid fa-bars" buttonIconClose="fa-solid fa-bars">
|
||||
button-tag="span" button-class="dropdown-trigger"
|
||||
button-icon-open="fa-solid fa-plus" button-icon-close="fa-solid fa-minus">
|
||||
<template #default>
|
||||
<div class="dropdown-content">
|
||||
<div class="dropdown-item">
|
||||
@ -27,10 +34,3 @@ An empty date results to a title or a separator
|
||||
</div>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
{% for day in dates %}
|
||||
<li class="nav-item {% if day == date %}active{% endif %}">
|
||||
<a href="{% url url_name date=day %}" class="button">
|
||||
{{ day|date:"l d" }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
|
||||
@ -1,38 +0,0 @@
|
||||
{% extends "./base_header.html" %}
|
||||
{% load i18n humanize %}
|
||||
|
||||
|
||||
|
||||
{% block subtitle %}
|
||||
{% if diffusion %}
|
||||
{{ diffusion.start|naturalday }},
|
||||
{{ diffusion.start|date:"g:i" }}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block headings %}
|
||||
{{ block.super }}
|
||||
{% with diffusion.episode.content|default:diffusion.episode.program.content|striptags|safe as content %}
|
||||
{% if content %}
|
||||
<div class="heading-container content">
|
||||
{{ content|truncatewords:64|linebreaks }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="actions">
|
||||
<button class="btn-outline-hg button">
|
||||
<span class="icon">
|
||||
<i class="fas fa-play"></i>
|
||||
</span>
|
||||
{% trans "Listen" %}
|
||||
</button>
|
||||
<a class="btn-outline-hg button" href="{{ diffusion.episode.get_absolute_url }}">
|
||||
<span class="icon">
|
||||
<i class="fas fa-external-link"></i>
|
||||
</span>
|
||||
{% trans "More informations" %}
|
||||
</a>
|
||||
</div>
|
||||
{% endwith %}
|
||||
{% endblock %}
|
||||
@ -1,20 +1,21 @@
|
||||
{% extends "./preview.html" %}
|
||||
{% load i18n aircox %}
|
||||
|
||||
{% block outer %}
|
||||
<article class="preview list-item {% if not cover %}no-cover{% endif %}{% if is_primary %}is-primary{% endif %}{% block card_class %}{% endblock %}">
|
||||
{% block inner %}
|
||||
{% block tag-class %}list-item is-fullwidth{% endblock %}
|
||||
{% block headings-class %} columns{% endblock %}
|
||||
|
||||
<a href="{{ url|escape }}" class="headings is-fullwidth columns">
|
||||
{% block headings %}
|
||||
<div class="column">
|
||||
<span class="heading title">{% block title %}{% endblock %}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="heading subtitle">{% block subtitle %}{% endblock %}</span>
|
||||
</div>
|
||||
<div class="column">
|
||||
<a href="{{ url|escape }}" class="heading title {% block title-class %}{% endblock %}">{% block title %}{{ title|default:"" }}{% endblock %}</a>
|
||||
</div>
|
||||
<div>
|
||||
<span class="heading subtitle {% block subtitle-class %}{% endblock %}">{% block subtitle %}{{ subtitle|default:"" }}{% endblock %}</span>
|
||||
</div>
|
||||
{% endblock %}
|
||||
</a>
|
||||
|
||||
{% block inner %}
|
||||
{% block headings-container %}{{ block.super }}{% endblock %}
|
||||
{% block content-container %}
|
||||
<div class="media">
|
||||
{% if object.cover %}
|
||||
<div class="media-left preview-cover small"
|
||||
@ -32,11 +33,10 @@
|
||||
{% endblock %}
|
||||
</section>
|
||||
|
||||
<div class="actions is-flex-grow-0">
|
||||
{% block actions %}{% endblock %}
|
||||
</div>
|
||||
</template>
|
||||
{% block actions-container %}
|
||||
{{ block.super }}
|
||||
{% endblock %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
@ -8,7 +8,7 @@ Context:
|
||||
{% load i18n aircox %}
|
||||
|
||||
{% for object in object_list %}
|
||||
{% widget object.item_template_name %}
|
||||
{% page_widget "item" object %}
|
||||
{% endfor %}
|
||||
|
||||
{% if list_url %}
|
||||
|
||||
@ -1,17 +1,30 @@
|
||||
{% load i18n %}
|
||||
{% comment %}
|
||||
Content related context:
|
||||
- object: object to display
|
||||
- cover: cover
|
||||
- title: title
|
||||
- subtitle: subtitle
|
||||
- content: content to display
|
||||
|
||||
Styling related context:
|
||||
- tag_class: css class to set to main tag
|
||||
- tag_style: css styles to set to main tag
|
||||
- child_tag_class: css class to set to direct component node children
|
||||
|
||||
{% endcomment %}
|
||||
|
||||
{% block outer %}
|
||||
<article class="preview {% if not cover %}no-cover {% endif %}{% if is_active %}is-active{% endif %}{% block tag-class %}{{ tag_class|default:"" }}{% endblock %}"
|
||||
style="{% block tag-style %}{{ tag_style }}{% endblock %}">
|
||||
<article class="preview {% if not cover %}no-cover {% endif %}{% if is_active %}is-active{% endif %}{% block tag-class %}{{ tag_class|default:"" }}{% endblock %}" {% block tag-extra %}{% endblock %}>
|
||||
{% block inner %}
|
||||
{% block headings-container %}
|
||||
<header class="headings{% block headings-class %}{% endblock %}" >
|
||||
<header class="headings{% block headings-class %}{% endblock %}"{% block headings-tag-extra %}{% endblock %}>
|
||||
{% block headings %}
|
||||
<div>
|
||||
<a href="{{ url|escape }}" class="heading title">{% block title %}{{ title|default:"" }}{% endblock %}</a>
|
||||
<a href="{{ url|escape }}" class="heading title {% block title-class %}{% endblock %}">{% block title %}{{ title|default:"" }}{% endblock %}</a>
|
||||
</div>
|
||||
<div>
|
||||
<span class="heading subtitle">{% block subtitle %}{{ subtitle|default:"" }}{% endblock %}</span>
|
||||
<span class="heading subtitle {% block subtitle-class %}{% endblock %}">{% block subtitle %}{{ subtitle|default:"" }}{% endblock %}</span>
|
||||
</div>
|
||||
{% endblock %}
|
||||
</header>
|
||||
|
||||
@ -1,21 +1,20 @@
|
||||
{% extends "./card.html" %}
|
||||
{% extends "./preview.html" %}
|
||||
{% load i18n %}
|
||||
|
||||
{% block tag_class %}{{ block.super }} wide{% endblock %}
|
||||
|
||||
{% block inner %}
|
||||
{% block headings-container %}
|
||||
<header class="headings column preview-cover"
|
||||
style="background-image: url({{ object.cover.url }})">
|
||||
{% block headings %}{{ block.super }}{% endblock %}
|
||||
</header>
|
||||
{% block tag-class %}{{ block.super }} preview-wide columns{% endblock %}
|
||||
{% block headings-class %}{{ block.super }} preview-card-headings{% endblock %}
|
||||
{% block headings-tag-extra %}
|
||||
{{ block.super }}
|
||||
{% if cover %}
|
||||
style="background-image: url({{ cover }});"
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
<div class="height-full column">
|
||||
<section class="content headings-container">
|
||||
{% block content %}{{ block.super }}{% endblock %}
|
||||
</section>
|
||||
|
||||
{% block inner %}
|
||||
{% block headings-container %}{{ block.super }}{% endblock %}
|
||||
<div class="is-flex-direction-column">
|
||||
{% block content-container %}{{ block.super }}{% endblock %}
|
||||
{% block actions-container %}{{ block.super }}{% endblock %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@ -5,12 +5,13 @@ from django.views.generic import ListView
|
||||
|
||||
from ..models import Diffusion, Log, Page, StaticPage
|
||||
from .base import BaseView
|
||||
from .mixins import AttachedToMixin
|
||||
|
||||
|
||||
class HomeView(BaseView, ListView):
|
||||
class HomeView(AttachedToMixin, BaseView, ListView):
|
||||
template_name = "aircox/home.html"
|
||||
model = Diffusion
|
||||
attach_to_value = StaticPage.ATTACH_TO_HOME
|
||||
model = Diffusion
|
||||
queryset = Diffusion.objects.on_air().select_related("episode")
|
||||
logs_count = 5
|
||||
publications_count = 5
|
||||
|
||||
@ -17,7 +17,7 @@ $mp-7: 4em;
|
||||
$text-size-small: 0.6em;
|
||||
$text-size-smaller: 0.8em;
|
||||
$text-size: 1em;
|
||||
$text-size-medium: 1.2em;
|
||||
$text-size-medium: 1.4em;
|
||||
$text-size-bigger: 1.6em;
|
||||
$text-size-big: 2em;
|
||||
|
||||
@ -43,32 +43,7 @@ $screen-wider: 1280px;
|
||||
$screen-wide: 1380px;
|
||||
|
||||
|
||||
|
||||
@import 'v-calendar/style.css';
|
||||
@import "~bulma/sass/utilities/_all.sass";
|
||||
|
||||
$body-background-color: $light;
|
||||
$menu-item-hover-background-color: #dfdfdf;
|
||||
$menu-item-active-background-color: #d2d2d2;
|
||||
|
||||
@import "~bulma/sass/base/_all";
|
||||
@import "~bulma/sass/components/_all";
|
||||
@import "~bulma/sass/form/_all";
|
||||
@import "~bulma/sass/grid/_all";
|
||||
@import "~bulma/sass/helpers/_all";
|
||||
@import "~bulma/sass/layout/_all";
|
||||
@import "~bulma/sass/elements/box";
|
||||
@import "~bulma/sass/elements/button";
|
||||
@import "~bulma/sass/elements/container";
|
||||
@import "~bulma/sass/elements/content";
|
||||
@import "~bulma/sass/elements/icon";
|
||||
// @import "~bulma/sass/elements/image";
|
||||
// @import "~bulma/sass/elements/notification";
|
||||
@import "~bulma/sass/elements/progress";
|
||||
@import "~bulma/sass/elements/table";
|
||||
@import "~bulma/sass/elements/tag";
|
||||
@import "~bulma/sass/elements/title";
|
||||
|
||||
@import "./vendor";
|
||||
|
||||
|
||||
//-- helpers/modifiers
|
||||
@ -127,10 +102,6 @@ input.half-field:not(:active):not(:hover) {
|
||||
|
||||
|
||||
//-- navbar
|
||||
.navbar + .container {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.navbar.has-shadow, .navbar.is-fixed-bottom.has-shadow {
|
||||
box-shadow: 0em 0em 1em rgba(0,0,0,0.1);
|
||||
}
|
||||
@ -140,6 +111,10 @@ a.navbar-item.is-active {
|
||||
}
|
||||
|
||||
.navbar {
|
||||
& + .container {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.navbar-dropdown {
|
||||
z-index: 2000;
|
||||
}
|
||||
@ -175,6 +150,7 @@ a.navbar-item.is-active {
|
||||
}
|
||||
|
||||
//-- page
|
||||
/*
|
||||
.page {
|
||||
& > .cover {
|
||||
float: right;
|
||||
@ -201,32 +177,7 @@ a.navbar-item.is-active {
|
||||
h5 { font-size: $size-6; font-weight: bolder; margin-top:0.4em; margin-bottom:0.2em; }
|
||||
h6 { font-size: $size-6; margin-top:0.4em; margin-bottom:0.2em; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// FIXME: remove -> only used in comment
|
||||
.media.item .headline {
|
||||
line-height: 1.2em;
|
||||
max-height: calc(1.2em * 3);
|
||||
overflow: hidden;
|
||||
|
||||
& + .headline-overflow {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 2em;
|
||||
margin-top: -2em;
|
||||
}
|
||||
|
||||
& + .headline-overflow:before {
|
||||
content:'';
|
||||
width:100%;
|
||||
height:100%;
|
||||
position:absolute;
|
||||
left:0;
|
||||
bottom:0;
|
||||
background:linear-gradient(transparent 1em, $body-background-color);
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
||||
|
||||
//-- player
|
||||
@ -319,12 +270,6 @@ section > .toolbar {
|
||||
}
|
||||
|
||||
|
||||
main {
|
||||
.cover.is-small { width: 10em; }
|
||||
.cover.is-tiny { height: 2em; }
|
||||
}
|
||||
|
||||
|
||||
aside {
|
||||
& > section {
|
||||
margin-bottom: 2em;
|
||||
@ -350,14 +295,7 @@ aside {
|
||||
}
|
||||
|
||||
|
||||
.timetable {
|
||||
width: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
||||
// -- layout
|
||||
|
||||
:root {
|
||||
--text-color: black;
|
||||
--highlight-color: rgba(255, 255, 0, 1);
|
||||
@ -389,6 +327,7 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
|
||||
|
||||
.page {
|
||||
padding-bottom: 5em;
|
||||
|
||||
a {
|
||||
background-color: var(--highlight-color-alpha);
|
||||
color: var(--highlight-color-2);
|
||||
@ -408,8 +347,11 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
|
||||
.p-sticky { position: sticky }
|
||||
.p-static { position: static }
|
||||
|
||||
.align-right { text-align: right; justify-content: right; }
|
||||
|
||||
.height-full { height: 100%; }
|
||||
.flex-push-right { margin-left: auto; }
|
||||
.flex-grow-0 { flex-grow: 0 !important; }
|
||||
|
||||
|
||||
.is-clickable { cursor: pointer; }
|
||||
@ -446,20 +388,18 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.title.is-3 {
|
||||
margin-top: $mp-3;
|
||||
.title {
|
||||
text-transform: uppercase;
|
||||
|
||||
&.is-3 {
|
||||
margin-top: $mp-3;
|
||||
}
|
||||
}
|
||||
|
||||
.content, .navbar-item {
|
||||
.content {
|
||||
font-size: $text-size-medium;
|
||||
}
|
||||
|
||||
.app-nav .navbar-item {
|
||||
font-size: $text-size-medium;
|
||||
padding-top: $mp-4;
|
||||
padding-bottom: $mp-4;
|
||||
}
|
||||
|
||||
|
||||
.heading, .headings-container > * {
|
||||
display: inline-block;
|
||||
@ -497,48 +437,71 @@ h1, h2, h3, h4, h5, h6, .heading, .title, .subtitle {
|
||||
}
|
||||
|
||||
|
||||
// ---- secondary navigation
|
||||
nav {
|
||||
margin: $mp-3 0;
|
||||
// ---- main navigation
|
||||
.nav {
|
||||
display: flex;
|
||||
background-color: var(--highlight-color);
|
||||
|
||||
.nav-item {
|
||||
font-family: unset;
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
margin-bottom: $mp-3;
|
||||
vertical-align: unset !important;
|
||||
padding: $mp-3;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
text-align: center;
|
||||
|
||||
a, .button {
|
||||
padding: $mp-3;
|
||||
border: 1px solid hsl(0deg, 0%, 86%);
|
||||
background-color: var(--highlight-color);
|
||||
}
|
||||
font-family: var(--heading-font-family);
|
||||
text-transform: uppercase;
|
||||
|
||||
button, .button {
|
||||
vertical-align: inherit;
|
||||
padding-top: $mp-3;
|
||||
padding-bottom: $mp-3;
|
||||
height: unset !important;
|
||||
}
|
||||
|
||||
&.active a, &.active button {
|
||||
&.active {
|
||||
background-color: var(--highlight-color-2);
|
||||
color: var(--highlight-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: $mp-2;
|
||||
&.primary {
|
||||
.navbar-brand {
|
||||
display: inline-block;
|
||||
margin-right: $mp-3;
|
||||
padding: $mp-3;
|
||||
|
||||
img {
|
||||
width: 14em !important;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-menu {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
font-size: $text-size-medium;
|
||||
font-weight: $weight-bold;
|
||||
}
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
justify-content: right;
|
||||
|
||||
.nav-item {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav li {
|
||||
list-style: none;
|
||||
|
||||
a, .button {
|
||||
font-size: $text-size-medium;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ---- ---- previews & page items
|
||||
.preview {
|
||||
position: relative;
|
||||
background-size: cover;
|
||||
margin-bottom: calc($mp-3);
|
||||
|
||||
&.preview-card {
|
||||
&:not(.wide) {
|
||||
@ -563,9 +526,9 @@ nav {
|
||||
font-weight: $weight-bolder;
|
||||
font-size: $text-size-bigger;
|
||||
}
|
||||
.content, .actions {
|
||||
font-size: $text-size-medium;
|
||||
}
|
||||
//.content, .actions {
|
||||
// font-size: $text-size-bigger;
|
||||
//}
|
||||
|
||||
.headings {
|
||||
background-size: cover;
|
||||
@ -579,14 +542,15 @@ nav {
|
||||
}
|
||||
}
|
||||
|
||||
.preview.comment {
|
||||
.title { font-size: $text-size-bigger; }
|
||||
.subtitle { font-size: $text-size; }
|
||||
}
|
||||
|
||||
|
||||
.list-item {
|
||||
width: 100%;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: calc($mp-4 / 2);
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: calc($mp-4 / 2);
|
||||
}
|
||||
@ -597,6 +561,10 @@ nav {
|
||||
background-color: var(--heading-bg-color);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.media-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -616,19 +584,25 @@ nav {
|
||||
|
||||
|
||||
// ---- cards
|
||||
.preview-cover {
|
||||
background-size: cover;
|
||||
.preview-wide {
|
||||
height: var(--preview-cover-size);
|
||||
width: var(--preview-cover-size);
|
||||
|
||||
&.small {
|
||||
min-width: unset;
|
||||
height: var(--preview-cover-small-size);
|
||||
width: var(--preview-cover-small-size) !important;
|
||||
&:not(.header) .headings {
|
||||
box-shadow: 0em 0em 1em rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
& .headings {
|
||||
width: var(--preview-cover-size);
|
||||
flex-grow: 0;
|
||||
margin-right: $mp-3;
|
||||
}
|
||||
|
||||
& .content {
|
||||
font-size: $text-size-big;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.preview-card {
|
||||
height: var(--preview-cover-size);
|
||||
min-width: var(--preview-cover-size);
|
||||
@ -653,9 +627,21 @@ nav {
|
||||
}
|
||||
|
||||
|
||||
.preview-cover {
|
||||
background-size: cover;
|
||||
height: var(--preview-cover-size);
|
||||
width: var(--preview-cover-size);
|
||||
|
||||
&.small {
|
||||
min-width: unset;
|
||||
height: var(--preview-cover-small-size);
|
||||
width: var(--preview-cover-small-size) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-card-headings {
|
||||
width: 100%;
|
||||
min-width: var(--preview-cover-size);
|
||||
min-height: 100%;
|
||||
|
||||
padding-top: $mp-3;
|
||||
@ -683,6 +669,10 @@ nav {
|
||||
height: unset;
|
||||
}
|
||||
|
||||
.headings {
|
||||
padding-top: $mp-6;
|
||||
}
|
||||
|
||||
.headings, > .container {
|
||||
width: 100%;
|
||||
}
|
||||
@ -730,11 +720,6 @@ nav {
|
||||
gap: $mp-4;
|
||||
}
|
||||
|
||||
@media screen and (max-width: $screen-normal) {
|
||||
.page {
|
||||
margin: 0em 1em;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: $screen-wide) {
|
||||
.preview-card:not(.preview-header) {
|
||||
|
||||
31
assets/src/assets/vendor.scss
Normal file
31
assets/src/assets/vendor.scss
Normal file
@ -0,0 +1,31 @@
|
||||
@import 'v-calendar/style.css';
|
||||
@import "~bulma/sass/utilities/_all.sass";
|
||||
|
||||
$body-background-color: $light;
|
||||
$menu-item-hover-background-color: #dfdfdf;
|
||||
$menu-item-active-background-color: #d2d2d2;
|
||||
|
||||
@import "~bulma/sass/base/_all";
|
||||
@import "~bulma/sass/components/breadcrumb";
|
||||
@import "~bulma/sass/components/dropdown";
|
||||
@import "~bulma/sass/components/navbar";
|
||||
@import "~bulma/sass/components/media";
|
||||
@import "~bulma/sass/components/message";
|
||||
@import "~bulma/sass/components/modal";
|
||||
@import "~bulma/sass/components/pagination";
|
||||
|
||||
@import "~bulma/sass/form/_all";
|
||||
@import "~bulma/sass/grid/_all";
|
||||
@import "~bulma/sass/helpers/_all";
|
||||
@import "~bulma/sass/layout/_all";
|
||||
@import "~bulma/sass/elements/box";
|
||||
@import "~bulma/sass/elements/button";
|
||||
@import "~bulma/sass/elements/container";
|
||||
@import "~bulma/sass/elements/content";
|
||||
@import "~bulma/sass/elements/icon";
|
||||
// @import "~bulma/sass/elements/image";
|
||||
// @import "~bulma/sass/elements/notification";
|
||||
@import "~bulma/sass/elements/progress";
|
||||
@import "~bulma/sass/elements/table";
|
||||
@import "~bulma/sass/elements/tag";
|
||||
@import "~bulma/sass/elements/title";
|
||||
@ -2,12 +2,13 @@
|
||||
<component :is="tag" :class="[itemClass, active ? activeClass : '']">
|
||||
<slot name="before-button"></slot>
|
||||
<slot name="button" :toggle="toggle" :active="active">
|
||||
<button :class="[buttonClass]" @click="toggle()">
|
||||
<component :is="buttonTag" :class="buttonClass" @click="toggle()">
|
||||
<span class="icon">
|
||||
<i v-if="!active" :class="buttonIconOpen"></i>
|
||||
<i v-if="active" :class="buttonIconClose"></i>
|
||||
</span>
|
||||
</button>
|
||||
{{ label }}
|
||||
</component>
|
||||
</slot>
|
||||
<div :class="contentClass" v-show="active">
|
||||
<slot></slot>
|
||||
@ -24,6 +25,8 @@ export default {
|
||||
|
||||
props: {
|
||||
tag: {type: String, default: "div"},
|
||||
label: {type: String, default: ""},
|
||||
buttonTag: {type: String, default: "button"},
|
||||
activeClass: {type: String, default: "is-active"},
|
||||
buttonClass: {type: String, default: "button"},
|
||||
buttonIconOpen: { type: String, default:"fa fa-angle-down"},
|
||||
|
||||
@ -12,7 +12,6 @@ import Builder from './appBuilder'
|
||||
import Sound from './sound'
|
||||
import {Set} from './model'
|
||||
|
||||
import "./assets/vendor"
|
||||
import './assets/styles.scss'
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user