From 1c0da7aa56ac5ea99df0ff218d9106be1be764f0 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. Signed-off-by: David Nind --- 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 ba7de2e5b2..79409081a4 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 14f271421a..7a95cbaebb 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 c9550fd308..a571de429b 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 abf0c27b00..6d990113fa 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 f30ed516b0..ad2b0a030f 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 5e02ed1d3c..4c791a54a6 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 1cd41e2961..e6f12ddce0 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