Skip to content

Fix side panel items visibility on mobile devices #119

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 2 commits into
base: master
Choose a base branch
from
Draft

Fix side panel items visibility on mobile devices #119

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
73a52b5
Fix side panel items visibility on mobile devices
Argeento Feb 16, 2018
733483f
Add hiding sidepanel in computer version
Patrycjerz Feb 21, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 42 additions & 46 deletions forum/qa-plugin/user-changeable-theme/user-theme-layer.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,58 +38,54 @@ public function head_lines()
$this->save_theme($_POST['select_theme']);
}
$this->content['head_lines'][] = '<style>
.widget-select-theme {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
.widget-select-theme {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}

.widget-select-theme__text {
margin: 0 10px 2px 0;
}
.widget-select-theme__text {
margin: 0 10px 2px 0;
}

.widget-select-theme__button {
background: none;
color: #34495e;
background: white;
border: 1px solid #34495e;
width: 80px;
padding: 10px 0;
transition: all 0.2s;
outline: none;
}
.widget-select-theme__button {
background: none;
color: #34495e;
background: white;
border: 1px solid #34495e;
width: 80px;
padding: 10px 0;
transition: all 0.2s;
outline: none;
}

.widget-select-theme__button--dark {
background: #34495e;
color: white;
border-left: none;
}
.widget-select-theme__button--dark {
background: #34495e;
color: white;
border-left: none;
}

.widget-select-theme__button--dark:hover, .widget-select-theme__button--dark:focus {
background: #1e2f40;
}
.widget-select-theme__button--dark:hover, .widget-select-theme__button--dark:focus {
background: #1e2f40;
}

.widget-select-theme__button--light {
pointer-events: none;
}
.widget-select-theme__button--light {
pointer-events: none;
}

/* force to display theme buttons (mobile) */
@media (max-width: 1179px) {
.qa-sidepanel {
width: 100% !important;
display: block !important;
}

.qa-sidepanel > div:not(.qa-widgets-side-bottom) {
display: none;
}
}
/* force to display theme buttons (mobile) */
@media (max-width: 1179px) {
.qa-sidepanel {
width: 100% !important;
display: block !important;
}
}
Copy link
Contributor

@Patrycjerz Patrycjerz Feb 17, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tak jak mówiłem wcześniej @Argeento, w wersji komputerowej pojawia się brzydkie rozciągnięte menu na dole strony, gdy jest ona zwężona. Oczywiście to nie jest bardzo znacząca wada, prawie nikt na to i tak nie spojrzy, no ale wg mnie lepiej nie eksponować takich niedoróbek. Na pewien czas (zanim się nie dorobimy prawdziwego RWD) można dodać warunek z funkcją qa_is_mobile_probably() i wg niego dodawać to display: none. Za niedługo spróbuję wrzucić commita to poprawiającego.

</style>';
}
qa_html_theme_base::head_lines();
Expand Down