Switch to alternate timepicker that works better on mobile

This commit is contained in:
Donald Burr 2015-10-18 14:20:29 -07:00
parent b6dfba391c
commit fbc0f89c91
8 changed files with 1281 additions and 2284 deletions

View file

@ -1,27 +0,0 @@
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 40%; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
.ui-timepicker-div .ui_tpicker_unit_hide{ display: none; }
.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
.ui-timepicker-rtl dl dt{ float: right; clear: right; }
.ui-timepicker-rtl dl dd { margin: 0 40% 10px 10px; }
/* Shortened version style */
.ui-timepicker-div.ui-timepicker-oneLine { padding-right: 2px; }
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time,
.ui-timepicker-div.ui-timepicker-oneLine dt { display: none; }
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label { display: block; padding-top: 2px; }
.ui-timepicker-div.ui-timepicker-oneLine dl { text-align: right; }
.ui-timepicker-div.ui-timepicker-oneLine dl dd,
.ui-timepicker-div.ui-timepicker-oneLine dl dd > div { display:inline-block; margin:0; }
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_minute:before,
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_second:before { content:':'; display:inline-block; }
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_millisec:before,
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_microsec:before { content:'.'; display:inline-block; }
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide,
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before{ display: none; }

View file

@ -0,0 +1,72 @@
.ui-timepicker-wrapper {
overflow-y: auto;
height: 150px;
width: 6.5em;
background: #fff;
border: 1px solid #ddd;
-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);
-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);
box-shadow:0 5px 10px rgba(0,0,0,0.2);
outline: none;
z-index: 10001;
margin: 0;
}
.ui-timepicker-wrapper.ui-timepicker-with-duration {
width: 13em;
}
.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-30,
.ui-timepicker-wrapper.ui-timepicker-with-duration.ui-timepicker-step-60 {
width: 11em;
}
.ui-timepicker-list {
margin: 0;
padding: 0;
list-style: none;
}
.ui-timepicker-duration {
margin-left: 5px; color: #888;
}
.ui-timepicker-list:hover .ui-timepicker-duration {
color: #888;
}
.ui-timepicker-list li {
padding: 3px 0 3px 5px;
cursor: pointer;
white-space: nowrap;
color: #000;
list-style: none;
margin: 0;
}
.ui-timepicker-list:hover .ui-timepicker-selected {
background: #fff; color: #000;
}
li.ui-timepicker-selected,
.ui-timepicker-list li:hover,
.ui-timepicker-list .ui-timepicker-selected:hover {
background: #1980EC; color: #fff;
}
li.ui-timepicker-selected .ui-timepicker-duration,
.ui-timepicker-list li:hover .ui-timepicker-duration {
color: #ccc;
}
.ui-timepicker-list li.ui-timepicker-disabled,
.ui-timepicker-list li.ui-timepicker-disabled:hover,
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
color: #888;
cursor: default;
}
.ui-timepicker-list li.ui-timepicker-disabled:hover,
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
background: #f2f2f2;
}

File diff suppressed because it is too large Load diff

1195
web_app/js/external/jquery.timepicker.js vendored Normal file

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

View file

@ -82,7 +82,8 @@ function setup_ui_elements()
// set up date/time pickers
$( "#gem_desired_date" ).datepicker();
$( "#event_end_date" ).datepicker();
$( "#event_end_time" ).timepicker();
// $( "#event_end_time" ).timepicker();
$('#event_end_time').timepicker({ 'timeFormat': 'H:i', 'disableTextInput': true });
// set up buttons
["calculate-rank", "reset-rank", "calculate-gems", "reset-gems", "calculate-card", "reset-card", "start-stop-timer", "clear-timer"].forEach(function(entry) {

View file

@ -6,14 +6,14 @@
<meta charset="utf-8">
<title>SIF Tools</title>
<link href="css/external/jquery-ui.css" rel="stylesheet">
<link href="css/external/jquery-ui-timepicker-addon.css" rel="stylesheet">
<link type="text/css" href="css/external/jquery.keypad.css" rel="stylesheet">
<link href="css/external/jquery.timepicker.css" rel="stylesheet">
<link href="css/external/jquery.keypad.css" rel="stylesheet">
<link href="css/sif-tools.css" rel="stylesheet">
<script src="js/external/jquery.js"></script>
<script type="text/javascript" src="js/external/jquery.plugin.js"></script>
<script type="text/javascript" src="js/external/jquery.keypad.js"></script>
<script src="js/external/jquery.plugin.js"></script>
<script src="js/external/jquery.keypad.js"></script>
<script src="js/external/jquery-ui.js"></script>
<script src="js/external/jquery-ui-timepicker-addon.js"></script>
<script src="js/external/jquery.timepicker.js"></script>
<script src="js/external/jquery-ui-sliderAccess.js"></script>
<script src="js/external/moment.js"></script>
<script src="js/external/sprintf.js"></script>