From 8a2a116c11cc3c78079c5f5141974ed2f39b173f Mon Sep 17 00:00:00 2001
From: Bachir Soussi Chiadmi <bachir@figureslibres.io>
Date: Mon, 27 Feb 2017 17:16:16 +0100
Subject: [PATCH] added episodes label, imporved display

---
 .../features/admin/admin.views_default.inc    |  6 +-
 .../clameurs.features.field_instance.inc      |  6 +-
 .../figureslibres/clameursmod/clameursmod.js  |  2 +-
 .../clameurs/css/dist/styles.css              | 93 +++++++++++++++----
 .../figureslibres/clameurs/css/styles.scss    | 65 +++++++++----
 .../clameurs/templates/field.tpl.php          |  2 +-
 6 files changed, 131 insertions(+), 43 deletions(-)

diff --git a/sites/all/modules/features/admin/admin.views_default.inc b/sites/all/modules/features/admin/admin.views_default.inc
index 77e7a85e..c4903827 100644
--- a/sites/all/modules/features/admin/admin.views_default.inc
+++ b/sites/all/modules/features/admin/admin.views_default.inc
@@ -171,7 +171,7 @@ function admin_views_default_views() {
   $handler->display->display_options['header']['result']['field'] = 'result';
   /* Field: Bulk operations: Content */
   $handler->display->display_options['fields']['views_bulk_operations']['id'] = 'views_bulk_operations';
-  $handler->display->display_options['fields']['views_bulk_operations']['table'] = 'node';
+  $handler->display->display_options['fields']['views_bulk_operations']['table'] = 'views_entity_node';
   $handler->display->display_options['fields']['views_bulk_operations']['field'] = 'views_bulk_operations';
   $handler->display->display_options['fields']['views_bulk_operations']['label'] = '';
   $handler->display->display_options['fields']['views_bulk_operations']['element_label_colon'] = FALSE;
@@ -266,7 +266,7 @@ function admin_views_default_views() {
   $handler->display->display_options['fields']['scheduled']['date_format'] = 'custom';
   $handler->display->display_options['fields']['scheduled']['custom_date_format'] = 'd/m/Y h:m';
   $handler->display->display_options['fields']['scheduled']['second_date_format'] = 'long';
-  /* Field: Content: Épisodes */
+  /* Field: Content: À la maison commune */
   $handler->display->display_options['fields']['field_episodes']['id'] = 'field_episodes';
   $handler->display->display_options['fields']['field_episodes']['table'] = 'field_data_field_episodes';
   $handler->display->display_options['fields']['field_episodes']['field'] = 'field_episodes';
@@ -469,7 +469,7 @@ return !(node_access(\'update\', node_load($data->nid), $user));
     t('Scheduled state'),
     t('[sid_1] : [scheduled]'),
     t('Scheduled time'),
-    t('Épisodes'),
+    t('À la maison commune'),
     t('éclairages'),
     t('Thématique'),
     t('Translate link'),
diff --git a/sites/all/modules/features/clameurs/clameurs.features.field_instance.inc b/sites/all/modules/features/clameurs/clameurs.features.field_instance.inc
index 0f9802e7..87851bf5 100644
--- a/sites/all/modules/features/clameurs/clameurs.features.field_instance.inc
+++ b/sites/all/modules/features/clameurs/clameurs.features.field_instance.inc
@@ -1169,7 +1169,7 @@ function clameurs_field_default_field_instances() {
     'description' => '',
     'display' => array(
       'accueil' => array(
-        'label' => 'hidden',
+        'label' => 'above',
         'module' => 'entityreference',
         'settings' => array(
           'links' => 0,
@@ -1197,7 +1197,7 @@ function clameurs_field_default_field_instances() {
     ),
     'entity_type' => 'node',
     'field_name' => 'field_episodes',
-    'label' => 'Épisodes',
+    'label' => 'À la maison commune',
     'required' => 0,
     'settings' => array(
       'entity_translation_sync' => FALSE,
@@ -1289,8 +1289,8 @@ function clameurs_field_default_field_instances() {
   t('Titre');
   t('Video');
   t('Weight');
+  t('À la maison commune');
   t('Écouter');
-  t('Épisodes');
   t('éclairages');
 
   return $field_instances;
diff --git a/sites/all/modules/figureslibres/clameursmod/clameursmod.js b/sites/all/modules/figureslibres/clameursmod/clameursmod.js
index 988b4f89..71fb1c59 100644
--- a/sites/all/modules/figureslibres/clameursmod/clameursmod.js
+++ b/sites/all/modules/figureslibres/clameursmod/clameursmod.js
@@ -47,7 +47,7 @@
       var winheight = $(window).height();
       console.log('win :'+winwidth+' | '+winheight);
 
-      if (winwidth < winheight) {
+      if (winwidth / winheight < 640 / 360) {
         // console.log("Width target");
         var w = winwidth*0.9;
         var h = w*(360/640);
diff --git a/sites/all/themes/figureslibres/clameurs/css/dist/styles.css b/sites/all/themes/figureslibres/clameurs/css/dist/styles.css
index 536615b0..40a76d47 100755
--- a/sites/all/themes/figureslibres/clameurs/css/dist/styles.css
+++ b/sites/all/themes/figureslibres/clameurs/css/dist/styles.css
@@ -193,12 +193,16 @@ body,
   .node-thematique.node-32.en_attente .group-video .field-name-field-description h3,
   .node-thematique.node-32.en_attente .group-description .field-name-field-ecouter,
   .node-thematique.node-32.en_attente .node-documentair .field-name-field-doc,
+  .node-thematique.node-32.en_attente .node-documentair .field-name-title-field,
+  .node-thematique.node-32.en_attente .field-name-field-episodes .field-label,
   .node-thematique.node-32.en_attente .node-episode .field-name-title-field {
     color: #aaa; }
   .node-thematique.node-32:not(.en_attente) > h2,
   .node-thematique.node-32:not(.en_attente) .group-video .field-name-field-description h3,
   .node-thematique.node-32:not(.en_attente) .group-description .field-name-field-ecouter,
   .node-thematique.node-32:not(.en_attente) .node-documentair .field-name-field-doc,
+  .node-thematique.node-32:not(.en_attente) .node-documentair .field-name-title-field,
+  .node-thematique.node-32:not(.en_attente) .field-name-field-episodes .field-label,
   .node-thematique.node-32:not(.en_attente) .node-episode .field-name-title-field {
     color: #2f82ff; }
   .node-thematique.node-14::before {
@@ -209,12 +213,16 @@ body,
   .node-thematique.node-14.en_attente .group-video .field-name-field-description h3,
   .node-thematique.node-14.en_attente .group-description .field-name-field-ecouter,
   .node-thematique.node-14.en_attente .node-documentair .field-name-field-doc,
+  .node-thematique.node-14.en_attente .node-documentair .field-name-title-field,
+  .node-thematique.node-14.en_attente .field-name-field-episodes .field-label,
   .node-thematique.node-14.en_attente .node-episode .field-name-title-field {
     color: #aaa; }
   .node-thematique.node-14:not(.en_attente) > h2,
   .node-thematique.node-14:not(.en_attente) .group-video .field-name-field-description h3,
   .node-thematique.node-14:not(.en_attente) .group-description .field-name-field-ecouter,
   .node-thematique.node-14:not(.en_attente) .node-documentair .field-name-field-doc,
+  .node-thematique.node-14:not(.en_attente) .node-documentair .field-name-title-field,
+  .node-thematique.node-14:not(.en_attente) .field-name-field-episodes .field-label,
   .node-thematique.node-14:not(.en_attente) .node-episode .field-name-title-field {
     color: #ff0000; }
   .node-thematique.node-38::before {
@@ -225,12 +233,16 @@ body,
   .node-thematique.node-38.en_attente .group-video .field-name-field-description h3,
   .node-thematique.node-38.en_attente .group-description .field-name-field-ecouter,
   .node-thematique.node-38.en_attente .node-documentair .field-name-field-doc,
+  .node-thematique.node-38.en_attente .node-documentair .field-name-title-field,
+  .node-thematique.node-38.en_attente .field-name-field-episodes .field-label,
   .node-thematique.node-38.en_attente .node-episode .field-name-title-field {
     color: #aaa; }
   .node-thematique.node-38:not(.en_attente) > h2,
   .node-thematique.node-38:not(.en_attente) .group-video .field-name-field-description h3,
   .node-thematique.node-38:not(.en_attente) .group-description .field-name-field-ecouter,
   .node-thematique.node-38:not(.en_attente) .node-documentair .field-name-field-doc,
+  .node-thematique.node-38:not(.en_attente) .node-documentair .field-name-title-field,
+  .node-thematique.node-38:not(.en_attente) .field-name-field-episodes .field-label,
   .node-thematique.node-38:not(.en_attente) .node-episode .field-name-title-field {
     color: #88aa00; }
   .node-thematique.node-3::before {
@@ -241,12 +253,16 @@ body,
   .node-thematique.node-3.en_attente .group-video .field-name-field-description h3,
   .node-thematique.node-3.en_attente .group-description .field-name-field-ecouter,
   .node-thematique.node-3.en_attente .node-documentair .field-name-field-doc,
+  .node-thematique.node-3.en_attente .node-documentair .field-name-title-field,
+  .node-thematique.node-3.en_attente .field-name-field-episodes .field-label,
   .node-thematique.node-3.en_attente .node-episode .field-name-title-field {
     color: #aaa; }
   .node-thematique.node-3:not(.en_attente) > h2,
   .node-thematique.node-3:not(.en_attente) .group-video .field-name-field-description h3,
   .node-thematique.node-3:not(.en_attente) .group-description .field-name-field-ecouter,
   .node-thematique.node-3:not(.en_attente) .node-documentair .field-name-field-doc,
+  .node-thematique.node-3:not(.en_attente) .node-documentair .field-name-title-field,
+  .node-thematique.node-3:not(.en_attente) .field-name-field-episodes .field-label,
   .node-thematique.node-3:not(.en_attente) .node-episode .field-name-title-field {
     color: #ff6600; }
   .node-thematique.node-20::before {
@@ -257,12 +273,16 @@ body,
   .node-thematique.node-20.en_attente .group-video .field-name-field-description h3,
   .node-thematique.node-20.en_attente .group-description .field-name-field-ecouter,
   .node-thematique.node-20.en_attente .node-documentair .field-name-field-doc,
+  .node-thematique.node-20.en_attente .node-documentair .field-name-title-field,
+  .node-thematique.node-20.en_attente .field-name-field-episodes .field-label,
   .node-thematique.node-20.en_attente .node-episode .field-name-title-field {
     color: #aaa; }
   .node-thematique.node-20:not(.en_attente) > h2,
   .node-thematique.node-20:not(.en_attente) .group-video .field-name-field-description h3,
   .node-thematique.node-20:not(.en_attente) .group-description .field-name-field-ecouter,
   .node-thematique.node-20:not(.en_attente) .node-documentair .field-name-field-doc,
+  .node-thematique.node-20:not(.en_attente) .node-documentair .field-name-title-field,
+  .node-thematique.node-20:not(.en_attente) .field-name-field-episodes .field-label,
   .node-thematique.node-20:not(.en_attente) .node-episode .field-name-title-field {
     color: #ff2ad4; }
   .node-thematique.node-26::before {
@@ -273,22 +293,25 @@ body,
   .node-thematique.node-26.en_attente .group-video .field-name-field-description h3,
   .node-thematique.node-26.en_attente .group-description .field-name-field-ecouter,
   .node-thematique.node-26.en_attente .node-documentair .field-name-field-doc,
+  .node-thematique.node-26.en_attente .node-documentair .field-name-title-field,
+  .node-thematique.node-26.en_attente .field-name-field-episodes .field-label,
   .node-thematique.node-26.en_attente .node-episode .field-name-title-field {
     color: #aaa; }
   .node-thematique.node-26:not(.en_attente) > h2,
   .node-thematique.node-26:not(.en_attente) .group-video .field-name-field-description h3,
   .node-thematique.node-26:not(.en_attente) .group-description .field-name-field-ecouter,
   .node-thematique.node-26:not(.en_attente) .node-documentair .field-name-field-doc,
+  .node-thematique.node-26:not(.en_attente) .node-documentair .field-name-title-field,
+  .node-thematique.node-26:not(.en_attente) .field-name-field-episodes .field-label,
   .node-thematique.node-26:not(.en_attente) .node-episode .field-name-title-field {
     color: #8800aa; }
   .node-thematique > h2 {
     font-size: 3em;
     font-weight: 400;
-    padding-left: 0.18em;
     position: relative; }
     .node-thematique > h2 span {
       position: absolute;
-      top: -177px; }
+      top: -170px; }
   .node-thematique .content {
     letter-spacing: -0.25em; }
     .node-thematique .content .field-name-field-emvideo img {
@@ -304,7 +327,7 @@ body,
         position: relative;
         z-index: 3; }
         .node-thematique .content article.main .field-name-body > * {
-          padding: 0 1em 0 0.2em; }
+          padding: 0 1em 0 0; }
         .node-thematique .content article.main .field-name-body .summary {
           position: relative;
           height: 5.75em;
@@ -313,7 +336,7 @@ body,
           transition: background-color 0.5 ease-in-out; }
           .node-thematique .content article.main .field-name-body .summary p {
             font-size: 1.1em;
-            padding: 0.5em;
+            padding: 0.5em 0.5em 0.5em 0;
             font-weight: 500; }
         .node-thematique .content article.main .field-name-body .value {
           position: absolute;
@@ -333,7 +356,11 @@ body,
           padding: 0 0 1em;
           margin: 0; }
       .node-thematique .content article.main .group-video {
-        position: relative; }
+        position: relative;
+        min-height: 432px; }
+        .node-thematique .content article.main .group-video .field-name-field-emvideo a {
+          display: block;
+          line-height: 0; }
         .node-thematique .content article.main .group-video .group-description {
           cursor: pointer;
           pointer-events: none;
@@ -372,8 +399,11 @@ body,
       width: 30.5%; }
       .node-thematique .content aside.right .field-name-field-eclairages {
         padding-left: 1em; }
+        .node-thematique .content aside.right .field-name-field-eclairages .field-item:not(:last-child) {
+          padding-bottom: 1.2em; }
       .node-thematique .content aside.right .node-documentair {
-        padding-bottom: 1em; }
+        min-height: 160px;
+        background-color: #fff; }
         .node-thematique .content aside.right .node-documentair .content {
           position: relative; }
           .node-thematique .content aside.right .node-documentair .content .group-txt {
@@ -386,21 +416,35 @@ body,
             top: 0;
             left: 0;
             width: 90%;
-            max-height: 80%;
-            margin: 5%;
-            padding: 5%;
-            background-color: rgba(255, 255, 255, 0.9); }
+            height: 80%;
+            margin: 5%; }
             .node-thematique .content aside.right .node-documentair .content .group-txt .field-name-field-doc {
+              display: inline-block;
+              z-index: 5;
               font-size: 1em;
-              font-weight: 500; }
+              font-weight: 500;
+              padding: 7px;
+              background-color: rgba(255, 255, 255, 0.9);
+              transition: background-color 0.3s ease-in-out; }
             .node-thematique .content aside.right .node-documentair .content .group-txt .field-name-title-field {
-              font-size: 2em;
-              font-weight: 600;
-              height: 1px;
-              overflow: hidden;
-              transition: height 0.3s ease-in-out; }
+              position: absolute;
+              z-index: -1;
+              top: 0;
+              left: 0;
+              width: 100%;
+              font-size: 1.5em;
+              font-weight: 500;
+              padding: 30px 7px 10px;
+              background-color: rgba(255, 255, 255, 0.9);
+              opacity: 0;
+              transition: opacity 0.3s ease-in-out; }
+          .node-thematique .content aside.right .node-documentair .content .group-video a {
+            display: block;
+            line-height: 0; }
+        .node-thematique .content aside.right .node-documentair:not(.en_attente):hover .group-txt .field-name-field-doc {
+          background-color: transparent; }
         .node-thematique .content aside.right .node-documentair:not(.en_attente):hover .group-txt .field-name-title-field {
-          height: 70%; }
+          opacity: 1; }
         .node-thematique .content aside.right .node-documentair.en_attente > .content {
           position: relative; }
           .node-thematique .content aside.right .node-documentair.en_attente > .content::before {
@@ -414,7 +458,14 @@ body,
             background-color: #fff;
             opacity: 0.8; }
     .node-thematique .content aside.bottom {
-      padding-top: 1em; }
+      padding-top: 0.6em; }
+      .node-thematique .content aside.bottom .field-name-field-episodes .field-label {
+        font-size: 1.3em;
+        font-weight: 400;
+        background-color: #fff;
+        display: inline-block;
+        padding: 0.2em 0.4em 0;
+        margin-bottom: 0.3em; }
       .node-thematique .content aside.bottom .field-name-field-episodes > .field-items {
         display: -ms-flexbox;
         display: flex;
@@ -424,7 +475,8 @@ body,
         justify-content: space-between; }
         .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item {
           display: block;
-          width: 19%; }
+          width: 19%;
+          background-color: #fff; }
           .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content {
             position: relative; }
             .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-txt {
@@ -448,6 +500,9 @@ body,
                 font-weight: 700;
                 font-style: italic;
                 text-align: center; }
+            .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode .content .group-video a {
+              display: block;
+              line-height: 0; }
           .node-thematique .content aside.bottom .field-name-field-episodes > .field-items > .field-item .node-episode:not(.en_attente):hover .content .group-txt {
             opacity: 0.9;
             background-color: rgba(255, 255, 255, 0.3); }
diff --git a/sites/all/themes/figureslibres/clameurs/css/styles.scss b/sites/all/themes/figureslibres/clameurs/css/styles.scss
index 9c2b7a7c..df58af90 100755
--- a/sites/all/themes/figureslibres/clameurs/css/styles.scss
+++ b/sites/all/themes/figureslibres/clameurs/css/styles.scss
@@ -236,6 +236,8 @@ body,
 			.group-video .field-name-field-description h3,
 			.group-description .field-name-field-ecouter,
 			.node-documentair .field-name-field-doc,
+			.node-documentair .field-name-title-field,
+			.field-name-field-episodes .field-label,
 			.node-episode .field-name-title-field{
 				color: #aaa;//lighten(desaturate($coul, 40%), 20%);
 			}
@@ -245,6 +247,8 @@ body,
 			.group-video .field-name-field-description h3,
 			.group-description .field-name-field-ecouter,
 			.node-documentair .field-name-field-doc,
+			.node-documentair .field-name-title-field,
+			.field-name-field-episodes .field-label,
 			.node-episode .field-name-title-field{color: $coul;}
 		}
 	}
@@ -289,11 +293,11 @@ body,
 	>h2{
 		font-size: 3em;
 		font-weight: 400;
-		padding-left: 0.18em;
+		// padding-left: 0.18em;
 		position:relative;
 		span{
 			position: absolute;
-			top:-177px;
+			top:-170px;
 		}
 	}
 
@@ -305,7 +309,7 @@ body,
 
 		$main_w 	: 69.5%;
 		$right_w	: 30.5%;
-		$gouttiere: 1em;
+		$gouttiere: 1.2em;
 
 		//                     _
 		//    ____ ___  ____ _(_)___
@@ -319,7 +323,7 @@ body,
 			overflow: hidden;
 			.field-name-body{
 				position: relative; z-index: 3;
-				>*{padding:0 1em 0 0.2em;}
+				>*{padding:0 1em 0 0;}
 				.summary{
 					position: relative;
 					height:5.75em; overflow: hidden;
@@ -327,7 +331,7 @@ body,
 					transition: background-color 0.5 ease-in-out;
 					p{
 						font-size: 1.1em;
-						padding:0.5em;
+						padding:0.5em 0.5em 0.5em 0;
 						font-weight: 500;
 					}
 				}
@@ -351,6 +355,8 @@ body,
 			} //field-name-body
 			.group-video{
 				position: relative;
+				min-height: 432px;
+				.field-name-field-emvideo a{ display: block; line-height: 0;}
 				.group-description{
 					cursor: pointer; pointer-events: none;
 					box-sizing: border-box;
@@ -398,32 +404,48 @@ body,
 			width: $right_w;
 			.field-name-field-eclairages{
 				padding-left:1em;
+				.field-item:not(:last-child){
+					padding-bottom: $gouttiere;
+				}
 			}
 			.node-documentair{
-				padding-bottom: $gouttiere;
+				min-height: 160px;
+				background-color: #fff;
 				.content{
 					position: relative;
 					.group-txt{
 						cursor: pointer; pointer-events: none;
 						box-sizing: border-box;
 						position:absolute; z-index: 2; overflow: hidden;
-						top:0; left:0; width:90%; max-height:80%;
-						margin:5%; padding:5%;
-						background-color: rgba(255, 255, 255, 0.9);
+						top:0; left:0; width:90%; height:80%;
+						margin:5%;
 						// opacity: 0;
 						.field-name-field-doc{
+							display: inline-block;
+							z-index:5;
 							font-size: 1em;
 							font-weight: 500;
+							padding: 7px;
+							background-color: rgba(255, 255, 255, 0.9);
+							transition:background-color 0.3s ease-in-out;
 						}
 						.field-name-title-field{
-							font-size: 2em;
-							font-weight: 600;
-							height:1px; overflow: hidden;
-							transition:height 0.3s ease-in-out;
+							position: absolute; z-index: -1;
+							top:0; left:0; width: 100%;
+							font-size: 1.5em;
+							font-weight: 500;
+							padding: 30px 7px 10px;
+							background-color: rgba(255, 255, 255, 0.9);
+							opacity: 0;
+							transition:opacity 0.3s ease-in-out;
 						}
 					}
+					.group-video a{ display: block; line-height: 0;}
+				}
+				&:not(.en_attente):hover .group-txt{
+					.field-name-field-doc{background-color: transparent;}
+					.field-name-title-field{opacity: 1;}
 				}
-				&:not(.en_attente):hover .group-txt .field-name-title-field{height:70%;}
 
 				&.en_attente>.content{
 					position: relative;
@@ -447,9 +469,18 @@ body,
 		// \___/ .___/_/____/\____/\__,_/\___/____/
 		//    /_/
 		aside.bottom{
-			padding-top: $gouttiere;
+			padding-top: $gouttiere*0.5;
 			.field-name-field-episodes{
 				// letter-spacing: -0.25em;
+
+				.field-label{
+					font-size: 1.3em;
+					font-weight: 400;
+					background-color: #fff;
+					display: inline-block;
+					padding:0.2em 0.4em 0;
+					margin-bottom: 0.3em;
+				}
 				&>.field-items{
 			    display: flex;
 			    flex-flow: row nowrap;
@@ -460,7 +491,8 @@ body,
 						// display: inline-block;
 						width:19%;
 						// padding-right:1%;
-
+						// min-height: 110px;
+						background-color: #fff;
 						.node-episode{
 							.content{
 								position: relative;
@@ -480,6 +512,7 @@ body,
 										text-align: center;
 									}
 								}
+								.group-video a{ display: block; line-height: 0;}
 							}
 
 							&:not(.en_attente):hover .content .group-txt{
diff --git a/sites/all/themes/figureslibres/clameurs/templates/field.tpl.php b/sites/all/themes/figureslibres/clameurs/templates/field.tpl.php
index f37b7a25..3730c175 100755
--- a/sites/all/themes/figureslibres/clameurs/templates/field.tpl.php
+++ b/sites/all/themes/figureslibres/clameurs/templates/field.tpl.php
@@ -44,7 +44,7 @@
 ?>
 <section class="<?php print $classes; ?>"<?php print $attributes; ?>>
   <?php if (!$label_hidden): ?>
-    <div class="field-label"<?php print $title_attributes; ?>><?php print $label ?>:&nbsp;</div>
+    <div class="field-label"<?php print $title_attributes; ?>><?php print $label ?></div>
   <?php endif; ?>
   <?php if(count($items) > 1): ?>
   <div class="field-items"<?php print $content_attributes; ?>>