Skip to content

Commit

Permalink
feat(theme istex responsive menu): responsive menu + triptyque ok
Browse files Browse the repository at this point in the history
  • Loading branch information
HeleneCreusot committed Dec 23, 2024
1 parent d3639f1 commit 18c101b
Show file tree
Hide file tree
Showing 4 changed files with 114 additions and 46 deletions.
5 changes: 3 additions & 2 deletions src/app/custom/themes/istex/css/istex-internalclass.css
Original file line number Diff line number Diff line change
Expand Up @@ -313,7 +313,8 @@ div.property[class*='BanniereDouble'] .property_value *:is(h1, h2, h3) {
/* triptyque */
/**************/
div.property[class*='Triptyque'] {
transform: translateY(-3.5rem);
transform: translateY(-2.5rem);
margin-bottom: -2.5rem;
}
div.property[class*='Triptyque'] div.MuiBox-root {
margin: 0 0;
Expand All @@ -335,7 +336,7 @@ div.property[class*='designHomeTriptyque'] .property[class*='compose'] {
width: 33.3%;
max-width: 400px;
color: var(--contrast-light);
height: 300px;
min-height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
Expand Down
90 changes: 73 additions & 17 deletions src/app/custom/themes/istex/css/istex.css
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,11 @@ body {
--white: #ffffff;
}
/*class pour header footer*/
.flexcol {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.flexrow {
display: flex;
flex-direction: row;
Expand Down Expand Up @@ -126,33 +131,40 @@ header {
top: 0;
background-color: var(--contrast-light);
font-family: 'Inter', sans-serif;
font-size: 0.625rem;
font-size: 0.825rem;
box-shadow:
0px 2px 4px -1px rgba(0, 0, 0, 0.2),
0px 4px 5px 0px rgba(0, 0, 0, 0.14),
0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}
.menuIstex > div {
justify-content: space-between;
text-transform: uppercase;
}
.accesIstex {
background-color: rgba(69, 140, 165, 0.2);
padding: 10px 30px;
}
.accesIstex img {
margin-right: 5px;
}
.menuIstex .menu-haut {
.menuIstex > ul.menu-haut {
list-style: none;
margin: 0;
margin: 0 auto;
height: 41px;
justify-content: flex-end;
align-items: flex-start;
text-transform: uppercase;
gap: 0;
}
.menuIstex ul li {
background-color: #ffffff;
padding: 11px 15px;
border-right: 1px solid var(--contrast-light);
font-weight: 300;
}
.accesIstex {
padding-left: 0 !important;
background-color: transparent !important;
flex: 1 0 auto;
}
.accesIstex a {
background-color: rgba(69, 140, 165, 0.2) !important;
padding: 13px 30px;
border: 0px solid rgba(69, 140, 165, 0.2);
}
.accesIstex img {
margin-right: 5px;
}
.menuIstex a {
text-decoration: none;
color: #434148;
Expand Down Expand Up @@ -739,6 +751,8 @@ li .facet-value-list .css-qtf05s-MuiButtonBase-root-MuiCheckbox-root {
/*****************************/
/* Responsive ***************/
/*****************************/
@media only screen and (max-width: 900px) {
}
@media screen and (max-width: 760px) {
.banner {
height: 130px;
Expand All @@ -747,9 +761,51 @@ li .facet-value-list .css-qtf05s-MuiButtonBase-root-MuiCheckbox-root {
height: 80%;
}
}
@media screen and (max-width: 576px) {
.menuIstex {
height: 68px;
@media screen and (max-width: 720px) {
.navigation-main.is-closed,
.navigation-main {
text-align: right;
}
.navigation-main.is-closed > .nav-button {
background: transparent url('../img/header/burger.svg') no-repeat center
center;
width: 34px;
height: 34px;
text-align: right;
}
.navigation-main > .nav-button {
background: transparent url('../img/header/cross.svg') no-repeat center
center;
width: 34px;
height: 34px;
}
.nav-button {
border: none;
cursor: pointer;
padding: 16px 30px;
}
.navigation-main.is-closed > ul.menu {
transform: translateX(-1000px);
transition: transform 0.25s;
will-change: transform;
}

.navigation-main > ul.menu {
position: absolute;
top: 34x;
right: 0;
height: calc(100vh - 164px);
width: 10vw;
background-color: #fff;
transform: translateX(0);
display: grid;
grid-template-rows: repeat(5, 20px) auto;
gap: 22px;
padding: 30px;
z-index: 50;
}
.navigation-main > ul.menu li {
border: 1px solid transparent;
}
.resource {
padding: 0 4rem !important;
Expand Down
13 changes: 7 additions & 6 deletions src/app/custom/themes/istex/index.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -27,13 +27,15 @@
</head>

<body>
<nav class="menuIstex" aria-label="Menu Istex">
<div class="container flexrow">
<a href="https://www.istex.fr" target="blank" class="accesIstex" title="accès Istex (lien externe)">
<nav id="navigation-main" class="menuIstex navigation-main" role="navigation" aria-label="Menu Istex">
<ul class="menu container menu-haut flexrow">
<li
class="accesIstex nav-main-item menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-2651">
<a href="https://www.istex.fr" target="blank" title="accès Istex (lien externe)">
<img src="<%= theme.current.href %>/img/header/leftarrow.png" alt=""> Accès
Istex.fr
</a>
<ul class="menu-haut flexrow">
</a>
</li>
<li
class="nav-main-item menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-2651">
<a class="nav-main-link" href="<%= custom.host %>" title="Accueil">Accueil</a>
Expand All @@ -51,7 +53,6 @@
title="Corpus spécialisés (lien externe)">Corpus spécialisés</a>
</li>
</ul>
</div>
</nav>
<header>
<div class="banner">
Expand Down
52 changes: 31 additions & 21 deletions src/app/custom/themes/istex/js/responsiveMenu.js
Original file line number Diff line number Diff line change
@@ -1,32 +1,42 @@
$(document).ready(function(){

$(document).ready(function () {
var maxBreakpoint = 900;
var minBreakpoint = maxBreakpoint + 1;
var minBreakpoint = maxBreakpoint + 1;
var targetID = 'navigation-main';
var triggerID = 'toggle-nav';
var n = document.getElementById(targetID);
n.classList.add('is-closed');
var freresvoyageurs = $(".contact").siblings();

/* var freresvoyageurs = $(".contact").siblings();*/

function navi() {
if (window.matchMedia("(max-width:" + maxBreakpoint +"px)").matches && document.getElementById(triggerID)==undefined) {
n.insertAdjacentHTML('afterBegin','<button id='+triggerID+' title="afficher le menu" class="nav-button"></button>');
t = document.getElementById(triggerID);
t.onclick=function(){ n.classList.toggle('is-closed');};

$('.menu').append(freresvoyageurs);
if (
window.matchMedia('(max-width:' + maxBreakpoint + 'px)').matches &&
document.getElementById(triggerID) == undefined
) {
n.insertAdjacentHTML(
'afterBegin',
'<button id=' +
triggerID +
' title="afficher le menu" class="nav-button"></button>',
);
t = document.getElementById(triggerID);
t.onclick = function () {
n.classList.toggle('is-closed');
};

/* $('.menu').append(freresvoyageurs);
$(freresvoyageurs).wrapAll( "<li class='new'></li>" );
$('.tt').removeClass("tooltipDessous");
}
if (window.matchMedia("(min-width: " + minBreakpoint +"px)").matches && document.getElementById(triggerID)) {
document.getElementById(triggerID).outerHTML="";
$(freresvoyageurs).unwrap();
$('.tt').removeClass("tooltipDessous");*/
}
if (
window.matchMedia('(min-width: ' + minBreakpoint + 'px)').matches &&
document.getElementById(triggerID)
) {
document.getElementById(triggerID).outerHTML = '';
/* $(freresvoyageurs).unwrap();
$('.interactions').prepend(freresvoyageurs);
$('.tt').addClass("tooltipDessous");

}
$('.tt').addClass("tooltipDessous");*/
}
}
navi();
window.addEventListener('resize', navi);
});
window.addEventListener('resize', navi);
});

0 comments on commit 18c101b

Please sign in to comment.