Skip to content

Commit 04143e8

Browse files
bredmond5bredmond5
committed
[other] make websdk example page look decent on mobile
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
1 parent 80c9fae commit 04143e8

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)