Fixes style issues when the quizname input field is focused on mobile devices....

Fixes style issues when the quizname input field is focused on mobile devices. Refactors unnecessary style classes
parent 2a5c683a
Pipeline #16382 passed with stages
in 5 minutes and 35 seconds
......@@ -2,7 +2,7 @@
id="navbar-footer-container"
class="nav navbar-footer flex-nowrap flex-sm-column justify-content-sm-start p-1"
role="navigation">
<input class="hidden"
<input class="d-none"
id="upload-session"
type="file"
(change)="fileChange($event)"
......
......@@ -24,7 +24,7 @@
[class.btn-success]="autoJoinToGroup"
[class.btn-danger]="!autoJoinToGroup">
<input type="checkbox"
class="hidden"
class="d-none"
[attr.aria-label]="'component.answeroptions.description.is_correct' | translate"
autocomplete="off"
role="switch"
......
......@@ -31,7 +31,7 @@
[class.btn-danger]="!elem.enabled">
<input [id]="elem.id"
type="checkbox"
class="hidden"
class="d-none"
[attr.aria-label]="elem.configTitle | translate"
autocomplete="off"
role="switch"
......
......@@ -75,7 +75,7 @@
[class.btn-success]="config.volumeConfig.useGlobalVolume"
[class.btn-danger]="!config.volumeConfig.useGlobalVolume">
<input type="checkbox"
class="hidden"
class="d-none"
id="toggle-global-volume"
[attr.aria-label]="'component.answeroptions.description.multiple_selection_survey' | translate"
autocomplete="off"
......@@ -104,7 +104,7 @@
[class.btn-danger]="!config.enabled.lobby">
<input id="toggle-lobby-music"
type="checkbox"
class="hidden"
class="d-none"
[attr.aria-label]="'Activate/Deactivate Lobby Music Button'"
autocomplete="off"
role="switch"
......@@ -156,7 +156,7 @@
[class.btn-success]="config.enabled.countdownRunning"
[class.btn-danger]="!config.enabled.countdownRunning">
<input type="checkbox"
class="hidden"
class="d-none"
id="toggle-countdown-running-music"
[attr.aria-label]="'Activate/Deactivate Countdown Running Button'"
autocomplete="off"
......@@ -209,7 +209,7 @@
[class.btn-success]="config.enabled.countdownEnd"
[class.btn-danger]="!config.enabled.countdownEnd">
<input type="checkbox"
class="hidden"
class="d-none"
id="toggle-countdown-end-music"
[attr.aria-label]="'Activate/Deactivate Countdown End Button'"
autocomplete="off"
......
......@@ -30,7 +30,7 @@
id="collapse-quiz-name-datalist"
*ngIf="isShowingQuiznameDatalist"
(click)="hideQuiznameDatalist()">
&#x21E7;
<i class="fas fa-caret-up"></i>
</span>
<div class="list-group text-default d-none list-group-flush"
id="hashtag-input-data-list">
......@@ -123,10 +123,12 @@
<h4 class="text-warning text-center text-bold">{{hasErrors | translate}}</h4>
</div>
<div class="col-12 text-center mt-5"
*ngIf="!isShowingQuiznameDatalist"
id="demo-quiz-description">
<p>{{'component.hashtag_home.demo_quiz.title.3' | translate}}</p>
</div>
<div class="col-12 px-1 mb-5 mt-2 justify-content-center d-flex mathjax-container">
<div class="col-12 px-1 mb-5 mt-2 justify-content-center d-flex mathjax-container"
*ngIf="!isShowingQuiznameDatalist">
<ng-container *ngTemplateOutlet="mathjaxExample3"></ng-container>
</div>
</div>
......
......@@ -6,7 +6,7 @@
<div class="container-fluid"
style="height: 90vh;">
<div class="row flex-sm-nowrap h-100">
<div class="footer-bar-wrapper p-0 relative">
<div class="footer-bar-wrapper flex-grow-0 flex-shrink-0 p-0 relative">
<app-footer-bar [footerElements]="getFooterBarElements()"></app-footer-bar>
<div class="d-none d-md-block">
<router-outlet name="additionalData-md"
......
......@@ -3,18 +3,13 @@
#content-container {
@include media-breakpoint-down(xs) {
height: 80vh;
top: 20vh;
top: calc(10vh + 60px);
position: absolute;
z-index: 1050;
}
@include media-breakpoint-up(sm) {
height: 90vh;
&.is-phantom {
/* These are required for phantomjs to render the screenshot correctly */
margin: 0;
display: flex;
max-width: -webkit-calc(100% - 20%);
}
top: 20vh;
}
@include media-breakpoint-only(md) {
max-width: calc(#{map_get($container-max-widths, md)} - 20vw);
......@@ -28,19 +23,12 @@
}
.footer-bar-wrapper {
flex-shrink: 0;
flex-grow: 0;
@include media-breakpoint-only(xs) {
width: 100%;
height: 50px;
}
}
.hidden {
display: none !important;
}
.qr-code-element {
position: fixed;
width: 100%;
......
......@@ -102,10 +102,6 @@ img[alt*="emoji_"] {
#footer {
}
.hidden {
display: none;
}
@mixin placeholder-align-center {
text-align: center;
padding: 1.5rem 0;
......
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