Updated default templates
authorThierry Florac <thierry.florac@onf.fr>
Mon, 19 Nov 2018 15:16:16 +0100
changeset 230 951d11442e0b
parent 229 be5bc85fd442
child 231 d462a5ced83e
Updated default templates
src/pyams_default_theme/component/gallery/__init__.py
src/pyams_default_theme/component/gallery/templates/renderer-carousel.pt
src/pyams_default_theme/component/gallery/templates/renderer-default.pt
src/pyams_default_theme/component/illustration/__init__.py
src/pyams_default_theme/component/illustration/templates/illustration-default.pt
src/pyams_default_theme/component/illustration/templates/illustration-left.pt
src/pyams_default_theme/component/illustration/templates/illustration-right.pt
src/pyams_default_theme/component/keynumber/templates/keynumber-default.pt
src/pyams_default_theme/component/paragraph/templates/contact-default.pt
src/pyams_default_theme/component/paragraph/templates/frame-default.pt
src/pyams_default_theme/component/paragraph/templates/frame-left.pt
src/pyams_default_theme/component/paragraph/templates/frame-right.pt
src/pyams_default_theme/component/paragraph/templates/milestone-default.pt
src/pyams_default_theme/component/paragraph/templates/pictogram-default.pt
--- a/src/pyams_default_theme/component/gallery/__init__.py	Mon Nov 19 15:15:37 2018 +0100
+++ b/src/pyams_default_theme/component/gallery/__init__.py	Mon Nov 19 15:16:16 2018 +0100
@@ -19,7 +19,7 @@
 from pyams_template.template import template_config
 from pyams_utils.adapter import adapter_config
 
-from pyams_default_theme import _
+from pyams_default_theme import _, lightbox
 
 
 class BaseGalleryRenderer(BaseContentRenderer):
@@ -34,6 +34,9 @@
     label = _("Default grid gallery renderer")
     weight = 1
 
+    i18n_context_attrs = ('title',)
+    resources = (lightbox,)
+
 
 @adapter_config(name='carousel-sm', context=(IBaseGallery, IPyAMSLayer), provides=IContentRenderer)
 @template_config(template='templates/renderer-carousel.pt', layer=IPyAMSLayer)
@@ -42,3 +45,5 @@
 
     label = _("Carousel gallery renderer")
     weight = 2
+
+    i18n_context_attrs = ('title',)
--- a/src/pyams_default_theme/component/gallery/templates/renderer-carousel.pt	Mon Nov 19 15:15:37 2018 +0100
+++ b/src/pyams_default_theme/component/gallery/templates/renderer-carousel.pt	Mon Nov 19 15:16:16 2018 +0100
@@ -1,3 +1,4 @@
+<h3>${view.title}</h3>
 <div tal:define="cache_key tales:cache_key(context)"
 	 i18n:domain="pyams_default_theme"
 	 id="carousel-${cache_key}"
--- a/src/pyams_default_theme/component/gallery/templates/renderer-default.pt	Mon Nov 19 15:15:37 2018 +0100
+++ b/src/pyams_default_theme/component/gallery/templates/renderer-default.pt	Mon Nov 19 15:16:16 2018 +0100
@@ -1,15 +1,23 @@
+<h3>${view.title}</h3>
 <div tal:define="cache_key tales:cache_key(context)"
 	 i18n:domain="pyams_default_theme"
-	 id="carousel-${cache_key}"
-	 class="gallery gallery-grid" data-ride="carousel">
+	 id="gallery-${cache_key}"
+	 class="gallery gallery-grid"
+	 data-wrapping="false">
 	<div tal:repeat="image context.get_visible_medias()"
 		 class="item col-lg-3 col-md-4 col-sm-4 col-xs-6">
 		<div class="legend">${i18n:image.title}</div>
-		<tal:var define="image_data i18n:image.data;
-						 alt i18n:image.title;">
+		<a data-toggle="lightbox"
+		   data-type="image"
+		   data-gallery="gallery-${cache_key}"
+		   data-title="${i18n:image.title}"
+		   data-footer="${i18n:image.author}"
+		   tal:define="image_data i18n:image.data;
+					   alt i18n:image.title;"
+		   href="${tales:absolute_url(image_data)}">
 			${structure:tales:picture(image_data, lg_width=3, md_width=4, sm_width=4,
 									  xs_width=6, css_class='img_responsive', alt=alt)}
-		</tal:var>
+		</a>
 		<div class="author">${i18n:image.author}</div>
 	</div>
 </div>
--- a/src/pyams_default_theme/component/illustration/__init__.py	Mon Nov 19 15:15:37 2018 +0100
+++ b/src/pyams_default_theme/component/illustration/__init__.py	Mon Nov 19 15:16:16 2018 +0100
@@ -35,7 +35,7 @@
 from pyams_utils.adapter import ContextRequestViewAdapter, adapter_config, get_annotation_adapter
 from pyams_utils.interfaces.tales import ITALESExtension
 
-from pyams_default_theme import _
+from pyams_default_theme import _, lightbox
 
 
 #
@@ -184,6 +184,8 @@
     position = ILLUSTRATION_BEFORE_BODY
     settings_interface = IIllustrationWithZoomSettings
 
+    resources = (lightbox,)
+
 
 @adapter_config(name='right+zoom', context=(IIllustration, IPyAMSLayer), provides=IContentRenderer)
 @template_config(template='templates/illustration-right.pt', layer=IPyAMSLayer)
@@ -196,6 +198,8 @@
     position = ILLUSTRATION_BEFORE_BODY
     settings_interface = IIllustrationWithZoomSettings
 
+    resources = (lightbox,)
+
 
 @adapter_config(name='default', context=(IIllustration, IPyAMSLayer), provides=IContentRenderer)
 @template_config(template='templates/illustration-default.pt', layer=IPyAMSLayer)
--- a/src/pyams_default_theme/component/illustration/templates/illustration-default.pt	Mon Nov 19 15:15:37 2018 +0100
+++ b/src/pyams_default_theme/component/illustration/templates/illustration-default.pt	Mon Nov 19 15:16:16 2018 +0100
@@ -1,7 +1,8 @@
-<div class="text-center margin-y-5">
+<div class="illustration margin-y-5">
+	<h2>${view.title}</h2>
 	<tal:var define="image view.data"
 			 condition="image">
 		${structure:tales:picture(image, alt=view.alt_title)}
 	</tal:var>
-	<span tal:content="view.title">legend</span>
+	<div class="author">${view.author}</div>
 </div>
--- a/src/pyams_default_theme/component/illustration/templates/illustration-left.pt	Mon Nov 19 15:15:37 2018 +0100
+++ b/src/pyams_default_theme/component/illustration/templates/illustration-left.pt	Mon Nov 19 15:16:16 2018 +0100
@@ -1,15 +1,18 @@
-<div class="pull-left col-xs-12 col-sm-6 col-md-6 col-lg-5 margin-10"
+<div class="illustration pull-left col-xs-12 col-sm-6 col-md-6 col-lg-5 margin-10"
+	 tal:define="settings view.settings"
 	 tal:condition="view.data">
-	<a class="fancybox" data-toggle
-	   data-ams-fancybox-type="image"
+	<a data-toggle="${'lightbox' if settings.zoom_on_click else None}"
+	   data-type="image"
+	   data-title="${view.title}"
+	   data-footer="${view.author}"
 	   tal:omit-tag="not:view.settings.zoom_on_click"
 	   tal:define="image view.data;
-				   thumbnails tales:thumbnails(image);
+				   thumbnails tales:thumbnails(view.data);
 				   target thumbnails.get_thumbnail('800x600');"
 	   tal:attributes="href tales:absolute_url(target)">
 		<tal:if condition="image">
 			${structure:tales:picture(image, lg_width=5, md_width=6, sm_width=6, alt=view.alt_title)}
 		</tal:if>
-		<span tal:content="view.title">legend</span>
-	</a><br />
+	</a>
+	<div class="author">${view.title}</div>
 </div>
--- a/src/pyams_default_theme/component/illustration/templates/illustration-right.pt	Mon Nov 19 15:15:37 2018 +0100
+++ b/src/pyams_default_theme/component/illustration/templates/illustration-right.pt	Mon Nov 19 15:16:16 2018 +0100
@@ -1,7 +1,10 @@
-<div class="pull-right col-xs-12 col-sm-6 col-md-6 col-lg-5 margin-10"
+<div class="illustration pull-right col-xs-12 col-sm-6 col-md-6 col-lg-5 margin-10"
+	 tal:define="settings view.settings"
 	 tal:condition="view.data">
-	<a class="fancybox" data-toggle
-	   data-ams-fancybox-type="image"
+	<a data-toggle="${'lightbox' if settings.zoom_on_click else None}"
+	   data-type="image"
+	   data-title="${view.title}"
+	   data-footer="${view.author}"
 	   tal:omit-tag="not:view.settings.zoom_on_click"
 	   tal:define="image view.data;
 				   thumbnails tales:thumbnails(view.data);
@@ -10,6 +13,6 @@
 		<tal:if condition="image">
 			${structure:tales:picture(image, lg_width=5, md_width=6, sm_width=6, alt=view.alt_title)}
 		</tal:if>
-		<span tal:content="view.title">legend</span>
-	</a><br />
+	</a>
+	<div class="author">${view.title}</div>
 </div>
--- a/src/pyams_default_theme/component/keynumber/templates/keynumber-default.pt	Mon Nov 19 15:15:37 2018 +0100
+++ b/src/pyams_default_theme/component/keynumber/templates/keynumber-default.pt	Mon Nov 19 15:16:16 2018 +0100
@@ -1,19 +1,19 @@
-<tal:var i18n:domain="pyams_default_theme"
-         define="numbers list(view.keynumbers.get_visible_items())">
-	<h3>${i18n:view.title}</h3>
-		<div class="col-md-3 col-lg-3"
-			 tal:repeat="number numbers">
-			<div class="panel panel-default">
-				<div class="panel-heading">
-					<span class="lead">${i18n:number.label}</span>
-				</div>
-				<div class="panel-body text-align-center">
-					<span class="h4 text-success">${i18n:number.number}</span>
-					<span class="h5">${i18n:number.unit}</span>
-				</div>
-				<div class="panel-footer">
-					<p>${i18n:number.text}</p>
-				</div>
+<tal:var i18n:domain="pyams_default_theme">
+	<h3>${view.title}</h3>
+	<div class="col-md-3 col-lg-3"
+		 tal:repeat="number view.keynumbers.get_visible_items()">
+		<div class="panel panel-default">
+			<div class="panel-heading">
+				<span class="lead">${i18n:number.label}</span>
+			</div>
+			<div class="panel-body text-align-center">
+				<span class="h4 text-success">${i18n:number.number}</span>
+				<span class="h5">${i18n:number.unit}</span>
+			</div>
+			<div class="panel-footer">
+				<p>${i18n:number.text}</p>
 			</div>
 		</div>
+	</div>
+	<div class="clearfix"></div>
 </tal:var>
--- a/src/pyams_default_theme/component/paragraph/templates/contact-default.pt	Mon Nov 19 15:15:37 2018 +0100
+++ b/src/pyams_default_theme/component/paragraph/templates/contact-default.pt	Mon Nov 19 15:16:16 2018 +0100
@@ -1,13 +1,37 @@
-<div class="bordered contact padding-10"
+<div class="contact-card"
 	 tal:define="settings view.settings">
 	<h3 tal:content="view.title">Contact title</h3>
 	<div tal:condition="settings.can_display_photo"
-		 tal:attributes="class string:thumbnail photo pull-${settings.photo_position}">
-		<img tal:attributes="src tales:absolute_url(view.photo, '++thumb++w128')" />
+		 class="thumbnail photo pull-${settings.photo_position}">
+		${structure:tales:picture(view.photo, lg_width=3, md_width=3, sm_width=4, xs_width=4)}
 	</div>
 	<div tal:condition="settings.can_display_map"
 		 tal:attributes="class string:map pull-${settings.map_position}">
 		Location map
 	</div>
-	<strong tal:content="view.name">Contact name</strong><br />
+	<address>
+		<strong class="contact-name">${view.name}</strong><br />
+		<tal:if condition="view.charge">
+			${view.charge}<br />
+		</tal:if>
+		<tal:if condition="view.company">
+			<strong>${view.company}</strong><br />
+		</tal:if>
+		<div class="address"
+			 tal:condition="view.address">
+			${structure:tales:html(view.address)}
+		</div>
+		<tal:if condition="view.contact_email">
+			<span i18n:translate="">Contact email:</span>
+			<a href="mailto:${view.contact_email}">
+				${view.contact_email}
+			</a><br />
+		</tal:if>
+		<tal:if condition="view.phone_number">
+			<span i18n:translate="">Phone number:</span>
+			<a href="tel:${view.phone_number}">
+				${view.phone_number}
+			</a><br />
+		</tal:if>
+	</address>
 </div><div class="clearfix"></div>
--- a/src/pyams_default_theme/component/paragraph/templates/frame-default.pt	Mon Nov 19 15:15:37 2018 +0100
+++ b/src/pyams_default_theme/component/paragraph/templates/frame-default.pt	Mon Nov 19 15:16:16 2018 +0100
@@ -1,9 +1,8 @@
-<div class="bordered frame padding-10"
-	 tal:define="settings view.settings;
-				 renderer view.illustration_renderer;
-				 position getattr(renderer, 'position', None) if renderer is not None else None;"
-	 tal:switch="position">
-	<tal:var case="'before-title'">${structure:renderer.render())}</tal:var>
+<blockquote tal:define="settings view.settings;
+						renderer view.illustration_renderer;
+						position getattr(renderer, 'position', None) if renderer is not None else None;"
+			tal:switch="position">
+	<tal:var case="'before-title'">${structure:renderer.render()}</tal:var>
 	<h3 tal:condition="view.title and (position != 'before-title')">${view.title}</h3>
 	<tal:var case="'before-body'">${structure:renderer.render()}</tal:var>
 	<p tal:replace="structure view.body">body</p>
@@ -12,4 +11,4 @@
 	<tal:if condition="settings.display_associations">
 		${structure:provider:pyams.associations}
 	</tal:if>
-</div>
+</blockquote>
--- a/src/pyams_default_theme/component/paragraph/templates/frame-left.pt	Mon Nov 19 15:15:37 2018 +0100
+++ b/src/pyams_default_theme/component/paragraph/templates/frame-left.pt	Mon Nov 19 15:16:16 2018 +0100
@@ -1,10 +1,9 @@
-<div class="bordered frame padding-10 pull-left"
-	 tal:define="settings view.settings;
-				 renderer view.illustration_renderer;
-				 position getattr(renderer, 'position', None) if renderer is not None else None;"
-	 tal:attributes="class string:${default} col-md-${settings.relative_width}"
-	 tal:switch="position">
-	<tal:var case="'before-title'">${structure:renderer.render())}</tal:var>
+<blockquote tal:define="settings view.settings;
+						renderer view.illustration_renderer;
+						position getattr(renderer, 'position', None) if renderer is not None else None;"
+			class="pull-left col-md-${settings.relative_width}"
+			tal:switch="position">
+	<tal:var case="'before-title'">${structure:renderer.render()}</tal:var>
 	<h3 tal:condition="view.title and (position != 'before-title')">${view.title}</h3>
 	<tal:var case="'before-body'">${structure:renderer.render()}</tal:var>
 	<p tal:replace="structure view.body">body</p>
@@ -13,4 +12,4 @@
 	<tal:if condition="settings.display_associations">
 		${structure:provider:pyams.associations}
 	</tal:if>
-</div>
+</blockquote>
--- a/src/pyams_default_theme/component/paragraph/templates/frame-right.pt	Mon Nov 19 15:15:37 2018 +0100
+++ b/src/pyams_default_theme/component/paragraph/templates/frame-right.pt	Mon Nov 19 15:16:16 2018 +0100
@@ -1,10 +1,9 @@
-<div class="bordered frame padding-10 pull-right"
-	 tal:define="settings view.settings;
-				 renderer view.illustration_renderer;
-				 position getattr(renderer, 'position', None) if renderer is not None else None;"
-	 tal:attributes="class string:${default} col-md-${settings.relative_width}"
-	 tal:switch="position">
-	<tal:var case="'before-title'">${structure:renderer.render())}</tal:var>
+<blockquote tal:define="settings view.settings;
+						renderer view.illustration_renderer;
+						position getattr(renderer, 'position', None) if renderer is not None else None;"
+			class="pull-right col-md-${settings.relative_width}"
+			tal:switch="position">
+	<tal:var case="'before-title'">${structure:renderer.render()}</tal:var>
 	<h3 tal:condition="view.title and (position != 'before-title')">${view.title}</h3>
 	<tal:var case="'before-body'">${structure:renderer.render()}</tal:var>
 	<p tal:replace="structure view.body">body</p>
@@ -13,4 +12,4 @@
 	<tal:if condition="settings.display_associations">
 		${structure:provider:pyams.associations}
 	</tal:if>
-</div>
+</blockquote>
--- a/src/pyams_default_theme/component/paragraph/templates/milestone-default.pt	Mon Nov 19 15:15:37 2018 +0100
+++ b/src/pyams_default_theme/component/paragraph/templates/milestone-default.pt	Mon Nov 19 15:16:16 2018 +0100
@@ -0,0 +1,13 @@
+<tal:var i18n:domain="pyams_default_theme">
+	<h3>${view.title}</h3>
+	<div class="milestones">
+		<tal:loop repeat="item view.milestones.get_visible_items()">
+			<div class="item">
+				<strong>${i18n:item.title}</strong><br />
+				<div>${i18n:item.label}</div>
+			</div>
+			<div class="arrow"
+				 tal:condition="not:repeat.item.end()">&gt;</div>
+		</tal:loop>
+	</div>
+</tal:var>
\ No newline at end of file
--- a/src/pyams_default_theme/component/paragraph/templates/pictogram-default.pt	Mon Nov 19 15:15:37 2018 +0100
+++ b/src/pyams_default_theme/component/paragraph/templates/pictogram-default.pt	Mon Nov 19 15:16:16 2018 +0100
@@ -0,0 +1,22 @@
+<div class="pictograms" i18n:domain="pyams_default_theme">
+	<h3>${view.title}</h3>
+	<div class="col-md-8 col-md-offset-2">
+		<div class="col-sm-4 col-xs-6"
+			 tal:repeat="picto_item view.pictograms">
+			<div class="picto"
+				 tal:define="pictogram picto_item.pictogram"
+				 tal:condition="pictogram">
+				<div class="icon"
+					 tal:define="image i18n:pictogram.image"
+					 tal:condition="image">
+					${structure:tales:thumbnail(image, 'auto', '100%')}
+				</div>
+				<span class="title">${i18n:picto_item.label}</span>
+				<span class="desc"
+					  tal:define="body i18n:picto_item.body">
+					${structure:tales:html(body)}
+				</span>
+			</div>
+		</div>
+	</div>
+</div>
\ No newline at end of file