Skip to content

Commit cc9cd1f

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 cc9cd1f

File tree

1 file changed

+69
-77
lines changed

1 file changed

+69
-77
lines changed

‎examples/example.template.html‎

Lines changed: 69 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -8,59 +8,57 @@
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

38-
.apiInput {
39-
width: 100%;
40-
padding: 10px;
41-
margin-bottom: 15px;
42-
border: 1px solid #ccc;
43-
border-radius: 5px;
44-
font-size: 14px;
45-
outline: none;
46-
box-sizing: border-box;
47-
transition: border-color 0.3s ease, box-shadow 0.3s ease;
48-
}
41+
@media (max-width: 768px) {
42+
.split-container {
43+
flex-direction: column;
44+
}
4945

50-
input:focus {
51-
border-color: #007bff;
52-
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
53-
}
46+
.container {
47+
width: 100%;
48+
margin: 10px 0;
49+
}
5450

55-
.row {
56-
margin-bottom: 30px;
57-
}
51+
.verticalLine {
52+
display: none;
53+
}
5854

59-
#configButtons {
60-
display: flex;
61-
flex-wrap: wrap;
62-
gap: 3px;
63-
margin-bottom: 10px;
55+
.api-info {
56+
order: -1;
57+
}
58+
59+
.api-methods {
60+
order: 1;
61+
}
6462
}
6563

6664
</style>
@@ -189,79 +187,73 @@
189187
<div style="display: flex; flex-direction: column; align-items: center; width: 100%">
190188
<h2>Branch Metrics Web SDK Example</h2>
191189
<hr class="lineBreak horizontalLine">
192-
<div style="display: flex; align-items: stretch; justify-content: center; width: 90%;">
193-
<div class="container">
190+
<div class="split-container">
191+
<div class="container api-info">
192+
<section>
193+
<div class="row">
194+
<h3>Api Requests</h3>
195+
<hr class="lineBreak horizontalLine">
196+
197+
<h4>Session Info
198+
<button class="btn btn-info" onclick="copySessionInfo()" style="margin-left: 10px; font-size: 12px; padding: 2px 8px; cursor: pointer;">
199+
Copy
200+
</button>
201+
</h4>
202+
<pre id="session-info">Reading session from .init()...</pre>
203+
204+
<h4>Request</h4>
205+
<pre id="request">Click a button!</pre>
206+
207+
<h4>Response</h4>
208+
<pre id="response">Click a button!</pre>
209+
</div>
210+
</section>
211+
</div>
212+
213+
<div class="lineBreak verticalLine"></div>
214+
215+
<div class="container api-methods">
194216
<section>
195-
<div class="row col-lg-8 col-lg-offset-2">
217+
<div class="row">
196218
<h3>Methods</h3>
197-
<a>https://help.branch.io/developers-hub/docs/web-full-reference</a>
219+
<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>
198220
<hr class="lineBreak horizontalLine">
221+
199222
<h4>Session</h4>
200223
<div class="group">
201224
<button class="btn btn-info" onclick="callData()">.data()</button>
202225
<button class="btn btn-info" onclick="callLogout()">Logout</button>
203226
<button class="btn btn-info" onclick="callFirst()">.first()</button>
204227
</div>
228+
205229
<h4>Identity</h4>
206230
<div class="group">
207231
<input class="example-input" type="text" id="identityID" placeholder="[email protected]">
208232
<button id="setIdentity" class="btn btn-info" onclick="callSetIdentity()">Set Identity</button>
209233
</div>
234+
210235
<h4>Events</h4>
211236
<div class="group">
212237
<button class="btn btn-info" onclick="callLogEvent('PURCHASE')">Create Standard Event</button>
213238
<button class="btn btn-info" onclick="callLogEvent('testedCustomEvent')">Create Custom Event</button>
214239
</div>
240+
215241
<h4>Sharing</h4>
216242
<div class="group">
217243
<button class="btn btn-info" onclick="callLink()">Create Link</button>
218244
<button class="btn btn-info" onclick="callQrCode()">Create QrCode</button>
219245
<button class="btn btn-info" onclick="callBanner()">.banner()</button>
220246
</div>
247+
221248
<h4>Tracking</h4>
222249
<div class="group">
223250
<button class="btn btn-info" onclick="callDisableTracking()">Disable Tracking</button>
224251
<button class="btn btn-info" onclick="callEnableTracking()">Enable Tracking</button>
225252
</div>
226253
</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>
241-
</div>
242-
</section>
243-
</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>
261254
</section>
262255
</div>
263256
</div>
264-
265257
</div>
266258
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
267259
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

0 commit comments

Comments
 (0)