From 1eac4471d52b53dd68c3a565fe4e6d0a7c8b4b24 Mon Sep 17 00:00:00 2001
From: Alex ORLUC <alex.orluc@maarch.org>
Date: Fri, 5 Oct 2018 18:09:03 +0200
Subject: [PATCH] FEAT #8526 adapt css header with v2 style
---
apps/maarch_entreprise/css/styles.css | 58 +++++----
apps/maarch_entreprise/template/header.html | 136 +++++++++++---------
2 files changed, 111 insertions(+), 83 deletions(-)
diff --git a/apps/maarch_entreprise/css/styles.css b/apps/maarch_entreprise/css/styles.css
index 597552c774d..0ef8e407e08 100755
--- a/apps/maarch_entreprise/css/styles.css
+++ b/apps/maarch_entreprise/css/styles.css
@@ -1401,7 +1401,7 @@ th.ref {
cursor: pointer;
}
-#menunav {
+.menunav {
overflow: hidden;
width: 260px;
background: #F2F2F2;
@@ -1411,29 +1411,28 @@ th.ref {
z-index: 10;
margin: 0px;
border: 2px solid #135F7F;
- top: 28px;
- border-bottom: none;
+ top: 45px;
border-top: solid 3px #135F7F;
}
-#menunav li {
+.menunav li {
padding-left: 3px;
margin-bottom: 5px;
}
-#menunav li a {
+.menunav li a {
padding-right: 3px;
color: #135F7F;
display: block;
position: relative;
}
-#menunav li span {
+.menunav li span {
display: block;
padding-left: 3px;
}
-#menunav li span span {
+.menunav li span span {
background: transparent bottom left no-repeat;
/*padding: 6px 10px 5px 30px;*/
display: inline;
@@ -1441,42 +1440,42 @@ th.ref {
margin: 0px;
}
-#menunav li.on {
+.menunav li.on {
padding-left: 3px;
}
-#menunav li.on a {
+.menunav li.on a {
color: white;
text-decoration: none;
}
-#menunav li.on span {
+.menunav li.on span {
background: #135F7F;
}
-#menunav li ol {
+.menunav li ol {
font-size: .9em;
}
-#menunav li ol {
+.menunav li ol {
display: none;
}
-#menunav ol li {
+.menunav ol li {
padding-bottom: 2px;
margin-bottom: 0;
}
-#menunav ol li, #menunav ol li a, #menunav ol li a span span, #menunav ol li a span, #menunav li.on ol li, #menunav li.on ol li a, #menunav li.on ol li a span, #menunav li.on ol li a span span {
+.menunav ol li, .menunav ol li a, .menunav ol li a span span, .menunav ol li a span, .menunav li.on ol li, .menunav li.on ol li a, .menunav li.on ol li a span, .menunav li.on ol li a span span {
background-image: none;
}
-#menunav li ol li a, #menunav li.on ol li a {
+.menunav li ol li a, .menunav li.on ol li a {
color: #135F7F;
display: inline;
}
-#menunav li ol li a:hover {
+.menunav li ol li a:hover {
text-decoration: underline;
}
@@ -1486,11 +1485,12 @@ th.ref {
#ariane {
color: White;
position: absolute;
- left: 15px;
- top: 0px;
+ position: absolute;
+ margin: 0px;
+ left: 170px;
+ top: 5px;
font-size: 0.9em;
height: 18px;
- margin-top: 10px;
}
@@ -1525,8 +1525,9 @@ th.ref {
}
#content h1 {
- color: #135F7F;
- /*font-style: italic;*/
+ display: flex;
+ align-items: center;
+ color: white;
font-weight: bold;
font-size: 1.3em;
text-align: left;
@@ -1535,10 +1536,13 @@ th.ref {
position: absolute;
padding: 0px;
top: 38px;
- left: 280px;
- /*width: 80%;*/
+ left: 200px;
width: auto;
}
+#content h1 i {
+ padding-right: 5px;
+
+}
#nav h1 {
color: #135F7F;
font-style: italic;
@@ -3731,3 +3735,11 @@ width:auto;
height:auto;
width:auto;
}
+
+.maarchToolButton {
+ padding: 10px;
+}
+.maarchToolButton:hover {
+ transition: background-color 0.5s ease;
+ background-color: rgba(0,0,0,.12);
+}
\ No newline at end of file
diff --git a/apps/maarch_entreprise/template/header.html b/apps/maarch_entreprise/template/header.html
index 0d759ba9bf4..3baa64dc701 100755
--- a/apps/maarch_entreprise/template/header.html
+++ b/apps/maarch_entreprise/template/header.html
@@ -1,63 +1,79 @@
- <div id="header">
- <div id="nav">
- <div id="header_username" style="position:absolute;text-align:center;left:45%;font-size: 1.3em;top: 6px;color: white; font-size:14px; line-height: 1; font-family:Verdana,Geneva,Arial,Helvetica,sans-serif">
- <?php
- $strUserInfos = $_SESSION['user']['FirstName']." ".$_SESSION['user']['LastName'];
- $userGroups = \User\models\UserModel::getGroupsByUserId(['userId'=> $_SESSION['user']['UserId']]);
-
- if(!empty($userGroups)){
- if(count($userGroups)>=2){
- $strGroupList=" ";
- for($i=0;$i<count($userGroups);$i++){
- if($i==count($userGroups)-1){
- $strGroupList.=$userGroups[$i]['group_desc'];
- } else {
- $strGroupList.=$userGroups[$i]['group_desc']."<br><br>";
- }
- }
- $strUserInfos .= ' <div id="header_usergroups" class="header_usergroups" title="'.$strGroupList.'" style="display:inline-block;">('.count($userGroups).' groupes)</div>';
- }else{
- $strUserInfos .= ' ('.$userGroups[0]['group_desc'].')';
- }
- }
- echo $strUserInfos; ?>
- </div>
- <script>
- $j(".header_usergroups").tooltipster({
- delay: 0,
- contentAsHTML: true
- });
- </script>
- <div id="menu" onmouseover="ShowHideMenu('menunav','on');" onmouseout="ShowHideMenu('menunav','off');" class="off">
- <p>
- <span style="background:url(static.php?filename=logo_only_white.svg);background-position: 20px -4px;background-size:25%;background-repeat: no-repeat;height: 30px;font-weight: bold;width: 85px;display: block;font-size: 23px;padding-left: 65px;top: 38px;color: #ffffff;">
- <?php echo _MENU; ?>
- </span>
- </p>
- <div id="menunav" style="display: none;">
- <div class="header_menu_blank"> </div>
- <ul>
- <?php
- //here we building the maarch menu
- $core->build_menu($_SESSION['menu']);
- ?>
- </ul>
- <div class="header_menu_blank"> </div>
- <div class="footer_menu">
- <span style="color:white;float:left;">
- <?php echo $_SESSION['config']['applicationname']; ?>
- </span>
- <a onclick="triggerAngular('#/about-us')" style="cursor: pointer;color:white;float:right;"><?php echo _MAARCH_CREDITS ;?></a>
- <div style="clear:both;"></div>
- </div>
- </div>
- </div>
- <div>
- <p id="ariane"></p>
- </div>
- <p id="gauchemenu"></p>
+<div id="header">
+ <div id="nav">
+ <div><p id="ariane"></p></div>
+ <div style="display:flex;padding-left: 20px;padding-right: 20px;height:100%;">
<a href="index.php">
- <p id="logo"></p>
+ <div style="background: url(static.php?filename=logo_white.svg) #135F7F;background-size: 80%;background-position: center;background-repeat: no-repeat;width: 140px;height: 100%;">
+ </div>
</a>
+ <div style="justify-content: flex-end;display: flex;width: 100%;color: white;align-items: center;">
+ <span class="maarchToolButton" style="padding-left:10px;padding-right:10px;position: relative;">
+ <i class="fa fa-th fa-2x" style="cursor:pointer;font-size: 16px;" onclick="$j('#menunav').slideToggle('fast');event.stopPropagation();" title="Menu"></i>
+ <div id="menunav" class="menunav" style="left: -225px;display:none;">
+ <div class="footer_menu">
+ <span style="color:white;float:left;">
+ MENU
+ </span>
+
+ <div style="clear:both;"></div>
+ </div>
+ <div class="header_menu_blank"> </div>
+ <ul>
+ <?php
+ //here we building the maarch menu
+ $core->build_menu($_SESSION['menu']);
+ ?>
+ </ul>
+ <div class="header_menu_blank"> </div>
+ <div class="footer_menu">
+ <span style="color:white;float:left;">
+ <?php echo $_SESSION['config']['applicationname']; ?>
+ </span>
+ <a onclick="triggerAngular('#/about-us')" style="cursor: pointer;color:white;float:right;"><?php echo _MAARCH_CREDITS ;?></a>
+ <div style="clear:both;"></div>
+ </div>
+ </div>
+ <script>
+ $j(window).click(function(event) {
+ if ($j('#menunav').css('display') != 'none') {
+ $j('#menunav').slideToggle('fast');
+ }
+ if ($j('#profilenav').css('display') != 'none') {
+ $j('#profilenav').slideToggle('fast');
+ }
+ });
+ </script>
+ </span>
+ <span class="maarchToolButton" style="padding-left:10px;padding-right:10px;font-size: 14px;text-align: center;display: flex;align-items: center;position: relative;cursor:pointer;" onclick="$j('#profilenav').slideToggle('fast');event.stopPropagation();" title="Mes groupes">
+ <?php
+ $strUserInfos = '<i class="fa fa-user fa-2x" style="padding-right:5px;"></i> ' . $_SESSION['user']['FirstName'][0].". ".$_SESSION['user']['LastName'];
+ echo $strUserInfos; ?>
+ <div id="profilenav" class="menunav" style="left: -155px;display:none;">
+ <div class="footer_menu">
+ <span style="color:white;float:left;">
+ Groupes
+ </span>
+
+ <div style="clear:both;"></div>
+ </div>
+ <div class="header_menu_blank"> </div>
+ <ul style="color:#666;">
+ <?php
+ $userGroups = \User\models\UserModel::getGroupsByUserId(['userId'=> $_SESSION['user']['UserId']]);
+
+ if(!empty($userGroups)){
+ for($i=0;$i<count($userGroups);$i++){
+ $strGrpInfos .= '<li>'.$userGroups[$i]['group_desc'].'</li>';
+ }
+ }
+ echo $strGrpInfos;
+ ?>
+ </ul>
+ <div class="header_menu_blank"> </div>
+ </div>
+ </span>
+ </div>
</div>
- </div>
\ No newline at end of file
+
+ </div>
+</div>
\ No newline at end of file
--
GitLab