e-Boks is a Danish provider of a digital inbox solution, where the public authorities and private sector companies can send messages to citizens or customers, typically as PDF documents. From the inbox these documents are opened in a fullscreen viewer.
However, the whitespace in the chrome of this viewer is taking up way too much precious screen real estate, thus hiding quite a large amount of the actual content.
e-Boks PDF viewer – original design:
Luckily, with a quick CSS fix, this whitespace can be minimized, as seen here:
If you have e-Boks, try it out yourself in Google Chrome:
/***********************************************************
Go to your personal e-Boks
Then try paste this CSS into Stylebot Chrome extension:
***********************************************************/
#CloseModal {
background-color: #eee;
}
#mailTitle {
font-size: 16px;
}
.elements-wrapper {
margin-bottom: 0;
}
.fullScreen .viewDocument .content {
padding-bottom: 0;
}
.ng-modal-dialog.fullScreen .modalContent {
padding: 0;
}
.ng-modal-dialog.fullScreen .modalContent .viewDocument .controls {
margin-bottom: 0;
}
.ng-modal-dialog.fullScreen .modalContent .viewDocument .elements-wrapper .modalHeader {
margin-bottom: 3px;
margin-top: 1px;
padding: 0;
}
.viewDocument .controls .control-item {
padding-bottom: 6px;
padding-top: 4px;
}
.viewDocument .controls .control-item a em {
top: 6px;
}
html-css redesign-case ux-critique