From 7035c05e372fd31e7837db930ade3e494f87fbea Mon Sep 17 00:00:00 2001 From: Angus McLeod Date: Fri, 3 Apr 2020 00:21:19 +1100 Subject: [PATCH 1/2] Add pickaday style --- .../stylesheets/wizard/jquery.timepicker.scss | 72 ---- assets/stylesheets/wizard/wizard_events.scss | 322 ++++++++++++++++++ plugin.rb | 2 +- views/layouts/wizard.html.erb | 2 +- 4 files changed, 324 insertions(+), 74 deletions(-) delete mode 100644 assets/stylesheets/wizard/jquery.timepicker.scss create mode 100644 assets/stylesheets/wizard/wizard_events.scss diff --git a/assets/stylesheets/wizard/jquery.timepicker.scss b/assets/stylesheets/wizard/jquery.timepicker.scss deleted file mode 100644 index 950a0b1d..00000000 --- a/assets/stylesheets/wizard/jquery.timepicker.scss +++ /dev/null @@ -1,72 +0,0 @@ -.ui-timepicker-wrapper { - overflow-y: auto; - max-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; -} diff --git a/assets/stylesheets/wizard/wizard_events.scss b/assets/stylesheets/wizard/wizard_events.scss new file mode 100644 index 00000000..2ce1628d --- /dev/null +++ b/assets/stylesheets/wizard/wizard_events.scss @@ -0,0 +1,322 @@ +// datepicker + +@import "wizard_variables"; + +/*! + * Pikaday + * Copyright © 2014 David Bushell | BSD & MIT license | http://dbushell.com/ + */ + +// Variables +// Declare any of these variables before importing this SCSS file to easily override defaults +// Variables are namespaced with the pd (pikaday) prefix + +// Colours +$pd-text-color: $primary !default; +$pd-title-color: $primary !default; +$pd-title-bg: $secondary !default; +$pd-picker-bg: $secondary !default; +$pd-picker-border: $primary-low !default; +$pd-picker-border-bottom: $primary-low !default; +$pd-picker-shadow: rgba(0,0,0,.5) !default; +$pd-th-color: $primary !default; +$pd-day-color: $primary !default; +$pd-day-bg: $secondary !default; +$pd-day-hover-color: $primary !default; +$pd-day-hover-bg: $tertiary-low !default; +$pd-day-today-color: $tertiary !default; +$pd-day-selected-color: $secondary !default; +$pd-day-selected-bg: $tertiary !default; +$pd-day-selected-shadow: $tertiary-low !default; +$pd-day-disabled-color: $primary !default; +$pd-week-color: $primary !default; + +// Font +$pd-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default; + + +.pika-single { + z-index: 9999; + display: block; + position: relative; + color: $pd-text-color; + background: $pd-picker-bg; + border: 1px solid $pd-picker-border; + border-bottom-color: $pd-picker-border-bottom; + font-family: $pd-font-family; + + &.is-hidden { + display: none; + } + + &.is-bound { + position: absolute; + box-shadow: 0 5px 15px -5px $pd-picker-shadow; + } +} + +// clear child float (pika-lendar), using the famous micro clearfix hack +// http://nicolasgallagher.com/micro-clearfix-hack/ +.pika-single { + &:before, + &:after { + content: " "; + display: table; + } + + &:after { clear: both } +} + +.pika-lendar { + float: left; + width: 240px; + margin: 8px; +} + +.pika-title { + position: relative; + text-align: center; + + select { + cursor: pointer; + position: absolute; + z-index: 9998; + margin: 0; + left: 0; + top: 5px; + filter: alpha(opacity=0); + opacity: 0; + } +} + +.pika-label { + display: inline-block; + position: relative; + z-index: 9999; + overflow: hidden; + margin: 0; + padding: 5px 3px; + font-size: 14px; + line-height: 20px; + font-weight: bold; + color: $pd-title-color; + background-color: $pd-title-bg; +} + +.pika-prev, +.pika-next { + display: block; + cursor: pointer; + position: relative; + outline: none; + border: 0; + padding: 0; + width: 20px; + height: 30px; + text-indent: 20px; // hide text using text-indent trick, using width value (it's enough) + white-space: nowrap; + overflow: hidden; + background-color: transparent; + background-position: center center; + background-repeat: no-repeat; + background-size: 75% 75%; + opacity: .5; + @if (lightness($secondary) < 50) { // invert the black png if the background is dark + filter: invert(1); + } + + &:hover { + opacity: 1; + } + + &.is-disabled { + cursor: default; + opacity: .2; + } +} + +.pika-prev, +.is-rtl .pika-next { + float: left; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg=='); +} + +.pika-next, +.is-rtl .pika-prev { + float: right; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII='); +} + +.pika-select { + display: inline-block; +} + +.pika-table { + width: 100%; + border-collapse: collapse; + border-spacing: 0; + border: 0; + + th, + td { + width: 14.285714285714286%; + padding: 0; + } + + th { + color: $pd-th-color; + font-size: 12px; + line-height: 25px; + font-weight: bold; + text-align: center; + } + + abbr { + border-bottom: none; + cursor: help; + } +} + +.pika-button { + cursor: pointer; + display: block; + -moz-box-sizing: border-box; + box-sizing: border-box; + outline: none; + border: 0; + margin: 0; + width: 100%; + padding: 5px; + color: $pd-day-color; + font-size: 12px; + line-height: 15px; + text-align: right; + background: $pd-day-bg; + + .is-today & { + color: $pd-day-today-color; + font-weight: bold; + } + + .is-selected & { + color: $pd-day-selected-color; + font-weight: bold; + background: $pd-day-selected-bg; + box-shadow: inset 0 1px 3px $pd-day-selected-shadow; + border-radius: 3px; + } + + .is-disabled &, + .is-outside-current-month & { + pointer-events: none; + cursor: default; + color: $pd-day-disabled-color; + opacity: .3; + } + + &:hover { + color: $pd-day-hover-color; + background: $pd-day-hover-bg; + box-shadow: none; + border-radius: 3px; + } +} + +.pika-week { + font-size: 11px; + color: $pd-week-color; +} + +.is-inrange .pika-button { + background: #D5E9F7; +} + +.is-startrange .pika-button { + color: $secondary; + background: #6CB31D; + box-shadow: none; + border-radius: 3px; +} + +.is-endrange .pika-button { + color: $secondary; + background: $tertiary; + box-shadow: none; + border-radius: 3px; +} + + +// timepicker + +.ui-timepicker-wrapper { + overflow-y: auto; + max-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; +} diff --git a/plugin.rb b/plugin.rb index 89c1a5ac..4cba77d4 100644 --- a/plugin.rb +++ b/plugin.rb @@ -27,7 +27,7 @@ if Rails.env.production? stylesheets/wizard/wizard_composer.scss stylesheets/wizard/wizard_variables.scss stylesheets/wizard/wizard_custom_mobile.scss - stylesheets/wizard/jquery.timepicker.scss + stylesheets/wizard/wizard_events.scss } end diff --git a/views/layouts/wizard.html.erb b/views/layouts/wizard.html.erb index 3ea941ef..fcebb93e 100644 --- a/views/layouts/wizard.html.erb +++ b/views/layouts/wizard.html.erb @@ -5,7 +5,7 @@ <%= stylesheet_link_tag "wizard_composer" %> <%= stylesheet_link_tag "wizard_variables" %> <%= stylesheet_link_tag "wizard_custom_mobile" %> - <%= stylesheet_link_tag "jquery.timepicker"%> + <%= stylesheet_link_tag "wizard_events"%> <%- if theme_ids %> <%= discourse_stylesheet_link_tag (mobile_view? ? :mobile_theme : :desktop_theme) %> <%- end %> From 610ab8570a129ccc1d14e174aafb2c4b6141c689 Mon Sep 17 00:00:00 2001 From: Angus McLeod Date: Fri, 3 Apr 2020 19:49:36 +1100 Subject: [PATCH 2/2] Add style updates --- .../components/wizard-field-user-selector.hbs | 4 +- .../wizard/wizard_autocomplete.scss | 177 +++ assets/stylesheets/wizard/wizard_custom.scss | 1059 +---------------- assets/stylesheets/wizard/wizard_events.scss | 184 ++- .../stylesheets/wizard/wizard_locations.scss | 89 ++ plugin.rb | 2 + views/layouts/wizard.html.erb | 2 + 7 files changed, 456 insertions(+), 1061 deletions(-) create mode 100644 assets/stylesheets/wizard/wizard_autocomplete.scss create mode 100644 assets/stylesheets/wizard/wizard_locations.scss diff --git a/assets/javascripts/wizard/templates/components/wizard-field-user-selector.hbs b/assets/javascripts/wizard/templates/components/wizard-field-user-selector.hbs index 0881bede..e5a5f785 100644 --- a/assets/javascripts/wizard/templates/components/wizard-field-user-selector.hbs +++ b/assets/javascripts/wizard/templates/components/wizard-field-user-selector.hbs @@ -1 +1,3 @@ -{{custom-user-selector usernames=field.value placeholderKey=field.placeholder}} +{{custom-user-selector + usernames=field.value + placeholderKey=field.placeholder}} diff --git a/assets/stylesheets/wizard/wizard_autocomplete.scss b/assets/stylesheets/wizard/wizard_autocomplete.scss new file mode 100644 index 00000000..89ea610c --- /dev/null +++ b/assets/stylesheets/wizard/wizard_autocomplete.scss @@ -0,0 +1,177 @@ +@import "wizard_variables"; + +div.ac-wrap { + overflow: visible; + max-height: 150px; + min-height: 34px; + background-color: white; + border: 1px solid #e9e9e9; + padding: 5px 4px 1px 4px; + + div.item { + float: left; + margin-bottom: 4px; + margin-right: 10px; + + span { + height: 24px; + display: inline-block; + line-height: 20px; + } + } + + .ac-collapsed-button { + float: left; + border-radius: 20px; + position: relative; + top: -2px; + margin-right: 10px; + } + + input[type="text"] { + border: 0; + } + + .remove-link { + margin-left: 4px; + font-size: 11px; + line-height: 10px; + padding: 1.5px 1.5px 1.5px 2.5px; + border-radius: 12px; + width: 10px; + display: inline-block; + border: 1px solid #e9e9e9; + + &:hover { + background-color: #f2ab9a; + border: 1px solid #ec8972; + text-decoration: none; + color: #e45735; + } + } +} + +img.avatar { + border-radius: 50%; + vertical-align: middle; +} + +.autocomplete { + z-index: 999999; + position: absolute; + width: 240px; + background-color: white; + border: 1px solid #e9e9e9; + + ul { + list-style: none; + padding: 0; + margin: 0; + + li { + .d-users { + color: #333; + padding: 0 2px; + } + + border-bottom: 1px solid #e9e9e9; + + a { + padding: 5px; + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-size: 14px; + text-decoration: none; + + img { + margin-right: 5px; + } + + span.username { + color: #000; + vertical-align: middle; + } + + span.name { + font-size: 11px; + vertical-align: middle; + } + + &.selected { + background-color: #d1f0ff; + } + + &:hover { + background-color: #ffffa6; + text-decoration: none; + } + } + } + } +} + +.ac-wrap { + box-sizing: border-box; + position: relative; + + .ac-loading { + position: absolute; + top: 7px; + right: 5px; + } + + .item { + line-height: 1.6; + } + + .autocomplete { + width: inherit; + left: 0 !important; + width: 100%; + top: 30px !important; + box-sizing: border-box; + + li, .no-results { + padding: 10px; + } + + ul > label { + color: #919191; + margin: 5px 0; + padding: 0 5px; + font-size: 80%; + line-height: 1.4em; + + a { + text-decoration: underline; + } + } + } +} + +.ac-form-result { + cursor: pointer; + background-color: $secondary; + display: flex; + + &:hover, &.selected { + background-color: $tertiary; + color: white; + + label { + color: white; + } + } + + label { + flex: 1 1 auto; + margin-bottom: 0; + cursor: pointer; + } + + i { + margin-right: 5px; + } +} \ No newline at end of file diff --git a/assets/stylesheets/wizard/wizard_custom.scss b/assets/stylesheets/wizard/wizard_custom.scss index 887f61b6..05f980b5 100644 --- a/assets/stylesheets/wizard/wizard_custom.scss +++ b/assets/stylesheets/wizard/wizard_custom.scss @@ -341,67 +341,6 @@ } } -.p-list-box { - max-width: 550px; - position: relative; - margin: 10px 0; - - .spinner { - position: absolute; - right: 50%; - top: 50%; - } - - .p-text { - margin-bottom: 5px; - } - - ul { - border: 1px solid #e9e9e9; - padding: 0; - margin: 0; - list-style: none; - height: 200px; - overflow: scroll; - } - - li { - padding: 6px 12px; - cursor: pointer; - background-color: #fff; - display: flex; - border-top: 1px solid #e9e9e9; - border-bottom: 1px solid #e9e9e9; - - &:hover, &.selected { - background-color: #eee; - } - - label { - flex: 1 1 auto; - cursor: pointer; - } - - i { - margin-right: 5px; - } - } - - .no-results { - padding: 15px; - } - - .default { - margin: 0 auto; - top: 50%; - transform: translateY(-50%); - position: absolute; - width: 100%; - text-align: center; - color: #919191; - } -} - .spinner { margin: 20px auto 20px auto; position: relative; @@ -421,127 +360,6 @@ } } -.user-selector-field.wizard-field { - div.ac-wrap div.item a.remove, .remove-link { - margin-left: 4px; - font-size: 11px; - line-height: 10px; - padding: 1.5px 1.5px 1.5px 2.5px; - border-radius: 12px; - width: 10px; - display: inline-block; - border: 1px solid #e9e9e9; - - &:hover { - background-color: #f2ab9a; - border: 1px solid #ec8972; - text-decoration: none; - color: #e45735; - } - } - - div.ac-wrap { - width: 98.5% !important; - overflow: visible; - max-height: 150px; - min-height: 34px; - background-color: white; - border: 1px solid #e9e9e9; - padding: 5px 4px 1px 4px; - - div.item { - float: left; - margin-bottom: 4px; - margin-right: 10px; - - span { - height: 24px; - display: inline-block; - line-height: 20px; - } - } - - .ac-collapsed-button { - float: left; - border-radius: 20px; - position: relative; - top: -2px; - margin-right: 10px; - } - - input[type="text"] { - float: left; - margin-bottom: 4px; - height: 24px; - display: block; - border: 0; - padding: 0; - box-shadow: none; - } - } -} - -img.avatar { - border-radius: 50%; - vertical-align: middle; -} - -.autocomplete { - z-index: 999999; - position: absolute; - width: 240px; - background-color: white; - border: 1px solid #e9e9e9; - - ul { - list-style: none; - padding: 0; - margin: 0; - - li { - .d-users { - color: #333; - padding: 0 2px; - } - - border-bottom: 1px solid #e9e9e9; - - a { - padding: 5px; - display: block; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - font-size: 14px; - text-decoration: none; - - img { - margin-right: 5px; - } - - span.username { - color: #000; - vertical-align: middle; - } - - span.name { - font-size: 11px; - vertical-align: middle; - } - - &.selected { - background-color: #d1f0ff; - } - - &:hover { - background-color: #ffffa6; - text-decoration: none; - } - } - } - } -} - .wizard-field { &.invalid{ textarea, input[type=text], input[type=checkbox], .select-kit { @@ -560,180 +378,8 @@ img.avatar { } } -.p-text { - &.bronze { - color: #cd7f32; - } - - &.silver { - color: #c0c0c0; - } - - &.gold { - color: rgb(231, 195, 0); - } -} - -.ac-wrap { - box-sizing: border-box; - position: relative; - width: auto !important; - - .ac-loading { - position: absolute; - top: 7px; - right: 5px; - } - - .item { - line-height: 1.6; - } - - .autocomplete { - width: inherit; - left: 0 !important; - width: 100%; - top: 30px !important; - box-sizing: border-box; - - li, .no-results { - padding: 10px; - } - - ul > label { - color: #919191; - margin: 5px 0; - padding: 0 5px; - font-size: 80%; - line-height: 1.4em; - - a { - text-decoration: underline; - } - } - } -} - -.ac-form-result { - cursor: pointer; - background-color: $secondary; - display: flex; - - &:hover, &.selected { - background-color: $tertiary; - color: white; - - label { - color: white; - } - } - - label { - flex: 1 1 auto; - margin-bottom: 0; - cursor: pointer; - } - - i { - margin-right: 5px; - } -} - -/* Location Specific Styles */ - -.location-selector-container { - width: 350px; -} - -.location-form { - display: flex; - - .title { - font-weight: 700; - } - - .address { - padding-right: 20px; - } - - .coordinates { - .control-group { - display: block; - - .controls { - display: flex; - width: 100%; - - input { - width: 100px; - } - } - - .icon { - margin-left: 10px; - display: inline-block; - } - } - - .icon img { - max-width: 30px; - } - } - - .address + .coordinates { - border-left: 1px solid #eee; - padding-left: 20px; - } -} - -.location-form-instructions { - color: #919191; - margin: 5px 0; - font-size: 80%; - line-height: 1.4em; - - a { - text-decoration: underline; - } -} - -.location-form, .add-location { - overflow: visible; - - .control-group { - display: inline-block; - vertical-align: top; - margin-right: 20px; - margin-top: 10px; - - .instructions { - @extend .location-form-instructions; - } - } - - .location-search { - display: block; - margin: 15px 0; - } - - .geo-map { - height: 400px; - } -} - -.add-location + .modal-footer .clear { - margin: 5px 10px; -} - -input.input-location, div.input-location { - max-height: 150px; - background-color: $secondary; - box-shadow: none; - box-sizing: border-box; - margin: 0; -} - /* IE11 hacks */ + @media all and (-ms-high-contrast:none) { .custom-wizard { @@ -880,706 +526,3 @@ input.input-location, div.input-location { } } } - -//events scss - - -.add-event-controls { - padding: 0 10px; - margin-bottom: 10px; - - .control { - display: inline-block; - vertical-align: middle; - position: relative; - min-height: 30px; - margin-right: 20px; - - > span { - line-height: 30px; - } - } - - .timezone-modal { - position: absolute; - top: 0; - padding: 5px; - height: auto; - background-color: $secondary; - box-shadow: 0 2px 2px rgba(0,0,0,0.4); - - .combo-box { - display: block; - margin-bottom: 5px; - } - - .btn { - margin-right: 2px; - } - } -} - -.date-time-card { - width: 270px; - display: inline-block; - padding: 0 10px; - text-align: left; -} - -.start-card { - border-left: 1px solid transparent; - margin-right: 10px; -} - -.end-card { - border-left: 1px solid #eee; - padding-left: 25px; -} - -.set-all-day { - font-size: 1.2em; - padding-bottom: 13px; -} - -.modal-title-label { - font-size: 1.2em; - font-weight: bold; - margin-right: 10px; -} - -.modal-title{ - width: 565px; -} - -.modal-sub-title{ - font-size: 1.2em; - font-weight: bold; - padding-bottom: 2px; - padding-right: 10px; -} - -.modal-date-time-set{ - padding-top: 3px; - padding-bottom: 4px; - display: flex; - flex-direction: row; - - .modal-date-area{ - order: 1; - } - - .modal-time-area{ - order: 2; - margin-left: 10px; - - .modal-time{ - width: 127px; - } - } -} - -.ui-timepicker-input { - width: 105px; - text-align: center; -} - -.date-picker{ - width: 110px; -} - -.pika-single { - position: relative !important; - z-index: 100; - - .pika-lendar { - border: 1px solid #eee; - padding: 14px; - margin: 0; - float: none; - width: auto; - } -} - -.rsvp { - margin-top: 10px; - padding: 10px; - - .going-max { - margin-top: 10px; - - input { - margin-left: 4px; - width: 60px; - } - } -} - - -.add-event-modal + .modal-footer .clear { - margin: 5px 10px; -} - -.add-event { - text-align: left; - - &.no-text { - width: 35px; - } - - .dot { - padding: 0 4px; - } -} - -.add-event, .add-event + button { - border: 1px solid $primary-medium; -} - -.form-element + span { - display: block; -} - -.event-label .fa { - margin-right: 7px; -} - -.event-details { - display: flex; - flex-flow: wrap; - - .event-label { - margin-top: 7px; - margin-right: 10px; - line-height: 18px; - display: inline-block; - } - - .event-rsvp { - margin-top: 6px; - } -} - -.date-time-container { - display: inline-block; - - .d-icon { - margin-right: 7px; - } -} - -.date-time.title { - width: 100px; - - .d-icon.no-date { - margin: 0; - } - - .date.no-date { - margin-left: -30px; - } -} - -.add-to-calendar { - position: relative; - display: inline-block; - margin-right: 10px; - margin-top: 6px; - - .dropdown-header { - min-height: initial; - } - - .dropdown-menu { - top: 24px; - bottom: initial; - width: 190px; - position: absolute; - - &.show { - display: block; - } - - ul { - list-style: none; - margin: 0; - } - } -} - -.navigation { - display: inline-block; -} - -.select-kit.events-calendar-subscription { - float: right; - - .select-kit-body { - width: 380px; - max-width: 90vw; - - .events-calendar-subscription-warning { - padding: 6px 16px; - background-color: rgba(255, 247, 78, 0.32); - font-size: 1.1em; - - .fa.d-icon { - margin-right: 6px; - } - } - - .events-calendar-subscription-row { - cursor: initial; - display: flex; - padding: 5px; - - &.is-highlighted { - background-color: initial; - } - - span { - text-align: center; - width: 50px; - flex: initial; - } - - input { - flex: 1; - margin: 0; - } - } - } -} - -.select-kit.month-dropdown, .select-kit.year-dropdown { - width: 150px; - min-width: 150px; - height: 28px; - vertical-align: top; - - .select-kit-header { - line-height: 1.3; - } -} - -.events-calendar.responsive { - .month-dropdown, .year-dropdown { - width: 110px; - min-width: 110px; - height: 30px; - - .select-kit-header { - line-height: 1.35; - } - - &:not(.is-expanded) .select-kit-header { - width: inherit; - } - } - - .events-calendar-body { - margin-top: 10px; - text-align: center; - - .weekday { - height: 15px; - line-height: 15px; - - span { - padding: 0 2px; - } - } - - .day { - height: 38px; - cursor: pointer; - position: relative; - - .header { - text-align: center; - margin-top: 2px; - } - - .date label { - cursor: pointer; - display: inline-block; - height: 19px; - width: 19px; - margin: 0; - } - - .has-events { - position: absolute; - bottom: 2px; - width: 100%; - } - } - } -} - -.events-calendar-body { - display: flex; - flex-wrap: wrap; - width: 100%; - margin-top: 15px; - border-bottom: 1px solid $primary-medium; - border-left: 1px solid $primary-medium; - box-sizing: border-box; - - .day, .weekday { - width: calc(99.9999%/7); - border-top: 1px solid $primary-medium; - border-right: 1px solid $primary-medium; - box-sizing: border-box; - } - - .weekday { - height: 23px; - line-height: 23px; - - span { - padding: 0 4px; - } - } - - .day { - height: 130px; - transition: all 0.2s; - position: relative; - - .container { - background-color: $secondary; - } - - &.today .container { - background-color: $highlight-low; - height: 100%; - } - - &.different-month .container { - background-color: rgba($primary-low, .5); - color: rgba($primary, .5); - height: 100%; - } - - &.selected .date label { - background-color: $tertiary; - color: $secondary; - border-radius: 50%; - } - - &.expanded .container { - position: absolute; - z-index: 100; - height: auto; - width: auto; - min-width: 100%; - overflow: visible; - border: 1px solid $primary-low; - box-shadow: 0 2px 2px rgba(0,0,0,0.4); - - .events { - padding: 3px 4px; - - li { - height: 25px; - line-height: 25px; - - &.empty { - display: none; - } - } - } - } - - .header { - position: relative; - } - - .date label { - margin: 2px; - padding: 2px 3px; - margin-bottom: 0; - } - - .close { - position: absolute; - right: 3px; - top: -3px; - } - - .hidden-events { - margin: 2px 5px; - - .btn { - font-size: 0.9em; - border-radius: 4px; - line-height: 1; - } - } - - .has-events { - font-size: 7px; - } - } -} - -ul.events-calendar-events { - margin: 0; - list-style: none; - - li { - margin: 2px 0; - position: relative; - height: 16px; - - .event { - padding: 0 7px; - height: inherit; - line-height: 16px; - border-top: 1px solid transparent; - border-bottom: 1px solid transparent; - white-space: nowrap; - overflow: hidden; - cursor: pointer; - - span { - font-size: 0.9em; - } - - .fa-circle { - color: inherit; - font-size: 0.8em; - } - - &.all-day { - background-color: $tertiary; - color: $secondary; - border-top: 1px solid $primary-low; - border-bottom: 1px solid $primary-low; - - &:not(.full-width) { - &.start { - margin-left: 4px; - border-radius: 4px 0 0 4px; - } - - &.multi span.title { - position: absolute; - z-index: 1; - overflow: hidden; - text-overflow: ellipsis; - } - - &.start span.time { - margin-right: 5px; - float: left; - } - - &.end { - margin-right: 4px; - border-radius: 0 4px 4px 0; - } - } - } - - img.emoji { - height: 15px; - width: 15px; - } - } - } -} - -.events-calendar-card { - position: absolute; - top: -15px; - left: -390px; - width: 350px; - z-index: 997; - background-color: $secondary; - box-shadow: shadow('card'); - border: 1px solid $primary-low; - padding: 15px; - border-radius: 4px; - - .topic-link { - font-size: 1.3em; - - p { - margin: 0; - } - } - - .close .fa { - vertical-align: top; - } - - .topic-meta { - margin-top: 6px; - width: 100%; - display: flex; - flex-flow: wrap; - align-items: center; - } - - .topic-event { - margin-top: 6px; - width: 100%; - display: inline-block; - cursor: pointer; - } - - .topic-excerpt { - padding-top: 8px; - cursor: pointer; - line-height: 1.4; - width: 100%; - word-wrap: break-word; - - p { - margin: 0; - } - } -} - -.events-calendar-events .events-calendar-card .close { - position: absolute; - right: 5px; - top: 5px; -} - -.events-below { - margin-top: 8px; - margin-bottom: 15px; - - ul.events-calendar-events li { - height: auto; - line-height: 20px; - margin: 5px 0; - white-space: normal; - - &.empty { - display: none; - } - - img.emoji { - height: 20px; - width: 20px; - } - } -} - -.edit-category-modal .enable-events .min-trust input { - width: 60px; -} - -.event-rsvp { - display: flex; - align-items: center; - - button { - min-height: initial; - margin-right: 7px; - } - - .spinner { - width: 3px; - height: 3px; - margin-right: 8px; - } -} - -.event-rsvp-details { - display: flex; - align-items: center; - - a { - margin-right: 7px; - } -} - -.modal-body.event-rsvp-modal { - overflow: hidden; - - .header { - display: flex; - - .types { - padding-top: 0; - padding-bottom: 15px; - margin: 0; - flex: 1; - } - - .filter { - align-self: flex-start; - padding-bottom: 15px; - border-bottom: 1px solid $primary-low; - - input { - width: 150px; - margin-bottom: -1px; - } - } - } - - .list { - height: 300px; - position: relative; - overflow: scroll; - - .spinner { - position: absolute; - left: calc(50% - 10px); - top: calc(50% - 10px); - } - - ul { - list-style: none; - margin: 0; - - li { - padding: 10px 15px; - border-bottom: 1px solid $primary-low; - - .user-info { - margin-bottom: 0; - position: relative; - width: 100%; - - .details { - position: absolute; - right: 20px; - top: 10px; - } - } - } - } - } -} - -.main-link.row-below-title { - .link-top-line { - display: block; - } - - > .date-time-container, > .topic-list-event-rsvp, > .discourse-tags { - display: inline-block; - margin-right: 10px; - } -} - -.topic-list-event-rsvp { - font-size: 0.9em; - margin-top: 4px; -} - -.composer-controls-event { - position: relative; - - .popup-tip { - left: 0; - right: initial; - min-width: 300px; - } -} diff --git a/assets/stylesheets/wizard/wizard_events.scss b/assets/stylesheets/wizard/wizard_events.scss index 2ce1628d..61380deb 100644 --- a/assets/stylesheets/wizard/wizard_events.scss +++ b/assets/stylesheets/wizard/wizard_events.scss @@ -1,7 +1,187 @@ -// datepicker - @import "wizard_variables"; +// event form + +.event-form { + width: 585px; + max-width: 80vw; + + .control { + display: inline-flex; + align-items: flex-start; + min-height: 30px; + margin-right: 20px; + + > input:first-child { + margin-top: 10px !important; + } + + > span:first-child { + margin-top: 5px !important; + } + + > input + span { + margin-top: 5px; + } + + &:last-of-type { + margin-right: 0; + } + + input[type="checkbox"] { + margin: 0 10px 0 0; + } + + input[type="number"] { + width: 50px; + margin: 0; + min-height: 34px; + border: 1px solid #e9e9e9; + } + + &.full-width { + flex: 1; + } + + .select-kit, .ac-wrap { + width: 100% !important; + max-width: 330px; + } + + .select-kit-body { + width: 100% !important; + max-width: 330px; + } + } + + .event-controls { + margin-bottom: 20px; + display: flex; + align-items: flex-start; + } + + .datetime-controls { + display: flex; + margin-bottom: 5px; + + .date-time-card { + width: 270px; + display: inline-block; + text-align: left; + } + + .start-card { + border-left: 1px solid transparent; + padding-right: 20px; + } + + .end-card { + border-left: 1px solid #eee; + padding-left: 20px; + + &.disabled { + span, label, .pika-label, .pika-table th, .pika-button, .pika-prev, .pika-next, input, .pika-lendar, .is-selected .pika-button { + color: $primary-low; + background-image: initial; + background: initial; + box-shadow: initial; + cursor: default; + pointer-events: none; + } + + input, .pika-lendar { + border: 1px solid $primary-low !important; + } + } + } + + .set-all-day { + font-size: 1.2em; + padding-bottom: 13px; + } + + .sub-title { + font-size: 1.2em; + font-weight: bold; + padding-bottom: 2px; + padding-right: 10px; + } + + .date-time-set { + padding-top: 10px; + display: flex; + flex-direction: row; + + .date-area { + order: 1; + } + + .time-area { + order: 2; + margin-left: 10px; + + .modal-time { + width: 127px; + } + } + + input { + padding: 4px 10px; + font-size: 1em; + line-height: 1; + color: $primary; + border: 1px solid $primary-medium; + min-height: 30px; + width: 130px; + margin: 10px 0; + } + } + + #date-container-start, + #date-container-end { + height: 250px; + } + + .ui-timepicker-input { + width: 105px; + text-align: center; + } + + .pika-single { + position: relative !important; + border: none; + z-index: 100; + + .pika-lendar { + border: 1px solid $primary-medium; + padding: 14px; + margin: 0; + float: none; + width: auto; + } + } + } + + .rsvp-controls { + + .rsvp-container { + display: flex; + flex-flow: wrap; + margin-top: 10px; + + .control span { + margin-right: 10px; + } + + .full-width { + align-items: flex-start; + } + } + } +} + +// datepicker + /*! * Pikaday * Copyright © 2014 David Bushell | BSD & MIT license | http://dbushell.com/ diff --git a/assets/stylesheets/wizard/wizard_locations.scss b/assets/stylesheets/wizard/wizard_locations.scss new file mode 100644 index 00000000..309c01d6 --- /dev/null +++ b/assets/stylesheets/wizard/wizard_locations.scss @@ -0,0 +1,89 @@ +@import "wizard_variables"; + +.location-selector-container { + width: 350px; +} + +.location-form { + display: flex; + + .title { + font-weight: 700; + } + + .address { + padding-right: 20px; + } + + .coordinates { + .control-group { + display: block; + + .controls { + display: flex; + width: 100%; + + input { + width: 100px; + } + } + + .icon { + margin-left: 10px; + display: inline-block; + } + } + + .icon img { + max-width: 30px; + } + } + + .address + .coordinates { + border-left: 1px solid #eee; + padding-left: 20px; + } +} + +.location-form-instructions { + color: #919191; + margin: 5px 0; + font-size: 80%; + line-height: 1.4em; + + a { + text-decoration: underline; + } +} + +.location-form, .add-location { + overflow: visible; + + .control-group { + display: inline-block; + vertical-align: top; + margin-right: 20px; + margin-top: 10px; + + .instructions { + @extend .location-form-instructions; + } + } + + .location-search { + display: block; + margin: 15px 0; + } + + .geo-map { + height: 400px; + } +} + +input.input-location, div.input-location { + max-height: 150px; + background-color: $secondary; + box-shadow: none; + box-sizing: border-box; + margin: 0; +} \ No newline at end of file diff --git a/plugin.rb b/plugin.rb index 4cba77d4..9c288d6b 100644 --- a/plugin.rb +++ b/plugin.rb @@ -23,10 +23,12 @@ if Rails.env.production? wizard-plugin.js wizard-custom-start.js wizard-raw-templates.js.erb + stylesheets/wizard/wizard_autocomplete.scss stylesheets/wizard/wizard_custom.scss stylesheets/wizard/wizard_composer.scss stylesheets/wizard/wizard_variables.scss stylesheets/wizard/wizard_custom_mobile.scss + stylesheets/wizard/wizard_locations.scss stylesheets/wizard/wizard_events.scss } end diff --git a/views/layouts/wizard.html.erb b/views/layouts/wizard.html.erb index fcebb93e..4fa985f1 100644 --- a/views/layouts/wizard.html.erb +++ b/views/layouts/wizard.html.erb @@ -1,10 +1,12 @@ <%= discourse_stylesheet_link_tag :wizard, theme_id: nil %> + <%= stylesheet_link_tag "wizard_autocomplete" %> <%= stylesheet_link_tag "wizard_custom" %> <%= stylesheet_link_tag "wizard_composer" %> <%= stylesheet_link_tag "wizard_variables" %> <%= stylesheet_link_tag "wizard_custom_mobile" %> + <%= stylesheet_link_tag "wizard_locations"%> <%= stylesheet_link_tag "wizard_events"%> <%- if theme_ids %> <%= discourse_stylesheet_link_tag (mobile_view? ? :mobile_theme : :desktop_theme) %>