diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index f26ea347..517fe5cb 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -3,9 +3,11 @@ on: push: branches: - master + - v2 pull_request: branches: - master + - v2 jobs: test: runs-on: ubuntu-latest diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml index 0a3257b7..9525a6e3 100644 --- a/.github/workflows/codeql-analysis.yml +++ b/.github/workflows/codeql-analysis.yml @@ -1,9 +1,13 @@ name: "CodeQL" on: push: - branches: [ master ] + branches: + - master + - v2 pull_request: - branches: [ master ] + branches: + - master + - v2 schedule: - cron: '33 0 * * 3' jobs: diff --git a/babybuddy/static_src/js/babybuddy.js b/babybuddy/static_src/js/babybuddy.js index 98127e01..38525ad8 100644 --- a/babybuddy/static_src/js/babybuddy.js +++ b/babybuddy/static_src/js/babybuddy.js @@ -23,34 +23,48 @@ var BabyBuddy = function () { * * @type {{init: BabyBuddy.DatetimePicker.init}} */ -BabyBuddy.DatetimePicker = function ($, moment) { +BabyBuddy.DatetimePicker = function (moment) { return { init: function (element, options) { - var defaultOptions = { - buttons: { showToday: true, showClose: true }, - defaultDate: 'now', - focusOnShow: false, - format: 'L LT', - ignoreReadonly: true, - locale: moment.locale(), - useCurrent: false, - icons: { - time: 'icon-clock', - date: 'icon-calendar', - up: 'icon-arrow-up', - down: 'icon-arrow-down', - previous: 'icon-angle-circled-left', - next: 'icon-angle-circled-right', - today: 'icon-today', - clear: 'icon-delete', - close: 'icon-cancel' + let defaultOptions = { + display: { + buttons: { + close: true, + today: true, + }, + components: { + calendar: true, + clock: true, + date: true, + decades: true, + hours: true, + minutes: true, + month: true, + seconds: false, + useTwentyfourHour: false, + year: true, + }, + icons: { + clear: 'icon-delete', + close: 'icon-cancel', + date: 'icon-calendar', + down: 'icon-arrow-down', + next: 'icon-angle-circled-right', + previous: 'icon-angle-circled-left', + time: 'icon-clock', + today: 'icon-today', + up: 'icon-arrow-up', + }, + viewMode: 'clock', + }, + localization: { + locale: moment.locale(), }, - viewMode: 'times', }; - element.datetimepicker($.extend(defaultOptions, options)); + new tempusDominus.TempusDominus(element, Object.assign(defaultOptions, options)); } }; -}(jQuery, moment); +}(moment); /** * Pull to refresh. diff --git a/babybuddy/static_src/js/tags_editor.js b/babybuddy/static_src/js/tags_editor.js index 56be2277..f0b73e17 100644 --- a/babybuddy/static_src/js/tags_editor.js +++ b/babybuddy/static_src/js/tags_editor.js @@ -174,7 +174,7 @@ this.apiTagsUrl = widget.getAttribute('data-tags-url'); this.createTagInputs = widget.querySelector('.create-tag-inputs'); this.addTagInput = this.createTagInputs.querySelector('input[type="text"]'); - this.addTagButton = this.createTagInputs.querySelector('.btn-add-new-tag'); + this.addTagButton = this.createTagInputs.querySelector('#add-tag'); this.addTagInput.value = ""; diff --git a/babybuddy/static_src/scss/_functions.scss b/babybuddy/static_src/scss/_functions.scss deleted file mode 100644 index 0e8e00e6..00000000 --- a/babybuddy/static_src/scss/_functions.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import '../../../node_modules/bootstrap/scss/functions'; - -// Baby Buddy site-wide custom functions. diff --git a/babybuddy/static_src/scss/_mixins.scss b/babybuddy/static_src/scss/_mixins.scss deleted file mode 100644 index b0d9583b..00000000 --- a/babybuddy/static_src/scss/_mixins.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import '../../../node_modules/bootstrap/scss/mixins'; - -// Baby Buddy site-wide custom mixins. diff --git a/babybuddy/static_src/scss/_variables.scss b/babybuddy/static_src/scss/_variables.scss index 7d8f080a..7e0309ec 100644 --- a/babybuddy/static_src/scss/_variables.scss +++ b/babybuddy/static_src/scss/_variables.scss @@ -1,5 +1,136 @@ -@import 'functions'; -@import '../../../node_modules/bootstrap/scss/variables'; -@import 'themes/blueorange'; +@use 'sass:color'; -// Baby Buddy site-wide variables. +// Theme variables. + +// Color system + +$white: #fff; +$gray-100: #f8f9fa; +$gray-200: #e9ecef; +$gray-300: #dee2e6; +$gray-400: #ced4da; +$gray-500: #adb5bd; +$gray-600: #6c757d; +$gray-700: #495057; +$gray-800: #343a40; +$gray-900: #212529; +$black: #000; + +$primary: #37abe9; +$danger: #a72431; +$error: $danger; +$secondary: #ff8f00; +$warning: #ffbe42; +$success: #239556; +$debug: #5abccc; +$info: #44c4dd; +$light: $gray-100; +$dark: $gray-800; + + +// Body +// Settings for the `
` element. + +$body-bg: $gray-900; +$body-color: $gray-400; + +// Links +// Style anchor elements. + +$link-color: $info; +$link-decoration: none; +$link-hover-color: color.adjust($link-color, $lightness: -15%); + + +// Components +// Define common padding and border radius sizes and more. + +$border-color: $gray-200; +$component-active-color: $gray-400; +$component-active-bg: $primary; + + +// Fonts +// Font, line-height, and color for body text, headings, and more. + +$text-muted: $gray-600 !default; +$blockquote-small-color: $gray-600 !default; +$hr-border-color: rgba($black, .1) !default; +$mark-bg: #fcf8e3 !default; + + +// Forms + +$input-bg: $white; +$input-disabled-bg: $gray-600; +$input-color: $black; +$input-border-color: rgba($gray-600, .15); +$input-group-addon-bg: $gray-500; + + +// Tables + +$table-cell-padding-y: 0.75rem; +$table-cell-padding-x: 0.75rem; +$table-striped-bg: $dark; + +// Dropdowns +// Dropdown menu container and contents. + +$dropdown-bg: $gray-700; +$dropdown-divider-bg: $gray-800; +$dropdown-link-color: $body-color; +$dropdown-link-hover-color: color.adjust($body-color, $lightness: -5%); +$dropdown-link-hover-bg: $primary; +$dropdown-link-active-color: $component-active-color; +$dropdown-link-active-bg: $component-active-bg; +$dropdown-header-color: color.adjust($body-color, $lightness: -25%); + + +// Pagination + +$pagination-color: $link-color; +$pagination-bg: $dark; +$pagination-border-color: color.adjust($dark, $lightness: 5%); + +$pagination-hover-color: $link-hover-color; +$pagination-hover-bg: $gray-900; +$pagination-hover-border-color: $gray-800; + +$pagination-active-color: $body-color; +$pagination-active-bg: $primary; +$pagination-active-border-color: $primary; + +$pagination-disabled-color: $gray-600; +$pagination-disabled-bg: $pagination-bg; +$pagination-disabled-border-color: $pagination-border-color; + + +// Cards + +$card-bg: $dark; +$card-cap-bg: rgba($light, .05); + + +// Progress bars + +$progress-bg: $gray-600; + + +// List group + +$list-group-bg: $dark; +$list-group-hover-bg: color.adjust($list-group-bg, $lightness: -5%); +$list-group-active-color: $component-active-color !default; +$list-group-active-bg: $component-active-bg !default; +$list-group-active-border-color: $list-group-active-bg !default; +$list-group-action-color: $gray-400; +$list-group-action-hover-color: $list-group-action-color; + + +// Breadcrumbs + +$breadcrumb-active-color: $gray-600; +$breadcrumb-bg: none; +$breadcrumb-padding-y: 0.75rem; +$breadcrumb-padding-x: 1rem; diff --git a/babybuddy/static_src/scss/babybuddy.scss b/babybuddy/static_src/scss/babybuddy.scss index bbe2a872..d9efb0c7 100644 --- a/babybuddy/static_src/scss/babybuddy.scss +++ b/babybuddy/static_src/scss/babybuddy.scss @@ -1,8 +1,7 @@ -@import 'functions'; @import 'variables'; -@import 'mixins'; @import '../../../node_modules/bootstrap/scss/bootstrap'; -@import '../../../node_modules/tempusdominus-bootstrap-4/src/sass/tempusdominus-bootstrap-4'; +@import '../../../node_modules/@eonasdan/tempus-dominus/src/sass/variables'; +@import '../../../node_modules/@eonasdan/tempus-dominus/src/sass/tempus-dominus'; @import '../../../**/static_src/scss/*'; @import '../fontello/css/babybuddy'; diff --git a/babybuddy/static_src/scss/forms.scss b/babybuddy/static_src/scss/forms.scss index 9ace10c2..6d64648a 100644 --- a/babybuddy/static_src/scss/forms.scss +++ b/babybuddy/static_src/scss/forms.scss @@ -1,3 +1,5 @@ +@use 'sass:map'; + // Baby Buddy form style customizations. // BB form fields do not follow typical BS4 style that enables this display. @@ -34,7 +36,7 @@ .input-group-text { background: none; border: 0; - color: theme-color('primary'); + color: map.get($theme-colors, 'primary'); padding-left: 0; padding-right: 0; } diff --git a/babybuddy/static_src/scss/global.scss b/babybuddy/static_src/scss/global.scss index d4e83835..2e395859 100644 --- a/babybuddy/static_src/scss/global.scss +++ b/babybuddy/static_src/scss/global.scss @@ -1,3 +1,5 @@ +@use 'sass:map'; + // Baby Buddy site-wide custom styles. // Remove extra margin below site breadcrumb. @@ -7,7 +9,7 @@ // Extra-small button. .btn-xs { - @include button-size(.2rem, .12rem, .75rem, 1, .2rem); + @include button-size(.2rem, .12rem, .75rem, .2rem); } // Right align main dropdown menu. @@ -18,33 +20,10 @@ // PullToRefresh elements. .ptr--ptr { - background: theme-color('dark'); + background: map.get($theme-colors, 'dark'); .ptr--text, .ptr--icon { // "!important" must be used to override inline styling from JS. - color: theme-color('light') !important; - } -} - -// Basic table of model instances. -.table-instances { - tr { - td, th { - vertical-align: middle; - } - - &.odd { - background: $table-accent-bg; - } - &.even { - background: none; - } - &.row-details { - td { - color: $gray-500; - padding-top: 0; - border-top: 0; - } - } + color: map.get($theme-colors, 'light') !important; } } @@ -55,5 +34,5 @@ // All modals .modal-content { - color: theme-color('dark'); + color: map.get($theme-colors, 'dark'); } \ No newline at end of file diff --git a/babybuddy/static_src/scss/themes/blueorange.scss b/babybuddy/static_src/scss/themes/blueorange.scss deleted file mode 100644 index 10deea22..00000000 --- a/babybuddy/static_src/scss/themes/blueorange.scss +++ /dev/null @@ -1,149 +0,0 @@ -@use 'sass:color'; - -// Blue Orange theme variables. - -// Color system - -$blue: #37abe9; -$indigo: #472395; -$purple: #712395; -$pink: #952393; -$red: #a72431; -$orange: #ff8f00; -$yellow: #ffbe42; -$green: #239556; -$teal: #5abccc; -$cyan: #44c4dd; - -$theme-colors: ( - primary: $blue, - secondary: $orange, - success: $green, - info: $cyan, - debug: $cyan, - warning: $yellow, - danger: $red, - error: $red, - light: $gray-100, - dark: $gray-800 -); - - -// Body -// Settings for the `` element. - -$body-bg: $gray-900; -$body-color: $gray-400; - - -// Links -// Style anchor elements. - -$link-color: theme-color('info'); -$link-hover-color: color.adjust($link-color, $lightness: -15%); - - -// Components -// Define common padding and border radius sizes and more. - -$border-color: $gray-200; -$component-active-color: $gray-400; -$component-active-bg: theme-color('primary'); - - -// Fonts -// Font, line-height, and color for body text, headings, and more. - -$text-muted: $gray-600 !default; -$blockquote-small-color: $gray-600 !default; -$hr-border-color: rgba($black, .1) !default; -$mark-bg: #fcf8e3 !default; - - -// Tables -// Customizes the `.table` component with basic values, each used across all table variations. - -$table-border-color: $gray-800; -$table-color: $body-color; -$table-head-bg: theme-color('primary'); -$table-hover-color: $body-color; -$table-inverse-bg: theme-color('primary'); -$table-accent-bg: rgba(theme-color('primary'), .1); - -// Forms - -$input-bg: $white; -$input-disabled-bg: $gray-600; -$input-color: $black; -$input-border-color: rgba($gray-600, .15); -$input-group-addon-bg: $gray-500; - - -// Dropdowns -// Dropdown menu container and contents. - -$dropdown-bg: $gray-700; -$dropdown-divider-bg: $gray-800; -$dropdown-link-color: $body-color; -$dropdown-link-hover-color: color.adjust($body-color, $lightness: -5%); -$dropdown-link-hover-bg: theme-color('primary'); -$dropdown-link-active-color: $component-active-color; -$dropdown-link-active-bg: $component-active-bg; -$dropdown-header-color: color.adjust($body-color, $lightness: -25%); - - -// Pagination - -$pagination-color: $link-color; -$pagination-bg: theme-color('dark'); -$pagination-border-color: color.adjust(theme-color('dark'), $lightness: 5%); - -$pagination-hover-color: $link-hover-color; -$pagination-hover-bg: $gray-900; -$pagination-hover-border-color: $gray-800; - -$pagination-active-color: $body-color; -$pagination-active-bg: theme-color('primary'); -$pagination-active-border-color: theme-color('primary'); - -$pagination-disabled-color: $gray-600; -$pagination-disabled-bg: $pagination-bg; -$pagination-disabled-border-color: $pagination-border-color; - - -// Jumbotron - -$jumbotron-bg: theme-color('dark'); - - -// Cards - -$card-bg: theme-color('dark'); -$card-cap-bg: rgba(theme-color('light'), .05); - - -// Progress bars - -$progress-bg: $gray-600; - - -// List group - -$list-group-bg: theme-color('dark'); -$list-group-hover-bg: color.adjust($list-group-bg, $lightness: -5%); -$list-group-active-color: $component-active-color !default; -$list-group-active-bg: $component-active-bg !default; -$list-group-active-border-color: $list-group-active-bg !default; -$list-group-action-color: $gray-400; -$list-group-action-hover-color: $list-group-action-color; - - -// Breadcrumbs - -$breadcrumb-bg: none; -$breadcrumb-active-color: $gray-600; - - -// Datetimepicker library (Tempus Dominus) - -$bs-datetimepicker-btn-hover-bg: $gray-800; diff --git a/babybuddy/templates/babybuddy/filter.html b/babybuddy/templates/babybuddy/filter.html index 84765a40..cc7f362b 100644 --- a/babybuddy/templates/babybuddy/filter.html +++ b/babybuddy/templates/babybuddy/filter.html @@ -8,14 +8,14 @@