Skip to content

Commit

Permalink
fix modal alignment issue
Browse files Browse the repository at this point in the history 
fixes #72

The dropdown is now bigger on smaller screensizes as well
  • Loading branch information
@jdewit
jdewit committed Feb 1, 2013
1 parent 60024f5 commit bdb5675
Show file tree
Hide file tree
Showing 5 changed files with 112 additions and 86 deletions.
2 changes: 1 addition & 1 deletion css/bootstrap-timepicker.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

20 changes: 17 additions & 3 deletions js/bootstrap-timepicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,9 +64,13 @@
}
}

this.$widget = $(this.getTemplate()).appendTo(this.$element.parents('.bootstrap-timepicker')).on('click', $.proxy(this.widgetClick, this));
if (this.template !== false) {
this.$widget = $(this.getTemplate()).appendTo(this.$element.parents('.bootstrap-timepicker')).on('click', $.proxy(this.widgetClick, this));
} else {
this.$widget = false;
}

if (this.showInputs) {
if (this.showInputs && this.$widget !== false) {
this.$widget.find('input').each(function() {
$(this).on({
'click.timepicker': function() { $(this).select(); },
Expand Down Expand Up @@ -520,7 +524,9 @@

remove: function() {
$('document').off('.timepicker');
this.$widget.remove();
if (this.$widget) {
this.$widget.remove();
}
delete this.$element.data().timepicker;
},

Expand Down Expand Up @@ -703,6 +709,10 @@
},

updateWidget: function() {
if (this.$widget === false) {
return;
}

var hour = this.hour < 10 ? '0' + this.hour : this.hour,
minute = this.minute < 10 ? '0' + this.minute : this.minute,
second = this.second < 10 ? '0' + this.second : this.second;
Expand Down Expand Up @@ -731,6 +741,10 @@
},

updateFromWidgetInputs: function() {
if (this.$widget === false) {
return;
}

var time = $('input.bootstrap-timepicker-hour', this.$widget).val() + ':' +
$('input.bootstrap-timepicker-minute', this.$widget).val() +
(this.showSeconds ? ':' + $('input.bootstrap-timepicker-second', this.$widget).val() : '') +
Expand Down
2 changes: 1 addition & 1 deletion js/bootstrap-timepicker.min.js
View file

Large diffs are not rendered by default.

166 changes: 89 additions & 77 deletions less/timepicker.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,97 +37,109 @@
height: 16px;
}
}

.bootstrap-timepicker-widget {
&.dropdown-menu {
padding: 2px 3px 2px 2px;
&.open {
display: inline-block;
}
&:before {
border-bottom: 7px solid rgba(0, 0, 0, 0.2);
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
display: inline-block;
left: 9px;
position: absolute;
top: -7px;
}
&:after {
border-bottom: 6px solid #FFFFFF;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
content: "";
display: inline-block;
left: 10px;
position: absolute;
top: -6px;
}
}
.bootstrap-timepicker-widget {
&.dropdown-menu {
padding: 2px 3px 2px 2px;
&.open {
display: inline-block;
}

&.modal {
top: 30%;
margin-top: 0;
width: 200px;
margin-left: -100px;

.modal-content {
padding: 4px;
}
&:before {
border-bottom: 7px solid rgba(0, 0, 0, 0.2);
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
display: inline-block;
left: 9px;
position: absolute;
top: -7px;
}

a.btn, input {
border-radius: 4px;
&:after {
border-bottom: 6px solid #FFFFFF;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
content: "";
display: inline-block;
left: 10px;
position: absolute;
top: -6px;
}
}

table {
width: 100%;
a.btn, input {
border-radius: 4px;
}

table {
width: 100%;
margin: 0;

td {
text-align: center;
height: 30px;
margin: 0;
padding: 2px;

td {
text-align: center;
height: 30px;
&:not(.separator) {
min-width: 30px;
}

span {
width: 100%;
}
a {
border: 1px transparent solid;
width: 100%;
display: inline-block;
margin: 0;
padding: 2px;
padding: 8px 0;
outline: 0;
color: #333;

&:not(.separator) {
min-width: 30px;
&:hover {
text-decoration: none;
background-color: #eee;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border-color: #ddd;
}

span {
width: 100%;
}
a {
border: 1px transparent solid;
width: 100%;
display: inline-block;
margin: 0;
padding: 8px 0;
outline: 0;
color: #333;

&:hover {
text-decoration: none;
background-color: #eee;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border-color: #ddd;
}

i {
margin-top: 2px;
}
}
input {
width: 25px;
margin: 0;
text-align: center;
i {
margin-top: 2px;
}
}
input {
width: 25px;
margin: 0;
text-align: center;
}
}
}
}

.bootstrap-timepicker-widget .modal-content {
padding: 4px;
}

@media (min-width: 767px) {
.bootstrap-timepicker-widget.modal {
width: 200px;
margin-left: -100px;
}
}

@media (max-width: 767px) {
.bootstrap-timepicker {
width: 100%;

.dropdown-menu {
width: 100%;
}
}
}





8 changes: 4 additions & 4 deletions spec/js/KeyboardEventsSpec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -201,10 +201,10 @@ describe('Keyboard events feature', function() {
tp2.update();
$input2.parents('div').find('.add-on').click();

var $hourInput = tp2.$widget.find('input.bootstrap-timepicker-hour'),
$minuteInput = tp2.$widget.find('input.bootstrap-timepicker-minute'),
$secondInput = tp2.$widget.find('input.bootstrap-timepicker-second'),
$meridianInput = tp2.$widget.find('input.bootstrap-timepicker-meridian');
var $hourInput = $('body').find('input.bootstrap-timepicker-hour'),
$minuteInput = $('body').find('input.bootstrap-timepicker-minute'),
$secondInput = $('body').find('input.bootstrap-timepicker-second'),
$meridianInput = $('body').find('input.bootstrap-timepicker-meridian');

$hourInput.autotype('{{back}}{{back}}2');
$hourInput.trigger({
Expand Down

0 comments on commit bdb5675

Please sign in to comment.