rc/aircox
13
1
Fork 1
Code Issues 15 Pull Requests Projects Releases Wiki Activity

work on templates

Browse Source
This commit is contained in:
bkfox 2023-11-22 17:33:51 +01:00
parent 36ae12af3d
commit b4c12def13
25 changed files with 812 additions and 1503 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
aircox/models/article.py
View File

@ -8,6 +8,7 @@ __all__ = ("Article",)
class Article(Page):
detail_url_name = "article-detail"
template_prefix = "article"
objects = ProgramChildQuerySet.as_manager()

4
aircox/models/page.py
View File

@ -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):

1488
aircox/static/aircox/css/chunk-common.css
View File

File diff suppressed because it is too large Load Diff

103
aircox/static/aircox/js/chunk-common.js
View File

File diff suppressed because one or more lines are too long

12
aircox/templates/admin/index.html
View File

@ -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 %}

51
aircox/templates/aircox/base.html
View File

@ -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">

10
aircox/templates/aircox/basepage_list.html
View File

@ -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">

10
aircox/templates/aircox/diffusion_list.html
View File

@ -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 %}

63
aircox/templates/aircox/home.html
View File

@ -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 %}

4
aircox/templates/aircox/log_list.html
View File

@ -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 %}

95
aircox/templates/aircox/page_detail.html
View File

@ -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
View File

@ -0,0 +1,4 @@
{% extends "./page.html" %}
{% load humanize %}
{% block subtitle %}{{ object.pub_date.date }}{% endblock %}

7
aircox/templates/aircox/widgets/card.html
View File

@ -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
View 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 }} &mdash; {{ 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 %}

18
aircox/templates/aircox/widgets/dates_menu.html
View File

@ -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 %}

38
aircox/templates/aircox/widgets/home_header.html
View File

@ -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 %}

34
aircox/templates/aircox/widgets/item.html
View File

@ -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 %}

2
aircox/templates/aircox/widgets/page_list.html
View File

@ -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 %}

23
aircox/templates/aircox/widgets/preview.html
View File

@ -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>

25
aircox/templates/aircox/widgets/wide.html
View File

@ -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
aircox/views/home.py
View File

@ -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

229
assets/src/assets/styles.scss
View File

@ -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
View 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";

7
assets/src/components/ADropdown.vue
View File

@ -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"},

1
assets/src/index.js
View File

@ -12,7 +12,6 @@ import Builder from './appBuilder'
import Sound from './sound'
import {Set} from './model'
import "./assets/vendor"
import './assets/styles.scss'