In Susper, the Information and Analytics boxes disappeared for widths smaller than 1100px, since they were too big to fit in the existing page layout.
In Laptop view:
In Mobile view:
Hence we decided to design a new Info-cum-Analytics box for mobile devices, where the Analytics are displayed only if the ‘Show Analytics’ button is clicked and they are hidden on clicking the ‘Hide Analytics’ button.
The following is the html code for the Infobox:
<app–infobox></app-infobox>
<button class=“btn” id=“toggle-button” (click)=“BoxToggle()” type=“button” data–toggle=“collapse” data–target=“#statbox” aria–expanded=“false” aria–controls=“collapseExample”>
{{boxMessage}} Analytics
</button>
<app–statsbox class=“collapse” id=“statbox”></app-statsbox>
</div>
We can make the following observations:
- The combo box has both the Info and the Stats box, in addition to a button, which toggles the display status of the Analytics box.
- To display the appropriate message on the button, we have a special function called BoxToggle() which sets the value of boxMessage()
- The data-toggle attribute of the button has been set to collapse and the data-target is statbox
- The statsbox has the class collapse, so that it collapses on clicking on the Toggle button.
The typescript code is as follows:
if (this.boxMessage === ‘Show’) {
this.boxMessage = ‘Hide’;
} else {
this.boxMessage = ‘Show’;
}
}
This code thus effectively toggles between the messages Show and Hide, if the button is clicked when the message says Show, it changes to Hide and vice-versa
The CSS code:
div.combo-box {
display: none;
}
}
The css code ensures that this combo-box is displayed only for widths less than 768px (only mobile and tablet screens).
To view the entire code you can check results.component.html and results.component.css in the Susper repository.
References
- W3 Schools for Collapsible buttons and their implementation: https://www.w3schools.com/bootstrap/bootstrap_collapse.asp
- Official Bootstrap documentation for collapsible buttons: https://v4-alpha.getbootstrap.com/components/collapse/