I am facing a challenge with hiding and displaying two aside divs to enable a fullscreen view of my central div main. The layout is created using flexbox to assign proportions, but when I try to redisplay the elements, it disrupts the original design. Below is the code snippet for handling the fullscreen feature, which involves DOM manipulation using d3.
function handlefullscreen(){
if(d3.select("#fullscreen").attr("data-selected") == 1){
d3.select("#fullscreen").attr("data-selected", 0);
d3.selectAll(".aside")
.style("display", "block")
.transition()
.ease(d3.easeCubic)
.duration("250")
.style("opacity", 1).on("end",
redraw);
} else{
previousWidth = document.getElementById('left').offsetWidth;
d3.select("#fullscreen").attr("data-selected", 1);
d3.selectAll(".aside")
.transition()
.ease(d3.easeCubic)
.duration("250")
.style("opacity", 0)
.on("end", function(){
d3.select(this).style("display", "none");
redraw();
});
}
}
The CSS below defines the properties for the flex elements:
.wrapper {
height: 100%;
margin: 0 -10px;
display: flex;
flex-flow: row wrap;
font-weight: bold;
text-align: center;
}
.wrapper > * {
padding: 0px;
}
.main {
background: #ffffff;
}
.aside-1 {
box-shadow:5px 1px 6px #4E565E;
background: #d8d8d8;
z-index: 1;
}
.aside-2 {
margin: 0 0px;
box-shadow:-5px 1px 6px #4E565E;
background: #d8d8d8;
}
@media all and (min-width: 600px) {
.aside { flex: 1 20%; }
}
@media all and (min-width: 800px) {
.main { flex: 3 60%; }
.aside-1 { order: 1; }
.main { order: 2; }
.aside-2 { order: 3; }
}