]> _ Git - bloomsburie.git/commitdiff
wait #7235 @0.5
authorVincent Vanwaelscappel <vincent@cubedesigners.com>
Tue, 14 Jan 2025 15:56:16 +0000 (16:56 +0100)
committerVincent Vanwaelscappel <vincent@cubedesigners.com>
Tue, 14 Jan 2025 15:56:16 +0000 (16:56 +0100)
framework/application/views/helpers/AgencyBlocs.php
framework/application/views/scripts/templates/agence.phtml
js/agence.js [new file with mode: 0644]
less/agence.less
less/link-arrow.less

index 9f71c74d87e40c48f0ad90efb37c2837fbec2608..7da976424943fb561fe0b244607aaa71c29e7c66 100644 (file)
@@ -23,7 +23,8 @@ class Cubedesigners_View_Helper_AgencyBlocs extends Zend_View_Helper_Abstract {
                        $res.='<div class="details">';
             $res.='<h3 itemprop="name">' . $bloc['titre'] . '</h3>';
                        $res.='<span class="poste" itemprop="jobTitle">' . $bloc['poste'] . '</span>';
-                       $res.= $this->view->markupDotclear($bloc['texte'], array('class' => 'texte'));
+                       $res.= '<a href="#" class="biography-open animated-arrow discreet small">'. $this->view->linkArrow('Biography').'</a>';
+            $res.='<div class="biography">'.$bloc['texte'].'</div>';
                        $res.='</div></div>';
 
                        $i++;
index 75c481fc1dcf5220f55d9e56a4184facf6e77ede..f9f48ec6b5c82717e12461ab2b2e808eb32a3a83 100644 (file)
@@ -1,6 +1,7 @@
 <?php
 $this->headScript()->addScriptAndStyle('agence');
 $this->headScript()->addScriptAndStyle('slideshow');
+$this->headScript()->addFeatherlight();
 echo $this->intro();
 ?>
 <div class="bloc-holder content">
diff --git a/js/agence.js b/js/agence.js
new file mode 100644 (file)
index 0000000..9de89e9
--- /dev/null
@@ -0,0 +1,9 @@
+TO_LOAD_ONCE[TO_LOAD_ONCE.length] = 'load_agence();';
+
+function load_agence() {
+
+    $('a.biography-open').click(function () {
+        $.featherlight('<h3>'+$(this).prevAll('h3').html()+'</h3><h4>'+$(this).prevAll('span').html()+'</h4><p>'+$(this).nextAll('.biography').html()+'</p>')
+        return false;
+    });
+}
\ No newline at end of file
index cd239b1e56cb0167aeb06d94be1695156ec335c6..a4dbe4ef802d25e601e593917976814d6153f749 100644 (file)
 @import "00-constants";
 
-@twocols : ~"screen and (max-width: 955px)";
-@onecol : ~"screen and (max-width: 700px)";
+@twocols: ~"screen and (max-width: 955px)";
+@onecol: ~"screen and (max-width: 700px)";
 
 .agency-pictos {
-       /* Agence pictos */
-       background-color: @blue;
-       color:#fff;
-       .bloc-holder {
-               overflow: hidden;
-
-       }
-
-       .bloc-holder h2 {
-               font-weight: 300;
-               font-size: 32px;
-               margin-bottom: 0 !important;
-       }
-
-       article {
-               display: inline-block;
-               vertical-align: top;
-               width: 50%;
-               padding-right: 20px;
-               margin: 25px 0;
-               text-align: left;
-
-               @media @twocols {
-                       width: 50%;
-
-                       &:nth-child(even) {
-                               padding-left: 20px;
-                               padding-right: 0;
-                       }
-               }
-               @media @onecol {
-                       width: 100%;
-                       padding: 0 !important; // Override nth-child (Vincent's brilliant idea :))
-               }
-       }
-
-       .sousbloc {
-               &:extend(.media);
-       }
-
-       .spacer {
-               display: none;
-       }
-
-       .dotclear {
-
-               &:extend(.media--body);
-
-               height: 70px;
-               display: table-cell;
-               vertical-align: middle;
-       }
-
-       .sousbloc img {
-               &:extend(.media--item);
-               margin-right: 20px;
-       }
+  /* Agence pictos */
+  background-color: @blue;
+  color: #fff;
+
+  .bloc-holder {
+    overflow: hidden;
+
+  }
+
+  .bloc-holder h2 {
+    font-weight: 300;
+    font-size: 32px;
+    margin-bottom: 0 !important;
+  }
+
+  article {
+    display: inline-block;
+    vertical-align: top;
+    width: 50%;
+    padding-right: 20px;
+    margin: 25px 0;
+    text-align: left;
+
+    @media @twocols {
+      width: 50%;
+
+      &:nth-child(even) {
+        padding-left: 20px;
+        padding-right: 0;
+      }
+    }
+    @media @onecol {
+      width: 100%;
+      padding: 0 !important; // Override nth-child (Vincent's brilliant idea :))
+    }
+  }
+
+  .sousbloc {
+    &:extend(.media);
+  }
+
+  .spacer {
+    display: none;
+  }
+
+  .dotclear {
+
+    &:extend(.media--body);
+
+    height: 70px;
+    display: table-cell;
+    vertical-align: middle;
+  }
+
+  .sousbloc img {
+    &:extend(.media--item);
+    margin-right: 20px;
+  }
 }
 
 /* Agence photo */
 .agency-photo {
-       overflow: hidden;
-       text-align: center;
+  overflow: hidden;
+  text-align: center;
 
-       img {
-               vertical-align: bottom;
-       }
+  img {
+    vertical-align: bottom;
+  }
 }
 
 /* Agence equipe */
 .agency-persons {
-       background-color: #fff;
-       color: @black;
-       .bloc-holder {
-               overflow: hidden;
-       }
-
-       h2 {
-               font-size: 30px;
-       }
-
-       h3 {
-               font-size: 30px;
-       }
-
-       .blocs {
-               padding: 15px 0 0 0;
-       }
-
-       .spacer {
-               display: none;
-       }
-
-       .poste{
-               display: block;
-               font-size: 20px;
-               font-weight: 600;
-               padding-bottom: 10px;
-       }
-
-       .sousbloc {
-
-               &:extend(.media);
-
-               display: inline-block;
-               vertical-align: top;
-               width: 50%;
-               min-width: 480px;
-               margin: 25px 0;
-
-               &:nth-child(odd) {
-                       .pr-3vw;
-               }
-               &:nth-child(even) {
-                       .pl-3vw;
-               }
-
-
-               @media screen and (max-width: 1200px) {
-                       width: 100%;
-                       padding: 0 !important;
-               }
-       }
-
-       .photo {
-
-               &:extend(.media--item);
-
-               width: 120px;
-               height: 120px;
-               float: left;
-               margin: 10px 25px 0 0;
-               border-radius: 60px;
-       }
-
-       .details {
-               &:extend(.media--body);
-               text-align: left;
-       }
+  background-color: #fff;
+  color: @black;
+
+  .bloc-holder {
+    overflow: hidden;
+  }
+
+  h2 {
+    font-size: 30px;
+  }
+
+  h3 {
+    font-size: 30px;
+  }
+
+  .blocs {
+    padding: 15px 0 0 0;
+  }
+
+  .spacer {
+    display: none;
+  }
+
+  .poste {
+    display: block;
+    font-size: 20px;
+    font-weight: 600;
+    padding-bottom: 10px;
+  }
+
+  .biography {
+    display: none;
+  }
+
+  .sousbloc {
+
+    &:extend(.media);
+
+    display: inline-block;
+    vertical-align: top;
+    width: 50%;
+    min-width: 480px;
+    margin: 25px 0;
+
+    &:nth-child(odd) {
+      .pr-3vw;
+    }
+
+    &:nth-child(even) {
+      .pl-3vw;
+    }
+
+
+    @media screen and (max-width: 1200px) {
+      width: 100%;
+      padding: 0 !important;
+    }
+  }
+
+  .photo {
+
+    &:extend(.media--item);
+
+    width: 120px;
+    height: 120px;
+    float: left;
+    margin: 0 25px 0 0;
+    border-radius: 60px;
+  }
+
+  .details {
+    &:extend(.media--body);
+    text-align: left;
+  }
 }
+
+.featherlight-content {
+  max-width: 800px;
+  background-color: @blue !important;
+  padding: 45px !important;
+  color: #fff;
+  font-size: 20px;
+
+  h3 {
+    font-size: 30px;
+  }
+
+  h4 {
+    font-size: 20px;
+    margin-bottom: 20px;
+  }
+
+  .featherlight-close-icon{
+    color:#fff;
+    background:none;
+    font-size:25px;
+    width:40px;
+    line-height:40px;
+  }
+}
\ No newline at end of file
index 529238c6e77a9fc535255107f6a5f4c8310b6de7..6b47daa6f7d4decd2046941372eafb52aa95c3de 100644 (file)
     > .text {
       margin: 0 @text-arrow-space 0 0;
       line-height: 1;
+      overflow: visible !important;
     }
 
     > .the-arrow {