mirror of
https://gitlab.com/Chill-Projet/chill-bundles.git
synced 2025-06-12 21:34:25 +00:00
banner accompanyingcourse, new responsive design
This commit is contained in:
parent
f9735823c7
commit
51216b90c5
@ -1,33 +1,32 @@
|
||||
<template>
|
||||
|
||||
|
||||
<teleport to="#header-accompanying_course-name #banner-flags">
|
||||
<toggle-flags></toggle-flags>
|
||||
</teleport>
|
||||
|
||||
|
||||
<teleport to="#header-accompanying_course-name #banner-status">
|
||||
<div v-if="accompanyingCourse.step === 'DRAFT'">
|
||||
<span v-if="accompanyingCourse.step === 'DRAFT'" class="d-md-block">
|
||||
<span class="badge bg-secondary">
|
||||
{{ $t('course.step.draft') }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div>
|
||||
</span>
|
||||
<span v-else class="text-md-end">
|
||||
<span class="d-md-block mb-md-3">
|
||||
<span class="badge bg-primary">
|
||||
{{ $t('course.step.active') }}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
</span>
|
||||
<span class="d-md-block">
|
||||
<span class="d-md-block ms-3 ms-md-0">
|
||||
<i>{{ $t('course.open_at') }}{{ $d(accompanyingCourse.openingDate.datetime, 'text') }}</i>
|
||||
</span>
|
||||
<br>
|
||||
<span v-if="accompanyingCourse.user">
|
||||
<span v-if="accompanyingCourse.user" class="d-md-block ms-3 ms-md-0">
|
||||
{{ $t('course.by') }}<b>{{ accompanyingCourse.user.username }}</b>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</span>
|
||||
</teleport>
|
||||
|
||||
|
||||
<teleport to="#header-accompanying_course-details #banner-social-issues">
|
||||
<div class="col-12">
|
||||
<social-issue
|
||||
@ -61,11 +60,6 @@ export default {
|
||||
<style lang="scss">
|
||||
div#banner-flags,
|
||||
div#banner-status {
|
||||
margin: 1.5em 0;
|
||||
div {
|
||||
text-align: right;
|
||||
margin-bottom: 0.8em;
|
||||
}
|
||||
.badge {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@ -1,19 +1,21 @@
|
||||
<template>
|
||||
<div>
|
||||
<a @click="toggleIntensity" class="flag-toggle">
|
||||
<span :class="{ 'on': !isRegular }">{{ $t('course.occasional') }}</span>
|
||||
<i class="fa" :class="{ 'fa-toggle-on': isRegular, 'fa-toggle-on fa-flip-horizontal': !isRegular }"></i>
|
||||
<span :class="{ 'on': isRegular }">{{ $t('course.regular') }}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button class="badge rounded-pill" :class="{ 'bg-primary': isEmergency, 'bg-secondary': !isEmergency }" @click="toggleEmergency">
|
||||
{{ $t('course.emergency') }}
|
||||
</button>
|
||||
<button class="badge rounded-pill" :class="{ 'bg-primary': isConfidential, 'bg-secondary': !isConfidential }" @click="toggleConfidential">
|
||||
{{ $t('course.confidential') }}
|
||||
</button>
|
||||
<div class="text-md-end">
|
||||
<span class="d-block d-sm-inline-block mb-md-2">
|
||||
<a @click="toggleIntensity" class="flag-toggle">
|
||||
<span :class="{ 'on': !isRegular }">{{ $t('course.occasional') }}</span>
|
||||
<i class="fa" :class="{ 'fa-toggle-on': isRegular, 'fa-toggle-on fa-flip-horizontal': !isRegular }"></i>
|
||||
<span :class="{ 'on': isRegular }">{{ $t('course.regular') }}</span>
|
||||
</a>
|
||||
</span>
|
||||
|
||||
<span class="d-block d-sm-inline-block ms-sm-3 ms-md-0">
|
||||
<button class="badge rounded-pill me-1" :class="{ 'bg-primary': isEmergency, 'bg-secondary': !isEmergency }" @click="toggleEmergency">
|
||||
{{ $t('course.emergency') }}
|
||||
</button>
|
||||
<button class="badge rounded-pill" :class="{ 'bg-primary': isConfidential, 'bg-secondary': !isConfidential }" @click="toggleConfidential">
|
||||
{{ $t('course.confidential') }}
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -66,7 +68,6 @@ export default {
|
||||
<style lang="scss" scoped>
|
||||
a.flag-toggle {
|
||||
color: white;
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: white;
|
||||
@ -81,7 +82,6 @@ export default {
|
||||
}
|
||||
}
|
||||
button.badge {
|
||||
margin-left: 0.8em;
|
||||
&.bg-secondary {
|
||||
opacity: 0.5;
|
||||
&:hover {
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<div class="container-xxl">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-sm-5">
|
||||
<div class="col-md-6 ps-md-5 ps-xxl-0">
|
||||
<h1>
|
||||
<i class="fa fa-random fa-fw"></i>
|
||||
{{ 'Accompanying Course'|trans }}
|
||||
@ -12,21 +12,21 @@
|
||||
</div>
|
||||
|
||||
{# vue teleport fragment here #}
|
||||
<div class="col-sm-3" id="banner-flags"></div>
|
||||
<div class="col-md-3 mt-3 mb-1 my-md-3" id="banner-flags"></div>
|
||||
|
||||
{# vue teleport fragment here #}
|
||||
<div class="col-sm-3" id="banner-status"></div>
|
||||
<div class="col-md-3 mt-1 mb-3 my-md-3 pe-md-5 pe-xxl-0" id="banner-status"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div id="header-accompanying_course-details" class="header-details">
|
||||
<div class="container-xxl">
|
||||
<div class="row justify-content-md-right">
|
||||
|
||||
{# vue teleport fragment here #}
|
||||
<div class="col-sm-10" id="banner-social-issues"></div>
|
||||
<div class="col-md-10 ps-md-5 ps-xxl-0" id="banner-social-issues"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -42,9 +42,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
'render': 'label', 'addInfo': true, 'addAge': true, 'addId': true, 'hLevel': 1
|
||||
}) }}
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
{{ include('@ChillPerson/Person/banner_custom.html.twig') }}
|
||||
</div>
|
||||
@ -19,42 +20,44 @@
|
||||
<div class="container-xxl">
|
||||
<div class="row justify-content-between">
|
||||
|
||||
<div class="contact col-md-12 ps-md-5 ps-xxl-0">
|
||||
{% if person.phonenumber %}
|
||||
<span class="phonenumber d-block d-sm-inline-block">
|
||||
<i class="fa fa-fw fa-phone"></i>
|
||||
<a href="{{ 'tel:' ~ person.phonenumber }}" class="phone mr-3" title="{{ 'Phonenumber'|trans }}">
|
||||
{{ person.phonenumber|chill_format_phonenumber }}</a>
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if person.mobilenumber %}
|
||||
<span class="mobilenumber d-block d-sm-inline-block">
|
||||
<i class="fa fa-fw fa-mobile"></i>
|
||||
<a href="{{ 'tel:' ~ person.mobilenumber }}" class="phone mr-3" title="{{ 'Mobilenumber'|trans }}">
|
||||
{{ person.mobilenumber|chill_format_phonenumber }}</a>
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if person.email %}
|
||||
<span class="email d-block d-sm-inline-block">
|
||||
<i class="fa fa-fw fa-envelope-o"></i>
|
||||
<a href="{{ 'mailto:' ~ person.email }}" class="email" title="{{ 'Email'|trans }}">
|
||||
{{ person.email }}
|
||||
</a>
|
||||
</span>
|
||||
{% endif %}
|
||||
<div class="col-md-12 ps-md-5 ps-xxl-0">
|
||||
<div class="contact">
|
||||
{% if person.phonenumber %}
|
||||
<span class="phonenumber d-block d-sm-inline-block">
|
||||
<i class="fa fa-fw fa-phone"></i>
|
||||
<a href="{{ 'tel:' ~ person.phonenumber }}" class="phone mr-3" title="{{ 'Phonenumber'|trans }}">
|
||||
{{ person.phonenumber|chill_format_phonenumber }}</a>
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if person.mobilenumber %}
|
||||
<span class="mobilenumber d-block d-sm-inline-block">
|
||||
<i class="fa fa-fw fa-mobile"></i>
|
||||
<a href="{{ 'tel:' ~ person.mobilenumber }}" class="phone mr-3" title="{{ 'Mobilenumber'|trans }}">
|
||||
{{ person.mobilenumber|chill_format_phonenumber }}</a>
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if person.email %}
|
||||
<span class="email d-block d-sm-inline-block">
|
||||
<i class="fa fa-fw fa-envelope-o"></i>
|
||||
<a href="{{ 'mailto:' ~ person.email }}" class="email" title="{{ 'Email'|trans }}">
|
||||
{{ person.email }}
|
||||
</a>
|
||||
</span>
|
||||
{% endif %}
|
||||
|
||||
{%- if person.currentHouseholdAddress is not empty -%}
|
||||
{% set address = person.currentHouseholdAddress %}
|
||||
{%- elseif person.lastAddress is not empty -%}
|
||||
{% set address = person.lastAddress %}
|
||||
{%- endif -%}
|
||||
{%- if address -%}
|
||||
<span class=" d-block d-sm-inline-block">
|
||||
{{ address|chill_entity_render_box({
|
||||
'render': 'inline', 'multiline': false, 'with_picto': true, 'with_delimiter': true
|
||||
}) }}
|
||||
</span>
|
||||
{%- endif -%}
|
||||
{%- if person.currentHouseholdAddress is not empty -%}
|
||||
{% set address = person.currentHouseholdAddress %}
|
||||
{%- elseif person.lastAddress is not empty -%}
|
||||
{% set address = person.lastAddress %}
|
||||
{%- endif -%}
|
||||
{%- if address -%}
|
||||
<span class=" d-block d-sm-inline-block">
|
||||
{{ address|chill_entity_render_box({
|
||||
'render': 'inline', 'multiline': false, 'with_picto': true, 'with_delimiter': true
|
||||
}) }}
|
||||
</span>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user