Skip to content

Commit

Permalink
[other] make websdk example page look decent on mobile
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@bredmond5
bredmond5 committed Jan 2, 2025
1 parent 80c9fae commit 7f203c5
Showing 1 changed file with 70 additions and 53 deletions.
123 changes: 70 additions & 53 deletions examples/example.template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,31 +8,34 @@
<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;
.split-container {
display: flex;
align-items: stretch;
justify-content: center;
width: 90%;
margin: auto;
}

.horizontalLine {
height: 0.5px;
width: 100%;
.container {
width: 45%;
margin: 10px;
padding: 15px;
background: #fff;
border-radius: 5px;
box-sizing: border-box;
}

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

body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
color: #333;
.api-info {
order: 1;
}

label {
display: block;
font-size: 14px;
margin-bottom: 6px;
font-weight: bold;
.api-methods {
order: -1;
}

.apiInput {
Expand All @@ -47,20 +50,27 @@
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input:focus {
border-color: #007bff;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
@media (max-width: 768px) {
.split-container {
flex-direction: column;
}

.row {
margin-bottom: 30px;
}
.container {
width: 100%;
margin: 10px 0;
}

#configButtons {
display: flex;
flex-wrap: wrap;
gap: 3px;
margin-bottom: 10px;
.verticalLine {
display: none;
}

.api-info {
order: -1;
}

.api-methods {
order: 1;
}
}

</style>
Expand Down Expand Up @@ -189,42 +199,69 @@
<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-info">
<section>
<div class="row col-lg-8 col-lg-offset-2">
<div class="row">
<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>

<div class="lineBreak verticalLine"></div>

<div class="container api-methods">
<section>
<div class="row">
<h3>Methods</h3>
<a>https://help.branch.io/developers-hub/docs/web-full-reference</a>
<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>

<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>
Expand All @@ -241,27 +278,7 @@ <h3>Api Settings</h3>
</div>
</section>
</div>
<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>
</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 7f203c5

Please sign in to comment.