Skip to content
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

Updated Bootstrap #102

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Updated Bootstrap #102

Show file tree
Hide file tree
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
237 changes: 133 additions & 104 deletions browser.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,60 +1,63 @@
<!doctype html>
<head>
<meta charset="utf-8">
<title>The HAL Browser</title>
<link rel="stylesheet" media="screen" href="vendor/css/bootstrap.css" />
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
</style>
<link rel="stylesheet" media="screen" href="vendor/css/bootstrap-responsive.css" />
<link rel="stylesheet" media="screen" href="styles.css" />
</head>

<body>
<head>
<meta charset="utf-8">
<title>The HAL Browser</title>
<link rel="stylesheet" media="screen" href="vendor/css/bootstrap.css" />
<style type="text/css">
body {
height: 100vh;
}

<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<a class="brand">The HAL Browser</a>
<div class="nav-collapse">
<ul class="nav">
<li><a href="#/" id="entryPointLink">Go To Entry Point</a></li>
<li><a href="https://github.com/mikekelly/hal-browser">About The HAL Browser</a></li>
</ul>
</div>
</div>
</div>
.sidebar-nav {
padding: 9px 0;
}
</style>
<link rel="stylesheet" media="screen" href="styles.css" />
</head>

<body>

<nav class="navbar sticky-top navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#">The HAL Browser</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#/" id="entryPointLink">Go To Entry Point</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/mikekelly/hal-browser">About The HAL Browser</a>
</li>
</ul>
</div>
</nav>

<div id="browser" class="container-fluid"></div>
<div id="browser" class="container-fluid"></div>

<script id="location-bar-template" type="text/template">
<form>
<div class="input-append span12 location-bar-container">
<input class="span11" id="appendedInputButton" type="text" value="<%= _.escape(url) %>">
<button class="btn" type="submit">Go!</button>
<span class="ajax-loader"></span>
</div>
</form>
<form>
<div class="input-group mb-3">
<input type="text" class="form-control" id="appendedInputButton" type="text" value="<%= _.escape(url) %>">
<div class="input-group-append">
<button class="btn btn-outline-secondary input-group-text" type="submit">
Go!
</button>
</div>
</div>
</form>
</script>

<script id="links-template" type="text/template">
<h2>Links</h2>
<table class="table">
<thead>
<tr>
<th>rel</th>
<th>title</th>
<th>name / index</th>
<th>docs</th>
<th>GET</th>
<th>NON-GET</th>
<th scope="col">rel</th>
<th scope="col">title</th>
<th scope="col">name / index</th>
<th scope="col">docs</th>
<th scope="col">GET</th>
<th scope="col">NON-GET</th>
</tr>
</thead>
<tbody>
Expand All @@ -67,14 +70,14 @@ <h2>Links</h2>
<td><%= link.name ? 'name: ' + link.name : 'index: ' + i %></a></td>
<td>
<% if (HAL.isUrl(rel)) { %>
<a class="dox" href="<%= HAL.normalizeUrl(HAL.buildUrl(rel)) %>"><i class="icon-book"></i></a>
<a class="dox" href="<%= HAL.normalizeUrl(HAL.buildUrl(rel)) %>">&#128366;</i></a>
<% } %>
</td>
<td>
<% if (link.templated === true) { %>
<a class="query btn btn-success" href="<%= HAL.normalizeUrl(link.href) %>" title="Query URI template"><i class="icon-question-sign"></i></a>
<a class="query btn btn-success" href="<%= HAL.normalizeUrl(link.href) %>" title="Query URI template">?</i></a>
<% } else { %>
<a class="follow btn btn-success" href="<%= HAL.normalizeUrl(link.href) %>" title="Follow link"><i class="icon-arrow-right"></i></a>
<a class="follow btn btn-success" href="<%= HAL.normalizeUrl(link.href) %>" title="Follow link">&#10140;</i></a>
<% } %>
</td>
<td>
Expand All @@ -89,14 +92,14 @@ <h2>Links</h2>
<td><%= obj.name || '' %></td>
<td>
<% if (HAL.isUrl(rel)) { %>
<a class="dox" href="<%= HAL.normalizeUrl(HAL.buildUrl(rel)) %>"><i class="icon-book"></i></a>
<a class="dox btn btn-success" href="<%= HAL.normalizeUrl(HAL.buildUrl(rel)) %>">&#128366;</i></a>
<% } %>
</td>
<td>
<% if (obj.templated === true) { %>
<a class="query btn btn-success" href="<%= HAL.normalizeUrl(obj.href) %>" title="Query URI template"><i class="icon-question-sign"></i></a>
<a class="query btn btn-success" href="<%= HAL.normalizeUrl(obj.href) %>" title="Query URI template">?</i></a>
<% } else { %>
<a class="follow btn btn-success" href="<%= HAL.normalizeUrl(obj.href) %>" title="Follow link"><i class="icon-arrow-right"></i></a>
<a class="follow btn btn-success" href="<%= HAL.normalizeUrl(obj.href) %>" title="Follow link">&#10140;</i></a>
<% } %>
</td>
<td>
Expand All @@ -111,87 +114,113 @@ <h2>Links</h2>

<script id="properties-template" type="text/template">
<h2>Properties</h2>
<pre><%= properties %></pre>
<div class="card read-only">
<div class="card-body">
<pre><%= properties %></pre>
</div>
</div>
</script>

<script id="request-headers-template" type="text/template">
<h2>Custom Request Headers</h2>
<textarea class="span12"></textarea>
<div class="input-group">
<textarea class="form-control"></textarea>
</div>
</script>

<script id="response-headers-template" type="text/template">
<h2>Response Headers</h2>
<pre><%= status.code %> <%= status.text %>
<div class="card read-only">
<div class="card-body">
<pre><%= status.code %> <%= status.text %>

<% _.each(headers, function(value, name) {
%><%= _.escape(name) %>: <%
if(HAL.isFollowableHeader(name)) {
%><a href="<%= HAL.normalizeUrl(value) %>" class="follow"><%
}
%><%= _.escape(value)
%><% if(HAL.isFollowableHeader(name)) {
%></a><%
} %>
<% }) %></pre>
%><%= _.escape(name) %>: <%
if(HAL.isFollowableHeader(name)) {
%><a href="<%= HAL.normalizeUrl(value) %>" class="follow"><%
}
%><%= _.escape(value)
%><% if(HAL.isFollowableHeader(name)) {
%></a><%
} %>
<% }) %>
</pre>
</div>
</div>
</script>

<script id="response-body-template" type="text/template">
<h2>Response Body</h2>
<pre><%= _.escape(body) %></pre>
<div class="card read-only">
<div class="card-body">
<pre><%= _.escape(body) %></pre>
</div>
</div>
</script>

<script id="query-uri-template" type="text/template">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3>Expand URI Template</h3>
</div>

<form id="query" action="<%= href %>">
<div class="modal-body">
<p>URI Template:</p>
<pre><%- href %></pre>
<p>Input (JSON):</p>
<textarea><%= input %></textarea>
<p>Expanded URI:</p>
<pre class="preview">&nbsp;</pre>
</div>

<div class="modal-footer">
<button type="submit" class="btn btn-primary">Follow URI</button>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5>Expand URI Template</h5>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
</div>
<form id="query" action="<%= href %>">
<div class="modal-body">
<label for="uri">URI Template:</label>
<div class="card read-only" id="uri">
<div class="card-body">
<pre><%- href %></pre>
</div>
</div>
<label for="input">Input (JSON):</label>
<textarea class="form-control" id="input"><%= input %></textarea>
<label for="preview">Expanded URI:</label>
<div class="card read-only" id="preview">
<div class="card-body">
<pre class="preview">&nbsp;</pre>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Follow URI</button>
</div>
</form>
</div>
</form>
</div>
</script>


<script id="non-safe-request-template" type="text/template">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3>Make a non-GET request</h3>
</div>

<form class="non-safe" action="<%= href %>">
<div class="modal-body">
<p>Target URI</p>
<input name="url" type="text" class="url" value="<%= href %>" />
<p>Method:</p>
<input name="method" type="text" class="method" value="POST" />
<p>Headers:</p>
<textarea name="headers" class="headers" style="height: 100px">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Make a NON-GET request</h5>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
</div>
<form class="non-safe" action="<%= href %>">
<div class="modal-body">
<label for="url">Target URI</label>
<input name="url" type="text" class="url form-control" id="url" value="<%= href %>" />
<label for="method">Method:</label>
<input name="method" type="text" class="method form-control" id="method" value="POST" />
<label for="headers">Headers:</label>
<textarea name="headers" class="headers form-control" style="height: 100px" id="headers">
Content-Type: application/json
<%= user_defined_headers %>
</textarea>
<p>Body:</p>
<textarea name="body" class="body" style="height: 200px">
</textarea>
<label for="body">Body:</label>
<textarea name="body" class="body form-control" style="height: 200px" id="body">
{

}
</textarea>
</div>

<div class="modal-footer">
<button type="submit" class="btn btn-primary">Make Request</button>
</textarea>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Make Request</button>
</div>
</form>
</div>
</div>
</form>
</script>

<script id="embedded-resources-template" type="text/template">
Expand Down Expand Up @@ -253,4 +282,4 @@ <h2>Embedded Resources</h2>
});
Backbone.history.start();
</script>
</body>
</body>
2 changes: 1 addition & 1 deletion js/hal/views/browser.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ HAL.Views.Browser = Backbone.View.extend({
this.inspectorView = new HAL.Views.Inspector({ vent: this.vent });
},

className: 'hal-browser row-fluid',
className: 'row',

render: function() {
this.$el.empty();
Expand Down
2 changes: 1 addition & 1 deletion js/hal/views/explorer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ HAL.Views.Explorer = Backbone.View.extend({
this.resourceView = new HAL.Views.Resource({ vent: this.vent });
},

className: 'explorer span6',
className: 'col-6',

render: function() {
this.navigationView.render();
Expand Down
2 changes: 1 addition & 1 deletion js/hal/views/inspector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ HAL.Views.Inspector = Backbone.View.extend({
this.vent.bind('response', this.renderResponse);
},

className: 'inspector span6',
className: 'col-6',

render: function() {
this.$el.html(this.template());
Expand Down
15 changes: 7 additions & 8 deletions login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,35 +5,34 @@
<title>Sign in - HAL Browser</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="vendor/css/bootstrap.css" rel="stylesheet">
<link href="vendor/css/bootstrap-responsive.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
max-width: 300px;
max-width: 350px;
padding: 19px 29px 29px;
margin: 0 auto 20px;
background-color: #fff;
border: 1px solid #e5e5e5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
text-align: center;
}
.form-signin .form-signin-heading {
margin-bottom: 10px;
margin-bottom: 40px;
}
.form-signin input[type="text"], .form-signin input[type="password"] {
font-size: 16px;
height: auto;
margin-bottom: 15px;
padding: 7px 9px;
}
.form-signin .form-signin-btn {
margin-top: 25px;
}
</style>
<script src="vendor/js/jquery-1.10.2.min.js"></script>
<script src="vendor/js/bootstrap.js"></script>
Expand Down Expand Up @@ -69,7 +68,7 @@ <h3 class="form-signin-heading">HAL Browser - OAuth2</h3>
<input type="text" class="input-block-level" placeholder="Client Secret" id="clientsecret">
<input type="text" class="input-block-level" placeholder="Username" id="username">
<input type="password" class="input-block-level" placeholder="Password" id="password">
<button type="submit" class="btn btn-large btn-primary" id="login">Sign in</button>
<button type="submit" class="btn btn-large btn-primary form-signin-btn" id="login">Sign in</button>
</form>
</div>
</body>
Expand Down
Loading