Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Use a new datetime picker for the schedule page
The current datetime picker is somewhat not very ergonomic when it comes to picking the time and fails to display correctly on some browers. This one taken from react-widgets should ease up start time selection for schedules. Some dependency upgrades were needed as well as converting the style.css file to style.scss (sass).
- Loading branch information
1 parent
32c779f
commit c4feb99
Showing
5 changed files
with
165 additions
and
122 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,136 @@ | ||
| //colors | ||
| $black: #000; | ||
| $color_concrete_approx: #f3f3f3; | ||
| $color_curious_blue_approx: #3498db; | ||
| $color_gallery_approx: #eee; | ||
| $color_alto_approx: #ddd; | ||
| $color_silver_chalice_approx: #aaa; | ||
| $black_20: rgba(0,0,0,.2); | ||
| $white: white; | ||
| $color_spindle_approx: #b7cfe0; | ||
|
|
||
| tr[data-toggle='collapse'] { | ||
| cursor: pointer; | ||
| } | ||
| td[data-toggle='collapse'] { | ||
| cursor: pointer; | ||
| } | ||
| .progress-bar { | ||
| color: $black; | ||
| } | ||
| .clusterLoader { | ||
| border: 16px solid $color_concrete_approx; | ||
| border-top: 16px solid $color_curious_blue_approx; | ||
| //Instead of the line below you could use @include border-radius($radius, $vertical-radius) | ||
| border-radius: 50%; | ||
| width: 4em; | ||
| height: 4em; | ||
| animation: spin 2s linear infinite; | ||
| } | ||
| .smallLoader { | ||
| border: 16px solid $color_concrete_approx; | ||
| border-top: 16px solid $color_curious_blue_approx; | ||
| //Instead of the line below you could use @include border-radius($radius, $vertical-radius) | ||
| border-radius: 50%; | ||
| width: 2em; | ||
| height: 2em; | ||
| animation: spin 2s linear infinite; | ||
| } | ||
| @keyframes spin { | ||
| 0% { | ||
| //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) | ||
| transform: rotate(0deg); | ||
| } | ||
| 100% { | ||
| //Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy) | ||
| transform: rotate(360deg); | ||
| } | ||
| } | ||
| div { | ||
| &.ReactTags__tags { | ||
| position: relative; | ||
| } | ||
| &.ReactTags__tagInput { | ||
| width: 200px; | ||
| //Instead of the line below you could use @include border-radius($radius, $vertical-radius) | ||
| border-radius: 2px; | ||
| display: inline-block; | ||
| input.ReactTags__tagInputField { | ||
| height: 31px; | ||
| margin: 0; | ||
| font-size: 12px; | ||
| width: 100%; | ||
| border: 1px solid $color_gallery_approx; | ||
| &:focus { | ||
| height: 31px; | ||
| margin: 0; | ||
| font-size: 12px; | ||
| width: 100%; | ||
| border: 1px solid $color_gallery_approx; | ||
| } | ||
| } | ||
| } | ||
| &.ReactTags__selected { | ||
| span.ReactTags__tag { | ||
| border: 1px solid $color_alto_approx; | ||
| background: $color_gallery_approx; | ||
| font-size: 12px; | ||
| display: inline-block; | ||
| padding: 5px; | ||
| margin: 0 5px; | ||
| //Instead of the line below you could use @include border-radius($radius, $vertical-radius) | ||
| border-radius: 2px; | ||
| } | ||
| a.ReactTags__remove { | ||
| color: $color_silver_chalice_approx; | ||
| margin-left: 5px; | ||
| cursor: pointer; | ||
| } | ||
| } | ||
| &.ReactTags__suggestions { | ||
| position: absolute; | ||
| z-index: 10000; | ||
| ul { | ||
| list-style-type: none; | ||
| //Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10) | ||
| box-shadow: .05em .01em .5em $black_20; | ||
| background: $white; | ||
| width: 200px; | ||
| li.ReactTags__activeSuggestion { | ||
| background: $color_spindle_approx; | ||
| cursor: pointer; | ||
| } | ||
| } | ||
| li { | ||
| border-bottom: 1px solid $color_alto_approx; | ||
| padding: 5px 10px; | ||
| margin: 0; | ||
| mark { | ||
| text-decoration: underline; | ||
| background: none; | ||
| font-weight: 600; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| .form-control-hidden { | ||
| display: none; | ||
| } | ||
| .large-modal { | ||
| width: 90%; | ||
| } | ||
| .form-inline input { | ||
| margin: 0 1em; | ||
| } | ||
| .form-condensed .form-group { | ||
| margin-top: .5em; | ||
| margin-bottom: .5em; | ||
| } | ||
| td > button { | ||
| margin-right: .5em; | ||
| } | ||
|
|
||
| $font-size: 16px; | ||
| $input-height: 2.5em; // at 16px, this an even 40px | ||
|
|
||
| @import '~react-widgets/lib/scss/react-widgets'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters