Skip to content
This repository was archived by the owner on May 16, 2019. It is now read-only.

Commit b616de2

Browse files
jjeffryesjjeffryes
committed
Fix about modal and pagenav menus
1 parent 48a34ff commit b616de2

File tree

6 files changed

+49
-40
lines changed

6 files changed

+49
-40
lines changed

‎css/obBase.css‎

Lines changed: 28 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -192,7 +192,6 @@ form {
192192
}
193193

194194
#contentFrame {
195-
overflow: hidden;
196195
height: 100%;
197196
width: 100%;
198197
position: relative;
@@ -225,6 +224,7 @@ form {
225224
#obContainer.modalOpen,
226225
#obContainer.innerModalOpen {
227226
overflow: hidden;
227+
/* obContainer must also be set to scrollTop(0), otherwise the modal may be scrolled out of place */
228228
}
229229

230230
#obContainer.modalOpen #content {
@@ -3408,16 +3408,9 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
34083408
.popMenu-notifications {
34093409
top: 100%;
34103410
right: 45px;
3411-
background-color: #252525;
3412-
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.60);
3413-
border-bottom-left-radius: 4px;
3414-
border-bottom-right-radius: 4px;
3415-
color: #fff;
3416-
font-size: 15px;
3417-
padding: 0;
34183411
width: 390px;
3419-
transform: translateY(-110%);
3420-
transition: transform 200ms;
3412+
overflow: hidden;
3413+
pointer-events: none;
34213414
}
34223415

34233416
.popMenu-notificationsHeader {
@@ -3430,8 +3423,9 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
34303423
padding: 0 15px;
34313424
}
34323425

3433-
.popMenu-notifications.popMenu-opened {
3426+
.popMenu-notifications.popMenu-opened #notificationsPanel {
34343427
transform: translateY(0);
3428+
pointer-events: all;
34353429
}
34363430

34373431
.notification .rowItem {
@@ -3491,21 +3485,15 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
34913485
}
34923486

34933487
.popMenu-navBar {
3494-
bottom: 0;
3488+
top: 100%;
34953489
right: 10px;
34963490
width: 100%;
3497-
transform: none;
3498-
transition: none;
3499-
}
3500-
3501-
.popMenu-navBar.popMenu-opened {
3502-
transform: none;
3491+
pointer-events: none;
3492+
overflow: hidden;
35033493
}
35043494

35053495
.popMenu-navBarSubMenu {
3506-
position: absolute;
3507-
top: 0;
3508-
right: 0;
3496+
float: right;
35093497
background-color: #252525;
35103498
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.60);
35113499
border-bottom-left-radius: 4px;
@@ -3527,6 +3515,7 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
35273515
.popMenu-opened .popMenu-navBarSubMenu-pageNav,
35283516
.popMenu-navBarSubMenu-servers.server-submenu-opened {
35293517
transform: translateY(0);
3518+
pointer-events: all;
35303519
}
35313520

35323521
.popMenu-navBar a {
@@ -3582,6 +3571,17 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
35823571
padding-top: 10px;
35833572
}
35843573

3574+
#notificationsPanel {
3575+
background-color: #252525;
3576+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.60);
3577+
border-bottom-left-radius: 4px;
3578+
border-bottom-right-radius: 4px;
3579+
color: #fff;
3580+
font-size: 15px;
3581+
transform: translateY(-110%);
3582+
transition: transform 200ms;
3583+
}
3584+
35853585
#notificationsPanel .popMenu-notificationsContent {
35863586
overflow-y: scroll;
35873587
overflow-x: hidden;
@@ -4335,6 +4335,13 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
43354335
pointer-events: none;
43364336
}
43374337
4338+
#pageNav .modalHolder {
4339+
/* patch for the about modal. It should be moved to the baseModal view */
4340+
position: fixed;
4341+
z-index: 1;
4342+
top: 74px;
4343+
}
4344+
43384345
#messageModal {
43394346
z-index: 9;
43404347
}

‎index.html‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -13,20 +13,8 @@
1313
<body>
1414

1515
<div id="appFrame">
16-
<div id="appBar" class="top0 alignCenter custCol-secondary"></div>
1716

18-
<div id="loadingModal" class="modal modal-opaque modal-fullscreen js-loadingModal hide">
19-
<div class="spinner-with-logo fullCentered">
20-
<i class="ion-android-sync spinner fontSize30 spinner-with-logo-icon"></i>
21-
</div>
22-
<div id="loadingModalContent">
23-
<p class="fontSize16 js-translate" data-translate="errorMessages.loadingViewError"></p>
24-
<div id="loadingModalBtns">
25-
<a class="btn btn-large marginRight10 custCol-secondary custCol-text js-indexReload"><i class="ion-android-sync"></i> <span class="js-translate" data-translate="Reload"></span></a>
26-
<a class="btn btn-large custCol-secondary custCol-text" href="#home"><i class="ion-eye"></i> <span class="js-translate" data-translate="LoadIndex"></span></a>
27-
</div>
28-
</div>
29-
</div>
17+
<div id="appBar" class="top0 alignCenter custCol-secondary"></div>
3018

3119
<div id="contentFrame">
3220

@@ -71,6 +59,20 @@ <h2 class="ion-android-close custCol-text clickable"></h2>
7159
</div>
7260

7361
</div>
62+
63+
<div id="loadingModal" class="modal modal-opaque modal-fullscreen js-loadingModal hide">
64+
<div class="spinner-with-logo fullCentered">
65+
<i class="ion-android-sync spinner fontSize30 spinner-with-logo-icon"></i>
66+
</div>
67+
<div id="loadingModalContent">
68+
<p class="fontSize16 js-translate" data-translate="errorMessages.loadingViewError"></p>
69+
<div id="loadingModalBtns">
70+
<a class="btn btn-large marginRight10 custCol-secondary custCol-text js-indexReload"><i class="ion-android-sync"></i> <span class="js-translate" data-translate="Reload"></span></a>
71+
<a class="btn btn-large custCol-secondary custCol-text" href="#home"><i class="ion-eye"></i> <span class="js-translate" data-translate="LoadIndex"></span></a>
72+
</div>
73+
</div>
74+
</div>
75+
7476
</div>
7577

7678

‎js/views/itemVw.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ module.exports = baseVw.extend({
141141
// we need to append colorbox to obContainer to prevent it from covering the header
142142
$("#colorbox").appendTo("#obContainer");
143143
$("#cboxOverlay").appendTo("#obContainer");
144-
$('#obContainer').addClass('modalOpen');
144+
$('#obContainer').addClass('modalOpen').scrollTop(0);
145145
},
146146
onClosed: function(){
147147
$('#obContainer').removeClass('modalOpen');
@@ -177,7 +177,7 @@ module.exports = baseVw.extend({
177177
this.registerChild(this.buyWizardView);
178178
$('#modalHolder').html(this.buyWizardView.el).fadeIn(300); //add to DOM first, or accordion will have zero width when initialized
179179
this.buyWizardView.render();
180-
$('#obContainer').addClass('modalOpen');
180+
$('#obContainer').addClass('modalOpen').scrollTop(0);
181181
},
182182

183183
clickItemRating: function() {

‎js/views/pageNavVw.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -345,7 +345,7 @@ module.exports = baseVw.extend({
345345
this.$aboutModal.find('.js-modalAboutMain').removeClass('hide');
346346

347347
// blur the container for extra focus
348-
$('#obContainer').addClass('modalOpen');
348+
$('#obContainer').addClass('modalOpen').scrollTop(0);
349349
},
350350

351351
hideAboutModal: function(){
@@ -359,7 +359,7 @@ module.exports = baseVw.extend({
359359
$('.js-about-donationsTab').addClass('active');
360360
this.$aboutModal.find('.modal-section').addClass('hide');
361361
this.$aboutModal.find('.js-modalAboutSupport').removeClass('hide');
362-
$('#obContainer').addClass('modalOpen');
362+
$('#obContainer').addClass('modalOpen').scrollTop(0);
363363
},
364364

365365
aboutModalTabClick: function(e){

‎js/views/storeWizardVw.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ module.exports = Backbone.View.extend({
9898
self.initAccordion('.js-storeWizardAccordion');
9999
self.setValues();
100100
// add blur to container
101-
$('#obContainer').addClass('modalOpen');
101+
$('#obContainer').addClass('modalOpen').scrollTop(0);
102102
// fade the modal in after it loads and focus the input
103103
self.$el.find('.js-storeWizardModal').removeClass('fadeOut');
104104
self.$el.find('#storeNameInput').focus();

‎js/views/transactionModalVw.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,7 @@ module.exports = baseVw.extend({
167167
})
168168
));
169169
// add blur to container
170-
$('#obContainer').addClass('modalOpen');
170+
$('#obContainer').addClass('modalOpen').scrollTop(0);
171171
self.delegateEvents(); //reapply events if this is a second render
172172
self.$el.parent().fadeIn(300);
173173
self.setState(self.tabState);

0 commit comments

Comments
 (0)