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

Commit 5e2d8e9

Browse files
jjeffryesjjeffryes
committed
Merge pull request #1584 from OpenBazaar/positioningFixes
Positioning fixes
2 parents e499b3a + 91da184 commit 5e2d8e9

18 files changed

+277
-288
lines changed

‎css/obBase.css‎

Lines changed: 170 additions & 199 deletions
Large diffs are not rendered by default.

‎index.html‎

Lines changed: 59 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -11,52 +11,73 @@
1111
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
1212
</head>
1313
<body>
14-
<div class="container custCol-background custCol-text" id="obContainer">
15-
<div id="content"></div>
16-
<div id="customizePreviewDashedBorder" class="hide"></div>
17-
</div>
18-
<div id="overlay" class="hide"></div>
19-
<div id="sideBar"></div>
20-
<div id="modalHolder">
21-
<!-- container for modal views -->
22-
</div>
23-
<div id="messageModal" class="modal modal-opaque js-messageModal hide">
24-
<!-- modal for messages -->
25-
<div class="modal-child modal-childMain color-primary custCol-secondary padding20 custCol-text">
26-
<div class="txt-center row10 js-messageModalTitleWrapper">
27-
<h1 class="js-messageModal-title"></h1>
14+
15+
<div id="appFrame">
16+
17+
<div id="appBar" class="top0 alignCenter custCol-secondary"></div>
18+
19+
<div id="contentFrame">
20+
21+
<div id="navArea">
22+
<div id="pageNav" class="custCol-secondary"></div>
2823
</div>
29-
<div class="txt-center row10 js-messageModalMsgWrapper">
30-
<p class="fontSize14 js-messageModal-message"></p>
31-
<div class="bar barFlush bottomBar js-messageModal-btnBar hide">
32-
<a class="btn btn-bar btn-half borderRight custCol-border textOpacity90 custCol-primary js-messageModal-btn1">
33-
</a>
34-
<a class="btn btn-bar btn-half textOpacity90 custCol-primary js-messageModal-btn2">
35-
</a>
24+
25+
<div id="contentArea">
26+
<div class="container custCol-background custCol-text" id="obContainer">
27+
<div id="content"></div>
28+
<div id="modalHolder">
29+
<!-- container for modal views -->
30+
</div>
3631
</div>
32+
33+
<div id="sideBar"></div>
34+
35+
<div id="messageModal" class="modal modal-opaque js-messageModal hide">
36+
<!-- modal for messages -->
37+
<div class="modal-child modal-childMain color-primary custCol-secondary padding20 custCol-text">
38+
<div class="txt-center row10 js-messageModalTitleWrapper">
39+
<h1 class="js-messageModal-title"></h1>
40+
</div>
41+
<div class="txt-center row10 js-messageModalMsgWrapper">
42+
<p class="fontSize14 js-messageModal-message"></p>
43+
<div class="bar barFlush bottomBar js-messageModal-btnBar hide">
44+
<a class="btn btn-bar btn-half borderRight custCol-border textOpacity90 custCol-primary js-messageModal-btn1">
45+
</a>
46+
<a class="btn btn-bar btn-half textOpacity90 custCol-primary js-messageModal-btn2">
47+
</a>
48+
</div>
49+
</div>
50+
<div class="btn-corner btn-cornerTR btn-cornerTROutR btn-flushTop js-closeIndexModal">
51+
<h2 class="ion-android-close custCol-text clickable"></h2>
52+
</div>
53+
</div>
54+
</div>
55+
56+
<div id="overlay" class="hide"></div>
57+
<div id="statusBar"></div>
58+
3759
</div>
38-
<div class="btn-corner btn-cornerTR btn-cornerTROutR btn-flushTop js-closeIndexModal">
39-
<h2 class="ion-android-close custCol-text clickable"></h2>
40-
</div>
41-
</div>
42-
</div>
43-
<div id="statusBar"></div>
44-
<div id="pageNav" class="bar navBar navBar-main custCol-secondary padding0"></div>
45-
<div id="appBar" class="top0 alignCenter custCol-secondary"></div>
46-
<div id="loadingModal" class="modal modal-opaque modal-fullscreen js-loadingModal hide">
47-
<div class="spinner-with-logo fullCentered">
48-
<i class="ion-android-sync spinner fontSize30 spinner-with-logo-icon"></i>
60+
4961
</div>
50-
<div id="loadingModalContent">
51-
<p class="fontSize16 js-translate" data-translate="errorMessages.loadingViewError"></p>
52-
<div id="loadingModalBtns">
53-
<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>
54-
<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>
55-
</div>
5662

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>
5774
</div>
75+
5876
</div>
5977

78+
79+
80+
6081
<!--TODO: modularize non-modular scripts -->
6182
<script src="js/utils/list.min.js"></script>
6283

‎js/router.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,7 @@ module.exports = Backbone.Router.extend({
155155
cleanup: function(){
156156
$('#loadingModal').addClass('hide'); //hide modal if it is still visible
157157
messageModal.hide();
158-
$('#obContainer').removeClass('overflowHidden').removeClass('blur');
158+
$('#obContainer').removeClass('modalOpen innerModalOpen');
159159
window.obEventBus.trigger('cleanNav');
160160
},
161161

@@ -173,7 +173,7 @@ module.exports = Backbone.Router.extend({
173173
if (bodyClass){
174174
$('body').attr('class', bodyClass);
175175
}
176-
$('#obContainer').removeClass("box-borderDashed noScrollBar overflowHidden"); //remove customization styling if present
176+
$('#obContainer').removeClass("customizeUserPage"); //remove customization styling if present
177177

178178
this.pageConnectModal && this.pageConnectModal.remove();
179179
this.pageConnectModal = null;

‎js/templates/pageNav.html‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -56,16 +56,6 @@ <h2 class="ion-android-close custCol-text clickable"></h2>
5656
</div>
5757
</div>
5858

59-
<div class="onboardingIntroDiscover js-OnboardingIntroDiscoverHolder hide">
60-
<a href="#home" class="js-OnboardingIntroDiscover">
61-
<div>
62-
<h3 class="margin0 marginTop25"><%= polyglot.t('Discover') %></h3>
63-
</div>
64-
<p class="textOpacity75 padding025 fontSize15 margin8"><%= polyglot.t('onboarding.discoverCallOut') %></p>
65-
<div class="btn btn-enter custCol-secondary custCol-text"><%= polyglot.t('Enter') %></div>
66-
</a>
67-
</div>
68-
6959
<div class="js-navProfileMenu popMenu popMenu-navBar">
7060
<div class="popMenu-navBarSubMenu popMenu-navBarSubMenu-pageNav">
7161
<a class="js-serverSubmenuTrigger">
@@ -147,7 +137,7 @@ <h3 class="margin0 marginTop25"><%= polyglot.t('Discover') %></h3>
147137
<div id="notificationsPanel"></div>
148138
</div>
149139

150-
<div class="bar navBar pageNavContainer custCol-secondary">
140+
<div id="pageNavBar" class="bar navBar custCol-secondary">
151141
<div class="ctrlGroup">
152142
<a class="btn btn-togLeft btn-back ion-chevron-left js-navBack custCol-primary custCol-text fontSize13 tooltip" data-tooltip="<%= polyglot.t('nav.Back') %>"></a>
153143
<a class="btn btn-togRight btn-fwd ion-chevron-right js-navFwd custCol-primary custCol-text fontSize13 tooltip" data-tooltip="<%= polyglot.t('nav.Forward') %>"></a>
@@ -194,6 +184,16 @@ <h3 class="txt-unleaded ion-close-circled"></h3>
194184
<div id="adminPanel"></div>
195185
</div>
196186

187+
<div class="onboardingIntroDiscover js-OnboardingIntroDiscoverHolder hide">
188+
<a href="#home" class="js-OnboardingIntroDiscover">
189+
<div>
190+
<h3 class="margin0 marginTop25"><%= polyglot.t('Discover') %></h3>
191+
</div>
192+
<p class="textOpacity75 padding025 fontSize15 margin8"><%= polyglot.t('onboarding.discoverCallOut') %></p>
193+
<div class="btn btn-enter custCol-secondary custCol-text"><%= polyglot.t('Enter') %></div>
194+
</a>
195+
</div>
196+
197197
<div class="softwareUpdate softwareUpdateHidden js-softwareUpdate">
198198
<div class="clearFix">
199199
<div class="ion-android-download fontSize20 floatLeft marginRight8"></div>

‎js/templates/userPage.html‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,7 @@
3434
</div>
3535

3636
<div class="user-page-content">
37-
<div class="user-page-header-slim-bg-cover custCol-background"></div>
38-
<div class="user-page-header-slim borderBottom2 custCol-border-secondary user-page-header-slim-tint">
37+
<div class="user-page-header-slim borderBottom2 custCol-border-secondary user-page-header-slim-tint js-userPageHeaderSlim">
3938
<div class="user-page-header-slim-bg"
4039
<% if(ob.page.profile.header_hash){ %>
4140
style="background-image: url(<%= ob.page.headerURL %>), url(imgs/defaultBanner.png); background-position: center; ">
@@ -62,7 +61,7 @@ <h1 class="page-userNameLarge floatLeft fancy-heading fontSize20 colorWhiteForce
6261
</div>
6362
</div>
6463

65-
<div class="shadow-inner1 user-page-header">
64+
<div class="shadow-inner1 user-page-header js-userPageHeader">
6665
<div class="rowItem positionBottom width100 padding0 paddingLeft20 notFancyDarkBackground">
6766
<div class="table">
6867
<div>
@@ -591,7 +590,7 @@ <h1 class="page-userNameLarge floatLeft fancy-heading fontSize20 colorWhiteForce
591590

592591
<div class="overlay overlayObscurring hide js-blockedWarning">
593592
<div class="modalHolder">
594-
<div class="modal modal-navOffset">
593+
<div class="modal">
595594
<div class="modal-child">
596595
<div class="modal-small padding15 txt-center custCol-secondary">
597596
<h3 class="rowTop30 custCol-text">

‎js/views/baseModal.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ module.exports = baseVw.extend({
4848

4949
open: function() {
5050
if (!domUtils.isInPage(this.el)) {
51-
document.body.appendChild(this.el);
51+
document.getElementById('appFrame').appendChild(this.el);
5252

5353
this._open = true;
5454
this.trigger('open');
@@ -60,7 +60,7 @@ module.exports = baseVw.extend({
6060

6161
close: function() {
6262
if (domUtils.isInPage(this.el)) {
63-
document.body.removeChild(this.el);
63+
document.getElementById('appFrame').removeChild(this.el);
6464

6565
this._open = false;
6666
this.trigger('close');

‎js/views/buyWizardVw.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -648,7 +648,7 @@ module.exports = baseVw.extend({
648648
},
649649

650650
closeWizard: function() {
651-
$('#obContainer').removeClass('overflowHidden').removeClass('blur');
651+
$('#obContainer').removeClass('modalOpen');
652652
if (this.buyRequest){
653653
this.buyRequest.abort();
654654
}

‎js/views/homeVw.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ var loadTemplate = require('../utils/loadTemplate'),
1414

1515
module.exports = baseVw.extend({
1616

17-
className: "homeView",
17+
className: "homeView contentWrapper",
1818

1919
events: {
2020
'click .js-productsTab': function(){this.setState("products");},

‎js/views/itemEditVw.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -125,14 +125,14 @@ module.exports = baseVw.extend({
125125

126126

127127
//set chosen inputs
128-
this.$('.chosen').chosen({
128+
self.$('.chosen').chosen({
129129
width: '100%',
130130
search_contains: true
131131
}).change(function(e){
132132
self.shipsToChange(e);
133133
});
134134

135-
this.$('.chosenRegions').chosen({
135+
self.$('.chosenRegions').chosen({
136136
width: '100%',
137137
disable_search: true,
138138
search_contains: true

‎js/views/itemVw.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -142,10 +142,10 @@ module.exports = baseVw.extend({
142142
// we need to append colorbox to obContainer to prevent it from covering the header
143143
$("#colorbox").appendTo("#obContainer");
144144
$("#cboxOverlay").appendTo("#obContainer");
145-
$('#content').addClass('blur');
145+
$('#obContainer').addClass('modalOpen').scrollTop(0);
146146
},
147147
onClosed: function(){
148-
$('#content').removeClass('blur');
148+
$('#obContainer').removeClass('modalOpen');
149149
}
150150
});
151151
},
@@ -178,7 +178,7 @@ module.exports = baseVw.extend({
178178
this.registerChild(this.buyWizardView);
179179
$('#modalHolder').html(this.buyWizardView.el).fadeIn(300); //add to DOM first, or accordion will have zero width when initialized
180180
this.buyWizardView.render();
181-
$('#obContainer').addClass('blur');
181+
$('#obContainer').addClass('modalOpen').scrollTop(0);
182182
},
183183

184184
clickItemRating: function() {
@@ -189,7 +189,7 @@ module.exports = baseVw.extend({
189189
},
190190

191191
remove: function() {
192-
$('#obContainer').removeClass('overflowHidden').removeClass('blur');
192+
$('#obContainer').removeClass('modalOpen');
193193

194194
baseVw.prototype.remove.apply(this, arguments);
195195
}

0 commit comments

Comments
 (0)