Skip to content

Add mission modal #96

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 5 commits into
base: dev
Choose a base branch
from
Draft

Add mission modal #96

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
45a79fc
Wrap mission widget into div
veteran29 Jun 14, 2020
37cc10c
Add hidden div with full mission description
veteran29 Jun 14, 2020
3121587
Add mission modal template
veteran29 Jun 14, 2020
4a42b6b
Add mission modal js code
veteran29 Jun 14, 2020
78796ed
Improve readability of missions.html.twig
veteran29 Jun 14, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions assets/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import yall from 'yall-js';

// Init Bootstrap jQuery plugins
import 'bootstrap';
import * as form from './form';
import * as modal from './modal';

$(() => {
$('[data-toggle="tooltip"]').tooltip();
Expand All @@ -22,7 +22,8 @@ $(() => {
});
});

form.initConfirmModals();
modal.initConfirmModals();
modal.initMissionModals();

// Image lazy loading
yall();
Expand Down
24 changes: 24 additions & 0 deletions assets/form.js → assets/modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,3 +34,27 @@ export const initConfirmModals = () => {
});
});
};

export const createMissionModal = (title, content) => {
let template = $('#modal-mission-template').html();
template = template.replace('__content__', content);
template = template.replace('__title__', title);

let $modal = $(template).modal({
'backdrop': 'static',
'keyboard': false,
});
};

export const initMissionModals = () => {
$('[data-mission-widget]').on('click', '[data-mission-title]', (e) => {
e.preventDefault();
e.stopPropagation();

const $mission = jQuery(e.delegateTarget);
const title = $mission.find('[data-mission-title]').text();
const description = $mission.find('[data-mission-description]').html();

createMissionModal(title, description)
});
};
89 changes: 46 additions & 43 deletions templates/_partial/_mission_widget.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,51 +1,54 @@
<!-- Mission widget -->

<!-- Mission image -->
<div class="img-mission">
{% set mission_image = mission.image ?? 'https://via.placeholder.com/300x200.png?text=No%20mission%20image' %}
{% if lazy is defined and lazy %}
<img class="lazy" src="{{ asset('img/placeholder_320x250.png') }}" data-src="{{ proxy_image(mission_image) }}" alt="">
{% else %}
<img src="{{ proxy_image(mission_image) }}" alt="">
{%- endif %}
</div>
<!--/ Mission image -->

<!-- Mission header -->
<div class="text-center mt-2 mb-4">
<h4>
<span class="font-weight-bold">{{ mission.title }}</span>
</h4>
<div class="d-flex justify-content-between">
{% if mission.state == constant('App\\Service\\Mission\\Enum\\MissionStateEnum::ARCHIVED') %}
<div>{{ mission.date|date('Y-m-d H:i') }}</div>
<div data-mission-widget>
<!-- Mission image -->
<div class="img-mission">
{% set mission_image = mission.image ?? 'https://via.placeholder.com/300x200.png?text=No%20mission%20image' %}
{% if lazy is defined and lazy %}
<img class="lazy" src="{{ asset('img/placeholder_320x250.png') }}" data-src="{{ proxy_image(mission_image) }}" alt="">
{% else %}
<div class="dropdown dropdown-no-arrow">
<a class="dropdown-toggle" type="button" id="dropdown-menu-button" data-toggle="dropdown">
{{ mission.date|date('Y-m-d H:i') }}
<i class="fa fa-calendar-day"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="{{ mission_event_google(mission) }}">
<i class="fab fa-google"></i>oogle
</a>
<a class="dropdown-item" href="{{ mission_event_ical(mission) }}" type="text/calendar" download="{{ mission.title }}.ics">
<i class="fa fa-calendar-alt"></i> iCal
<img src="{{ proxy_image(mission_image) }}" alt="">
{%- endif %}
</div>
<!--/ Mission image -->

<!-- Mission header -->
<div class="text-center mt-2 mb-4">
<h4>
<span class="font-weight-bold" data-mission-title>
{{ mission.title }}
</span>
</h4>
<div class="d-flex justify-content-between">
{% if mission.state == constant('App\\Service\\Mission\\Enum\\MissionStateEnum::ARCHIVED') %}
<div>{{ mission.date|date('Y-m-d H:i') }}</div>
{% else %}
<div class="dropdown dropdown-no-arrow">
<a class="dropdown-toggle" type="button" data-toggle="dropdown">
{{ mission.date|date('Y-m-d H:i') }}
<i class="fa fa-calendar-day"></i>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="{{ mission_event_google(mission) }}">
<i class="fab fa-google"></i>oogle
</a>
<a class="dropdown-item" href="{{ mission_event_ical(mission) }}" type="text/calendar" download="{{ mission.title }}.ics">
<i class="fa fa-calendar-alt"></i> iCal
</a>
</div>
</div>
</div>
{% endif %}
<span>
{{ 'Enlisted'|trans }} {{ mission.occupiedSlots }}/{{ mission.allSlots }}
</span>
{% endif %}
<span>
{{ 'Enlisted'|trans }} {{ mission.occupiedSlots }}/{{ mission.allSlots }}
</span>
</div>
</div>
</div>
<!--/ Mission header -->
<!--/ Mission header -->

<!-- Mission description -->
<div class="text-justify">
{{ ((mission.description|u).truncate(350, '...'))|markdown_to_html }}
<!-- Mission description -->
<div class="text-justify">
{{ ((mission.description|u).truncate(350, '...'))|markdown_to_html }}
</div>
<div class="d-none" data-mission-description>{{ mission.description|u|markdown_to_html }}</div>
<!--/ Mission description -->
</div>
<!--/ Mission description -->

<!--/ Mission widget -->
24 changes: 24 additions & 0 deletions templates/_partial/_modal_mission.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<script id="modal-mission-template" type="x-template">
<div class="modal fade" id="modal-confirm" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
__title__
</h5>
<button type="button" class="close" data-dismiss="modal">
<span>&times;</span>
</button>
</div>
<div class="modal-body">
__content__
</div>
<div class="modal-footer justify-content-between">
<button type="button" id="modal-confirm-button-confirm" class="btn btn-primary" data-dismiss="modal">
{{ 'Confirm'|trans }}
</button>
</div>
</div>
</div>
</div>
</script>
1 change: 1 addition & 0 deletions templates/default.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,5 @@
{% block javascripts %}
{{ parent() }}
{{ include('_partial/_modal.html.twig') }}
{{ include('_partial/_modal_mission.html.twig') }}
{% endblock %}
85 changes: 44 additions & 41 deletions templates/home/missions/missions.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,52 +10,55 @@

{% block content %}
<div class="mt-3">
{% if upcomingMissions is null or archivedMissions is null %}
<section id="missions" class="text-center">
<h2>{{ 'Something went wrong while fetching missions list...'|trans }}</h2>
<h3>{{ 'Try again later'|trans }}</h3>
</section>
{% else %}
<!-- Section - Missions -->
<section id="missions" class="text-center">
{% if upcomingMissions is null or archivedMissions is null %}
<h2>{{ 'Something went wrong while fetching missions list...'|trans }}</h2>
<h3>{{ 'Try again later'|trans }}</h3>
{% else %}
<!-- Heading -->
<h2 class="mb-5 font-weight-bold">{{ 'Upcoming missions'|trans }}</h2>
<!-- Heading -->
<h2 class="mb-5 font-weight-bold">{{ 'Upcoming missions'|trans }}</h2>

{% for missionsRow in upcomingMissions|reverse|batch(3) %}
<!-- Grid row -->
<div class="row">
{% for mission in missionsRow %}
{# @var mission \App\Service\Mission\Dto\MissionDto #}
<!-- Grid column -->
<div class="col-lg-4 col-md-6 mb-4 mission">
{% include '_partial/_mission_widget.html.twig' with {'mission': mission} %}
</div>
<!--/ Grid column -->
{% endfor %}
</div>
<!--/ Grid row -->
{% endfor %}
</section>
{% for missionsRow in upcomingMissions|reverse|batch(3) %}
<!-- Grid row -->
<div class="row">
{% for mission in missionsRow %}
{# @var mission \App\Service\Mission\Dto\MissionDto #}
<!-- Grid column -->
<div class="col-lg-4 col-md-6 mb-4 mission">
{% include '_partial/_mission_widget.html.twig' with {'mission': mission} %}
</div>
<!--/ Grid column -->
{% endfor %}
</div>
<!--/ Grid row -->
{% endfor %}
</section>
<!--/ Section - Missions -->

<!-- Section - Missions -->
<section id="missions-archive" class="text-center">
<!-- Heading -->
<h2 class="mb-5 font-weight-bold">{{ 'Completed missions'|trans }}</h2>
<!-- Section - Missions Archive -->
<section id="missions-archive" class="text-center">
<!-- Heading -->
<h2 class="mb-5 font-weight-bold">{{ 'Completed missions'|trans }}</h2>

{% for missionsRow in archivedMissions|batch(3) %}
<!-- Grid row -->
<div class="row">
{% for mission in missionsRow %}
{# @var mission \App\Service\Mission\Dto\MissionDto #}
<!-- Grid column -->
<div class="col-lg-4 col-md-6 mb-4 mission">
{% include '_partial/_mission_widget.html.twig' with {'mission': mission, 'lazy': true} %}
</div>
<!--/ Grid column -->
{% endfor %}
</div>
<!--/ Grid row -->
{% endfor %}
{% endif %}
{% for missionsRow in archivedMissions|batch(3) %}
<!-- Grid row -->
<div class="row">
{% for mission in missionsRow %}
{# @var mission \App\Service\Mission\Dto\MissionDto #}
<!-- Grid column -->
<div class="col-lg-4 col-md-6 mb-4 mission">
{% include '_partial/_mission_widget.html.twig' with {'mission': mission, 'lazy': true} %}
</div>
<!--/ Grid column -->
{% endfor %}
</div>
<!--/ Grid row -->
{% endfor %}
</section>
<!--/ Section - Missions -->
<!--/ Section - Missions Archive -->
{% endif %}
</div>
{% endblock %}