Skip to content
Snippets Groups Projects
Verified Commit 1eac4471 authored by Alex ORLUC's avatar Alex ORLUC
Browse files

FEAT #8526 adapt css header with v2 style

parent f01321d1
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
apps/maarch_entreprise/css/styles.css
+ 35
− 23
View file @ 1eac4471
...@@ -1401,7 +1401,7 @@ th.ref { ...@@ -1401,7 +1401,7 @@ th.ref {
cursor: pointer; cursor: pointer;
} }
#menunav { .menunav {
overflow: hidden; overflow: hidden;
width: 260px; width: 260px;
background: #F2F2F2; background: #F2F2F2;
...@@ -1411,29 +1411,28 @@ th.ref { ...@@ -1411,29 +1411,28 @@ th.ref {
z-index: 10; z-index: 10;
margin: 0px; margin: 0px;
border: 2px solid #135F7F; border: 2px solid #135F7F;
top: 28px; top: 45px;
border-bottom: none;
border-top: solid 3px #135F7F; border-top: solid 3px #135F7F;
} }
#menunav li { .menunav li {
padding-left: 3px; padding-left: 3px;
margin-bottom: 5px; margin-bottom: 5px;
} }
#menunav li a { .menunav li a {
padding-right: 3px; padding-right: 3px;
color: #135F7F; color: #135F7F;
display: block; display: block;
position: relative; position: relative;
} }
#menunav li span { .menunav li span {
display: block; display: block;
padding-left: 3px; padding-left: 3px;
} }
#menunav li span span { .menunav li span span {
background: transparent bottom left no-repeat; background: transparent bottom left no-repeat;
/*padding: 6px 10px 5px 30px;*/ /*padding: 6px 10px 5px 30px;*/
display: inline; display: inline;
...@@ -1441,42 +1440,42 @@ th.ref { ...@@ -1441,42 +1440,42 @@ th.ref {
margin: 0px; margin: 0px;
} }
#menunav li.on { .menunav li.on {
padding-left: 3px; padding-left: 3px;
} }
#menunav li.on a { .menunav li.on a {
color: white; color: white;
text-decoration: none; text-decoration: none;
} }
#menunav li.on span { .menunav li.on span {
background: #135F7F; background: #135F7F;
} }
#menunav li ol { .menunav li ol {
font-size: .9em; font-size: .9em;
} }
#menunav li ol { .menunav li ol {
display: none; display: none;
} }
#menunav ol li { .menunav ol li {
padding-bottom: 2px; padding-bottom: 2px;
margin-bottom: 0; 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; 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; color: #135F7F;
display: inline; display: inline;
} }
#menunav li ol li a:hover { .menunav li ol li a:hover {
text-decoration: underline; text-decoration: underline;
} }
...@@ -1486,11 +1485,12 @@ th.ref { ...@@ -1486,11 +1485,12 @@ th.ref {
#ariane { #ariane {
color: White; color: White;
position: absolute; position: absolute;
left: 15px; position: absolute;
top: 0px; margin: 0px;
left: 170px;
top: 5px;
font-size: 0.9em; font-size: 0.9em;
height: 18px; height: 18px;
margin-top: 10px;
} }
...@@ -1525,8 +1525,9 @@ th.ref { ...@@ -1525,8 +1525,9 @@ th.ref {
} }
#content h1 { #content h1 {
color: #135F7F; display: flex;
/*font-style: italic;*/ align-items: center;
color: white;
font-weight: bold; font-weight: bold;
font-size: 1.3em; font-size: 1.3em;
text-align: left; text-align: left;
...@@ -1535,10 +1536,13 @@ th.ref { ...@@ -1535,10 +1536,13 @@ th.ref {
position: absolute; position: absolute;
padding: 0px; padding: 0px;
top: 38px; top: 38px;
left: 280px; left: 200px;
/*width: 80%;*/
width: auto; width: auto;
} }
#content h1 i {
padding-right: 5px;
}
#nav h1 { #nav h1 {
color: #135F7F; color: #135F7F;
font-style: italic; font-style: italic;
...@@ -3731,3 +3735,11 @@ width:auto; ...@@ -3731,3 +3735,11 @@ width:auto;
height:auto; height:auto;
width: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
apps/maarch_entreprise/template/header.html
+ 76
− 60
View file @ 1eac4471
<div id="header"> <div id="header">
<div id="nav"> <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"> <div><p id="ariane"></p></div>
<?php <div style="display:flex;padding-left: 20px;padding-right: 20px;height:100%;">
$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">&nbsp;</div>
<ul>
<?php
//here we building the maarch menu
$core->build_menu($_SESSION['menu']);
?>
</ul>
<div class="header_menu_blank">&nbsp;</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>
<a href="index.php"> <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> </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">&nbsp;</div>
<ul>
<?php
//here we building the maarch menu
$core->build_menu($_SESSION['menu']);
?>
</ul>
<div class="header_menu_blank">&nbsp;</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">&nbsp;</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">&nbsp;</div>
</div>
</span>
</div>
</div> </div>
</div>
\ No newline at end of file </div>
</div>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment