Skip to content

Commit

Permalink
Merge pull request #71 from diggyk/master
Browse files Browse the repository at this point in the history
Added the missing box-continuation directive
  • Loading branch information
jathanism committed Oct 13, 2015
2 parents 586fed0 + f29b634 commit 63169ea
Show file tree
Hide file tree
Showing 3 changed files with 101 additions and 14 deletions.
54 changes: 47 additions & 7 deletions hermes/webapp/src/css/main.less
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ body {
font-size: 1.2em;
margin: 0;
padding: 0px 0px 20px 0px;
overflow: hidden;
}

h1 {
Expand Down Expand Up @@ -131,9 +132,9 @@ button {
}
&:active {
background: desaturate(@btn-color2, 15%);
-webkit-box-shadow: inset 0px 0px 6px @shadow-color;
-moz-box-shadow: inset 0px 0px 6px @shadow-color;
box-shadow: inset 0px 0px 6px @shadow-color;
-webkit-box-shadow: inset 0px 0px 6px lighten(@shadow-color, 20%);
-moz-box-shadow: inset 0px 0px 6px lighten(@shadow-color, 20%);
box-shadow: inset 0px 0px 6px lighten(@shadow-color, 20%);
transform: translate(-2px, -2px);
-webkit-transform: translate(0px, 0px);
-moz-transform: translate(0px, 0px);
Expand Down Expand Up @@ -469,16 +470,55 @@ a {
}

.quest-creation {
.panel-row {
overflow: hidden;
&.top-row{
.helper-panel {
-webkit-border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
}
&:not(.top-row) {
.helper-panel, .create-panel {
padding-top: 20px;
}
}
&.bottom-row {
.helper-panel {
-webkit-border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
padding: 0;
margin: 0;
max-height: 8px;
}
.create-panel {
padding: 0;
margin: 0;
max-height: 8px;
}
}
}
.helper-panel {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
height: 100%;
background: @unselected-color;
border-radius: 5px;
margin: 5px 0px;
padding: 10px;
padding-bottom: 20010px;
margin-bottom: -20000px;
&:last-of-type {
-webkit-border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
}
}
.create-panel {
padding: 10px;
padding-bottom: 20010px;
margin-bottom: -20000px;
&:not(:first-child) {
padding-top: 50px;
}
}
.host-list {
-moz-border-radius: 5px;
Expand Down
37 changes: 37 additions & 0 deletions hermes/webapp/src/js/directives/boxContinuation.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
/**
* Directive for watching a div and adding a "box-continuation" class when a
* particular height is reached. This is used when we have a max-height for a div
* with a scroll and want to clue the user in to the fact that the box has additional
* items in it.
*
* A "watch" attribute must be specified that let's us know what data
* modifies the contents of the div (and therefore might alter the height).
*/
(function() {
function boxContinuation () {
return {
restrict: 'A',
scope: {
'watch': '='
},
link: function ($scope, $ele, $attrs) {
var triggerHeight = $attrs.triggerHeight || 200;

$scope.$watch('watch',
classAlteration, true);

function classAlteration() {
setTimeout(function() {
if ($ele[0].clientHeight >= triggerHeight) {
$ele[0].classList.add('box-continuation');
} else {
$ele[0].classList.remove('box-continuation');
}
}, 1);
}
}
}
}

angular.module('hermesApp').directive('boxContinuation', boxContinuation);
})();
24 changes: 17 additions & 7 deletions hermes/webapp/src/templates/questCreation.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
</div>
</div>
<!-- ROW ONE -->
<div class="row">
<div class="row panel-row top-row">
<div class="col-md-6 create-panel">
<div><strong>For hosts:</strong></div>
<div class="host-list" box-continuation watch="qc.hostList">
Expand Down Expand Up @@ -60,7 +60,7 @@
</div>
</div>
<!-- ROW TWO -->
<div class="row">
<div class="row panel-row">
<div class="col-md-6 create-panel">
<div><label>Start with event:
<select ng-model="qc.eventTypesSelection"
Expand All @@ -81,7 +81,7 @@
</div>
</div>
<!-- ROW THREE -->
<div class="row">
<div class="row panel-row">
<div class="col-md-6 create-panel">
<div style="display: inline-block; min-height: 210px;"><label for="datepicker">Target Date:</label>
<uib-datepicker id="datepicker" ng-model="qc.targetDate" min-date="qc.today" show-weeks="false" max-mode="day" custom-class="qc.calDateClasser(date, mode)"></uib-datepicker>
Expand All @@ -94,7 +94,8 @@
<div>The targeted completion date and time for the quest. As the date gets closer, notifications to service owners will intensify.</div>
</div>
</div>
<div class="row">
<!-- ROW FOUR -->
<div class="row panel-row">
<div class="col-md-6 create-panel">
<div><label for="description">With description:</label>
<textarea id="description" ng-model="qc.description">
Expand All @@ -108,8 +109,8 @@
and what action they should take.</div>
</div>
</div>
<!-- ROW FOUR -->
<div class="row">
<!-- ROW FIVE -->
<div class="row panel-row">
<div class="col-md-6 create-panel">
<div class="error-message" ng-if="qc.errorMessages" ng-repeat="msg in qc.errorMessages">{{msg}}</div>
<div>
Expand All @@ -119,7 +120,16 @@
</button>
</div>
</div>
<div class="col-md-4">
<div class="col-md-4 helper-panel">
&nbsp;
</div>
</div>
<!-- ROW BOTTOM -->
<div class="row panel-row bottom-row">
<div class="col-md-6 create-panel">
&nbsp;
</div>
<div class="col-md-4 helper-panel">
&nbsp;
</div>
</div>
Expand Down

0 comments on commit 63169ea

Please sign in to comment.