Skip to content

Commit 09ac150

Browse files
ziscloudziscloud
authored
Merge pull request #36 from bertysentry/feature/issue-5-height-does-not-work
Fix height issues (as reported in issue #5) and various improvements
2 parents bbccfe3 + 360cb78 commit 09ac150

15 files changed

+1084
-122
lines changed

‎css/stylesheet.css‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
header, footer {
2+
padding: 20px;
3+
background-image: url('../img/header.png');
4+
background-size: 256px 256px;
5+
}
6+
footer {
7+
color: #fff;
8+
text-align: center;
9+
}
10+
.nyt-logo {
11+
max-height: 40px;
12+
margin-top: 5px;
13+
margin-right: 5px;
14+
}
15+
16+
nav.navbar {
17+
margin-bottom: 10px;
18+
background-color: #fff;
19+
border: 0px;
20+
border-radius: 2px;
21+
}
22+
#navbar {
23+
margin: 0px;
24+
}
25+
#navbar .navbar-nav li iframe {
26+
margin-top: 15px;
27+
}
28+
#navbar .navbar-nav li:last-child iframe {
29+
margin-right: 15px;
30+
}
31+
32+
@media screen and (max-width: 767px) {
33+
#navbar .navbar-nav li iframe {
34+
display: none;
35+
}
36+
}
37+
38+
.mast-head {
39+
margin: 10px 0;
40+
}
41+
.mast-head h1 {
42+
margin-bottom: 15px;
43+
color: #fff;
44+
}
45+
.mast-head p {
46+
color: #fff;
47+
}
48+
49+
.mast-links {
50+
padding-top: 10px;
51+
}
52+
53+
.mast-links > * {
54+
vertical-align: middle;
55+
margin-bottom: 10px;
56+
}
57+
58+
.mast-links > .btn {
59+
margin-right: 30px;
60+
}
61+
main {
62+
margin: 10px 20px;
63+
}
64+
main .container {
65+
margin-bottom: 40px;
66+
}
67+
68+
code.hljs {
69+
border: 1px solid #ccc;
70+
padding: 1em;
71+
white-space: pre;
72+
margin-bottom: 10px;
73+
}
74+
75+
.example {
76+
position: relative;
77+
border: 1px solid #ccc;
78+
padding: 1em 1em 0.5em 1em;
79+
border-radius: 4px 4px 0 0;
80+
}
81+
82+
.example:after {
83+
content: "Example";
84+
position: absolute;
85+
top: 0px;
86+
right: 0px;
87+
padding: 3px 7px;
88+
font-size: 12px;
89+
font-weight: bold;
90+
background-color: #f5f5f5;
91+
border: 1px solid #ccc;
92+
color: #9da0a4;
93+
border-radius: 0px 4px 0px 4px;
94+
border-width: 0px 0px 1px 1px;
95+
}
96+
97+
.example + code.hljs {
98+
border-top: 0;
99+
border-radius: 0px 0px 4px 4px;
100+
}
101+
102+
.example > * {
103+
margin-bottom: 10px;
104+
}
105+
106+
.example > div.toggle {
107+
margin-right: 10px;
108+
}
109+
110+
.table-striped code {
111+
background-color: inherit;
112+
}

‎dist/angular-bootstrap-toggle.css‎

Lines changed: 13 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
margin-right: 5px;
55
}
66
.toggle {
7-
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
87
position: relative;
98
overflow: hidden;
109
}
@@ -51,46 +50,27 @@
5150
width: 0px;
5251
border-width: 0 1px;
5352
}
54-
.toggle.btn {
55-
min-width: 59px;
56-
min-height: 34px;
53+
.toggle-on-pad.btn.btn-lg {
54+
padding-right: 32px;
5755
}
58-
.toggle-on.btn {
56+
.toggle-off-pad.btn.btn-lg {
57+
padding-left: 32px;
58+
}
59+
.toggle-on-pad.btn {
5960
padding-right: 24px;
6061
}
61-
.toggle-off.btn {
62+
.toggle-off-pad.btn {
6263
padding-left: 24px;
6364
}
64-
.toggle.btn-lg {
65-
min-width: 79px;
66-
min-height: 45px;
67-
}
68-
.toggle-on.btn-lg {
69-
padding-right: 31px;
70-
}
71-
.toggle-off.btn-lg {
72-
padding-left: 31px;
73-
}
74-
.toggle-handle.btn-lg {
75-
width: 40px;
76-
}
77-
.toggle.btn-sm {
78-
min-width: 50px;
79-
min-height: 30px;
80-
}
81-
.toggle-on.btn-sm {
65+
.toggle-on-pad.btn.btn-sm {
8266
padding-right: 20px;
8367
}
84-
.toggle-off.btn-sm {
68+
.toggle-off-pad.btn.btn-sm {
8569
padding-left: 20px;
8670
}
87-
.toggle.btn-xs {
88-
min-width: 35px;
89-
min-height: 22px;
90-
}
91-
.toggle-on.btn-xs {
92-
padding-right: 12px;
71+
.toggle-on-pad.btn.btn-xs {
72+
padding-right: 9px;
9373
}
94-
.toggle-off.btn-xs {
95-
padding-left: 12px;
74+
.toggle-off-pad.btn.btn-xs {
75+
padding-left: 9px;
9676
}

‎dist/angular-bootstrap-toggle.js‎

Lines changed: 61 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,13 @@
6262
* Example: <toggle ... toggle-style="{'border': '1px dashed #f00'}">
6363
*/
6464
toggleStyle: '',
65+
/**
66+
* Type: string
67+
* Default: ''
68+
* Description: Passes a class to the toggle's first immediate child
69+
**/
70+
toggleClass: '',
71+
style: '',
6572
/**
6673
* Type: string
6774
* Default: ''
@@ -89,8 +96,8 @@
8996
})
9097

9198
.controller('ToggleController',
92-
['$scope', '$attrs', '$interpolate', '$log', 'toggleConfig', '$toggleSuppressError',
93-
function ($scope, $attrs, $interpolate, $log, toggleConfig, $toggleSuppressError) {
99+
['$scope', '$attrs', '$interpolate', '$log', '$document', 'toggleConfig', '$toggleSuppressError',
100+
function ($scope, $attrs, $interpolate, $log, $document, toggleConfig, $toggleSuppressError) {
94101
var self = this;
95102
var labels, spans, divs;
96103
var ngModelCtrl;
@@ -122,6 +129,18 @@
122129
if (self.offstyle) {
123130
self.offClass = self.offstyle;
124131
}
132+
// Special treatment for style, now deprecated and replaced with toggleClass
133+
if (self.style) {
134+
self.toggleClass = self.style;
135+
}
136+
137+
// Special case: empty on and off labels (replace with blank space)
138+
if (self.on === '') {
139+
self.on = '&nbsp;';
140+
}
141+
if (self.off === '') {
142+
self.off = '&nbsp;';
143+
}
125144

126145
this.init = function (ngModelCtrl_) {
127146
ngModelCtrl = ngModelCtrl_;
@@ -139,6 +158,40 @@
139158
angular.element(self.onElement).html(self.on);
140159
angular.element(self.offElement).html(self.off);
141160

161+
// Set the button size
162+
angular.element(self.wrapperElement).addClass(self.size);
163+
angular.element(self.onElement).addClass(self.size);
164+
angular.element(self.offElement).addClass(self.size);
165+
angular.element(self.handleElement).addClass(self.size);
166+
167+
// Set the toggleClass on the wrapper
168+
angular.element(self.wrapperElement).addClass(self.toggleClass);
169+
170+
// Calculate the propery width
171+
if (!self.width) {
172+
var wrapperComputedWidth = Math.max(
173+
self.onElement.scrollWidth,
174+
self.offElement.scrollWidth
175+
) + Math.max(self.handleElement.scrollWidth, 16) / 2 + 2;
176+
self.width = wrapperComputedWidth + 'px';
177+
}
178+
179+
// Calculate the proper height
180+
if (!self.height) {
181+
var wrapperComputedHeight = Math.max(
182+
self.onElement.scrollHeight,
183+
self.offElement.scrollHeight) + 2;
184+
self.height = wrapperComputedHeight + 'px';
185+
}
186+
187+
// Add the toggle-on and toggle-off classes, that change position and size of the labels
188+
// and make sure that the buttons are properly placed.
189+
// Once this is done, the height and width properties of the labels is no longer relevant,
190+
// because of their new placement.
191+
angular.element(self.onElement).addClass(self.onClass).addClass('toggle-on');
192+
angular.element(self.offElement).addClass(self.offClass).addClass('toggle-off');
193+
194+
// Compute first style
142195
self.computeStyle();
143196

144197
ngModelCtrl.$render = function () {
@@ -165,38 +218,9 @@
165218

166219
// Build an object for widget's ng-style
167220
$scope.wrapperStyle = (self.toggleStyle) ? $scope.$parent.$eval(self.toggleStyle) : {};
221+
$scope.wrapperStyle.width = self.width;
222+
$scope.wrapperStyle.height = self.height;
168223

169-
// Calculate the proper width
170-
if (self.width) {
171-
$scope.wrapperStyle.width = self.width;
172-
} else {
173-
var wrapperComputedWidth = Math.max(
174-
self.onElement.scrollWidth,
175-
self.offElement.scrollWidth) + 12;
176-
$scope.wrapperStyle.width = wrapperComputedWidth + 'px';
177-
}
178-
179-
// Calculate the proper height
180-
if (self.height) {
181-
$scope.wrapperStyle.height = self.height;
182-
} else {
183-
var wrapperComputedHeight = Math.max(
184-
self.onElement.offsetHeight,
185-
self.offElement.offsetHeight);
186-
var wrapperHeight = self.wrapperElement.offsetHeight;
187-
188-
if (wrapperHeight < wrapperComputedHeight &&
189-
self.size !== 'btn-xs' && self.size !== 'btn-sm') {
190-
$scope.wrapperStyle.height = wrapperComputedHeight + 'px';
191-
} else {
192-
$scope.wrapperStyle.height = wrapperHeight + 'px';
193-
}
194-
}
195-
196-
// Build arrays that will be passed to widget's ng-class.
197-
$scope.onComputedClass = [self.onClass , self.size, 'toggle-on'];
198-
$scope.offComputedClass = [self.offClass, self.size, 'toggle-off'];
199-
$scope.handleComputedClass = [self.size , 'toggle-handle'];
200224
};
201225

202226
this.toggle = function () {
@@ -229,6 +253,7 @@
229253
}
230254
});
231255
});
256+
232257
}])
233258

234259
.directive('toggle', function () {
@@ -237,9 +262,9 @@
237262
template: '<div ng-cloak class="toggle btn off" ng-style="wrapperStyle"' +
238263
'ng-click="onSwitch($event)">' +
239264
'<div class="toggle-group">' +
240-
'<label class="btn" ng-class="onComputedClass"></label>' +
241-
'<label class="btn active" ng-class="offComputedClass"></label>' +
242-
'<span class="btn btn-default" ng-class="handleComputedClass"></span>' +
265+
'<label class="btn toggle-on-pad"></label>' +
266+
'<label class="btn toggle-off-pad active"></label>' +
267+
'<span class="btn btn-default toggle-handle"></span>' +
243268
'</div>' +
244269
'</div>',
245270
scope: {

‎dist/angular-bootstrap-toggle.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/angular-bootstrap-toggle.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎img/header.png‎

87.4 KB
Loading

‎img/nyt.png‎

4.9 KB
Loading

0 commit comments

Comments
 (0)