Skip to content

Commit

Permalink
[#3081] New modal design for plan-previews
Browse files Browse the repository at this point in the history
  • Loading branch information
@jiromaykin
jiromaykin committed Mar 6, 2025
1 parent 5d199cc commit c5355c0
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 45 deletions.
7 changes: 4 additions & 3 deletions src/open_inwoner/plans/templates/plans/preview.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
{% load i18n link_tags %}

<div class='preview'>
<div class='preview plan-preview'>
{% if plan_template.goal %}
<div class='preview__title'>{% trans "Doel:" %}</div>
<h2 class='preview__title'>{% trans "Doel:" %}</h2>
<h3>{% trans "Dit sjabloon bevat" %}</h3>
<div>{{ plan_template.goal }}</div>
{% endif %}

Expand All @@ -26,7 +27,7 @@
<div>{{ action_template.name }}</div>
<div></div>
<div class='preview__title'>{% trans 'Description:' %}</div>
<div>{{ action_template.description }}</div>
<div>{{ action_template.description }}...</div>
<div></div>
<div class='preview__title'>{% trans 'Type:' %}</div>
<div>{{ action_template.get_type_display }}</div>
Expand Down
96 changes: 54 additions & 42 deletions src/open_inwoner/templates/pages/plans/create.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,55 +16,67 @@ <h1 class="utrecht-heading-1">{% trans "Start nieuwe samenwerking" %}</h1>
{% checkboxes form.plan_contacts %}
{% date_field form.end_date icon="today" icon_position="after" %}
{% endrender_grid %}

<div class="">
<div class="plan-template">
<div class="plan-template__header">
<div>{% trans "Templates" %}</div>
<div>{% trans "Doel" %}</div>
<div></div>
</div>
<div class="label plan-template__row radio">
<div>
<input class="radio__input" type="radio" name="template" value="" id="id_template_0" {% if not form.data.template %}checked{% endif %}>
<label class="radio__label" for="id_template_0">Geen template</label>
</div>
<div></div>
<div></div>
</div>
{% for tpl_id, plan_template in form.template.field.choices %}
<div class="label plan-template__row radio">
<div>
<input class="radio__input" type="radio" name="template" value="{{ plan_template.id }}" id="id_template_{{ plan_template.id }}"
{% if tpl_id == form.data.template %}checked{% endif %}>
<label class="radio__label" for="id_template_{{ plan_template.id }}">{{ plan_template.name }}</label>
</div>
<div>
{{ plan_template.goal|truncatewords:8 }}
</div>
<div class="plan-template__icon">
<button class="show-preview" type="button" data-id="template-{{ plan_template.id }}">
{% icon icon="visibility" outlined=True %}
</button>

<div class="plan-template__icon">
<button class="show-preview" type="button" data-id="template-{{ plan_template.id }}">
{% icon icon="visibility" outlined=True %}
<span class="sr-only">{% trans "Gebruik sjabloon" %}</span>
</button>
</div>
<div class="modal modal--no-reset" id="template-{{ plan_template.id }}">
<div class="modal__container">
<header class="oip-header-group">
<h2 class="utrecht-heading-2 modal__title" id="modal__title">Samenwerkingsjablonen</h2>
<div class="modal__actions">
{% button type="button" text=_("Sluiten") hide_text=True icon="close" outlined=True extra_classes="modal__button modal__close-title button__icon-close" %}
</div>
<div class="modal modal--no-reset" id="template-{{ plan_template.id }}">
<div class="modal__container">
<header class="oip-header-group">
<h2 class="utrecht-heading-2 modal__title" id="modal__title">{{ plan_template.name }}</h2>
<div class="modal__actions">
{% button type="button" text=_("Sluiten") hide_text=True icon="close" outlined=True extra_classes="modal__button modal__close-title button__icon-close" %}
</div>
</header>
<div class="modal__text" id="modal__text">{{ plan_template.string_preview }}</div>
<div class="modal__actions modal__actions--align-right" id="modal__actions">
<button class="button modal__button modal__close button--primary button-icon--primary" type="button" aria-label="Sluit"><span class="inner-text">Sluiten </span></button>
</header>
<div class="modal__text" id="modal__text">{{ plan_template.string_preview }}</div>
///
<div class="">
<div class="plan-template">
<div class="plan-template__header">
<div>{% trans "Templates" %}</div>
<div>{% trans "Doel" %}</div>
<div></div>
</div>
<div class="label plan-template__row radio">
<div>
<input class="radio__input" type="radio" name="template" value="" id="id_template_0" {% if not form.data.template %}checked{% endif %}>
<label class="radio__label" for="id_template_0">Geen template</label>
</div>
<div></div>
<div></div>
</div>
{% for tpl_id, plan_template in form.template.field.choices %}
<div class="label plan-template__row radio">
<div>
<input class="radio__input" type="radio" name="template" value="{{ plan_template.id }}" id="id_template_{{ plan_template.id }}"
{% if tpl_id == form.data.template %}checked{% endif %}>
<label class="radio__label" for="id_template_{{ plan_template.id }}">{{ plan_template.name }}</label>
</div>
<div>
{{ plan_template.goal|truncatewords:8 }}
</div>

<div class="modal__text" id="modal__text">{{ plan_template.string_preview }}</div>

</div>
{% endfor %}
</div>

{% if form.template.errors %}
{% errors errors=form.template.errors %}
{% endif %}
</div>
///
<div class="modal__actions modal__actions--align-right" id="modal__actions">
<button class="button modal__button modal__close button--primary button-icon--primary" type="button" aria-label="Sluit"><span class="inner-text">Sluiten </span></button>
</div>
{% endfor %}
</div>
</div>


{% if form.template.errors %}
{% errors errors=form.template.errors %}
{% endif %}
Expand Down

0 comments on commit c5355c0

Please sign in to comment.