Skip to content

Commit c5d6ddb

Browse files
bredmond5bredmond5
committed
[other] ENGMT-1983: split buttons on left from output on right
1 parent 5121263 commit c5d6ddb

File tree

1 file changed

+88
-65
lines changed

1 file changed

+88
-65
lines changed

‎examples/example.template.html‎

Lines changed: 88 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,20 @@
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;
14+
}
15+
16+
.horizontalLine {
17+
height: 0.5px;
18+
width: 100%;
19+
}
20+
21+
.verticalLine {
22+
width: 0.5px;
23+
}
24+
1125
body {
1226
font-family: Arial, sans-serif;
1327
background-color: #f4f4f9;
@@ -172,73 +186,82 @@
172186
</head>
173187

174188
<body>
175-
<div class="container">
176-
<div class="row col-lg-8 col-lg-offset-2">
177-
<h2>Branch Metrics Web SDK Example</h2>
178-
</div>
179-
<section>
180-
<div class="row col-lg-8 col-lg-offset-2">
181-
<h4>Session Info
182-
<button class="btn btn-info" onclick="copySessionInfo()" style="margin-left: 10px; font-size: 12px; padding: 2px 8px; cursor: pointer;">
183-
Copy
184-
</button>
185-
</h4>
186-
<pre id="session-info">Reading session from .init()...</pre>
187-
<h4>Request</h4>
188-
<pre id="request">Click a button!</pre>
189-
<h4>Response</h4>
190-
<pre id="response">Click a button!</pre>
191-
</div>
192-
</section>
193-
<section>
194-
<div class="row col-lg-8 col-lg-offset-2">
195-
<h3>Methods</h3>
196-
<a>https://help.branch.io/developers-hub/docs/web-full-reference</a>
197-
<hr>
198-
<h4>Session</h4>
199-
<div class="group">
200-
<button class="btn btn-info" onclick="callData()">.data()</button>
201-
<button class="btn btn-info" onclick="callLogout()">Logout</button>
202-
<button class="btn btn-info" onclick="callFirst()">.first()</button>
203-
</div>
204-
<h4>Identity</h4>
205-
<div class="group">
206-
<input class="example-input" type="text" id="identityID" placeholder="[email protected]">
207-
<button id="setIdentity" class="btn btn-info" onclick="callSetIdentity()">Set Identity</button>
208-
</div>
209-
<h4>Events</h4>
210-
<div class="group">
211-
<button class="btn btn-info" onclick="callLogEvent('PURCHASE')">Create Standard Event</button>
212-
<button class="btn btn-info" onclick="callLogEvent('testedCustomEvent')">Create Custom Event</button>
213-
</div>
214-
<h4>Sharing</h4>
215-
<div class="group">
216-
<button class="btn btn-info" onclick="callLink()">Create Link</button>
217-
<button class="btn btn-info" onclick="callQrCode()">Create QrCode</button>
218-
<button class="btn btn-info" onclick="callBanner()">.banner()</button>
219-
</div>
220-
<h4>Tracking</h4>
221-
<div class="group">
222-
<button class="btn btn-info" onclick="callDisableTracking()">Disable Tracking</button>
223-
<button class="btn btn-info" onclick="callEnableTracking()">Enable Tracking</button>
224-
</div>
189+
<div style="display: flex; flex-direction: column; align-items: center; width: 100%">
190+
<h2>Branch Metrics Web SDK Example</h2>
191+
<hr class="lineBreak horizontalLine">
192+
<div style="display: flex; align-items: stretch; justify-content: center; width: 90%;">
193+
<div class="container">
194+
<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>
226+
</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>
225243
</div>
226-
<div class="row col-lg-8 col-lg-offset-2">
227-
<h3>Api Settings</h3>
228-
<hr>
229-
<div class="group" id="configButtons"></div>
230-
231-
<label id="branchKeyLabel" for="branchKeyInput">Branch Key:</label>
232-
<input type="text" id="branchKeyInput" class="apiInput">
233-
<br>
234-
<label id="apiUrlLabel" for="apiUrlInput">Api Url:</label>
235-
<input type="text" id="apiUrlInput" class="apiInput">
236-
<br>
237-
<button class="btn btn-info" onclick="updateQueryParams()">
238-
Update Api Settings
239-
</button>
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>
240262
</div>
241-
</section>
263+
</div>
264+
242265
</div>
243266
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
244267
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

0 commit comments

Comments
 (0)