Skip to content

[other] ENGMT-1983: split buttons on left from output on right #1106

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bredmond5 merged 1 commit into from
Dec 18, 2024
Merged

[other] ENGMT-1983: split buttons on left from output on right #1106

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
153 changes: 88 additions & 65 deletions examples/example.template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,20 @@
<title>Branch Metrics Web SDK Example App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style type="text/css">
.lineBreak {
opacity: 0.5;
background-color: lightgray;
}

.horizontalLine {
height: 0.5px;
width: 100%;
}

.verticalLine {
width: 0.5px;
}

body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
Expand Down Expand Up @@ -172,73 +186,82 @@
</head>

<body>
<div class="container">
<div class="row col-lg-8 col-lg-offset-2">
<h2>Branch Metrics Web SDK Example</h2>
</div>
<section>
<div class="row col-lg-8 col-lg-offset-2">
<h4>Session Info
<button class="btn btn-info" onclick="copySessionInfo()" style="margin-left: 10px; font-size: 12px; padding: 2px 8px; cursor: pointer;">
Copy
</button>
</h4>
<pre id="session-info">Reading session from .init()...</pre>
<h4>Request</h4>
<pre id="request">Click a button!</pre>
<h4>Response</h4>
<pre id="response">Click a button!</pre>
</div>
</section>
<section>
<div class="row col-lg-8 col-lg-offset-2">
<h3>Methods</h3>
<a>https://help.branch.io/developers-hub/docs/web-full-reference</a>
<hr>
<h4>Session</h4>
<div class="group">
<button class="btn btn-info" onclick="callData()">.data()</button>
<button class="btn btn-info" onclick="callLogout()">Logout</button>
<button class="btn btn-info" onclick="callFirst()">.first()</button>
</div>
<h4>Identity</h4>
<div class="group">
<input class="example-input" type="text" id="identityID" placeholder="[email protected]">
<button id="setIdentity" class="btn btn-info" onclick="callSetIdentity()">Set Identity</button>
</div>
<h4>Events</h4>
<div class="group">
<button class="btn btn-info" onclick="callLogEvent('PURCHASE')">Create Standard Event</button>
<button class="btn btn-info" onclick="callLogEvent('testedCustomEvent')">Create Custom Event</button>
</div>
<h4>Sharing</h4>
<div class="group">
<button class="btn btn-info" onclick="callLink()">Create Link</button>
<button class="btn btn-info" onclick="callQrCode()">Create QrCode</button>
<button class="btn btn-info" onclick="callBanner()">.banner()</button>
</div>
<h4>Tracking</h4>
<div class="group">
<button class="btn btn-info" onclick="callDisableTracking()">Disable Tracking</button>
<button class="btn btn-info" onclick="callEnableTracking()">Enable Tracking</button>
</div>
<div style="display: flex; flex-direction: column; align-items: center; width: 100%">
<h2>Branch Metrics Web SDK Example</h2>
<hr class="lineBreak horizontalLine">
<div style="display: flex; align-items: stretch; justify-content: center; width: 90%;">
<div class="container">
<section>
<div class="row col-lg-8 col-lg-offset-2">
<h3>Methods</h3>
<a>https://help.branch.io/developers-hub/docs/web-full-reference</a>
<hr class="lineBreak horizontalLine">
<h4>Session</h4>
<div class="group">
<button class="btn btn-info" onclick="callData()">.data()</button>
<button class="btn btn-info" onclick="callLogout()">Logout</button>
<button class="btn btn-info" onclick="callFirst()">.first()</button>
</div>
<h4>Identity</h4>
<div class="group">
<input class="example-input" type="text" id="identityID" placeholder="[email protected]">
<button id="setIdentity" class="btn btn-info" onclick="callSetIdentity()">Set Identity</button>
</div>
<h4>Events</h4>
<div class="group">
<button class="btn btn-info" onclick="callLogEvent('PURCHASE')">Create Standard Event</button>
<button class="btn btn-info" onclick="callLogEvent('testedCustomEvent')">Create Custom Event</button>
</div>
<h4>Sharing</h4>
<div class="group">
<button class="btn btn-info" onclick="callLink()">Create Link</button>
<button class="btn btn-info" onclick="callQrCode()">Create QrCode</button>
<button class="btn btn-info" onclick="callBanner()">.banner()</button>
</div>
<h4>Tracking</h4>
<div class="group">
<button class="btn btn-info" onclick="callDisableTracking()">Disable Tracking</button>
<button class="btn btn-info" onclick="callEnableTracking()">Enable Tracking</button>
</div>
</div>
<div class="row col-lg-8 col-lg-offset-2">
<h3>Api Settings</h3>
<hr class="lineBreak horizontalLine">
<div class="group" id="configButtons"></div>

<label id="branchKeyLabel" for="branchKeyInput">Branch Key:</label>
<input type="text" id="branchKeyInput" class="apiInput">
<br>
<label id="apiUrlLabel" for="apiUrlInput">Api Url:</label>
<input type="text" id="apiUrlInput" class="apiInput">
<br>
<button class="btn btn-info" onclick="updateQueryParams()">
Update Api Settings
</button>
</div>
</section>
</div>
<div class="row col-lg-8 col-lg-offset-2">
<h3>Api Settings</h3>
<hr>
<div class="group" id="configButtons"></div>

<label id="branchKeyLabel" for="branchKeyInput">Branch Key:</label>
<input type="text" id="branchKeyInput" class="apiInput">
<br>
<label id="apiUrlLabel" for="apiUrlInput">Api Url:</label>
<input type="text" id="apiUrlInput" class="apiInput">
<br>
<button class="btn btn-info" onclick="updateQueryParams()">
Update Api Settings
</button>
<div class="lineBreak verticalLine"></div>
<div class="container">
<section>
<div class="row col-lg-8 col-lg-offset-2">
<h3>Api Requests</h3>
<hr class="lineBreak horizontalLine">
<h4>Session Info
<button class="btn btn-info" onclick="copySessionInfo()" style="margin-left: 10px; font-size: 12px; padding: 2px 8px; cursor: pointer;">
Copy
</button>
</h4>
<pre id="session-info">Reading session from .init()...</pre>
<h4>Request</h4>
<pre id="request">Click a button!</pre>
<h4>Response</h4>
<pre id="response">Click a button!</pre>
</div>
</section>
</div>
</section>
</div>

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Expand Down
Loading