Skip to content

Commit 3a65201

Browse files
bredmond5bredmond5
authored
[other] make websdk example page look decent on mobile (#1111)
# Pull Request Template Right now its totally bugged cause we try to split view on a vertical screen. This makes it so that we will just have a vertical scroll on mobile ## Description Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change. Fixes # (issue) ## Type of change Please delete options that are not relevant. - [ ] Bug fix (non-breaking change which fixes an issue) - [ ] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) - [ ] This change requires a documentation update ## How Has This Been Tested? Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration - [ ] Unit test - [ ] Integration test ## JS Budget Check Please mention the size in kb before abd after this PR | Files | Before | After | | ----------- | ----------- | ----------- | | dist/build.js. | | | | dist/build.min.js| | | ## Checklist: - [ ] My code follows the style guidelines of this project - [ ] I have performed a self-review of my own code - [ ] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [ ] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules - [ ] I have checked my code and corrected any misspellings ## Mentions: List the person or team responsible for reviewing proposed changes. cc @BranchMetrics/saas-sdk-devs for visibility.
1 parent 80c9fae commit 3a65201

File tree

1 file changed

+91
-74
lines changed

1 file changed

+91
-74
lines changed

‎examples/example.template.html‎

Lines changed: 91 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -20,19 +20,24 @@
2020

2121
.verticalLine {
2222
width: 0.5px;
23+
background-color: lightgray;
2324
}
2425

25-
body {
26-
font-family: Arial, sans-serif;
27-
background-color: #f4f4f9;
28-
color: #333;
26+
.split-container {
27+
display: flex;
28+
align-items: stretch;
29+
justify-content: center;
30+
width: 90%;
31+
margin: auto;
2932
}
3033

31-
label {
32-
display: block;
33-
font-size: 14px;
34-
margin-bottom: 6px;
35-
font-weight: bold;
34+
.container {
35+
width: 45%;
36+
margin: 10px;
37+
padding: 15px;
38+
background: #fff;
39+
border-radius: 5px;
40+
box-sizing: border-box;
3641
}
3742

3843
.apiInput {
@@ -52,8 +57,27 @@
5257
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
5358
}
5459

55-
.row {
56-
margin-bottom: 30px;
60+
@media (max-width: 768px) {
61+
.split-container {
62+
flex-direction: column;
63+
}
64+
65+
.container {
66+
width: 100%;
67+
margin: 10px 0;
68+
}
69+
70+
.verticalLine {
71+
display: none;
72+
}
73+
74+
.api-info {
75+
order: -1;
76+
}
77+
78+
.api-methods {
79+
order: 1;
80+
}
5781
}
5882

5983
#configButtons {
@@ -189,79 +213,72 @@
189213
<div style="display: flex; flex-direction: column; align-items: center; width: 100%">
190214
<h2>Branch Metrics Web SDK Example</h2>
191215
<hr class="lineBreak horizontalLine">
192-
<div style="display: flex; align-items: stretch; justify-content: center; width: 90%;">
193-
<div class="container">
216+
<div class="split-container">
217+
<div class="container api-methods">
194218
<section>
195-
<div class="row col-lg-8 col-lg-offset-2">
196-
<h3>Methods</h3>
197-
<a>https://help.branch.io/developers-hub/docs/web-full-reference</a>
198-
<hr class="lineBreak horizontalLine">
199-
<h4>Session</h4>
200-
<div class="group">
201-
<button class="btn btn-info" onclick="callData()">.data()</button>
202-
<button class="btn btn-info" onclick="callLogout()">Logout</button>
203-
<button class="btn btn-info" onclick="callFirst()">.first()</button>
204-
</div>
205-
<h4>Identity</h4>
206-
<div class="group">
207-
<input class="example-input" type="text" id="identityID" placeholder="[email protected]">
208-
<button id="setIdentity" class="btn btn-info" onclick="callSetIdentity()">Set Identity</button>
209-
</div>
210-
<h4>Events</h4>
211-
<div class="group">
212-
<button class="btn btn-info" onclick="callLogEvent('PURCHASE')">Create Standard Event</button>
213-
<button class="btn btn-info" onclick="callLogEvent('testedCustomEvent')">Create Custom Event</button>
214-
</div>
215-
<h4>Sharing</h4>
216-
<div class="group">
217-
<button class="btn btn-info" onclick="callLink()">Create Link</button>
218-
<button class="btn btn-info" onclick="callQrCode()">Create QrCode</button>
219-
<button class="btn btn-info" onclick="callBanner()">.banner()</button>
220-
</div>
221-
<h4>Tracking</h4>
222-
<div class="group">
223-
<button class="btn btn-info" onclick="callDisableTracking()">Disable Tracking</button>
224-
<button class="btn btn-info" onclick="callEnableTracking()">Enable Tracking</button>
225-
</div>
219+
<h3>Methods</h3>
220+
<a href="https://help.branch.io/developers-hub/docs/web-full-reference" target="_blank">https://help.branch.io/developers-hub/docs/web-full-reference</a>
221+
<hr class="lineBreak horizontalLine">
222+
223+
<h4>Session</h4>
224+
<div class="group">
225+
<button class="btn btn-info" onclick="callData()">.data()</button>
226+
<button class="btn btn-info" onclick="callLogout()">Logout</button>
227+
<button class="btn btn-info" onclick="callFirst()">.first()</button>
226228
</div>
227-
<div class="row col-lg-8 col-lg-offset-2">
228-
<h3>Api Settings</h3>
229-
<hr class="lineBreak horizontalLine">
230-
<div class="group" id="configButtons"></div>
231-
232-
<label id="branchKeyLabel" for="branchKeyInput">Branch Key:</label>
233-
<input type="text" id="branchKeyInput" class="apiInput">
234-
<br>
235-
<label id="apiUrlLabel" for="apiUrlInput">Api Url:</label>
236-
<input type="text" id="apiUrlInput" class="apiInput">
237-
<br>
238-
<button class="btn btn-info" onclick="updateQueryParams()">
239-
Update Api Settings
240-
</button>
229+
<h4>Identity</h4>
230+
<div class="group">
231+
<input class="example-input" type="text" id="identityID" placeholder="[email protected]">
232+
<button id="setIdentity" class="btn btn-info" onclick="callSetIdentity()">Set Identity</button>
233+
</div>
234+
<h4>Events</h4>
235+
<div class="group">
236+
<button class="btn btn-info" onclick="callLogEvent('PURCHASE')">Create Standard Event</button>
237+
<button class="btn btn-info" onclick="callLogEvent('testedCustomEvent')">Create Custom Event</button>
241238
</div>
239+
<h4>Sharing</h4>
240+
<div class="group">
241+
<button class="btn btn-info" onclick="callLink()">Create Link</button>
242+
<button class="btn btn-info" onclick="callQrCode()">Create QrCode</button>
243+
<button class="btn btn-info" onclick="callBanner()">.banner()</button>
244+
</div>
245+
<h4>Tracking</h4>
246+
<div class="group">
247+
<button class="btn btn-info" onclick="callDisableTracking()">Disable Tracking</button>
248+
<button class="btn btn-info" onclick="callEnableTracking()">Enable Tracking</button>
249+
</div>
250+
<h3>Api Settings</h3>
251+
<hr class="lineBreak horizontalLine">
252+
<div class="group" id="configButtons"></div>
253+
<label id="branchKeyLabel" for="branchKeyInput">Branch Key:</label>
254+
<input type="text" id="branchKeyInput" class="apiInput">
255+
<br>
256+
<label id="apiUrlLabel" for="apiUrlInput">Api Url:</label>
257+
<input type="text" id="apiUrlInput" class="apiInput">
258+
<br>
259+
<button class="btn btn-info" onclick="updateQueryParams()">
260+
Update Api Settings
261+
</button>
242262
</section>
243263
</div>
244264
<div class="lineBreak verticalLine"></div>
245-
<div class="container">
265+
<div class="container api-info">
246266
<section>
247-
<div class="row col-lg-8 col-lg-offset-2">
248-
<h3>Api Requests</h3>
249-
<hr class="lineBreak horizontalLine">
250-
<h4>Session Info
251-
<button class="btn btn-info" onclick="copySessionInfo()" style="margin-left: 10px; font-size: 12px; padding: 2px 8px; cursor: pointer;">
252-
Copy
253-
</button>
254-
</h4>
255-
<pre id="session-info">Reading session from .init()...</pre>
256-
<h4>Request</h4>
257-
<pre id="request">Click a button!</pre>
258-
<h4>Response</h4>
259-
<pre id="response">Click a button!</pre>
260-
</div>
267+
<h3>Api Requests</h3>
268+
<hr class="lineBreak horizontalLine">
269+
<h4>Session Info
270+
<button class="btn btn-info" onclick="copySessionInfo()" style="margin-left: 10px; font-size: 12px; padding: 2px 8px; cursor: pointer;">
271+
Copy
272+
</button>
273+
</h4>
274+
<pre id="session-info">Reading session from .init()...</pre>
275+
<h4>Request</h4>
276+
<pre id="request">Click a button!</pre>
277+
<h4>Response</h4>
278+
<pre id="response">Click a button!</pre>
261279
</section>
262280
</div>
263281
</div>
264-
265282
</div>
266283
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
267284
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

0 commit comments

Comments
 (0)