Skip to content

Q
question2answer
Commit 9f925e1e by Scott
Options

Fix sidebar placement on large mobile devices 

Inconsistency between media queries and qa_is_mobile_probably()
parent d3860445
Showing with 59 additions and 70 deletions
qa-theme/SnowFlat/qa-styles.css
...@@ -2727,74 +2727,60 @@ input[type="submit"], button { ...@@ -2727,74 +2727,60 @@ input[type="submit"], button {
display: none; display: none;
} }
@media (max-width: 767px) { #qam-sidepanel-toggle {
#qam-sidepanel-toggle { position: fixed;
position: fixed; bottom: 10px;
bottom: 10px; right: 0;
right: 0; text-align: center;
text-align: center; font-size: 24px;
font-size: 24px; background: #9b59b6;
background: #9b59b6; cursor: pointer;
cursor: pointer; transition: all 0.15s ease;
transition: all 0.15s ease; color: #95a5a6;
color: #95a5a6; opacity: 0.5;
opacity: 0.5; z-index: 999;
z-index: 999;
}
#qam-sidepanel-toggle.active {
opacity: 1;
color: #34495e;
right: 250px;
box-shadow: -5px 0 15px 0 rgba(0, 0, 0, 0.5);
}
#qam-sidepanel-toggle [class^="icon-"]:before, #qam-sidepanel-toggle [class*=" icon-"]:before {
line-height: 40px;
width: 30px;
height: 40px;
text-align: center;
color: #fff;
}
} }
@media (min-width: 980px) { #qam-sidepanel-toggle.active {
#qam-sidepanel-toggle { opacity: 1;
display: none; color: #34495e;
} right: 250px;
box-shadow: -5px 0 15px 0 rgba(0, 0, 0, 0.5);
}
#qam-sidepanel-toggle [class^="icon-"]:before, #qam-sidepanel-toggle [class*=" icon-"]:before {
line-height: 40px;
width: 30px;
height: 40px;
text-align: center;
color: #fff;
} }
.stick { #qam-sidepanel-mobile {
top: 10px !important; background: #fff;
position: fixed;
right: -250px;
top: 0;
height: 100%;
width: 250px;
overflow-y: auto;
z-index: 99999;
transition: all 0.15s ease; transition: all 0.15s ease;
box-shadow: 0 0 0 0 transparent;
}
#qam-sidepanel-mobile.open {
right: 0 !important;
transition: all 0.15s ease;
box-shadow: -5px 0 15px 0 rgba(0, 0, 0, 0.5);
} }
@media (max-width: 767px) {
#qam-sidepanel-mobile { .stick {
background: #fff; top: 10px !important;
position: fixed; transition: all 0.15s ease;
right: -250px;
top: 0;
height: 100%;
width: 250px;
overflow-y: auto;
z-index: 99999;
transition: all 0.15s ease;
box-shadow: 0 0 0 0 transparent;
}
#qam-sidepanel-mobile.open {
right: 0 !important;
transition: all 0.15s ease;
box-shadow: -5px 0 15px 0 rgba(0, 0, 0, 0.5);
}
} }
.qa-sidepanel h1, .qa-sidepanel h2, .qa-sidepanel h3, .qa-sidepanel h4, .qa-sidepanel h5, .qa-sidepanel h6 { .qa-sidepanel h1, .qa-sidepanel h2, .qa-sidepanel h3, .qa-sidepanel h4, .qa-sidepanel h5, .qa-sidepanel h6 {
margin-top: 0px; margin-top: 0px;
} }
@media (min-width: 980px) {
.qa-sidepanel {
overflow: hidden;
*zoom: 1;
}
}
.qa-sidepanel .qa-widget-side { .qa-sidepanel .qa-widget-side {
padding: 20px; padding: 20px;
margin-bottom: 5px; margin-bottom: 5px;
...@@ -3626,11 +3612,3 @@ input[type="submit"], button { ...@@ -3626,11 +3612,3 @@ input[type="submit"], button {
float: left; float: left;
} }
} }
@media (min-width: 980px) {
.qa-sidepanel {
width: 25%;
padding: 0px;
float: right;
}
}
qa-theme/SnowFlat/qa-theme.php
...@@ -90,7 +90,7 @@ class qa_html_theme extends qa_html_theme_base ...@@ -90,7 +90,7 @@ class qa_html_theme extends qa_html_theme_base
qa_html_theme_base::head_css(); qa_html_theme_base::head_css();
// output some dynamic CSS inline // output some dynamic CSS inline
$this->output($this->head_inline_css()); $this->head_inline_css();
} }
/** /**
...@@ -654,9 +654,9 @@ class qa_html_theme extends qa_html_theme_base ...@@ -654,9 +654,9 @@ class qa_html_theme extends qa_html_theme_base
$css .= ( (!qa_is_logged_in() ) ? '.qa-nav-user{margin:0 !important;}' : null ); $css .= ( (!qa_is_logged_in() ) ? '.qa-nav-user{margin:0 !important;}' : null );
if (qa_request_part(1) !== qa_get_logged_in_handle()) { if (qa_request_part(1) !== qa_get_logged_in_handle()) {
$css .= '@media (max-width: 979px){'; $css .= '@media (max-width: 979px){';
$css .= 'body.qa-template-user.fixed, body[class^="qa-template-user-"].fixed, body[class*="qa-template-user-"].fixed{'; $css .= ' body.qa-template-user.fixed, body[class^="qa-template-user-"].fixed, body[class*="qa-template-user-"].fixed {';
$css .= 'padding-top: 118px !important;'; $css .= ' padding-top: 118px !important;';
$css .= '}'; $css .= ' }';
$css .= '}'; $css .= '}';
$css .= '@media (max-width: 979px){body.qa-template-users.fixed{ $css .= '@media (max-width: 979px){body.qa-template-users.fixed{
padding-top: 95px !important; } padding-top: 95px !important; }
...@@ -665,9 +665,20 @@ class qa_html_theme extends qa_html_theme_base ...@@ -665,9 +665,20 @@ class qa_html_theme extends qa_html_theme_base
padding-top: 105px !important;} padding-top: 105px !important;}
}'; }';
} }
// sidebar styles for desktop (must use server-side UA detection, not media queries)
if (!qa_is_mobile_probably()) {
$css .= '.qa-sidepanel {';
$css .= ' width: 25%;';
$css .= ' padding: 0px;';
$css .= ' float: right;';
$css .= ' overflow: hidden;';
$css .= ' *zoom: 1;';
$css .= '}';
}
$css .= '</style>'; $css .= '</style>';
return $css; $this->output($css);
} }
/** /**
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment