Issue #11 refactor some templates, fix template style

Still need to implement gogotaxonomy and gogolongtext templates
pixelhumain · Oct 16, 2018 · c0785ea · c0785ea
1 parent 2376cb2
commit c0785ea
Show file tree

Hide file tree

Showing 23 changed files with 188 additions and 152 deletions.
diff --git 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
@@ -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
@@ -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(/&amp;/g, "&").replace(/&gt;/g, ">").replace(/&lt;/g, "<").replace(/&quot;/g, '"');      
-
-    return App.templateModule.render('element-body-default', options).replace(/&amp;/g, "&").replace(/&gt;/g, ">").replace(/&lt;/g, "<").replace(/&quot;/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(/&amp;/g, "&").replace(/&gt;/g, ">").replace(/&lt;/g, "<").replace(/&quot;/g, '"');
+    template = template.replace('<hr />', '<div class="info-bar-divider"></div>');
+    template = template.replace(/<h1>|<h2>|<h4>|<h5>/g, '<h3>');
+    template = template.replace(/<\/h1>|<\/h2>|<\/h4>|<\/h5>/g, '</h3>');
+    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
@@ -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
@@ -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
@@ -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
@@ -16,70 +16,57 @@
 {% endif %}
 
 {# Contact infos #}
-<h3>Informations générales</h3>   
-<div class="section row sectionInfos">
+{{ 'Informations générales'|gogotitle }}
 
-  {# Address #}
-  <span class="col s12 address">{{ element.getProperty('address')|safe }}</span>
-
-  {# 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 }}
 
-</div>
-<div class="info-bar-divider"></div>
+{% set urls = element.urls %}
+{% if urls %}
+  {% for currentUrl in urls %}
+    {{ url.value|gogourl }}
+  {% endfor %}    
+{% endif %}
+
+{{ ''|gogoseparator }}
 
 {# Categories  #}
-<div class="section section-taxonomy row">
+<div class="field field-taxonomy">
   {% 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 %}  
 </div>
 
-{% set commitment = element.getProperty('commitment') %}      
-{% if commitment %}
-  <div class="info-bar-divider">
-  {{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 %}
-  <div class="info-bar-divider"></div>
-  {{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 %}
-  <div class="info-bar-divider"></div>
-  <h3>Video</h3>
-  {% if vimeoId %}
-    <style>.embed-container { position: relative; padding-bottom: 65.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src="https://player.vimeo.com/video/{{ vimeoId }}?byline=0&amp;portrait=0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" frameborder="0"></iframe></div>
-  {% 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
@@ -0,0 +1,7 @@
+<div class="field field-email">
+  {% if config.security.hideMailsByShowingSendMailButton and not (isPending and config.isFeatureAvailable('pending')) %}
+    <button class="btn send-mail-btn">Envoyer un Mail</button>
+  {% else %}
+    {{ value|safe }} 
+  {% endif %}
+</div>
diff --git a/src/views/components/element/element-filters/gogoopenhours.html.njk b/src/views/components/element/element-filters/gogoopenhours.html.njk
@@ -0,0 +1,12 @@
+<div class="field field-openhours">  
+  {% for key, horaire in value %} 
+    {% if horaire != null %}
+
+      <div class='row'>
+        <span class="col s3 day">{{ key|capitalize }}</span>
+        <span class="col s9 openHours">{{ horaire }} </span>
+      </div>
+
+    {% endif %}
+  {% endfor %}   
+</div>
diff --git a/src/views/components/element/element-filters/gogoseparator.html.njk b/src/views/components/element/element-filters/gogoseparator.html.njk
@@ -0,0 +1 @@
+<div class="info-bar-divider"></div>
diff --git a/src/views/components/element/element-filters/gogotags.html.njk b/src/views/components/element/element-filters/gogotags.html.njk
@@ -0,0 +1,7 @@
+{% if value %}
+  <div class="field field-tags tags-container">
+    {% for tag in value %}
+      <span class="gogo-tag">{{ tag }}</span>  
+    {% endfor %}
+  </div>
+{% endif %}