Skip to content

Commit

Permalink
[other] make websdk example page look decent on mobile (#1111)
Browse files Browse the repository at this point in the history 
# Pull Request Template
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

## Description

Please include a summary of the change and which issue is fixed. Please
also include relevant motivation and context. List any dependencies that
are required for this change.


Fixes # (issue)

## Type of change

Please delete options that are not relevant.

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] This change requires a documentation update

## How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide
instructions so we can reproduce. Please also list any relevant details
for your test configuration

- [ ] Unit test
- [ ] Integration test

## JS Budget Check

Please mention the size in kb before abd after this PR

| Files            | Before      | After       | 
| -----------      | ----------- | ----------- |
| dist/build.js.   |             |             |
| dist/build.min.js|             |             |

## Checklist:

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
- [ ] I have checked my code and corrected any misspellings

## Mentions: 
List the person or team responsible for reviewing proposed changes.

cc @BranchMetrics/saas-sdk-devs for visibility.
  • Loading branch information
@bredmond5
bredmond5 authored Jan 2, 2025
1 parent 80c9fae commit 3a65201
Showing 1 changed file with 91 additions and 74 deletions.
165 changes: 91 additions & 74 deletions examples/example.template.html
View file
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

0 comments on commit 3a65201

Please sign in to comment.