Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-13 13:54:23 +00:00
Code Issues Actions Projects Releases Wiki Activity

banner accompanyingcourse, new responsive design

Browse Source
This commit is contained in:
Mathieu Jaumotte 2021-07-30 19:56:01 +02:00
parent f9735823c7
commit 51216b90c5
5 changed files with 73 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue
View File

@ -1,33 +1,32 @@
<template> <template>
<teleport to="#header-accompanying_course-name #banner-flags"> <teleport to="#header-accompanying_course-name #banner-flags">
<toggle-flags></toggle-flags> <toggle-flags></toggle-flags>
</teleport> </teleport>
<teleport to="#header-accompanying_course-name #banner-status"> <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"> <span class="badge bg-secondary">
{{ $t('course.step.draft') }} {{ $t('course.step.draft') }}
</span> </span>
</div> </span>
<div v-else> <span v-else class="text-md-end">
<div> <span class="d-md-block mb-md-3">
<span class="badge bg-primary"> <span class="badge bg-primary">
{{ $t('course.step.active') }} {{ $t('course.step.active') }}
</span> </span>
</div> </span>
<div> <span class="d-md-block">
<span> <span class="d-md-block ms-3 ms-md-0">
<i>{{ $t('course.open_at') }}{{ $d(accompanyingCourse.openingDate.datetime, 'text') }}</i> <i>{{ $t('course.open_at') }}{{ $d(accompanyingCourse.openingDate.datetime, 'text') }}</i>
</span> </span>
<br> <span v-if="accompanyingCourse.user" class="d-md-block ms-3 ms-md-0">
<span v-if="accompanyingCourse.user">
{{ $t('course.by') }}<b>{{ accompanyingCourse.user.username }}</b> {{ $t('course.by') }}<b>{{ accompanyingCourse.user.username }}</b>
</span> </span>
</div> </span>
</div> </span>
</teleport> </teleport>
<teleport to="#header-accompanying_course-details #banner-social-issues"> <teleport to="#header-accompanying_course-details #banner-social-issues">
<div class="col-12"> <div class="col-12">
<social-issue <social-issue
@ -61,11 +60,6 @@ export default {
<style lang="scss"> <style lang="scss">
div#banner-flags, div#banner-flags,
div#banner-status { div#banner-status {
margin: 1.5em 0;
div {
text-align: right;
margin-bottom: 0.8em;
}
.badge { .badge {
text-transform: uppercase; text-transform: uppercase;
} }

34
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/ToggleFlags.vue
View File

@ -1,19 +1,21 @@
<template> <template>
<div> <div class="text-md-end">
<a @click="toggleIntensity" class="flag-toggle"> <span class="d-block d-sm-inline-block mb-md-2">
<span :class="{ 'on': !isRegular }">{{ $t('course.occasional') }}</span> <a @click="toggleIntensity" class="flag-toggle">
<i class="fa" :class="{ 'fa-toggle-on': isRegular, 'fa-toggle-on fa-flip-horizontal': !isRegular }"></i> <span :class="{ 'on': !isRegular }">{{ $t('course.occasional') }}</span>
<span :class="{ 'on': isRegular }">{{ $t('course.regular') }}</span> <i class="fa" :class="{ 'fa-toggle-on': isRegular, 'fa-toggle-on fa-flip-horizontal': !isRegular }"></i>
</a> <span :class="{ 'on': isRegular }">{{ $t('course.regular') }}</span>
</div> </a>
</span>
<div>
<button class="badge rounded-pill" :class="{ 'bg-primary': isEmergency, 'bg-secondary': !isEmergency }" @click="toggleEmergency"> <span class="d-block d-sm-inline-block ms-sm-3 ms-md-0">
{{ $t('course.emergency') }} <button class="badge rounded-pill me-1" :class="{ 'bg-primary': isEmergency, 'bg-secondary': !isEmergency }" @click="toggleEmergency">
</button> {{ $t('course.emergency') }}
<button class="badge rounded-pill" :class="{ 'bg-primary': isConfidential, 'bg-secondary': !isConfidential }" @click="toggleConfidential"> </button>
{{ $t('course.confidential') }} <button class="badge rounded-pill" :class="{ 'bg-primary': isConfidential, 'bg-secondary': !isConfidential }" @click="toggleConfidential">
</button> {{ $t('course.confidential') }}
</button>
</span>
</div> </div>
</template> </template>
@ -66,7 +68,6 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
a.flag-toggle { a.flag-toggle {
color: white; color: white;
padding: 0 10px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: white; color: white;
@ -81,7 +82,6 @@ export default {
} }
} }
button.badge { button.badge {
margin-left: 0.8em;
&.bg-secondary { &.bg-secondary {
opacity: 0.5; opacity: 0.5;
&:hover { &:hover {

10
src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/banner.html.twig
View File

@ -3,7 +3,7 @@
<div class="container-xxl"> <div class="container-xxl">
<div class="row"> <div class="row">
<div class="col-sm-5"> <div class="col-md-6 ps-md-5 ps-xxl-0">
<h1> <h1>
<i class="fa fa-random fa-fw"></i> <i class="fa fa-random fa-fw"></i>
{{ 'Accompanying Course'|trans }} {{ 'Accompanying Course'|trans }}
@ -12,21 +12,21 @@
</div> </div>
{# vue teleport fragment here #} {# 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 #} {# 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>
</div> </div>
<div id="header-accompanying_course-details" class="header-details"> <div id="header-accompanying_course-details" class="header-details">
<div class="container-xxl"> <div class="container-xxl">
<div class="row justify-content-md-right"> <div class="row justify-content-md-right">
{# vue teleport fragment here #} {# 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>
</div> </div>

3
src/Bundle/ChillPersonBundle/Resources/views/Household/banner.html.twig
View File

@ -42,9 +42,6 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>

73
src/Bundle/ChillPersonBundle/Resources/views/Person/banner.html.twig
View File

@ -8,6 +8,7 @@
'render': 'label', 'addInfo': true, 'addAge': true, 'addId': true, 'hLevel': 1 'render': 'label', 'addInfo': true, 'addAge': true, 'addId': true, 'hLevel': 1
}) }} }) }}
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
{{ include('@ChillPerson/Person/banner_custom.html.twig') }} {{ include('@ChillPerson/Person/banner_custom.html.twig') }}
</div> </div>
@ -19,42 +20,44 @@
<div class="container-xxl"> <div class="container-xxl">
<div class="row justify-content-between"> <div class="row justify-content-between">
<div class="contact col-md-12 ps-md-5 ps-xxl-0"> <div class="col-md-12 ps-md-5 ps-xxl-0">
{% if person.phonenumber %} <div class="contact">
<span class="phonenumber d-block d-sm-inline-block"> {% if person.phonenumber %}
<i class="fa fa-fw fa-phone"></i> <span class="phonenumber d-block d-sm-inline-block">
<a href="{{ 'tel:' ~ person.phonenumber }}" class="phone mr-3" title="{{ 'Phonenumber'|trans }}"> <i class="fa fa-fw fa-phone"></i>
{{ person.phonenumber|chill_format_phonenumber }}</a> <a href="{{ 'tel:' ~ person.phonenumber }}" class="phone mr-3" title="{{ 'Phonenumber'|trans }}">
</span> {{ person.phonenumber|chill_format_phonenumber }}</a>
{% endif %} </span>
{% if person.mobilenumber %} {% endif %}
<span class="mobilenumber d-block d-sm-inline-block"> {% if person.mobilenumber %}
<i class="fa fa-fw fa-mobile"></i> <span class="mobilenumber d-block d-sm-inline-block">
<a href="{{ 'tel:' ~ person.mobilenumber }}" class="phone mr-3" title="{{ 'Mobilenumber'|trans }}"> <i class="fa fa-fw fa-mobile"></i>
{{ person.mobilenumber|chill_format_phonenumber }}</a> <a href="{{ 'tel:' ~ person.mobilenumber }}" class="phone mr-3" title="{{ 'Mobilenumber'|trans }}">
</span> {{ person.mobilenumber|chill_format_phonenumber }}</a>
{% endif %} </span>
{% if person.email %} {% endif %}
<span class="email d-block d-sm-inline-block"> {% if person.email %}
<i class="fa fa-fw fa-envelope-o"></i> <span class="email d-block d-sm-inline-block">
<a href="{{ 'mailto:' ~ person.email }}" class="email" title="{{ 'Email'|trans }}"> <i class="fa fa-fw fa-envelope-o"></i>
{{ person.email }} <a href="{{ 'mailto:' ~ person.email }}" class="email" title="{{ 'Email'|trans }}">
</a> {{ person.email }}
</span> </a>
{% endif %} </span>
{% endif %}
{%- if person.currentHouseholdAddress is not empty -%} {%- if person.currentHouseholdAddress is not empty -%}
{% set address = person.currentHouseholdAddress %} {% set address = person.currentHouseholdAddress %}
{%- elseif person.lastAddress is not empty -%} {%- elseif person.lastAddress is not empty -%}
{% set address = person.lastAddress %} {% set address = person.lastAddress %}
{%- endif -%} {%- endif -%}
{%- if address -%} {%- if address -%}
<span class=" d-block d-sm-inline-block"> <span class=" d-block d-sm-inline-block">
{{ address|chill_entity_render_box({ {{ address|chill_entity_render_box({
'render': 'inline', 'multiline': false, 'with_picto': true, 'with_delimiter': true 'render': 'inline', 'multiline': false, 'with_picto': true, 'with_delimiter': true
}) }} }) }}
</span> </span>
{%- endif -%} {%- endif -%}
</div>
</div> </div>
</div> </div>