I have found that Confluence Mobile is incredibly limiting and doesn't even allow the viewing of macros from it. So i have worked on making our site mobile friendly using a few items. I would like any input that users have or anything that i may have overlooked.
Also check out the WCAG Compliance ticket to find my other post which you can use JavaScript and CSS to meet WCAG AA (and 508).
This is intended to convert Confluence to a Responsive Design rather than requiring the use of the Confluence Mobile
Meta Tag
All the page width content to be updated for mobile devices
Add to Custom HTML Head
<meta name="viewport" content="width=device-width">
Media Queries
Add to Global Stylesheet
/* Breakpoints */
@media (max-width:935px) {
/* Fix Search Results Page */
#search-results-header #query-string {
width: 85%;
}
#search-results-header {
padding: 10px 10px 0px 22px;
}
#space-list .labels-heading, #space-list .space-list-item .space-labels, #space-list .space-list-item .entity-info-icon {
display: none;
}
}
@media (max-width:760px) {
/* Allow the column Macro to stack on resize */
.columnMacro.conf-macro.output-block {
float: left;
clear: both;
width: 100% !important;
min-width: unset !important;
max-width: 95% !important;
}
form input#quick-search-query {
width: 15px;
background: unset;
}
input#quick-search-query:focus {
width: 150px;
}
.aui-header .aui-quicksearch:after {
font-size: 20px;
height: 24px;
margin-top: 7px;
width: 24px;
}
.aui-dd-parent.quick-nav-drop-down {
top: 40px;
right: -163px;
}
.search-results-page-panel-nav {
width: 150px;
}
/* Sidebar Adjustments */
.collapsed .space-tools-section {
height: 40px;
}
.aui-sidebar-footer {
height: 0px;
min-height: unset;
padding: unset;
}
a.expand-collapse-trigger, a.aui-sidebar-toggle, .aui-sidebar-handle, div.aui-sidebar-footer {
display: none;
}
.collapsed .acs-side-bar {
bottom: 40px;
}
#footer:not(#footer.login-page) {
margin-left: 55px !important;
}
#footer.login-page {
margin-left: unset !important;
}
#space-search {
width: 180px;
}
#space-directory {
min-width: 30px;
width: 10%;
}
#space-list .desc-heading, #space-list .labels-heading, #space-list .space-list-item .space-desc, #space-list .space-list-item .space-labels, #space-list .space-list-item .entity-info-icon {
display: none;
}
#space-list .space-name {
min-width: unset;
word-wrap: break-word;
}
}
@media (max-width:600px) {
#space-search {
margin-top: 40px;
width: 250px;
}
#space-directory {
min-width: 30px;
width: 10%;
}
#space-list .desc-heading, #space-list .labels-heading, #space-list .space-list-item .entity-logo, #space-list .space-list-item .space-desc, #space-list .space-list-item .space-labels, #space-list .space-list-item .entity-info-icon {
display: none;
}
table#space-list {
margin-top: 50px;
}
#space-list .space-name {
min-width: unset;
word-wrap: break-word;
}
}
/* Logo Breakpoint Remove Text Before Site Icon */
@media (max-width: 600px) {
#logo span {
display: none;
}
}
Style Modifications
Some adjustments are required to give a minimum page width and make img tags be responsive.
Add to Global Style Sheet
/* Mobile Responsive Design */
body:not(.login) {
min-width: 460px;
}
h1#title-text {
word-break: break-word;
}
.wiki-content .innerCell {
overflow-x: unset;
}
img:not(.cp-img) {
max-width: 100% !important;
height: auto !important;
}
.cp-image-container {
width: 100% !important;
}
@media screen and (min-width: 1600px) {
table.attachments th.comment, table.attachments th.labels {
width: unset !important;
}
}
JQuery
Make the sidebar start collapsed so that the sidebar doesn't break the webpage.
Add to Custom HTML Head in a script tag.
$(document).ready(function(){
<!-- Fix Sidebar Expand -->
$('.expand-collapse-trigger').prop('tabindex','0');
$(function(){
$('.expand-collapse-trigger').keypress(function (e) {
if (e.keyCode == 13) {
$('.expand-collapse-trigger').click();
}
});
});
$("div.confluence-dashboard #nav-sidebar").focusin(function(){
if ($('div.confluence-dashboard #nav-sidebar').attr('aria-expanded') === "false") {
$('.aui-sidebar-footer-tipsy').click();
}
});
$("div.ia-fixed-sidebar.collapsed .space-logo a").focusin(function(){
$('.expand-collapse-trigger').click();
});
});
Disable Sidebar Drag and Expand Button
JQuery to permanently disable it
@media (max-width:760px) {
/* Sidebar Adjustments */
.collapsed .space-tools-section {
height: 40px;
}
.aui-sidebar-footer {
height: 0px;
min-height: unset;
padding: unset;
}
a.expand-collapse-trigger, a.aui-sidebar-toggle, .aui-sidebar-handle, div.aui-sidebar-footer {
display: none;
}
.collapsed .acs-side-bar {
bottom: 40px;
}
}
