Skip to content

Commit 7e7152a

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 7e7152a

File tree

1 file changed

+72
-43
lines changed

1 file changed

+72
-43
lines changed

‎examples/example.template.html‎

Lines changed: 72 additions & 43 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,8 +55,27 @@
5255
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
5356
}
5457

55-
.row {
56-
margin-bottom: 30px;
58+
@media (max-width: 768px) {
59+
.split-container {
60+
flex-direction: column;
61+
}
62+
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+
}
5779
}
5880

5981
#configButtons {
@@ -189,42 +211,69 @@
189211
<div style="display: flex; flex-direction: column; align-items: center; width: 100%">
190212
<h2>Branch Metrics Web SDK Example</h2>
191213
<hr class="lineBreak horizontalLine">
192-
<div style="display: flex; align-items: stretch; justify-content: center; width: 90%;">
193-
<div class="container">
214+
<div class="split-container">
215+
<div class="container api-info">
216+
<section>
217+
<div class="row">
218+
<h3>Api Requests</h3>
219+
<hr class="lineBreak horizontalLine">
220+
221+
<h4>Session Info
222+
<button class="btn btn-info" onclick="copySessionInfo()" style="margin-left: 10px; font-size: 12px; padding: 2px 8px; cursor: pointer;">
223+
Copy
224+
</button>
225+
</h4>
226+
<pre id="session-info">Reading session from .init()...</pre>
227+
228+
<h4>Request</h4>
229+
<pre id="request">Click a button!</pre>
230+
231+
<h4>Response</h4>
232+
<pre id="response">Click a button!</pre>
233+
</div>
234+
</section>
235+
</div>
236+
237+
<div class="lineBreak verticalLine"></div>
238+
239+
<div class="container api-methods">
194240
<section>
195-
<div class="row col-lg-8 col-lg-offset-2">
241+
<div class="row">
196242
<h3>Methods</h3>
197-
<a>https://help.branch.io/developers-hub/docs/web-full-reference</a>
243+
<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>
198244
<hr class="lineBreak horizontalLine">
245+
199246
<h4>Session</h4>
200247
<div class="group">
201248
<button class="btn btn-info" onclick="callData()">.data()</button>
202249
<button class="btn btn-info" onclick="callLogout()">Logout</button>
203250
<button class="btn btn-info" onclick="callFirst()">.first()</button>
204251
</div>
252+
205253
<h4>Identity</h4>
206254
<div class="group">
207255
<input class="example-input" type="text" id="identityID" placeholder="[email protected]">
208256
<button id="setIdentity" class="btn btn-info" onclick="callSetIdentity()">Set Identity</button>
209257
</div>
258+
210259
<h4>Events</h4>
211260
<div class="group">
212261
<button class="btn btn-info" onclick="callLogEvent('PURCHASE')">Create Standard Event</button>
213262
<button class="btn btn-info" onclick="callLogEvent('testedCustomEvent')">Create Custom Event</button>
214263
</div>
264+
215265
<h4>Sharing</h4>
216266
<div class="group">
217267
<button class="btn btn-info" onclick="callLink()">Create Link</button>
218268
<button class="btn btn-info" onclick="callQrCode()">Create QrCode</button>
219269
<button class="btn btn-info" onclick="callBanner()">.banner()</button>
220270
</div>
271+
221272
<h4>Tracking</h4>
222273
<div class="group">
223274
<button class="btn btn-info" onclick="callDisableTracking()">Disable Tracking</button>
224275
<button class="btn btn-info" onclick="callEnableTracking()">Enable Tracking</button>
225276
</div>
226-
</div>
227-
<div class="row col-lg-8 col-lg-offset-2">
228277
<h3>Api Settings</h3>
229278
<hr class="lineBreak horizontalLine">
230279
<div class="group" id="configButtons"></div>
@@ -241,27 +290,7 @@ <h3>Api Settings</h3>
241290
</div>
242291
</section>
243292
</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>
263293
</div>
264-
265294
</div>
266295
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
267296
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

0 commit comments

Comments
 (0)