Skip to content

[other] make websdk example page look decent on mobile #1111

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
Jan 2, 2025
Merged

[other] make websdk example page look decent on mobile #1111

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
165 changes: 91 additions & 74 deletions examples/example.template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,19 +20,24 @@

.verticalLine {
width: 0.5px;
background-color: lightgray;
}

body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
color: #333;
.split-container {
display: flex;
align-items: stretch;
justify-content: center;
width: 90%;
margin: auto;
}

label {
display: block;
font-size: 14px;
margin-bottom: 6px;
font-weight: bold;
.container {
width: 45%;
margin: 10px;
padding: 15px;
background: #fff;
border-radius: 5px;
box-sizing: border-box;
}

.apiInput {
Expand All @@ -52,8 +57,27 @@
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

.row {
margin-bottom: 30px;
@media (max-width: 768px) {
.split-container {
flex-direction: column;
}

.container {
width: 100%;
margin: 10px 0;
}

.verticalLine {
display: none;
}

.api-info {
order: -1;
}

.api-methods {
order: 1;
}
}

#configButtons {
Expand Down Expand Up @@ -189,79 +213,72 @@
<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">
<div class="split-container">
<div class="container api-methods">
<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>
<h3>Methods</h3>
<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>
<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>
<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>
<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>
<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>
</section>
</div>
<div class="lineBreak verticalLine"></div>
<div class="container">
<div class="container api-info">
<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>
<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>
</section>
</div>
</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