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 {

View File

@ -37,69 +37,71 @@
</a>
<br>
{% endif %}
{% for day, dates_group in news_dates %}
<div class="news_events_group">
<div class="news_events_group_date">
<div>
<div>{{ day|date('D') }}</div>
<div class="day">{{ day|date('d') }}</div>
<div>{{ day|date('b') }}</div>
<section id="upcoming-events">
{% for day, dates_group in news_dates %}
<div class="news_events_group">
<div class="news_events_group_date">
<div>
<div>{{ day|date('D') }}</div>
<div class="day">{{ day|date('d') }}</div>
<div>{{ day|date('b') }}</div>
</div>
</div>
</div>
<div class="news_events_group_items">
{% for date in dates_group %}
<article
class="news_event"
{%- if not date.news.is_moderated -%}
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"
<div class="news_events_group_items">
{% for date in dates_group %}
<article
class="news_event"
{%- if not date.news.is_moderated -%}
x-data="{newsState: AlertState.PENDING}"
{%- endif -%}
>
<header class="row gap">
{% if date.news.club.logo %}
<img src="{{ date.news.club.logo.url }}" alt="{{ date.news.club }}"/>
{% else %}
<img src="{{ static("com/img/news.png") }}" alt="{{ date.news.club }}"/>
{% endif %}
<div class="header_content">
<h4>
<a href="{{ url('com:news_detail', news_id=date.news_id) }}">
{{ 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>
{% 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 -%}
>
<header class="row gap">
{% if date.news.club.logo %}
<img src="{{ date.news.club.logo.url }}" alt="{{ date.news.club }}"/>
{% else %}
<img src="{{ static("com/img/news.png") }}" alt="{{ date.news.club }}"/>
{% endif %}
<div class="header_content">
<h4>
<a href="{{ url('com:news_detail', news_id=date.news_id) }}">
{{ 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>
</header>
<div class="news_content markdown">
{{ date.news.summary|markdown }}
</div>
</header>
<div class="news_content markdown">
{{ date.news.summary|markdown }}
</div>
</div>
</article>
{% endfor %}
</article>
{% endfor %}
</div>
</div>
</div>
{% else %}
<div class="news_empty">
<em>{% trans %}Nothing to come...{% endtrans %}</em>
</div>
{% endfor %}
{% else %}
<div class="news_empty">
<em>{% trans %}Nothing to come...{% endtrans %}</em>
</div>
{% endfor %}
</section>
<h3>
{% trans %}All coming events{% endtrans %}