diff --git a/src/js/components/element/element.component.ts b/src/js/components/element/element.component.ts index ba2cb1c..78812f1 100644 --- a/src/js/components/element/element.component.ts +++ b/src/js/components/element/element.component.ts @@ -86,6 +86,9 @@ export class ElementComponent // INIT TABS (for admin section) setTimeout( () => { this.dom.find('.info-bar-tabs').tabs(); }, 100); + + // Give a special class of first element displayed (useful for styling) + this.dom.find('.body-main-tab-content').find(">:first-child").addClass('first-element-of-body-content'); } addFlashMessage(message) { this.interactiveComponent.addFlashMessage(message); } diff --git a/src/js/modules/element/template-element-filters.module.ts b/src/js/modules/element/template-element-filters.module.ts index 2cd0d0a..62f31ec 100644 --- a/src/js/modules/element/template-element-filters.module.ts +++ b/src/js/modules/element/template-element-filters.module.ts @@ -10,7 +10,7 @@ declare var commonmark; export class TemplateElementFiltersModule { - filters = [ 'gogocommitment', 'gogoemail', 'gogoopenhours', 'gogotags', 'gogotelephone', 'gogourls', 'gogowebsite' ]; + filters = [ 'gogotext', 'gogoemail', 'gogoopenhours', 'gogotags', 'gogovimeo', 'gogourl', 'gogotitle', 'gogoseparator' ]; public addGoGoFilters(nunjucksEnvironment) { @@ -19,12 +19,10 @@ export class TemplateElementFiltersModule { nunjucksEnvironment.addFilter(currentFilter, function(value, kwargs) { let objectArgument = {}; - if(kwargs) - { - $.extend(objectArgument, kwargs); - } - objectArgument[currentFilter] = value; - return nunjucksEnvironment.render("templates/element-filters/"+ currentFilter +".html.njk", objectArgument); + if(kwargs) $.extend(objectArgument, kwargs); + objectArgument['value'] = value; + objectArgument['config'] = App.config; + return nunjucksEnvironment.render("components/element/element-filters/"+ currentFilter +".html.njk", objectArgument); }); } diff --git a/src/js/modules/element/template-element.module.ts b/src/js/modules/element/template-element.module.ts index 35e06fc..65142cb 100644 --- a/src/js/modules/element/template-element.module.ts +++ b/src/js/modules/element/template-element.module.ts @@ -50,10 +50,21 @@ export class TemplateElementModule // If there is a body template configured, then we use it. We use the default body otherwise. renderBody(options) { + let renderedTemplate = "" if (this.bodyTemplate) - return this.bodyTemplate.render(options.element).replace(/&/g, "&").replace(/>/g, ">").replace(/</g, "<").replace(/"/g, '"'); - - return App.templateModule.render('element-body-default', options).replace(/&/g, "&").replace(/>/g, ">").replace(/</g, "<").replace(/"/g, '"'); + renderedTemplate = this.bodyTemplate.render(options.element); + else + renderedTemplate = App.templateModule.render('element-body-default', options); + + return this.fixTemplate(renderedTemplate); + } + + private fixTemplate(template) { + template = template.replace(/&/g, "&").replace(/>/g, ">").replace(/</g, "<").replace(/"/g, '"'); + template = template.replace('
', '
'); + template = template.replace(/

|

|

|

/g, '

'); + template = template.replace(/<\/h1>|<\/h2>|<\/h4>|<\/h5>/g, '

'); + return template; } private parseMarkdownSyntax(markdownString: string): string diff --git a/src/scss/components/element/_element-body.scss b/src/scss/components/element/_element-body.scss index 5f56e8e..7272266 100644 --- a/src/scss/components/element/_element-body.scss +++ b/src/scss/components/element/_element-body.scss @@ -2,62 +2,70 @@ { background-color: transparent; padding: 0; - position: relative; + position: relative; .collapsible-body-main-content { background-color: #F7F7F7; - padding: 0 0rem 1rem .5rem; - @media #{$medium-and-up} { padding: 0 0rem 1rem 1rem } - } + padding: .8rem; + text-align: justify; + line-height: 2rem; - h2 - { - font-weight: bold !important; - font-size: 1rem !important; - line-height: 110% !important; - margin: 0.5rem 0 .8rem 0 ; - } - - .row { margin-bottom: 0 } - .section{ padding-top: .9rem; } - - .description{ text-align: justify;line-height: 1.5;padding-right: 1.5rem; } - .show-more-description { - display: inline; - text-decoration: underline; - &:hover { - cursor: pointer; + @media #{$medium-and-up} { padding: 1rem; } + + .description { + line-height: 1.5; + padding-right: 1.5rem; } - } - .send-mail-btn - { - font-size: .8rem; - margin: .4rem 0 .5rem 0; - line-height: 1.8rem; - height: 1.8rem; - } + .show-more-description { + display: inline; + text-decoration: underline; + &:hover { + cursor: pointer; + } + } - .sectionInfos, .sectionOpenHours { line-height: 2rem; } + .field-email { + .send-mail-btn + { + font-size: .8rem; + margin: .4rem 0 .5rem 0; + line-height: 1.8rem; + height: 1.8rem; + } + } - .sectionlongDescription { - padding-bottom: 0; - padding-top: 1.5rem; - } + .field-tags + { + margin-top: 1.5rem; - .tags-container - { - margin-top: 1.5rem; - } + .gogo-tag + { + margin-right: 8px; + border-radius: 5px; + background-color: gainsboro; + padding: 4px 10px; + display: inline-block; + margin-bottom: 8px; + } + } - .gogo-tag - { - margin-right: 8px; - border-radius: 5px; - background-color: gainsboro; - padding: 4px 10px; - display: inline-block; - margin-bottom: 8px; - } + .field-vimeo { + position: relative; + padding-bottom: 65.25%; + height: 0; + overflow: hidden; + max-width: 100%; + height: auto; + + iframe, object, embed { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + } + } } diff --git a/src/scss/components/element/_element-categories.scss b/src/scss/components/element/_element-categories.scss index 73f1f17..75cd649 100644 --- a/src/scss/components/element/_element-categories.scss +++ b/src/scss/components/element/_element-categories.scss @@ -1,14 +1,8 @@ .collapsible-body { - .section.categories - { - h3 { margin-bottom: 90%; } - } - .category-name { - padding-top: .6rem; - padding-bottom: 1rem; + padding-top: 1rem; } .category-wrapper + .category-name { padding-top: 1.2rem; } @@ -64,7 +58,7 @@ .option-value { line-height: 2.5rem; - padding-right: 0; + padding: 0; &.inline { diff --git a/src/scss/components/element/_element.scss b/src/scss/components/element/_element.scss index 639a6b1..f0d45b8 100755 --- a/src/scss/components/element/_element.scss +++ b/src/scss/components/element/_element.scss @@ -11,32 +11,44 @@ list-style-type: none; @include flexbox(); - @include flex-flow(column nowrap); + @include flex-flow(column nowrap); h3 { font-size: .85rem; text-transform: uppercase; font-weight: 600; - padding-left: 0.75rem; - margin-bottom: 0; + margin: 0; padding: 0; + margin-bottom: 1rem; padding-top: 1.5rem; - margin-top: 0; - } + text-align: left; - .info-bar-divider + &.first-element-of-body-content { padding-top: .5rem; } + &.unique-element-between-dividers { display: none; } + } + + .info-bar-divider ~ h3 { + padding-top: 1rem; + } + + .row { margin-bottom: 0 } + + p { padding: 0; } + + .info-bar-divider { height: 1px; overflow: hidden; background-color: #CCCCCC; + margin: .5rem 0; } .btn { height: 2rem; - line-height: 2rem; - padding: 0 1rem; - margin-bottom: 1rem; + line-height: 2rem; + padding: 0 1rem; + margin-bottom: 1rem; } span.added diff --git a/src/views/components/element/body.html.njk b/src/views/components/element/body.html.njk index 6b7bf06..e5ba6f2 100644 --- a/src/views/components/element/body.html.njk +++ b/src/views/components/element/body.html.njk @@ -16,70 +16,57 @@ {% endif %} {# Contact infos #} -

Informations générales

-
+{{ 'Informations générales'|gogotitle }} - {# Address #} - {{ element.getProperty('address')|safe }} - - {# Tel #} - {% set telephone = element.getProperty('telephone') %} - {% if telephone %} - {{telephone|gogotelephone}} - {% endif %} +{# Address #} +{{ element.getProperty('address')|gogotext }} - {# Mail #} - {% set email = element.getProperty('email') %} - {% if email %} - {{ email|gogoemail(hideMail = config.security.hideMailsByShowingSendMailButton, isPending = element.isPending(), featurePendingAvailable = config.isFeatureAvailable('pending')) }} - {% endif %} +{# Tel #} +{{ element.getProperty('telephone')|gogotext }} - {# WebSite #} - {% set website = element.getProperty('website') %} - {% if website %} - {{website|gogowebsite}} - {% endif %} +{# Mail #} +{{ element.getProperty('email')|gogoemail(isPending = element.isPending()) }} - {% set urls = element.urls %} - {% if urls %} - {{ urls|gogourls }} - {% endif %} +{# WebSite #} +{{ element.getProperty('website')|gogourl }} -
-
+{% set urls = element.urls %} +{% if urls %} + {% for currentUrl in urls %} + {{ url.value|gogourl }} + {% endfor %} +{% endif %} + +{{ ''|gogoseparator }} {# Categories #} -
+
{% import here ~ 'category-value.html.njk' as categoryRenderer %} {% for mainCategoryValue in rootCategoriesValues %} {{ categoryRenderer.renderCategoryValue(mainCategoryValue) }} - {% endfor %} - - {% set tags = element.getProperty('tags') %} - {% if tags %} - {{ tags|gogotags}} - {% endif %} + {% endfor %}
-{% set commitment = element.getProperty('commitment') %} -{% if commitment %} -
- {{commitment|gogocommitment}} +{{ element.getProperty('tags')|gogotags}} + +{% if element.getProperty('commitment') %} +{{ ''|gogoseparator }} +{{ 'Engagement Citoyen'|gogotitle }} +{{ element.getProperty('commitment')|gogotext }} {% endif %} {# Open Hours #} -{% set openHoursMoreInfos = element.getProperty('openHoursMoreInfos') %} -{% if element.formatedOpenHours|length or openHoursMoreInfos %} -
- {{openHoursMoreInfos|gogoopenhours(formatedOpenHours = element.formatedOpenHours)}} +{% if element.formatedOpenHours|length or element.getProperty('openHoursMoreInfos') %} + {{ ''|gogoseparator }} + {{ "Horaires d'ouverture"|gogotitle }} + {{ element.formatedOpenHours|gogoopenhours }} + {{ element.getProperty('openHoursMoreInfos')|gogootext }} {% endif %} {# Vidéo #} -{% set vimeoId = element.getProperty('vimeoId') %} -{% if vimeoId %} -
-

Video

- {% if vimeoId %} -
- {% endif %} +{% if element.getProperty('vimeoId') %} + {{ ''|gogoseparator }} + {{ 'Video'|gogotitle }} + {{ element.getProperty('vimeoId')|gogovimeo }} {% endif %} + diff --git a/src/views/components/element/element-filters/gogoemail.html.njk b/src/views/components/element/element-filters/gogoemail.html.njk new file mode 100644 index 0000000..0dd9c58 --- /dev/null +++ b/src/views/components/element/element-filters/gogoemail.html.njk @@ -0,0 +1,7 @@ +
+ {% if config.security.hideMailsByShowingSendMailButton and not (isPending and config.isFeatureAvailable('pending')) %} + + {% else %} + {{ value|safe }} + {% endif %} +
\ No newline at end of file diff --git a/src/views/components/element/element-filters/gogoopenhours.html.njk b/src/views/components/element/element-filters/gogoopenhours.html.njk new file mode 100644 index 0000000..4f77635 --- /dev/null +++ b/src/views/components/element/element-filters/gogoopenhours.html.njk @@ -0,0 +1,12 @@ +
+ {% for key, horaire in value %} + {% if horaire != null %} + +
+ {{ key|capitalize }} + {{ horaire }} +
+ + {% endif %} + {% endfor %} +
\ No newline at end of file diff --git a/src/views/components/element/element-filters/gogoseparator.html.njk b/src/views/components/element/element-filters/gogoseparator.html.njk new file mode 100644 index 0000000..671ed5e --- /dev/null +++ b/src/views/components/element/element-filters/gogoseparator.html.njk @@ -0,0 +1 @@ +
\ No newline at end of file diff --git a/src/views/components/element/element-filters/gogotags.html.njk b/src/views/components/element/element-filters/gogotags.html.njk new file mode 100644 index 0000000..77dc8e3 --- /dev/null +++ b/src/views/components/element/element-filters/gogotags.html.njk @@ -0,0 +1,7 @@ +{% if value %} +
+ {% for tag in value %} + {{ tag }} + {% endfor %} +
+{% endif %} \ No newline at end of file diff --git a/src/views/components/element/element-filters/gogotext.html.njk b/src/views/components/element/element-filters/gogotext.html.njk new file mode 100644 index 0000000..f5f0d10 --- /dev/null +++ b/src/views/components/element/element-filters/gogotext.html.njk @@ -0,0 +1,3 @@ +{% if value %} +
{{ value|safe }}
+{% endif %} \ No newline at end of file diff --git a/src/views/components/element/element-filters/gogotitle.html.njk b/src/views/components/element/element-filters/gogotitle.html.njk new file mode 100644 index 0000000..8b2d436 --- /dev/null +++ b/src/views/components/element/element-filters/gogotitle.html.njk @@ -0,0 +1 @@ +

{{ value|safe }}

\ No newline at end of file diff --git a/src/views/components/element/element-filters/gogourl.html.njk b/src/views/components/element/element-filters/gogourl.html.njk new file mode 100644 index 0000000..9cd8a73 --- /dev/null +++ b/src/views/components/element/element-filters/gogourl.html.njk @@ -0,0 +1,5 @@ +{% if value %} + +{% endif %} \ No newline at end of file diff --git a/src/views/components/element/element-filters/gogovimeo.html.njk b/src/views/components/element/element-filters/gogovimeo.html.njk new file mode 100644 index 0000000..5d4d64d --- /dev/null +++ b/src/views/components/element/element-filters/gogovimeo.html.njk @@ -0,0 +1,5 @@ +{% if value %} +
+ +
+{% endif %} \ No newline at end of file diff --git a/src/views/templates/element-filters/gogocommitment.html.njk b/src/views/templates/element-filters/gogocommitment.html.njk deleted file mode 100644 index 94b25ab..0000000 --- a/src/views/templates/element-filters/gogocommitment.html.njk +++ /dev/null @@ -1 +0,0 @@ -

Engagement Citoyen

{{ gogocommitment|safe }}
\ No newline at end of file diff --git a/src/views/templates/element-filters/gogoemail.html.njk b/src/views/templates/element-filters/gogoemail.html.njk deleted file mode 100644 index affdcd6..0000000 --- a/src/views/templates/element-filters/gogoemail.html.njk +++ /dev/null @@ -1 +0,0 @@ -{% if hideMail and not (isPending and featurePendingAvailable) %}{% else %}{{gogoemail|safe}} {% endif %} \ No newline at end of file diff --git a/src/views/templates/element-filters/gogoopenhours.html.njk b/src/views/templates/element-filters/gogoopenhours.html.njk deleted file mode 100644 index 3efd559..0000000 --- a/src/views/templates/element-filters/gogoopenhours.html.njk +++ /dev/null @@ -1,23 +0,0 @@ -

Horaires d'ouverture

-
- {% set count = 0 %} - - {% for key, horaire in formatedOpenHours %} - {% if horaire != null %} - -
- {{ key|capitalize }} - {{ horaire }} -
- {% set count = count + 1 %} - - {% endif %} - {% endfor %} - - {% if gogoopenhours %} -
{{ gogoopenhours|safe }}
- {% set count = count + 1 %} - {% endif %} - - {% if count == 0 %}
Non renseignées
{% endif %} -
\ No newline at end of file diff --git a/src/views/templates/element-filters/gogotags.html.njk b/src/views/templates/element-filters/gogotags.html.njk deleted file mode 100644 index 72bcd85..0000000 --- a/src/views/templates/element-filters/gogotags.html.njk +++ /dev/null @@ -1 +0,0 @@ -
{% for tag in gogotags %}{{ tag }}{% endfor %}
\ No newline at end of file diff --git a/src/views/templates/element-filters/gogotelephone.html.njk b/src/views/templates/element-filters/gogotelephone.html.njk deleted file mode 100644 index 4fd4ab5..0000000 --- a/src/views/templates/element-filters/gogotelephone.html.njk +++ /dev/null @@ -1 +0,0 @@ -{{ gogotelephone|safe }} diff --git a/src/views/templates/element-filters/gogourls.html.njk b/src/views/templates/element-filters/gogourls.html.njk deleted file mode 100644 index bff1e27..0000000 --- a/src/views/templates/element-filters/gogourls.html.njk +++ /dev/null @@ -1 +0,0 @@ -{% for currentUrl in gogourls %}
{{ currentUrl.value|safe }}
{% endfor %} \ No newline at end of file diff --git a/src/views/templates/element-filters/gogowebsite.html.njk b/src/views/templates/element-filters/gogowebsite.html.njk deleted file mode 100644 index e91575d..0000000 --- a/src/views/templates/element-filters/gogowebsite.html.njk +++ /dev/null @@ -1 +0,0 @@ -{{ gogowebsite|safe }} \ No newline at end of file diff --git a/web/data/custom-template-simple.md b/web/data/custom-template-simple.md index 92f1fd8..89ce3eb 100644 --- a/web/data/custom-template-simple.md +++ b/web/data/custom-template-simple.md @@ -1,5 +1,16 @@ +# Test template distant + +{{ name|gogourl }} +blabla le petit text + +## Test template distant + +{{ name|gogourl }} +Encore du text h1 h5 + ### Test template distant {{ name }} -{{ website|urlize }} + ___ + **Address** : {{ address.formatedAddress }} \ No newline at end of file