223 lines
8.1 KiB
Plaintext
223 lines
8.1 KiB
Plaintext
{% include "side_navigation_bar" %}
|
|
|
|
<div class="section-margin">
|
|
<div class="top-bar">
|
|
<div class="top-bar__container uk-container uk-container-center uk-padding-horizontal">
|
|
<div class="top-bar__col">
|
|
<h2 class="top-bar__headline" data-test="session-name">{{ training_session.session_name }}</h2>
|
|
<div class="top-bar__attributes">
|
|
<div class="top-bar__attribute" data-test="event-title">
|
|
<div class="top-bar__attribute-label">
|
|
{% t .belongs_to %}
|
|
</div>
|
|
<div class="top-bar__attribute-value">
|
|
{{ training_session.title }}
|
|
</div>
|
|
</div>
|
|
<div class="top-bar__attribute">
|
|
<div class="top-bar__attribute-label">
|
|
{% t .type %}
|
|
</div>
|
|
<div class="top-bar__attribute-value">
|
|
{{ training_session.event_type_title }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% if training_session.instructor_assigned? %}
|
|
<div class="top-bar__col uk-hidden-small">
|
|
<div class="person" data-test="instructor-panel">
|
|
<div class="person__avatar">
|
|
<img src="{{ training_session.instructor_image_url }}" alt="avatar" />
|
|
</div>
|
|
<div class="person__details">
|
|
<div class="person__name">
|
|
{{ training_session.instructor_name }}
|
|
</div>
|
|
<div class="person__title">
|
|
{{ training_session.instructor_title }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="uk-container uk-container-center uk-padding-horizontal">
|
|
<div class="uk-flex uk-flex-wrap">
|
|
<div class="uk-width-large-6-10 uk-visible-large">
|
|
<div class="session-description">
|
|
{{ training_session.description }}
|
|
</div>
|
|
</div>
|
|
<div class="uk-width-large-4-10">
|
|
<div class="session-sidebar">
|
|
<div class="session-sidebar__content">
|
|
<div class="session-dialog dialog">
|
|
<div class="dialog__body">
|
|
<div class="uk-flex">
|
|
<div class="uk-width-1-4">
|
|
<div class="calendar-card">
|
|
<div class="calendar-card__day">
|
|
{{ training_session.session_day }}
|
|
</div>
|
|
<div class="calendar-card__month">
|
|
{{ training_session.session_month }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="uk-width-3-4">
|
|
<h4 class="session-dialog__headline">
|
|
{{ training_session.title }}
|
|
</h4>
|
|
<p class="session-dialog__detail">
|
|
<i class="uk-icon-clock-o"></i>
|
|
{{ training_session.session_time }}
|
|
</p>
|
|
<p class="session-dialog__detail">
|
|
{% if training_session.location %}
|
|
<i class="uk-icon-map-marker"></i>
|
|
{{ training_session.location }}
|
|
{% endif %}
|
|
{% if training_session.session_url %}
|
|
<i class="uk-icon-globe"></i>
|
|
<a class="session-link" href="{{ training_session.session_url }}">{{ training_session.session_url }}</a>
|
|
{% endif %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="dialog__footer">
|
|
{{ training_session.registration_actions }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="session-description uk-hidden-large">
|
|
{{ training_session.description }}
|
|
</div>
|
|
<section class="other-sessions">
|
|
<header class="other-sessions__header">
|
|
<h4 class="other-sessions__headline">
|
|
{% t .other_sessions_headline %}
|
|
</h4>
|
|
</header>
|
|
<div class="other-sessions__body">
|
|
<ul class="other-sessions__list">
|
|
{% for other_session in training_session.other_sessions %}
|
|
<li class="other-session">
|
|
<div class="other-session__calendar-card-wrapper">
|
|
<div class="calendar-card calendar-card--small">
|
|
<div class="calendar-card__day">
|
|
{{ other_session.session_day }}
|
|
</div>
|
|
<div class="calendar-card__month">
|
|
{{ other_session.session_month }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="other-session__details">
|
|
<h5 class="other-session__name">
|
|
{{ other_session.session_name }}
|
|
</h5>
|
|
<div class="other-session__time">
|
|
<i class="uk-icon-clock-o"></i>
|
|
{{ other_session.session_time }}
|
|
</div>
|
|
</div>
|
|
<div class="other-session__buttons">
|
|
<a class="uk-button" href="{{ other_session.self_url }}">
|
|
{% t .attend %}
|
|
</a>
|
|
</div>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
<footer class="other-sessions__footer">
|
|
{% if training_session.other_sessions_count > 3 %}
|
|
<button class="other-sessions__more-button" onclick="findOutMore();">
|
|
{% t .find_out_more %}
|
|
</button>
|
|
{% endif %}
|
|
</footer>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
.main-content {
|
|
width: 100%;
|
|
}
|
|
|
|
.session-link {
|
|
display: none;
|
|
}
|
|
|
|
.uk-icon-globe {
|
|
display: none;
|
|
}
|
|
|
|
</style>
|
|
<script>
|
|
var container = document.querySelector(".other-sessions__body");
|
|
var items = document.querySelectorAll(".other-session");
|
|
var containerHeight = 0;
|
|
for (var i = 0; i < Math.min(3, items.length); i++) {
|
|
containerHeight += items[i].offsetHeight;
|
|
}
|
|
container.style.height = containerHeight + "px";
|
|
function findOutMore() {
|
|
var button = document.querySelector(".other-sessions__more-button");
|
|
var list = document.querySelector(".other-sessions__list");
|
|
container.style.height = list.offsetHeight + "px";
|
|
button.style.display = "none";
|
|
}
|
|
|
|
function adjustLink() {
|
|
var buttonText = returnRegisterButtonText()
|
|
|
|
if (buttonText === "Unregister") {
|
|
$(".session-link").text("Join Here")
|
|
$(".session-link").css('display', 'inline-block')
|
|
$(".uk-icon-globe").css('display', 'inline-block')
|
|
} else {
|
|
$(".session-link").css('display', 'none')
|
|
$(".uk-icon-globe").css('display', 'none')
|
|
}
|
|
}
|
|
|
|
function returnRegisterButtonText() {
|
|
if ($("button[data-test='unregister-button']").length) {
|
|
return $("button[data-test='unregister-button']").text()
|
|
} else if ($("button[data-test='register-button']").length) {
|
|
return $("button[data-test='register-button']").text()
|
|
}
|
|
}
|
|
|
|
function setEventListenerToRegisterOrUnregisterButton() {
|
|
var buttonText = returnRegisterButtonText()
|
|
if (buttonText === "Unregister") {
|
|
$("button[data-test='unregister-button']")[0].addEventListener("click", function() {
|
|
setTimeout(adjustLink, 500);
|
|
})
|
|
} else {
|
|
$("button[data-test='register-button']")[0].addEventListener("click", function() {
|
|
setTimeout(adjustLink, 500);
|
|
})
|
|
}
|
|
}
|
|
|
|
$( document ).ready(function() {
|
|
adjustLink()
|
|
setEventListenerToRegisterOrUnregisterButton()
|
|
|
|
$(".dialog__footer")[0].addEventListener("click", function() {
|
|
setTimeout(function() {
|
|
setEventListenerToRegisterOrUnregisterButton()
|
|
}, 500);
|
|
})
|
|
})
|
|
</script> |