Skip to content

Commit

Permalink
meinberlin_contrib/item_detail.html: refactor and cleanup item_detail
Browse files Browse the repository at this point in the history
  • Loading branch information
@hom3mad3
hom3mad3 committed Mar 26, 2024
1 parent 910fc80 commit 5eeee69
Show file tree
Hide file tree
Showing 6 changed files with 129 additions and 154 deletions.
4 changes: 4 additions & 0 deletions changelog/_8039.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
### Changed

- Cleaned up `meinberlin_contrib/item_detail.html` and `components/_item_detail.scss`
- Separated dropdown into `item_detail_dropdown.html` for further refactoring.
34 changes: 34 additions & 0 deletions meinberlin/apps/contrib/templates/meinberlin_contrib/includes/item_detail_dropdown.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
{% load i18n item_tags contrib_tags moderatorremark_tags react_reports %}

<div class="dropdown">
<button title="{% translate 'Actions' %}" type="button" class="dropdown-toggle" aria-haspopup="true" aria-expanded="false" id="idea-{{ object.pk }}-actions">
<i class="fas fa-ellipsis-h" aria-label="{% translate 'Actions' %}"></i>
</button>
<nav class="dropdown-menu dropdown-menu-right" aria-labelledby="idea-{{ object.pk }}-actions">
<ul class="list--clean">
{% if user_may_change %}
{% get_item_update_url object as change_url %}
<li>
<a class="dropdown-item" href="{{ change_url }}">{% translate 'edit' %}</a>
</li>
{% get_item_delete_url object as delete_url %}
<li>
<a class="dropdown-item" href="{{ delete_url }}">{% translate 'delete' %}</a>
</li>
{% endif %}
{% get_item_url object 'moderate' False as moderate_url %}
{% if is_moderator and moderate_url %}
<li>
<a class="dropdown-item" href="{{ moderate_url }}">{% translate 'moderate' %}</a>
</li>
{% endif %}

{% block dropdown_items %}{% endblock dropdown_items %}

<li>
{% translate 'report' as report_text %}
{% react_reports object text=report_text class='dropdown-item' %}
</li>
</ul>
</nav>
</div>
18 changes: 13 additions & 5 deletions meinberlin/apps/contrib/templates/meinberlin_contrib/includes/item_detail_labels.html
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,20 @@
{% load contrib_tags %}

<div class="item-detail__labels">
{% for badge in object.item_badges_for_detail %}
<span class="label label--big">
<ul class="pill__list">
{% for badge in object.item_badges_for_detail %}
<li class="pill
{% if badge.0 == 'category' %}
pill--category
{% endif %}
{% if badge.0 == 'label' %}
pill--label
{% endif %}
">
{% if badge.0 == 'point_label' %}
<i class="fas fa-map-marker-alt" aria-hidden="true"></i>
{% endif %}

{{ badge.1 }}
</span>
</li>
{% endfor %}
</div>
</ul>
142 changes: 62 additions & 80 deletions meinberlin/apps/contrib/templates/meinberlin_contrib/item_detail.html
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,29 @@
{% extends "base.html" %}
{% load i18n module_tags rules react_comments_async react_comments_async react_reports react_ratings wagtailcore_tags item_tags contrib_tags thumbnail moderatorremark_tags %}
{% load i18n module_tags rules react_comments_async react_comments_async react_reports react_ratings wagtailcore_tags item_tags contrib_tags moderatorremark_tags %}

{% block title %}{{ object.name }} — {{ block.super }}{% endblock title %}
{% block title %}
{{ object.name }}
—
{{ block.super }}
{% endblock title %}

{% block breadcrumbs %}
<div id="content-header">
<nav class="breadcrumb" aria-label="{% translate 'You are here:' %}">
<ol>
<li><a href="/">meinBerlin</a></li>
<li><a href="{% url 'meinberlin_plans:plan-list' %}">{% translate 'Project Overview' %}</a></li>
<li><a href="{% url 'project-detail' project.slug %}">{{ project.name|truncatechars:50 }}</a></li>
<li>
<a href="/">meinBerlin</a>
</li>
<li>
<a href="{% url 'meinberlin_plans:plan-list' %}">{% translate 'Project Overview' %}</a>
</li>
<li>
<a href="{% url 'project-detail' project.slug %}">{{ project.name|truncatechars:50 }}</a>
</li>
{% if module.is_in_module_cluster %}
<li><a href="{{ module.get_detail_url }}">{{ module.name|truncatechars:50 }}</a></li>
<li>
<a href="{{ module.get_detail_url }}">{{ module.name|truncatechars:50 }}</a>
</li>
{% endif %}
<li class="active" aria-current="page">{{ object.name }}</li>
</ol>
Expand All @@ -20,102 +32,72 @@
{% endblock breadcrumbs %}

{% block content %}
<div id="layout-grid__area--maincontent">
<article >
<div class="item-detail">
<h1 class="item-detail__title">{{ object.name }}</h1>
<div id="layout-grid__area--maincontent">
<article class="item-detail">
<header>
{% if object.image %}
<div class="item-detail__image">
<img src="{{ object.image.url }}" alt="{{ object.image.alt }}"/>
</div>
{% endif %}

{% include "meinberlin_contrib/includes/item_detail_labels.html" with object=object %}
<div class="item-detail__actions">
<h1 class="item-detail__title">
{{ object.name }}
</h1>

<div class="item-detail__content">
<div class="item-detail__basic-content ck-content">
<img class="item-detail__hero-image" src="{% thumbnail object.image 'item_image' %}" alt="">
<div class="ck-content">
{{ object.description | richtext }}
</div>
</div>
{% get_item_change_permission object as change_perm %}
{% has_perm change_perm request.user object as user_may_change %}
{% get_item_permission object 'moderate' as moderate_perm %}
{% has_perm moderate_perm request.user object as is_moderator %}

{% block additional_content %}{% endblock additional_content %}
</div>
{% if request.user.is_authenticated %}
{% include "meinberlin_contrib/includes/item_detail_dropdown.html" with object=object %}
{% endif %}
</div>

<div class="item-detail__meta lr-bar">
<div class="lr-bar__left">
<strong class="item-detail__creator">{{ object.creator.username }}</strong>
<div class="item-detail__user">
<strong>{{ object.creator.username }}</strong>
{% if object.modified %}
{% translate 'updated on ' %}{% html_date object.modified class='list-item__date' %}
{% else %}
{% translate 'created on ' %}{% html_date object.created class='list-item__date' %}
{% endif %}
</div>
<div class="lr-bar__right item-detail__ref">

{% include "meinberlin_contrib/includes/item_detail_labels.html" with object=object %}
</header>

<section class="item-detail__content">
<div class="ck-content">
{{ object.description | richtext }}
</div>
<div class="item-detail__reference">
<strong>{% translate 'Reference No.' %}:</strong>
{{ object.reference_number }}
</div>
</div>
{% block additional_content %}{% endblock additional_content %}
</section>

<div class="item-detail__actions lr-bar">
<section>
{% block ratings %}
{% if object|has_feature:"rate" %}
<div class="lr-bar__left">
<div>
{% react_ratings object %}
</div>
{% endif %}
{% endblock ratings %}
</section>

{% get_item_change_permission object as change_perm %}
{% has_perm change_perm request.user object as user_may_change %}
{% get_item_permission object 'moderate' as moderate_perm %}
{% has_perm moderate_perm request.user object as is_moderator %}
{% block vote_button %}{% endblock vote_button %}

<div class="lr-bar__right">
{% include "meinberlin_contrib/components/moderator_feedback.html" %}

{% if request.user.is_authenticated %}
<div class="dropdown">
<button
title="{% translate 'Actions' %}"
type="button"
class="dropdown-toggle btn btn--light btn--small"
data-bs-toggle="dropdown"
data-flip="false"
aria-haspopup="true"
aria-expanded="false"
id="idea-{{ object.pk }}-actions"
>
<i class="fa fa-ellipsis-h" aria-label="{% translate 'Actions' %}"></i>
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="idea-{{ object.pk }}-actions">
{% if user_may_change %}
{% get_item_update_url object as change_url %}
<a class="dropdown-item" href="{{ change_url }}">{% translate 'edit' %}</a>
{% get_item_delete_url object as delete_url %}
<a class="dropdown-item" href="{{ delete_url }}">{% translate 'delete' %}</a>
{% endif %}
{% get_item_url object 'moderate' False as moderate_url %}
{% if is_moderator and moderate_url %}
<a class="dropdown-item" href="{{ moderate_url }}">{% translate 'moderate' %}</a>
{% endif %}
{% include "meinberlin_contrib/components/moderator_notes.html" %}

{% block dropdown_items %}{% endblock dropdown_items %}
<li>
{% translate 'report' as report_text %}
{% react_reports object text=report_text class='dropdown-item' %}
</li>
</div>
</div>
{% endif %}
</div>
</div>
</div>
{% block vote_button %}{% endblock vote_button %}


{% include "meinberlin_contrib/components/moderator_feedback.html" %}

{% include "meinberlin_contrib/components/moderator_notes.html" %}

<section>
{% react_comments_async object %}
</section>
</article>
</div>
<section>
{% react_comments_async object %}
</section>
</article>
</div>
{% endblock content %}
84 changes: 15 additions & 69 deletions meinberlin/assets/scss/components/_item_detail.scss
View file
Original file line number Diff line number Diff line change
@@ -1,81 +1,27 @@
.item-detail {
margin-bottom: $em-spacer;
}

.item-detail__title {
font-size: $font-size-xl;
padding: $spacer 0;
margin: 0;
}

.item-detail__labels {
margin-bottom: 1em;
.item-detail__image {
max-height: 490px;
margin-top: -40px!important;
overflow: hidden;
}

.item-detail__labels .label {
display: inline-block;
margin-bottom: 0.4em;
.item-detail__user {
padding-bottom: $spacer;
}

.item-detail__meta {
padding-bottom: 0.5 * $padding;
font-size: $font-size-sm;
.item-detail .pill__list {
margin-bottom: 0.8em;
}

.item-detail__actions {
padding-top: $padding;
border-top: 1px solid $border-color;
}

.item-detail__creator {
margin-right: 0.5em;
}

.item-detail__ref {
@media screen and (max-width: $breakpoint-xs-down) {
float: left !important; // overwrite the l-bar-right for mobile
margin-left: 0 !important;
}
}

.item-detail__content {
position: relative;
z-index: 0;
margin-bottom: 1em;
}

.item-detail__basic-content {
@include clearfix;
position: relative;
margin-bottom: 1.5em;

overflow-wrap: break-word;
}

.item-detail__hero-image {
width: 100%;

@media screen and (min-width: $breakpoint-xs) {
display: inline-block;
float: right;
margin-left: 0.5em;
width: auto;
}
display: flex;
justify-content: space-between;
}

.item-detail__background-image {
position: relative;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 100%;
padding-top: 60%; // this creates an aspect ratio in css, 100% = 1:1 ratio

@media screen and (min-width: $breakpoint-xs) {
margin: 3 * $spacer 0 2 * $spacer;
}
}

.item-detail__copyright {
position: absolute;
bottom: 0;
right: 0;
}
.item-detail__reference {
margin-bottom: $spacer;
}
1 change: 1 addition & 0 deletions meinberlin/assets/scss/style_user_facing.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
@import "components/dsgvo_video_embed";
@import "components/embed_layout";
@import "components/embed_status";
@import "components/item_detail";
@import "components/item_detail_2";
@import "components/label";
@import "components/map";
Expand Down

0 comments on commit 5eeee69

Please sign in to comment.