Skip to content

Commit

Permalink
Merge pull request #27 from lyft/HOTFIX-fully-overflow-interface
Browse files Browse the repository at this point in the history 
Overflow interface for resources and resources detail view
  • Loading branch information
@ryan-lane
ryan-lane committed Mar 9, 2015
2 parents 61901bc + 31c3fc4 commit 1694a5d
Show file tree
Hide file tree
Showing 5 changed files with 98 additions and 56 deletions.
4 changes: 2 additions & 2 deletions confidant/public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,14 +40,14 @@ <h1>Confidant</h1>
</nav>
</header>

<div class="container-fluid" role="navigation" ng-controller="common.NavCtrl">
<div class="container-fluid container-bottomborder" role="navigation" ng-controller="common.NavCtrl">
<ul class="nav nav-pills">
<li role="presentation" ng-class="{ active: viewLocation == 'resources'}"><a href="#/resources">Resources <span class="icon-lock"></span></a></li>
<!--<li role="presentation" ng-class="{ active: viewLocation == 'history'}"><a href="#/history">History<span class="icon-scroll"></span></a></li>-->
<li role="presentation" ng-class="{ active: viewLocation == 'admin'}"><a href="#/admin">Admin <span class="icon-settings"></span></a></li>
</ul>
</div>
<div ui-view="main" class="container-fluid"></div>
<div ui-view="main" class="container-fluid container-body"></div>

<!-- build:js scripts/oldieshim.js -->
<!--[if lt IE 9]>
Expand Down
63 changes: 33 additions & 30 deletions confidant/public/modules/resources/views/credential-details.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,36 +6,40 @@
</div>
<div class="form-group">
<label for="credentialPairInputs">Credential Pairs</label>
<table class="table well" id="credentialPairInputs">
<thead>
<tr>
<th>Key</th>
<th>Value</th>
<th ng-show="editableForm.$visible">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="credentialPair in credential.credentialPairs | filter:filterCredentialPair">
<td>
<span editable-text="credentialPair.key" e-required>{{ credentialPair.key || 'Not set' }}</span>
</td>
<td>
<div class="row">
<div class="col-md-10">
<span editable-textarea="credentialPair.value" e-required e-cols="40" e-rows="10"><pre>{{ showValue(credentialPair) }}</pre></span>
</div>
<div class="col-md-2">
<a ng-click="toggleCredentialMask(credentialPair)" ng-show="!credentialPair.shown && !editableForm.$visible"><span class="glyphicon glyphicon-eye-open"></span></a>
<a ng-click="toggleCredentialMask(credentialPair)" ng-show="credentialPair.shown && !editableForm.$visible"><span class="glyphicon glyphicon-eye-close"></span></a>
</div>
<div class="well" id="credentialPairInputs">
<div class="row">
<div></div>
<div class="col-md-4 h6">Key</div>
<div class="col-md-6 h6">Value</div>
<div class="col-md-2 h6" ng-show="editableForm.$visible">Action</div>
</div>
<br>
<div class="row" ng-repeat="credentialPair in credential.credentialPairs | filter:filterCredentialPair">
<div class="col-md-4">
<span editable-text="credentialPair.key" e-required>{{ credentialPair.key || 'Not set' }}</span>
</div>
<div class="col-md-6" style="padding-bottom: 10px">
<div class="row">
<div class="col-md-10">
<span e-class="textarea-fullwidth" editable-textarea="credentialPair.value" e-rows="5" e-required><pre>{{ showValue(credentialPair) }}</pre></span>
</div>
</td>
<td ng-show="editableForm.$visible">
<span type="button" ng-click="deleteCredentialPair(credentialPair.$$hashKey)" class="btn btn-loud">Del</span>
</td>
</tr>
</tbody>
</table>
<div class="col-md-2" ng-show="!editableForm.$visible">
<a ng-click="toggleCredentialMask(credentialPair)" ng-show="!credentialPair.shown && !editableForm.$visible"><span class="glyphicon glyphicon-eye-open"></span></a>
<a ng-click="toggleCredentialMask(credentialPair)" ng-show="credentialPair.shown && !editableForm.$visible"><span class="glyphicon glyphicon-eye-close"></span></a>
</div>
</div>
</div>
<div class="col-md-2" ng-show="editableForm.$visible">
<span type="button" ng-click="deleteCredentialPair(credentialPair.$$hashKey)" class="btn btn-loud">Del</span>
</div>
<br>
</div>
</div>
</div>
<div class="row">
<span ng-show="editableForm.$visible">
<button type="button" ng-disabled="editableForm.$waiting" ng-click="addCredentialPair()" class="btn pull-right">Add row</button>
</span>
</div>
<div class="form-group" ng-show="credential.id">
<label for="credentialId">Credential ID</label>
Expand All @@ -56,7 +60,6 @@
<div class="buttons">
<button type="button" class="btn btn-default" ng-click="editableForm.$show()" ng-show="!editableForm.$visible">Edit</button>
<span ng-show="editableForm.$visible">
<button type="button" ng-disabled="editableForm.$waiting" ng-click="addCredentialPair()" class="btn pull-right">add row</button>
<button type="submit" class="btn" ng-disabled="editableForm.$waiting">Save</button>
<button type="button" class="btn btn-alternate" ng-disabled="editableForm.$waiting" ng-click="editableForm.$cancel()">Cancel</button>
</span>
Expand Down
8 changes: 4 additions & 4 deletions confidant/public/modules/resources/views/resources.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="row">
<div class="col-md-4 well">
<div class="row row-relative">
<div class="col-md-4 well row-relative">
<div class="row">
<div class="form">
<div class="form-group col-md-9">
Expand All @@ -14,7 +14,7 @@
</div>
</div>
</div>
<div class="row row-overflow">
<div class="row row-overflow-resources">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">Credentials</div>
Expand All @@ -37,5 +37,5 @@
</div>
</div>
</div>
<div ui-view="details" class="col-md-8"><div class="row"><div class="no-details-text"><h3>No resource selected.</h3></div></div></div>
<div ui-view="details" class="col-md-8 row-overflow"><div class="row"><div class="no-details-text"><h3>No resource selected.</h3></div></div></div>
</div>
26 changes: 16 additions & 10 deletions confidant/public/modules/resources/views/service-details.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,25 @@
</div>
<div class="form-group">
<label for="credentialInputs">Credentials</label>
<div ng-repeat="credential in service.credentials | filter:filterCredentials" class="row">
<div class="col-md-8">
<span editable-select="credential.id" e-ng-selected="credential.id == c.id" e-name="{{ credential.id }}SelectMenu" e-ng-options="c.id as c.name for c in $parent.credentialList">
{{ credential.name }}
</span>
<span ng-hide="editableForm.$visible">(Revision: {{ credential.revision }})</span>
</div>
<div class="col-md-4">
<span type="button" ng-click="deleteCredential(credential.$$hashKey)" class="btn btn-loud" ng-show="editableForm.$visible">Del</span>
<div class="well">
<div ng-repeat="credential in service.credentials | filter:filterCredentials" class="row">
<div class="col-md-8">
<span editable-select="credential.id" e-ng-selected="credential.id == c.id" e-name="{{ credential.id }}SelectMenu" e-ng-options="c.id as c.name for c in $parent.credentialList">
{{ credential.name }}
</span>
<span ng-hide="editableForm.$visible">(Revision: {{ credential.revision }})</span>
</div>
<div class="col-md-4" style="padding-bottom: 10px">
<span type="button" ng-click="deleteCredential(credential.$$hashKey)" class="btn btn-loud" ng-show="editableForm.$visible">Del</span>
</div>
</div>
</div>
</div>
<div class="row">
<span ng-show="editableForm.$visible">
<button type="button" ng-disabled="editableForm.$waiting" ng-click="addCredential()" class="btn pull-right">Add credential</button>
</span>
</div>
<div class="form-group" ng-hide="newService || missingService">
<label for="serviceModifiedDate">Service Modified Date</label>
<span id="serviceModifiedDate">{{ service.modified_date }}</span>
Expand All @@ -33,7 +40,6 @@
<div class="buttons">
<button type="button" class="btn btn-default" ng-click="editableForm.$show()" ng-show="!editableForm.$visible">Edit</button>
<span ng-show="editableForm.$visible">
<button type="button" ng-disabled="editableForm.$waiting" ng-click="addCredential()" class="btn pull-right">Add credential</button>
<button type="submit" class="btn" ng-disabled="editableForm.$waiting">Save</button>
<button type="button" class="btn btn-alternate" ng-disabled="editableForm.$waiting" ng-click="editableForm.$cancel()">Cancel</button>
</span>
Expand Down
53 changes: 43 additions & 10 deletions confidant/public/styles/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@ body {
background-color: $snow;
}

#site-navigation {
position: relative;
}

#page-header {
color: $inverted;
h1 {
Expand All @@ -38,9 +42,46 @@ body {
text-align: center;
}

.row-overflow-resources {
position: relative;
overflow-y: auto;
height: calc(100% - 50px);
}

.row-overflow {
height: 500px;
overflow: auto;
position: relative;
overflow-y: auto;
height: 100%;
}

.row-relative {
position: relative;
height: 100%;
}

.container-body {
height: calc(100% - 170px);
padding-top: 5px;
}

.container-bottomborder {
border-bottom-width: 1px;
border-bottom-color: $green;
border-bottom-style: solid;
}

.textarea-fullwidth {
width: 100%;
}

// Wrapper used by xeditable
.editable-textarea {
width: 100%;
}

// Wrapper used by xeditable
.editable-controls {
width: 100%;
}

// form styles for TOM
Expand All @@ -56,11 +97,3 @@ body {
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
text-transform: capitalize;
}

.stache {
background: url(/images/mustache.svg) center center no-repeat;
width: 119px;
height: 50px;
margin: 1em auto;
background-size: contain;
}

0 comments on commit 1694a5d

Please sign in to comment.