$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++;
--- /dev/null
+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
@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