Make upcoming nws scrollable on y-overflow

This commit is contained in:
imperosol 2025-02-16 17:20:45 +01:00
parent 1d177412c3
commit fc3b82c35c
2 changed files with 65 additions and 56 deletions

View File

@ -51,6 +51,13 @@
} }
} }
/* UPCOMING EVENTS */
#upcoming-events {
max-height: 600px;
overflow-y: scroll;
}
/* LINKS/BIRTHDAYS */ /* LINKS/BIRTHDAYS */
#links, #links,
#birthdays { #birthdays {

View File

@ -37,69 +37,71 @@
</a> </a>
<br> <br>
{% endif %} {% endif %}
{% for day, dates_group in news_dates %} <section id="upcoming-events">
<div class="news_events_group"> {% for day, dates_group in news_dates %}
<div class="news_events_group_date"> <div class="news_events_group">
<div> <div class="news_events_group_date">
<div>{{ day|date('D') }}</div> <div>
<div class="day">{{ day|date('d') }}</div> <div>{{ day|date('D') }}</div>
<div>{{ day|date('b') }}</div> <div class="day">{{ day|date('d') }}</div>
<div>{{ day|date('b') }}</div>
</div>
</div> </div>
</div> <div class="news_events_group_items">
<div class="news_events_group_items"> {% for date in dates_group %}
{% for date in dates_group %} <article
<article class="news_event"
class="news_event" {%- if not date.news.is_moderated -%}
{%- if not date.news.is_moderated -%} x-data="{newsState: AlertState.PENDING}"
x-data="{newsState: AlertState.PENDING}"
{%- endif -%}
>
{% if not date.news.is_moderated %}
{# if a non moderated news is in the object list,
the logged user is either an admin or the news author #}
{{ news_moderation_alert(date.news, user, "newsState") }}
{% endif %}
<div
{% if not date.news.is_moderated -%}
x-show="newsState !== AlertState.DELETED"
{%- endif -%} {%- endif -%}
> >
<header class="row gap"> {% if not date.news.is_moderated %}
{% if date.news.club.logo %} {# if a non moderated news is in the object list,
<img src="{{ date.news.club.logo.url }}" alt="{{ date.news.club }}"/> the logged user is either an admin or the news author #}
{% else %} {{ news_moderation_alert(date.news, user, "newsState") }}
<img src="{{ static("com/img/news.png") }}" alt="{{ date.news.club }}"/> {% endif %}
{% endif %} <div
<div class="header_content"> {% if not date.news.is_moderated -%}
<h4> x-show="newsState !== AlertState.DELETED"
<a href="{{ url('com:news_detail', news_id=date.news_id) }}"> {%- endif -%}
{{ date.news.title }} >
</a> <header class="row gap">
</h4> {% if date.news.club.logo %}
<a href="{{ date.news.club.get_absolute_url() }}">{{ date.news.club }}</a> <img src="{{ date.news.club.logo.url }}" alt="{{ date.news.club }}"/>
<div class="news_date"> {% else %}
<time datetime="{{ date.start_date.isoformat(timespec="seconds") }}"> <img src="{{ static("com/img/news.png") }}" alt="{{ date.news.club }}"/>
{{ date.start_date|localtime|time(DATETIME_FORMAT) }} {% endif %}
</time> - <div class="header_content">
<time datetime="{{ date.end_date.isoformat(timespec="seconds") }}"> <h4>
{{ date.end_date|localtime|time(DATETIME_FORMAT) }} <a href="{{ url('com:news_detail', news_id=date.news_id) }}">
</time> {{ date.news.title }}
</a>
</h4>
<a href="{{ date.news.club.get_absolute_url() }}">{{ date.news.club }}</a>
<div class="news_date">
<time datetime="{{ date.start_date.isoformat(timespec="seconds") }}">
{{ date.start_date|localtime|time(DATETIME_FORMAT) }}
</time> -
<time datetime="{{ date.end_date.isoformat(timespec="seconds") }}">
{{ date.end_date|localtime|time(DATETIME_FORMAT) }}
</time>
</div>
</div> </div>
</header>
<div class="news_content markdown">
{{ date.news.summary|markdown }}
</div> </div>
</header>
<div class="news_content markdown">
{{ date.news.summary|markdown }}
</div> </div>
</div> </article>
</article> {% endfor %}
{% endfor %} </div>
</div> </div>
</div> {% else %}
{% else %} <div class="news_empty">
<div class="news_empty"> <em>{% trans %}Nothing to come...{% endtrans %}</em>
<em>{% trans %}Nothing to come...{% endtrans %}</em> </div>
</div> {% endfor %}
{% endfor %} </section>
<h3> <h3>
{% trans %}All coming events{% endtrans %} {% trans %}All coming events{% endtrans %}