modern: update members and members_ca pages layouts

ot_templating/Resources/Private/Layouts/Modern/Members.html

@@ -13,64 +13,18 @@
             <div class="container">
                 <div class="row">
                     <div class="col-lg-12 col-md-12">
-                        <h1 class="text-center">Liste des adhérents</h1>
+                        <h1 class="text-center">Les Adhérents</h1>
 
-                        <ot:members.getAll as="members"
-                                           organizationId="{settings.organizationId}">
+                        <div class="ot-members">
+                            <ot:members.getAll as="members"
+                                               organizationId="{settings.organizationId}"
+                                               groupByInstruments="1">
 
-                            <f:if condition="{members -> f:count()} > 0">
-                                <f:then>
-                                    <f:for each="{members}" as="member" iteration="i">
+                                <f:render partial="Modern/MembersList"
+                                          arguments="{settings: settings, members: members}"/>
 
-                                        <f:if condition="{i.index -> v:math.modulo(b: 4)}===0">
-                                            <f:if condition="i>1">
-                                        </div>
-                                            </div>
-                                            </f:if>
-
-                                        <div class="team-3 mb-50 mt-70">
-                                            <div class="row">
-                                        </f:if>
-
-                                                <div class="col-lg-3 col-sm-6 sm-mb-30">
-                                                    <div class="team team-round full-border">
-                                                        <div class="team-photo">
-                                                            <f:if condition="{member.image}">
-                                                                <f:then>
-                                                                    <img class="img-fluid mx-auto"
-                                                                         src="{member.image}/160x0"
-                                                                         alt="{member.fullName}"/>
-                                                                </f:then>
-                                                                <f:else>
-                                                                    <f:image class="img-fluid mx-auto"
-                                                                             src="EXT:ot_templating/Resources/Public/media/unknown_user.jpg"
-                                                                             alt="{member.fullName}"/>
-                                                                </f:else>
-                                                            </f:if>
-                                                        </div>
-
-                                                        <div class="team-description">
-                                                            <div class="team-info">
-                                                                <h5><a href="team-single.html">{member.fullName}</a></h5>
-                                                                <span>{f:translate(key: member.instrument)}</span>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                </div>
-
-                                        <f:if condition="{i.index} === {total}">
-                                            </div>
-                                        </div>
-                                        </f:if>
-
-                                    </f:for>
-                                </f:then>
-                                <f:else>
-                                    <h5>Aucun adhérent</h5>
-                                </f:else>
-                            </f:if>
-
-                        </ot:members.getAll>
+                            </ot:members.getAll>
+                        </div>
                     </div>
                 </div>
             </div>

ot_templating/Resources/Private/Layouts/Modern/MembersCa.html

@@ -14,64 +14,18 @@
             <div class="container">
                 <div class="row">
                     <div class="col-lg-12 col-md-12">
-                        <h1 class="text-center">Liste des membres du CA</h1>
+                        <h1 class="text-center">Membres du CA</h1>
 
-                        <ot:members.getAllCa as="members"
-                                           organizationId="{settings.organizationId}">
+                        <div class="ot-members">
+                            <ot:members.getAllCa as="members"
+                                                 organizationId="{settings.organizationId}"
+                                                 groupByMissions="1">
 
-                            <f:if condition="{members -> f:count()} > 0">
-                                <f:then>
-                                    <f:for each="{members}" as="member" iteration="i">
+                                <f:render partial="Modern/MembersList"
+                                          arguments="{settings: settings, members: members}"/>
 
-                                        <f:if condition="{i.index -> v:math.modulo(b: 4)}===0">
-                                            <f:if condition="i>1">
-                                        </div>
-                                            </div>
-                                            </f:if>
-
-                                        <div class="team-3 mb-50 mt-70">
-                                            <div class="row">
-                                        </f:if>
-
-                                                <div class="col-lg-3 col-sm-6 sm-mb-30">
-                                                    <div class="team team-round full-border">
-                                                        <div class="team-photo">
-                                                            <f:if condition="{member.image}">
-                                                                <f:then>
-                                                                    <img class="img-fluid mx-auto"
-                                                                         src="{member.image}/160x0"
-                                                                         alt="{member.fullName}"/>
-                                                                </f:then>
-                                                                <f:else>
-                                                                    <f:image class="img-fluid mx-auto"
-                                                                             src="EXT:ot_templating/Resources/Public/media/unknown_user.jpg"
-                                                                             alt="{member.fullName}"/>
-                                                                </f:else>
-                                                            </f:if>
-                                                        </div>
-
-                                                        <div class="team-description">
-                                                            <div class="team-info">
-                                                                <h5><a href="team-single.html">{member.fullName}</a></h5>
-                                                                <span>{f:translate(key: member.mission)}</span>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                </div>
-
-                                        <f:if condition="{i.index} === {total}">
-                                            </div>
-                                        </div>
-                                        </f:if>
-
-                                    </f:for>
-                                </f:then>
-                                <f:else>
-                                    <h5>Aucun adhérent</h5>
-                                </f:else>
-                            </f:if>
-
-                        </ot:members.getAllCa>
+                            </ot:members.getAllCa>
+                        </div>
                     </div>
 
                 </div>

ot_templating/Resources/Private/Partials/Modern/MembersList.html

@@ -0,0 +1,39 @@
+{namespace ot=Opentalent\OtTemplating\ViewHelpers}
+
+<f:if condition="{members -> f:count()} > 0">
+    <f:then>
+        <f:for each="{members}" as="members" key="category">
+            <h3>
+                <f:format.case value="{f:translate(key: category)}" mode="upper"/>
+            </h3>
+            <ul class="ot-members-list">
+                <f:for each="{members}" as="member">
+                    <li class="ot-member">
+                        <p class="ot-member-image">
+                            <f:if condition="{member.image}">
+                                <f:then>
+                                    <img src="{member.image}/160x0" alt=""/>
+                                </f:then>
+                                <f:else if="{member.gender}=='MISTER'">
+                                    <f:image class="default" src="EXT:ot_templating/Resources/Public/media/man-default.jpg"/>
+                                </f:else>
+                                <f:else>
+                                    <f:image class="default" src="EXT:ot_templating/Resources/Public/media/woman-default.jpg"/>
+                                </f:else>
+                            </f:if>
+                        </p>
+                        <div class="ot-member-name">
+                            <div>
+                                {member.fullName}
+                            </div>
+                        </div>
+                    </li>
+                </f:for>
+            </ul>
+        </f:for>
+
+    </f:then>
+    <f:else>
+        <h5>Aucun adhérent</h5>
+    </f:else>
+</f:if>

ot_templating/Resources/Public/assets/Modern/style/custom.css

@@ -153,8 +153,6 @@
         }
     }
 
-
-
     /* **** Fix mega menu issues ***** */
 
     /* Fix bug with long menus */
@@ -274,9 +272,82 @@
         max-height: 80px;
     }
 
-    /*------------------------
-        Pied de page
-    ------------------------*/
+/*------------------------
+    Members and MembersCa
+------------------------*/
+.ot-members h3 {
+    color: #000000;
+    text-align: left;
+    font-weight: bold;
+    font-size: 21px;
+    padding: 6px;
+    display: flex;
+    border-bottom: solid 1px #cccccc;
+}
+
+.ot-members .ot-members-list {
+    list-style: none;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: start;
+    justify-content: center;
+    padding: 0;
+}
+
+.ot-members .ot-member {
+    margin: 15px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 160px;
+}
+
+.ot-members .ot-member-image {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    min-height: 198px;
+    width: 100%;
+    border: 1px solid #737373;
+    margin: 0;
+}
+
+.ot-members .ot-member img {
+    max-width: 158px;
+    max-height: 196px;
+    height: auto;
+    width: auto;
+}
+
+.ot-members .ot-member img.default {
+    width: 100%;
+    z-index: 0;
+}
+
+.ot-members .ot-member-name {
+    min-height: 84px;
+    width: 100%;
+    background: #666666;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.ot-members .ot-member-name * {
+    font-size: 20px;
+    color: #ffffff;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    padding: 12px;
+}
+
+/*------------------------
+    Pied de page
+------------------------*/
 
     .footer .footer-text p {
         color: #FFFFFF !important;

ot_templating/Resources/Public/assets/Modern/style/skins/modern-blue.css

@@ -87,4 +87,10 @@ ul.menu-sidebar li a:hover, ul.menu-sidebar li.active a { border-left-color: #35
 .bg-overlay-theme-60:before {  background: rgba(53, 74, 107, 0.6); }
 .bg-overlay-theme-70:before {  background: rgba(53, 74, 107, 0.7); }
 .bg-overlay-theme-80:before {  background: rgba(53, 74, 107, 0.8); }
-.bg-overlay-theme-90:before {  background: rgba(53, 74, 107, 0.9); }  
+.bg-overlay-theme-90:before {  background: rgba(53, 74, 107, 0.9); }
+
+/*************************
+	 Members and MembersCa
+*************************/
+.ot-members h3 { border-bottom: solid 1px #354a6b; }
+.ot-members .ot-member-name { background: #354a6b; }

ot_templating/Resources/Public/assets/Modern/style/skins/modern-green.css

@@ -87,4 +87,10 @@ ul.menu-sidebar li a:hover, ul.menu-sidebar li.active a { border-left-color: #00
 .bg-overlay-theme-60:before {  background: rgba(0, 177, 6, 0.6); }
 .bg-overlay-theme-70:before {  background: rgba(0, 177, 6, 0.7); }
 .bg-overlay-theme-80:before {  background: rgba(0, 177, 6, 0.8); }
-.bg-overlay-theme-90:before {  background: rgba(0, 177, 6, 0.9); }  
+.bg-overlay-theme-90:before {  background: rgba(0, 177, 6, 0.9); }
+
+/*************************
+	 Members and MembersCa
+*************************/
+.ot-members h3 { border-bottom: solid 1px #00b106; }
+.ot-members .ot-member-name { background: #00b106; }

ot_templating/Resources/Public/assets/Modern/style/skins/modern-grey.css

@@ -88,4 +88,10 @@ ul.menu-sidebar li a:hover, ul.menu-sidebar li.active a { border-left-color: #9a
 .bg-overlay-theme-60:before {  background: rgba(154, 154, 154, 0.6); }
 .bg-overlay-theme-70:before {  background: rgba(154, 154, 154, 0.7); }
 .bg-overlay-theme-80:before {  background: rgba(154, 154, 154, 0.8); }
-.bg-overlay-theme-90:before {  background: rgba(154, 154, 154, 0.9); }  
+.bg-overlay-theme-90:before {  background: rgba(154, 154, 154, 0.9); }
+
+/*************************
+	 Members and MembersCa
+*************************/
+.ot-members h3 { border-bottom: solid 1px #9a9a9a; }
+.ot-members .ot-member-name { background: #9a9a9a; }

ot_templating/Resources/Public/assets/Modern/style/skins/modern-light-blue.css

@@ -90,3 +90,9 @@ ul.menu-sidebar li a:hover, ul.menu-sidebar li.active a { border-left-color: #29
 .bg-overlay-theme-70:before {  background: rgba(41, 155, 232, 0.7); }
 .bg-overlay-theme-80:before {  background: rgba(41, 155, 232, 0.8); }
 .bg-overlay-theme-90:before {  background: rgba(41, 155, 232, 0.9); }
+
+/*************************
+	 Members and MembersCa
+*************************/
+.ot-members h3 { border-bottom: solid 1px #299be8; }
+.ot-members .ot-member-name { background: #299be8; }

ot_templating/Resources/Public/assets/Modern/style/skins/modern-light-red.css

@@ -88,3 +88,9 @@ ul.menu-sidebar li a:hover, ul.menu-sidebar li.active a { border-left-color: #dd
 .bg-overlay-theme-70:before {  background: rgba(209, 35, 38, 0.7); }
 .bg-overlay-theme-80:before {  background: rgba(209, 35, 38, 0.8); }
 .bg-overlay-theme-90:before {  background: rgba(209, 35, 38, 0.9); }
+
+/*************************
+	 Members and MembersCa
+*************************/
+.ot-members h3 { border-bottom: solid 1px #dd453f; }
+.ot-members .ot-member-name { background: #dd453f; }

ot_templating/Resources/Public/assets/Modern/style/skins/modern-orange.css

@@ -87,4 +87,10 @@ ul.menu-sidebar li a:hover, ul.menu-sidebar li.active a { border-left-color: #ed
 .bg-overlay-theme-60:before {  background: rgba(237, 80, 1, 0.6); }
 .bg-overlay-theme-70:before {  background: rgba(237, 80, 1, 0.7); }
 .bg-overlay-theme-80:before {  background: rgba(237, 80, 1, 0.8); }
-.bg-overlay-theme-90:before {  background: rgba(237, 80, 1, 0.9); } 
+.bg-overlay-theme-90:before {  background: rgba(237, 80, 1, 0.9); }
+
+/*************************
+	 Members and MembersCa
+*************************/
+.ot-members h3 { border-bottom: solid 1px #ed5001; }
+.ot-members .ot-member-name { background: #ed5001; }

ot_templating/Resources/Public/assets/Modern/style/skins/modern-purple.css

@@ -88,3 +88,9 @@ ul.menu-sidebar li a:hover, ul.menu-sidebar li.active a { border-left-color: #c3
 .bg-overlay-theme-70:before {  background: rgba(195, 109, 255, 0.7); }
 .bg-overlay-theme-80:before {  background: rgba(195, 109, 255, 0.8); }
 .bg-overlay-theme-90:before {  background: rgba(195, 109, 255, 0.9); }
+
+/*************************
+	 Members and MembersCa
+*************************/
+.ot-members h3 { border-bottom: solid 1px #c36dff; }
+.ot-members .ot-member-name { background: #c36dff; }

ot_templating/Resources/Public/assets/Modern/style/skins/modern-red.css

@@ -88,3 +88,9 @@ ul.menu-sidebar li a:hover, ul.menu-sidebar li.active a { border-left-color: #d1
 .bg-overlay-theme-70:before {  background: rgba(209, 35, 38, 0.7); }
 .bg-overlay-theme-80:before {  background: rgba(209, 35, 38, 0.8); }
 .bg-overlay-theme-90:before {  background: rgba(209, 35, 38, 0.9); }
+
+/*************************
+	 Members and MembersCa
+*************************/
+.ot-members h3 { border-bottom: solid 1px #d12326; }
+.ot-members .ot-member-name { background: #d12326; }