Skip to content

Commit 915d885

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 915d885

File tree

1 file changed

+71
-49
lines changed

1 file changed

+71
-49
lines changed

‎examples/example.template.html‎

Lines changed: 71 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -8,31 +8,34 @@
88
<title>Branch Metrics Web SDK Example App</title>
99
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
1010
<style type="text/css">
11-
.lineBreak {
12-
opacity: 0.5;
13-
background-color: lightgray;
11+
.split-container {
12+
display: flex;
13+
align-items: stretch;
14+
justify-content: center;
15+
width: 90%;
16+
margin: auto;
1417
}
1518

16-
.horizontalLine {
17-
height: 0.5px;
18-
width: 100%;
19+
.container {
20+
width: 45%;
21+
margin: 10px;
22+
padding: 15px;
23+
background: #fff;
24+
border-radius: 5px;
25+
box-sizing: border-box;
1926
}
2027

2128
.verticalLine {
2229
width: 0.5px;
30+
background-color: lightgray;
2331
}
2432

25-
body {
26-
font-family: Arial, sans-serif;
27-
background-color: #f4f4f9;
28-
color: #333;
33+
.api-info {
34+
order: 1;
2935
}
3036

31-
label {
32-
display: block;
33-
font-size: 14px;
34-
margin-bottom: 6px;
35-
font-weight: bold;
37+
.api-methods {
38+
order: -1;
3639
}
3740

3841
.apiInput {
@@ -52,15 +55,27 @@
5255
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
5356
}
5457

55-
.row {
56-
margin-bottom: 30px;
57-
}
58+
@media (max-width: 768px) {
59+
.split-container {
60+
flex-direction: column;
61+
}
5862

59-
#configButtons {
60-
display: flex;
61-
flex-wrap: wrap;
62-
gap: 3px;
63-
margin-bottom: 10px;
63+
.container {
64+
width: 100%;
65+
margin: 10px 0;
66+
}
67+
68+
.verticalLine {
69+
display: none;
70+
}
71+
72+
.api-info {
73+
order: -1;
74+
}
75+
76+
.api-methods {
77+
order: 1;
78+
}
6479
}
6580

6681
</style>
@@ -189,42 +204,69 @@
189204
<div style="display: flex; flex-direction: column; align-items: center; width: 100%">
190205
<h2>Branch Metrics Web SDK Example</h2>
191206
<hr class="lineBreak horizontalLine">
192-
<div style="display: flex; align-items: stretch; justify-content: center; width: 90%;">
193-
<div class="container">
207+
<div class="split-container">
208+
<div class="container api-info">
194209
<section>
195-
<div class="row col-lg-8 col-lg-offset-2">
210+
<div class="row">
211+
<h3>Api Requests</h3>
212+
<hr class="lineBreak horizontalLine">
213+
214+
<h4>Session Info
215+
<button class="btn btn-info" onclick="copySessionInfo()" style="margin-left: 10px; font-size: 12px; padding: 2px 8px; cursor: pointer;">
216+
Copy
217+
</button>
218+
</h4>
219+
<pre id="session-info">Reading session from .init()...</pre>
220+
221+
<h4>Request</h4>
222+
<pre id="request">Click a button!</pre>
223+
224+
<h4>Response</h4>
225+
<pre id="response">Click a button!</pre>
226+
</div>
227+
</section>
228+
</div>
229+
230+
<div class="lineBreak verticalLine"></div>
231+
232+
<div class="container api-methods">
233+
<section>
234+
<div class="row">
196235
<h3>Methods</h3>
197-
<a>https://help.branch.io/developers-hub/docs/web-full-reference</a>
236+
<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>
198237
<hr class="lineBreak horizontalLine">
238+
199239
<h4>Session</h4>
200240
<div class="group">
201241
<button class="btn btn-info" onclick="callData()">.data()</button>
202242
<button class="btn btn-info" onclick="callLogout()">Logout</button>
203243
<button class="btn btn-info" onclick="callFirst()">.first()</button>
204244
</div>
245+
205246
<h4>Identity</h4>
206247
<div class="group">
207248
<input class="example-input" type="text" id="identityID" placeholder="[email protected]">
208249
<button id="setIdentity" class="btn btn-info" onclick="callSetIdentity()">Set Identity</button>
209250
</div>
251+
210252
<h4>Events</h4>
211253
<div class="group">
212254
<button class="btn btn-info" onclick="callLogEvent('PURCHASE')">Create Standard Event</button>
213255
<button class="btn btn-info" onclick="callLogEvent('testedCustomEvent')">Create Custom Event</button>
214256
</div>
257+
215258
<h4>Sharing</h4>
216259
<div class="group">
217260
<button class="btn btn-info" onclick="callLink()">Create Link</button>
218261
<button class="btn btn-info" onclick="callQrCode()">Create QrCode</button>
219262
<button class="btn btn-info" onclick="callBanner()">.banner()</button>
220263
</div>
264+
221265
<h4>Tracking</h4>
222266
<div class="group">
223267
<button class="btn btn-info" onclick="callDisableTracking()">Disable Tracking</button>
224268
<button class="btn btn-info" onclick="callEnableTracking()">Enable Tracking</button>
225269
</div>
226-
</div>
227-
<div class="row col-lg-8 col-lg-offset-2">
228270
<h3>Api Settings</h3>
229271
<hr class="lineBreak horizontalLine">
230272
<div class="group" id="configButtons"></div>
@@ -241,27 +283,7 @@ <h3>Api Settings</h3>
241283
</div>
242284
</section>
243285
</div>
244-
<div class="lineBreak verticalLine"></div>
245-
<div class="container">
246-
<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>
261-
</section>
262-
</div>
263286
</div>
264-
265287
</div>
266288
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
267289
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

0 commit comments

Comments
 (0)