From 92c694bd94e14949f7f6cf46cbe42b4cfb2859a7 Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Thu, 16 Jan 2020 16:08:56 +0000 Subject: [PATCH] Bug 24363: Datepicker calendar is not sexy on additem.pl This patch is essentially an alternative to Bug 24181. Instead of trying to make the datepicker inputs match default fields, it defines a default style for text inputs, selects, and textareas. This new default style borrows some from Bootstrap's input styling and some from the Select2 plugin's style. This makes forms like the one on the add item page have unified styling for all fields. To test, apply the patch and rebuild the staff client CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client). Test as many pages as you can to look for consistent styling of form fields: Patron entry, cataloging (basic and advanced), reports, batch item modification, system preferences, etc. --- koha-tmpl/intranet-tmpl/prog/css/cateditor.css | 6 ++++ koha-tmpl/intranet-tmpl/prog/css/login.css | 18 ++++++---- koha-tmpl/intranet-tmpl/prog/css/select2.css | 6 +++- koha-tmpl/intranet-tmpl/prog/css/src/_mixins.scss | 23 +++++++++++++ koha-tmpl/intranet-tmpl/prog/css/src/_tables.scss | 10 +++--- .../intranet-tmpl/prog/css/src/staff-global.scss | 39 +++++++++++++++++++--- .../intranet-tmpl/prog/en/includes/calendar.inc | 5 +-- 7 files changed, 86 insertions(+), 21 deletions(-) diff --git a/koha-tmpl/intranet-tmpl/prog/css/cateditor.css b/koha-tmpl/intranet-tmpl/prog/css/cateditor.css index 277a1b1aa6c..f6802595929 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/cateditor.css +++ b/koha-tmpl/intranet-tmpl/prog/css/cateditor.css @@ -70,6 +70,12 @@ body { line-height: 1.2; } +#editor input, +#editor input[type="text"], +#editor select { + padding: 0; +} + .cm-tagnumber { color: #080; font-weight: bold; diff --git a/koha-tmpl/intranet-tmpl/prog/css/login.css b/koha-tmpl/intranet-tmpl/prog/css/login.css index 14f271421a5..7a95cbaebb4 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/login.css +++ b/koha-tmpl/intranet-tmpl/prog/css/login.css @@ -168,11 +168,15 @@ label { text-align: right; } -textarea, input, select { - background: #f4f4f4; - border: 1px solid #b2b2b2; - color: #000; - font: 13px Verdana, Arial, Helvetica, sans-serif; - margin: 1px; - padding: 3px; +textarea, +input, +input[type='text'], +input[type='password'], +select { + background: #f4f4f4; + border: 1px solid #b2b2b2; + color: #000; + height: unset; + margin: 1px; + padding: 3px; } diff --git a/koha-tmpl/intranet-tmpl/prog/css/select2.css b/koha-tmpl/intranet-tmpl/prog/css/select2.css index c9550fd3082..a571de429b6 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/select2.css +++ b/koha-tmpl/intranet-tmpl/prog/css/select2.css @@ -9,4 +9,8 @@ .select2-container.missing .select2-choice { background: #ffc none; -} \ No newline at end of file +} + +.select2-container .select2-choice { + background: #FFF none; +} diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_mixins.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_mixins.scss index abf0c27b00a..6d990113fa0 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/_mixins.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/_mixins.scss @@ -10,13 +10,16 @@ $table-odd-row: #F9F9F9; border-color: #ADADAD #ADADAD #949494; border-radius: 4px; border-width: 1px; + box-shadow: none; color: #333333; display: inline-block; font-size: inherit; + height: unset; line-height: 1.42857143; padding: .3em .8em; text-align: center; text-shadow: 0 1px 0 #fff; + transition: none; vertical-align: middle; white-space: nowrap; @@ -29,4 +32,24 @@ $table-odd-row: #F9F9F9; background: #EEE none; border: 1px solid #C0C0C0; color: #999; +} + +@mixin default-input { + background-color: #fff; + background-image: none; + border: 1px solid #aaa; + border-radius: 3px; + box-shadow: inset 0 1px 1px rgba(0,0,0,.075); + display: inline-block; + font-size: inherit; + height: 26px; + line-height: 1.42857143; + padding: 4px 7px; + transition: border-color ease-in-out .05s,box-shadow ease-in-out .05s; +} + +@mixin default-input-focus { + border-color: #538200; + outline: 0; + box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 3px rgba(83, 130, 0, .6); } \ No newline at end of file diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_tables.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_tables.scss index f30ed516b06..ad2b0a030f6 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/_tables.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/_tables.scss @@ -510,10 +510,12 @@ tbody { } } - input { - &[type="search"] { - border: 1px solid #CCC; - } + input, + input[type="text"], + select { + height: unset; + line-height: unset; + padding: 0; } &:empty { diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss index 5e02ed1d3c7..4c791a54a66 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss @@ -349,15 +349,36 @@ cite { font-style: italic; } -input, -textarea { +textarea, +select { + @include default-input; + height: unset; + &:focus { - border-color: #538200; - border-radius: 4px; + @include default-input-focus; } } input { + @include default-input; + + &[type="text"], + &[type="password"], + &[type="email"], + &[type="number"] { + @include default-input; + + &:focus { + @include default-input-focus; + } + } + + &[type="file"]{ + background: transparent none; + border: none; + box-shadow: none; + } + &[type="checkbox"], &[type="radio"] { margin: 0; @@ -385,6 +406,14 @@ input { } } + &.hasDatepicker { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAT0lEQVQ4jWNgoAZYd/LVf3IwigGkAuwGLE4hDg9eA4il8RqADVdtLYVjZLVEuwDZAKJcgKxh+zkyXIBuI8lhgG4jOqZdLJACMAygKDNRAgBj9qOB+rWnhAAAAABJRU5ErkJggg=="); + background-position-x: right 4px; + background-position-y: center; + background-repeat: no-repeat; + padding-right: 18px; + } + &.submit { @include default-button; @@ -2898,7 +2927,7 @@ li { } .ui-datepicker-trigger { - margin: 0 0 3px -2em; + margin: 0 3px; vertical-align: middle; } diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/calendar.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/calendar.inc index 1cd41e2961d..e6f12ddce00 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/includes/calendar.inc +++ b/koha-tmpl/intranet-tmpl/prog/en/includes/calendar.inc @@ -160,10 +160,7 @@ function(value, element, params) { $(document).ready(function(){ $.datepicker.setDefaults({ - showOn: "both", - buttonImage: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAT0lEQVQ4jWNgoAZYd/LVf3IwigGkAuwGLE4hDg9eA4il8RqADVdtLYVjZLVEuwDZAKJcgKxh+zkyXIBuI8lhgG4jOqZdLJACMAygKDNRAgBj9qOB+rWnhAAAAABJRU5ErkJggg==", - buttonImageOnly: true, - buttonText: _("Select date"), + showOn: "focus", changeMonth: true, changeYear: true, showButtonPanel: true, -- 2.11.0