templates/header.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>
  6.             
  7.         {% block title %}  MLC App {% endblock %}
  9.         </title>
  10.         <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
  11.  
  13.         {% block stylesheets %}
  15.         <link href="{{ asset('vendors/mdi/css/materialdesignicons.min.css') }}" type="text/css" rel="stylesheet" />
  16.         <link href="{{ asset('vendors/css/vendor.bundle.base.css') }}" type="text/css" rel="stylesheet" />
  18.         <link href="{{ asset('css/style.css') }}" type="text/css" rel="stylesheet" />
  19.         
  20.         
  21.         {% endblock %}
  22.     
  23.         <style>
  25.             .fac-btn{
  26.         
  27.               margin-right : .1em; margin-left : .1em;
  28.         
  29.             }
  30.         
  31.             .fac-button1{
  32.         
  33.               margin-right : .1em; 
  34.               margin-left : .1em; padding : 2px; width : 88px; height : 30px;
  35.             }
  36.         
  37.             .fac-button2{
  38.         
  39.               margin-right : .1em; padding : 5px; width : 88px; height : 30px;
  40.             }
  41.         
  42.             .fac{
  43.         
  44.               margin : 0%;
  45.         
  46.             }
  47.     
  48.             .fac-card{
  49.             
  50.             
  51.                   height : 150px;
  52.             
  53.             
  54.                 }
  56.           .profile-name{
  58.               font-weight:  bold;
  59.               margin : 2%;
  61.           }
  63.           td a{
  65.             font-size : 1.2em;
  66.             font-weight : bold;
  67.             color : #163D43;
  69.           }
  71.           .image_ronde_grande{
  72.     
  73.             overflow:hidden;
  74.               -webkit-border-radius:170px;
  75.               -moz-border-radius:170px;
  76.               border-radius:170px;
  77.               width:170px;
  78.               height:170px;
  79.             
  80.             
  81.             
  82.           }
  85. .pagination .page-item .page-link {
  86.   border-radius: 50%;
  87.   margin: 0 2px;
  88.   color: #797979;
  89.   padding: 6px 12px;
  90. }
  92. .pagination .page-item .page-link:hover {
  93.   background-color: #eee;
  94.   border-color: #ddd;
  95. }
  97. .pagination .page-item.active .page-link {
  98.   background-color: #23CCEF;
  99.   border: 0;
  100.   color: #FFFFFF !important;
  101.   padding: 7px 13px;
  102. }
  104. .pagination .page-item:first-child .page-link,
  105. .pagination .page-item:last-child .page-link {
  106.   border-radius: 50%;
  107. }
  109. .pagination>li.disabled {
  110.   opacity: .4;
  111. }
  113. .pagination.pagination-no-border>li>a,
  114. .pagination.pagination-no-border>li>span {
  115.   border: 0;
  116. }
  118. .pagination>li>a,
  119. .pagination>li>span,
  120. .pagination>li:first-child>a,
  121. .pagination>li:first-child>span,
  122. .pagination>li:last-child>a,
  123. .pagination>li:last-child>span {
  124.   border-radius: 50%;
  125.   margin: 0 2px;
  126.   color: #797979;
  127. }
  129. .pagination>li.active>a,
  130. .pagination>li.active>span,
  131. .pagination>li.active>a:hover,
  132. .pagination>li.active>span:hover,
  133. .pagination>li.active>a:focus,
  134. .pagination>li.active>span:focus {
  135.   background-color: #23CCEF;
  136.   border: 0;
  137.   color: #FFFFFF;
  138.   padding: 7px 13px;
  139. }
  141. .nav-pills-blue>li.active>a,
  142. .nav-pills-blue>li.active>a:hover,
  143. .nav-pills-blue>li.active>a:focus {
  144.   background-color: #447DF7;
  145. }
  147. .pagination-blue>li.active a,
  148. .pagination-blue>li.active a:hover,
  149. .pagination-blue>li.active a:focus,
  150. .pagination-blue>li.active span,
  151. .pagination-blue>li.active span:hover,
  152. .pagination-blue>li.active span:focus {
  153.   background-color: #447DF7 !important;
  154. }
  156. .nav-pills-azure>li.active>a,
  157. .nav-pills-azure>li.active>a:hover,
  158. .nav-pills-azure>li.active>a:focus {
  159.   background-color: #23CCEF;
  160. }
  162. .pagination-azure li.active a,
  163. .pagination-azure li.active a:hover,
  164. .pagination-azure li.active a:focus,
  165. .pagination-azure li.active span,
  166. .pagination-azure li.active span:hover,
  167. .pagination-azure li.active span:focus {
  168.   background-color: #23CCEF !important;
  169. }
  171. .nav-pills-green>li.active>a,
  172. .nav-pills-green>li.active>a:hover,
  173. .nav-pills-green>li.active>a:focus {
  174.   background-color: #87CB16;
  175. }
  177. .pagination-green>li.active a,
  178. .pagination-green>li.active a:hover,
  179. .pagination-green>li.active a:focus,
  180. .pagination-green>li.active span,
  181. .pagination-green>li.active span:hover,
  182. .pagination-green>li.active span:focus {
  183.   background-color: #87CB16 !important;
  184. }
  186. .nav-pills-orange>li.active>a,
  187. .nav-pills-orange>li.active>a:hover,
  188. .nav-pills-orange>li.active>a:focus {
  189.   background-color: #FFA534;
  190. }
  192. .pagination-orange>li.active a,
  193. .pagination-orange>li.active a:hover,
  194. .pagination-orange>li.active a:focus,
  195. .pagination-orange>li.active span,
  196. .pagination-orange>li.active span:hover,
  197. .pagination-orange>li.active span:focus {
  198.   background-color: #FFA534 !important;
  199. }
  201. .nav-pills-red>li.active>a,
  202. .nav-pills-red>li.active>a:hover,
  203. .nav-pills-red>li.active>a:focus {
  204.   background-color: #FB404B;
  205. }
  207. .pagination-red>li.active a,
  208. .pagination-red>li.active a:hover,
  209. .pagination-red>li.active a:focus,
  210. .pagination-red>li.active span,
  211. .pagination-red>li.active span:hover,
  212. .pagination-red>li.active span:focus {
  213.   background-color: #FB404B !important;
  214. }
  216. .bootstrap-table .pagination .page-number a {
  217.   padding: 7px 12px;
  218. }
  220. .pagniation-detail{
  222.   background-color:  red;
  223. }
  225. .keep-open{
  226.     
  227. }
  229. .show{
  231. }
  233. .search{
  235.   width : 41%;
  236.   border : 2px solid blue;
  237. }
  239. .pull-left{
  241.   margin-top : 3%;
  243. }
  245. li {
  246.   display: list-item;
  247.   text-align: -webkit-match-parent;
  248. }
  250. .bootstrap-table .fixed-table-pagination .page-list .btn-group {
  251.   margin-right: 5px;
  252. }
  254. .btn.btn-outline {
  255.   color: #888888;
  256.   background-color: transparent;
  257.   border: 1px solid #888888;
  258.   opacity: 1;
  259.   border-radius: 30px;
  261. }
  263. .fixed-table-toolbar .columns .btn {
  264.   margin: 0 2px;
  265.   border-radius: 30px;
  267. }
  269. .glyphicon {
  272. }
  274. .show .dropdown-menu {
  275.   opacity: 1;
  276.   filter: alpha(opacity=100);
  277.   visibility: visible;
  278. }
  280. .dropdown-menu.show {
  281.   display: block;
  282. }
  284. .dropup .dropdown-menu {
  285.   margin-top: 0;
  286.   margin-bottom: .125rem;
  287. }
  289. .dropdown-menu {
  290.   visibility: hidden;
  291.   margin: 0;
  292.   padding: 0;
  293.   border-radius: 10px;
  294.   display: block;
  295.   z-index: 9000;
  296.   position: absolute;
  297.   opacity: 0;
  298.   filter: alpha(opacity=0);
  299.   -webkit-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.125);
  300.   box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.125);
  301. }
  303. .dropdown-menu {
  304.   position: absolute;
  305.   top: 100%;
  306.   z-index: 1000;
  307.   display: none;
  308.   float: left;
  309.   min-width: 10rem;
  310.   padding: .5rem 0;
  311.   margin: .25rem 0 0;
  312.   font-size: 1rem;
  313.   color: #212529;
  314.   text-align: left;
  315.   list-style: none;
  316.   background-color: #fff;
  317.   background-clip: padding-box;
  318.   border: 1px solid rgba(0,0,0,.15);
  319.   border-radius: .25rem;
  320. }
  322. .fa {
  324.   width: 18px;
  325.   text-align: center;
  326.   display: inline-block;
  327.   font: normal normal normal 14px/1 FontAwesome;
  328.   font-size: inherit;
  329.   text-rendering: auto;
  330.   -webkit-font-smoothing: antialiased;
  332. }
  334. .fa-columns{}
  336. a:hover{
  338.   text-decoration: underline;
  340. }
  342. .dropup{
  344.   margin : 2%;
  345. }
  347. /*  
  349.   Element de tableau
  351. */
  353. /*  
  355.   Taille normal
  357. */
  359. .table-cours{
  361.   table-layout: fixed; 
  362.   border-collapse: collapse; 
  363.   min-width: 700px;
  365. }
  367. th.id{
  369.   width : 5%;
  370.   
  372. }
  374. th.cours{
  376. min-width : 20%;
  377.   
  379. }
  381. th.ponderation{
  383.   width : 15%;
  384.   white-space: initial;  
  385.   word-wrap: break-word;
  386.   line-height: 1.5em;
  387.   
  389. }
  391. th.heure{
  393.   width : 10%;
  394.   
  396. }
  398. th.progression{
  400.   width : 30%;
  401.   
  403. }
  405. .deliberation-cours{
  407.   width : 5%;
  409. }
  412.        
  417. th.prof{
  419.   width : 30%;
  420.   
  422. }
  424. td.cours{
  426.   white-space: initial;  
  427.   word-wrap: break-word;
  428.   line-height: 1.5em;
  430. }
  432. th.cours{
  434.   white-space: initial;  
  435.   word-wrap: break-word;
  436.   line-height: 1.5em;
  438. }
  440. th.professeur{
  442.   white-space: initial;  
  443.   word-wrap: break-word;
  444.   line-height: 1.5em;
  445.   min-width : 10%;
  447. }
  449. td.professeur{
  451.   white-space: initial;  
  452.   word-wrap: break-word;
  453.   line-height: 1.5em;
  454.   min-width : 10%;
  456. }
  458. th.deliberation{
  460.   white-space: initial; 
  461.   word-wrap: break-word; 
  462.   line-height: 1.5em; 
  464. }
  465. th.cotes{
  467.   white-space: initial; 
  468.   word-wrap: break-word; 
  469.   line-height: 1.5em; 
  470.    width : 16%;
  472. }
  474. td.retour{
  476.   white-space: initial; 
  477.   word-wrap: break-word; 
  478.   line-height: 1.5em; 
  479.   min-width : 5%;
  481. }
  483. .money-cell{
  485.   text-align: right;
  486.   font-weight: bold;
  488. }
  490. .feuille-tp{
  492.   margin-top : 5%; 
  493.   box-shadow: 2px 2px 3px 3px #3e4b5b; 
  494.   padding : 2%; 
  495.   min-height : 400px; 
  496.   max-height : 300px; 
  497.   overflow-y: scroll;
  498.   margin-bottom : 10%;
  499. }
  503. .role-title{
  505.   font-weight: bold;
  507. }
  508.     
  509. .role-header{
  511.   font-weight: bold;
  513. }
  515. .menu-dash{
  516.   
  517.   width : 80%;
  518. }
  520. .feature-1 .wrap-icon {
  521.   margin: 0 auto;
  522.   height: 100px;
  523.   width: 100px;
  524.   border-radius: 50%;
  525.   position: relative;
  526.   margin-bottom: 30px;
  527.   box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.2);
  528.   display: inline-flex;
  529.   align-items: center;
  530.   justify-content: center;
  531. }
  532. .feature-1 .wrap-icon.icon-1 {
  533.   background: linear-gradient(-45deg, #3b87bd, #2d71a2);
  534. }
  535. .feature-1 .wrap-icon i {
  536.   font-size: 40px;
  537.   line-height: 0;
  538.   color: #fff;
  539. }
  540. .feature-1 h3 {
  541.   font-size: 20px;
  542. }
  543. .feature-1 p {
  544.   color: #b1b1b1;
  545. }
  548. .feature-2 .wrap-icon {
  549.   margin: 0 auto;
  550.   height: 100px;
  551.   width: 100px;
  552.   border-radius: 40%;
  553.   position: relative;
  554.   margin-bottom: 30px;
  555.   box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.2);
  556.   display: inline-flex;
  557.   align-items: center;
  558.   justify-content: center;
  559. }
  561. .feature-2 .wrap-icon i {
  562.   font-size: 40px;
  563.   line-height: 0;
  564.   color: #fff;
  565. }
  566. .feature-2 h3 {
  567.   font-size: 20px;
  568. }
  569. .feature-2 p {
  570.   color: #b1b1b1;
  571. }
  573. .mb-3{
  575.   font-family: "Poppins", sans-serif;
  576.   font-weight: bold;
  577. }
  579. .text-center{
  581.   text-align : justify;
  583. }
  585. .ligne-focus:hover, .ligne-focus:focus, .ligne-focus:active {
  586.   background: -webkit-gradient(linear, left top, right top, from(#e7ebf0), to(#868e96));
  587.   background: linear-gradient(to right, #e7ebf0, #868e96);
  588.   color: #000; }
  590. .membre-name{
  592.     text-transform: uppercase;
  593.     
  595. }
  596. @media (max-width: 600px) { 
  598.     .content-wrapper { padding : 0%; }
  599.     .card-body-mobile { margin-left : -5%; width : 110%; }
  600.     .table-scroll {overflow-x : auto;}
  601.     .table-scroll-y {overflow-y : auto;}
  602.     .cours-format-pdf {margin-top : 15%;}
  603.     .doggle-cours-enligne {margin: 2%}
  604.     .card-cours-enligne {width : 100%;}
  606. }
  608. .table-scroll-y{
  610.  overflow-y : auto 
  613. }
  615. @media (max-width: 800px) {
  616.     #unseen table td:nth-child(2),
  617.     #unseen table th:nth-child(2) {display: none;}
  618. }
  620.          </style>
  622.     </head>
  623.     <body onload="getNotification()">
  624.         <div class="container-scroller">
  625.           <!-- partial:../../partials/_navbar.html -->
  626.           <nav class="navbar default-layout-navbar col-lg-12 col-12 p-0 fixed-top d-flex flex-row">
  627.             <div class="text-center navbar-brand-wrapper d-flex align-items-center justify-content-center">
  628.               <a class="navbar-brand brand-logo" href="#"><img style="width : 80px; height : 50px;" src="{{ asset('images/icones/mlc.png')}}" alt="logo" /></a>
  629.               <a class="navbar-brand brand-logo-mini" href="#"><img src="{{ asset('images/icones/mlc.png')}}" alt="logo" /></a>
  630.             </div>
  631.             <div class="navbar-menu-wrapper d-flex align-items-stretch">
  632.               <button class="navbar-toggler navbar-toggler align-self-center" type="button" data-toggle="minimize">
  633.                 <span class="mdi mdi-menu"></span>
  634.               </button>
  635.               <div class="search-field d-none d-md-block">
  636.                 <form class="d-flex align-items-center h-100" action="#">
  637.                   <div class="input-group">
  638.                     <div class="input-group-prepend bg-transparent">
  639.                
  640.                     </div>
  641.                                      </div>
  642.                 </form>
  643.               </div>
  644.               <ul class="navbar-nav navbar-nav-right">
  645.                 <li class="nav-item nav-profile dropdown">
  646.                   <a class="nav-link dropdown-toggle" id="profileDropdown" href="#" data-toggle="dropdown" aria-expanded="false">
  647.                     <div class="nav-profile-img">
  649.               {% if app.user.membre != null %}
  651.                         {% if app.user.membre.photo == null or app.user.membre.photo == "" %}
  653.                         <img src="{{ asset('images/icones/mlc.png')}}" alt="profile">
  655.                       {% else %}
  657.                         <img class="image_ronde_grande" src="{{ asset('uploads/membres/photos/' ~ app.user.membre.photo ~ '')}}" class="img-radius wid-100 m-auto" alt="User-Profile-Image">
  660.                       {% endif %}
  662.               {% else %}
  664.                   <img src="{{ asset('images/icones/mlc.png')}}" alt="profile">
  667.               {% endif %}
  671.                       <span class="availability-status online"></span>
  672.                     </div>
  673.                     <div class="nav-profile-text">
  676.                       {% if app.user is defined %}
  678.                       {% if ('ROLE_ADMIN' in app.user.roles) or (is_granted('ROLE_ADMIN') )  %}
  680.                          <span class="font-weight-bold mb-2">{{ app.user.personne.nom }} {{ app.user.personne.prenom }}</span>
  681.                     
  682.                 
  683.   
  684.   
  685.                       {% elseif 'ROLE_USER' in app.user.roles  %}
  687.                          <span class="font-weight-bold mb-2">{{ app.user.personne.nom }} {{ app.user.personne.prenom }}</span>
  688.                     
  691.                       {% elseif 'ROLE_ADMIN_INTFEDERAL' in app.user.roles  %}
  693.                          
  694.                          <span class="font-weight-bold mb-2">{{ app.user.province.nom }}</span>
  695.                     
  696.                 
  699.                       {% elseif 'ROLE_ADMIN_FEDERAL' in app.user.roles  %}
  701.                          
  702.                          <span class="font-weight-bold mb-2">{{ app.user.federation.nom }}</span>
  703.                     
  704.                 
  705.   
  706.               
  707.   
  708.                       {% endif %}
  711.   
  712.                     {% endif %}
  714.                   
  718.                                  </div>
  719.                   </a>
  720.                   <div class="dropdown-menu navbar-dropdown" aria-labelledby="profileDropdown">
  721.                     <a class="dropdown-item" href="#">
  722.                       <i class="mdi mdi-cached mr-2 text-success"></i> Activity Log </a>
  723.                     <div class="dropdown-divider"></div>
  724.                     <a class="dropdown-item" href="{{path('app_logout')}}">
  725.                       <i class="mdi mdi-logout mr-2 text-primary"></i> Signout </a>
  726.                   </div>
  727.                 </li>
  728.                 <li class="nav-item d-none d-lg-block full-screen-link">
  729.                   <a class="nav-link">
  730.                     <i class="mdi mdi-fullscreen" id="fullscreen-button"></i>
  731.                   </a>
  732.                 </li>
  733.                 <li class="nav-item dropdown">
  734.                   <a class="nav-link count-indicator dropdown-toggle" id="messageDropdown" href="#" data-toggle="dropdown" aria-expanded="false">
  735.                     <i class="mdi mdi-email-outline"></i>
  736.                     <span class="count-symbol bg-warning"></span>
  737.                   </a>
  738.            
  739.                 </li>
  740.                 <li class="nav-item dropdown">
  741.                   <a class="nav-link count-indicator dropdown-toggle" id="notificationDropdown" href="#" data-toggle="dropdown">
  742.                     <i class="mdi mdi-bell-outline"></i>
  743.                     <span class="count-symbol bg-danger"></span>
  744.                   </a>
  745.                   <div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list" aria-labelledby="notificationDropdown">
  746.                     <h6 class="p-3 mb-0">Notifications</h6>
  748.                     {% if 'ROLE_ETUDIANT' in app.user.roles %}
  750.                       <p id="demo"> </p>
  752.                     {% endif %}
  754.                 </li>
  755.                 <li class="nav-item nav-logout d-none d-lg-block">
  756.                   <a class="nav-link" href="#">
  757.                     <i class="mdi mdi-power"></i>
  758.                   </a>
  759.                 </li>
  760.                 <li class="nav-item nav-settings d-none d-lg-block">
  761.                   <a class="nav-link" href="#">
  762.                     <i class="mdi mdi-format-line-spacing"></i>
  763.                   </a>
  764.                 </li>
  765.               </ul>
  766.               <button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button" data-toggle="offcanvas">
  767.                 <span class="mdi mdi-menu"></span>
  768.               </button>
  769.             </div>
  770.           </nav>
  771.           <!-- partial -->
  772.           <div class="container-fluid page-body-wrapper">
  773.             <!-- partial:../../partials/_sidebar.html -->
  774.             <nav class="sidebar sidebar-offcanvas" id="sidebar" style="">
  775.               <ul class="nav">
  776.                 <li class="nav-item nav-profile">
  778.                   <a href="#" class="nav-link">
  779.               
  780.                     <div class="nav-profile-image">
  782.           {% if app.user.membre != null %}
  784.             {% if app.user.membre.photo == null or app.user.membre.photo == "" %}
  786.               <img src="{{ asset('images/icones/mlc.png')}}" alt="profile">
  788.             {% else %}
  790.               <img class="image_ronde_grande" src="{{ asset('uploads/membres/photos/' ~ app.user.membre.photo ~ '')}}" class="img-radius wid-100 m-auto" alt="User-Profile-Image">
  793.             {% endif %}
  795.         {% else %}
  797.              <img src="{{ asset('images/icones/mlc.png')}}" alt="profile">
  799.         {% endif %}
  800.                       
  801.                       <span class="login-status online"></span>
  802.                       <!--change to offline or busy as needed-->
  803.                     </div>
  804.                     <div class="nav-profile-text d-flex flex-column">
  805.                            
  806.                     {% if app.user is defined %}
  808.                       {% if ('ROLE_ADMIN' in app.user.roles) or (is_granted('ROLE_ADMIN') )  %}
  810.                          <span class="font-weight-bold mb-2">{{ app.user.personne.nom }} {{ app.user.personne.prenom }}</span>
  811.                     
  812.                 
  813.   
  814.                         <span class="text-secondary text-small">Administrateur</span>
  815.   
  816.                       {% elseif 'ROLE_USER' in app.user.roles  %}
  818.                          <span class="font-weight-bold mb-2">{{ app.user.personne.nom }} {{ app.user.personne.prenom }}</span>
  819.                     
  820.                 
  821.   
  822.                         <span class="text-secondary text-small">Membre</span>
  825.                       {% elseif 'ROLE_ADMIN_INTFEDERAL' in app.user.roles  %}
  827.                          
  828.                          <span class="font-weight-bold mb-2">{{ app.user.province.nom }}</span>
  829.                     
  830.                 
  831.   
  832.                         <span class="text-secondary text-small">Admin Inter fédéral</span>
  833.   
  834.                       {% endif %}
  837.   
  838.                     {% endif %}
  840.                      
  841.                     
  842.                     
  843.                     </div>
  844.                     <i class="mdi mdi-bookmark-check text-success nav-profile-badge"></i>
  845.                   </a>
  846.                 </li>
  849.                 {% if app.user is defined %}
  851.                     {% if ('ROLE_ADMIN' in app.user.roles) or (is_granted('ROLE_ADMIN') ) %}
  853.                       {% include 'menu-admin.html.twig' %}
  855.                     {% elseif 'ROLE_ADMIN_INTFEDERAL' in app.user.roles %}
  857.                       {% include 'menu-intfederal.html.twig' %}
  859.                     {% elseif 'ROLE_ADMIN_FEDERAL' in app.user.roles %}
  861.                       {% include 'menu-federal.html.twig' %}
  863.                     {% else %}
  865.                       {% include 'menu-user.html.twig' %}
  867.                     {% endif %}
  869.                 {% endif %}
  870.               </ul>
  871.             </nav>
  872.             <!-- partial -->
  873.             <div class="main-panel" style="">
  874.               <div class="content-wrapper" >
  875.               
  876.             
  877.             
  878.             
  879.             
  880.             
  881.