diff --git a/app/controllers/help_content.php b/app/controllers/help_content.php index e794a2e21251f02210553388f6c69182a1327352..3f767663295bcba5f20aa6e4582a4a0ac723876a 100644 --- a/app/controllers/help_content.php +++ b/app/controllers/help_content.php @@ -294,7 +294,7 @@ class HelpContentController extends AuthenticatedController ); $sidebar->addWidget($widget); $search = new SearchWidget('?apply_help_content_filter=1'); - $search->addNeedle(_('Suchbegriff'), 'help_content_searchterm'); + $search->addNeedle(_('Suchbegriff'), 'help_content_searchterm', true,); $sidebar->addWidget($search); } } diff --git a/app/views/course/wizard/steps/studyareas/index.php b/app/views/course/wizard/steps/studyareas/index.php index d4c1c0a459919e66a762a938899134972ef3ca4a..4df56025731d7b4943e61d69c1974751f53d3770 100644 --- a/app/views/course/wizard/steps/studyareas/index.php +++ b/app/views/course/wizard/steps/studyareas/index.php @@ -26,14 +26,14 @@ data-forward-url="<?= $no_js_url ?>" data-no-search-result="<?= _('Es wurde kein Suchergebnis gefunden.') ?>"> <h2><?= _('Alle Studienbereiche') ?></h2> - <div> + <div id="sem-tree-search-wrapper"> <input style="width:auto" type="text" size="40" name="search" id="sem-tree-search"> - <span id="sem-tree-search-start"> + <div id="sem-tree-search-start"> <?= Icon::create('search')->asInput([ 'name' => 'start_search', 'onclick' => 'return STUDIP.CourseWizard.searchTree()', ]) ?> - </span> + </div> </div> <div id="sem-tree-assign-all" class="hidden-js hidden-no-js"> <a href="" onclick="return STUDIP.CourseWizard.assignAllNodes()"> diff --git a/app/views/multipersonsearch/js_form.php b/app/views/multipersonsearch/js_form.php index 1862c84d90d34d36b638c78daa19cab139385c88..c37f1fd8b95dcf34b7611c851a7b64a38dc32d83 100644 --- a/app/views/multipersonsearch/js_form.php +++ b/app/views/multipersonsearch/js_form.php @@ -8,14 +8,15 @@ <label class="with-action"> <span><?= htmlReady($description); ?></span> - <input id="<?= $name . '_searchinput'; ?>" type="text" placeholder="<?= _("Suchen"); ?>" value="" name="<?= $name . '_searchinput'; ?>" style="width: 260px;" aria-label="<?= _("Suchen"); ?>"> - - <button class="icon-button enter-accessible" onclick='STUDIP.MultiPersonSearch.search();return false' title="<?= _('Suche starten') ?>"> - <?= Icon::create('search')->asImg(['class' => 'text-bottom']) ?> - </button> - <button class="icon-button enter-accessible" onclick='STUDIP.MultiPersonSearch.resetSearch(); return false' title="<?= _('Suche zurücksetzen') ?>"> - <?= Icon::create('decline')->asImg(['class' => 'text-bottom']) ?> - </button> + <div class="search-wrapper"> + <input id="<?= $name . '_searchinput'; ?>" type="text" placeholder="<?= _("Suchen"); ?>" value="" name="<?= $name . '_searchinput'; ?>" aria-label="<?= _("Suchen"); ?>" spellcheck="false"> + <button id="<?= $name . '_resetsearch'; ?>" class="icon-button enter-accessible reset-search" onclick='STUDIP.MultiPersonSearch.resetSearch(); return false' title="<?= _('Suche zurücksetzen') ?>"> + <?= Icon::create('decline')->asImg(['class' => 'text-bottom']) ?> + </button> + <button class="icon-button enter-accessible search" onclick='STUDIP.MultiPersonSearch.search();return false' title="<?= _('Suche starten') ?>"> + <?= Icon::create('search')->asImg(['class' => 'text-bottom']) ?> + </button> + </div> </label> <p><? foreach($quickfilter as $title => $users) : ?> <a href="#" class="quickfilter" data-quickfilter="<?= md5($title); ?>"><?= htmlReady($title); ?> (<?= count($users); ?>)</a> diff --git a/app/views/oer/market/_searchform.php b/app/views/oer/market/_searchform.php index 7a41c6ab838872b920af2c9e0f151d6102247ab3..bad34f6cdac37efce58d0969245c713615730d45 100644 --- a/app/views/oer/market/_searchform.php +++ b/app/views/oer/market/_searchform.php @@ -108,7 +108,7 @@ </div> - <button title="<?= _('Suche starten') ?>" @click.prevent="search" @focus="hideFilterPanel"> + <button class="button-search" title="<?= _('Suche starten') ?>" @click.prevent="search" @focus="hideFilterPanel"> <studip-icon shape="search" role="clickable"></studip-icon> </button> </div> diff --git a/app/views/shared/filter.php b/app/views/shared/filter.php index d9df9a2a5ab35c5860bba8b815815a012c32b6ce..58698591a55e54c5875f4e46dc91aed57bc1e822 100644 --- a/app/views/shared/filter.php +++ b/app/views/shared/filter.php @@ -18,13 +18,21 @@ </a> </div> <? endif; ?> -<form class="default" id="index_filter" action="<?= $action ?>" method="post"> +<form class="default sidebar-search" id="index_filter" action="<?= $action ?>" method="post"> <? if (!empty($name_search)) : ?> - <label class="mvv-name-search"> - <?= $name_caption ?: _('Name') ?> - <input type="text" name="name_filter" value="<?= htmlReady($selected_name) ?>"> - <input type="submit" value="<?= _('Suchen') ?>"> - </label> + <ul class="needles"> + <li> + <div class="input-group files-search"> + <label for="mvv-name-search" class="sr-only"> + <?= $name_caption ?: _('Name') ?> + </label> + <input id="mvv-name-search" type="text" name="name_filter" value="<?= htmlReady($selected_name) ?>"> + <button type="submit" class="submit-search" title="<?= _('Suchen') ?>"> + <?= Icon::create('search') ?> + </button> + </div> + </li> + </ul> <? endif ?> <? if (!empty($semester)) : ?> <label> diff --git a/resources/assets/javascripts/lib/multi_person_search.js b/resources/assets/javascripts/lib/multi_person_search.js index c50c508d8ccd74ec54984972bd2fb45ec379d23e..2034d805f288701e49024d0e82a3189ccea7d9bf 100644 --- a/resources/assets/javascripts/lib/multi_person_search.js +++ b/resources/assets/javascripts/lib/multi_person_search.js @@ -83,6 +83,7 @@ const MultiPersonSearch = { }, search: function() { + $('#' + this.name + '_resetsearch').addClass('visible'); const searchterm = $('#' + this.name + '_searchinput').val(); const not_found_template = _.template( $gettext('Es wurden keine neuen Ergebnisse für "<%= needle %>" gefunden.') @@ -132,6 +133,7 @@ const MultiPersonSearch = { }, resetSearch: function() { + $('#' + this.name + '_resetsearch').removeClass('visible'); $('#' + this.name + '_searchinput').val(''); MultiPersonSearch.removeAllNotSelected(); }, diff --git a/resources/assets/stylesheets/scss/coursewizard.scss b/resources/assets/stylesheets/scss/coursewizard.scss index 2fe1783f62bad0d660583b49012f54ca92164bdf..2f9372e92df472e63c04b25c790bbc1c8dd52176 100644 --- a/resources/assets/stylesheets/scss/coursewizard.scss +++ b/resources/assets/stylesheets/scss/coursewizard.scss @@ -25,6 +25,36 @@ div { float: left; padding-left: 10px; width: calc(50% - 20px); + + #sem-tree-search-wrapper { + max-width: 25em; + border: solid thin var(--color--input-field-border); + border-radius: var(--border-radius-search); + margin-bottom: 1em; + padding: 0 0 0 5px; + + &:focus-within { + border: solid 2px var(--black); + } + + #sem-tree-search { + border: none; + outline: none; + } + + #sem-tree-search-start { + height: 30px; + border-left: solid thin #ccc; + display: inline-block; + width: 30px; + + input { + vertical-align: middle; + padding: 5px 7px; + } + } + } + } } diff --git a/resources/assets/stylesheets/scss/dashboard.scss b/resources/assets/stylesheets/scss/dashboard.scss index 1ed90bdff0936837f0e505dfcd26425e574db3ed..3d19ba0bb89ae1716815d5a46970422a97095077 100644 --- a/resources/assets/stylesheets/scss/dashboard.scss +++ b/resources/assets/stylesheets/scss/dashboard.scss @@ -113,7 +113,9 @@ #files_dashboard-index, #files_dashboard-search { form { - label, .input-group { + label, + input, + .input-group { margin-top: 0; } } @@ -133,6 +135,8 @@ form div.files-search { line-height: 1.5; padding: .25em .5em; margin: 0; + border-top-left-radius: var(--border-radius-search); + border-bottom-left-radius: var(--border-radius-search); } .input-group-append { @@ -142,11 +146,14 @@ form div.files-search { .button { margin: 0; line-height: 1.5; - background-color: var(--content-color-20); + background-color: var(--color--button-background); color: var(--brand-color-dark); min-width: auto; border: 1px solid var(--light-gray-color-40); border-left: none; + border-radius: 0; + border-top-right-radius: var(--border-radius-search); + border-bottom-right-radius: var(--border-radius-search); } img { diff --git a/resources/assets/stylesheets/scss/globalsearch.scss b/resources/assets/stylesheets/scss/globalsearch.scss index 5f5e3fab9242c3b8791e07a1f3aef152b178cf9c..ce16092bcac5c5347072362b451b2ee27b69fce7 100644 --- a/resources/assets/stylesheets/scss/globalsearch.scss +++ b/resources/assets/stylesheets/scss/globalsearch.scss @@ -4,51 +4,54 @@ align-self: flex-start; } #globalsearch-searchbar { - $width: 423px; - $hidden-width: 215px; - - position: relative; - top: 4px; - white-space: nowrap; + display: flex; + align-items: center; + border: thin solid var(--color--font-inverted); + border-radius: var(--border-radius-search); + background-color: var(--color--brand-primary); + padding: 3px 5px 2px 5px; + margin-top: 6px; + width: 220px; + transition: width var(--transition-duration); + + &:focus-within { + border-color: -webkit-focus-ring-color; + } // Reset alignments among browsers > * { box-sizing: border-box; } - // Defines the clear icon for the input - #globalsearch-clear { - @include square(var(--icon-size-default)); - margin-left: -28px; - margin-top: -5px; - vertical-align: middle; - } &:not(.has-value) #globalsearch-clear { display: none; } - // The actual search input #globalsearch-input { - height: 29px; - padding-left: 5px; - width: $hidden-width; - transition: width var(--transition-duration); - } - &.is-visible #globalsearch-input { - width: $width; + flex: 1; + border: none; + outline: none; + margin-right: 5px; + color: var(--color--font-inverted); + background-color: var(--color--brand-primary); + + &::placeholder { + color: var(--color--font-inverted); + } } - // Search icon - #globalsearch-icon { - margin-left: 5px; - position: relative; - top: 3px; + input[type=image] { + cursor: pointer; + border: none; + background: none; + padding: 0; + margin: 0 5px; } // Hint toggle text #globalsearch-togglehints { font-size: $font-size-small; - margin: 0; + margin: 0 10px; @include icon('before', 'arr_1right', 'clickable', $font-size-small, 2px); @@ -69,6 +72,7 @@ + #globalsearch-hints { display: block; white-space: normal !important; + margin: 0 10px; } } } @@ -80,10 +84,13 @@ color: var(--text-color); display: none; max-height: 90vh; - overflow: auto; - padding: 5px; + overflow: hidden; + padding: 10px 5px; position: absolute; - width: $width; + width: 410px; + top: 36px; + margin-left: -5px; + border-radius: var(--border-radius-default); a { color: var(--base-color); @@ -97,7 +104,6 @@ color: var(--text-color); header { - color: var(--base-color); margin: 5px 5px 0; } @@ -108,8 +114,27 @@ } } } - &.is-visible #globalsearch-list { - display: block; + + &.is-visible { + width: 400px; + background-color: var(--white); + + #globalsearch-input { + background-color: var(--white); + color: var(--color--font-primary); + + &::placeholder { + color: var(--color--font-primary); + } + } + + #globalsearch-icon { + filter: brightness(0) saturate(100%) invert(25%) sepia(7%) saturate(6410%) hue-rotate(181deg) brightness(95%) contrast(88%); + } + + #globalsearch-list { + display: block; + } } // "Searching..." info @@ -137,15 +162,17 @@ } #globalsearch-results { + margin-top: 1em; + height: 50vh; + overflow: auto; + &:empty { display: none; } article { border: 1px solid var(--content-color-40); - margin: 3px; - margin-bottom: 8px; - margin-top: 8px; + margin: 0 10px 10px 10px; > header { background-color: var(--content-color-20); diff --git a/resources/assets/stylesheets/scss/header.scss b/resources/assets/stylesheets/scss/header.scss index b4268cd83cb9d4bb1b77cefde8de14a4f50b3efb..44d1951e751e8ca7264a03563712995ab07809e5 100644 --- a/resources/assets/stylesheets/scss/header.scss +++ b/resources/assets/stylesheets/scss/header.scss @@ -207,7 +207,7 @@ } #avatar-menu { - height: 26px; + height: 28px; margin: 0; z-index: 1003; @@ -216,14 +216,14 @@ padding: 1px 1px 1px 0; .action-menu-icon { - height: 24px; + height: 26px; position: relative; - width: 24px; + width: 26px; z-index: 1; img { - height: 24px; - width: 24px; + height: 26px; + width: 26px; border-top-right-radius: var(--border-radius-avatar-menu); border-bottom-right-radius: var(--border-radius-avatar-menu); } diff --git a/resources/assets/stylesheets/scss/messages.scss b/resources/assets/stylesheets/scss/messages.scss index a3849d6a0ec509ea33b5c774093c5173565b6ef0..8642fc7b6da92d3089e8f8caa61a25c7e3abb8c2 100644 --- a/resources/assets/stylesheets/scss/messages.scss +++ b/resources/assets/stylesheets/scss/messages.scss @@ -85,6 +85,15 @@ form.default { > * { margin-right: 1em; } + + .multi_person_search_link { + line-height: 30px; + + img { + vertical-align: middle; + margin-top: -2px; + } + } } ul.message-options { diff --git a/resources/assets/stylesheets/scss/multi_person_search.scss b/resources/assets/stylesheets/scss/multi_person_search.scss index e1e6270f150b26c6c032c32b390a27910f9cace4..2b2efd1d0db322b591f916fc4cb13f9dc5e6bcd6 100755 --- a/resources/assets/stylesheets/scss/multi_person_search.scss +++ b/resources/assets/stylesheets/scss/multi_person_search.scss @@ -6,3 +6,46 @@ } } } + +.mpscontainer { + label.with-action { + .search-wrapper { + border: solid thin var(--color--input-field-border); + border-radius: var(--border-radius-search); + width: 290px; + padding: 0 5px; + + &:focus-within { + border-color: var(--black); + } + + input[type=text] { + border: none; + outline: none; + width: 220px; + vertical-align: text-bottom; + padding: 0 5px; + margin: 0; + line-height: $font-size-base; + } + + .icon-button { + width: 30px; + height: 30px; + padding: 0 0 0 5px; + + &.search { + border-left: solid thin var(--color--input-field-border); + } + } + + .reset-search { + visibility: hidden; + &.visible { + visibility: visible; + } + } + } + } + +} \ No newline at end of file diff --git a/resources/assets/stylesheets/scss/mvv.scss b/resources/assets/stylesheets/scss/mvv.scss index 48b063bc7b14ac62f3485455a2c67b18823c80d2..a6c7275f90a73ebeae85225e7274b122d59ce025 100644 --- a/resources/assets/stylesheets/scss/mvv.scss +++ b/resources/assets/stylesheets/scss/mvv.scss @@ -1,26 +1,6 @@ #index_filter { - label.mvv-name-search { - display: block; - input[type="text"] { - box-sizing: border-box; - border: 1px solid var(--base-color-60); - border-right-width: 30px; - float: left; - height: 22px; - width: 100%; - } - - input[type="submit"] { - @include hide-text; - width: 29px; - height: 20px; - @include background-icon(search, info_alt); - float: left; - background-position: center 3px; - background-repeat: no-repeat; - vertical-align: top; - margin-left: -30px; - } + ul.needles { + margin-bottom: 0.5em; } } diff --git a/resources/assets/stylesheets/scss/oer.scss b/resources/assets/stylesheets/scss/oer.scss index 4d70adfa2528a31c9f33f187b526ba940176903d..b8732e7b3b3dd0cf50bc9966a1a16af8303bf633 100644 --- a/resources/assets/stylesheets/scss/oer.scss +++ b/resources/assets/stylesheets/scss/oer.scss @@ -255,7 +255,6 @@ ul.reviews, ol.reviews { display: flex; .frame { - border: thin solid var(--content-color-40); display: flex; justify-content: space-between; align-items: stretch; @@ -281,8 +280,6 @@ ul.reviews, ol.reviews { button { border-right: none; - border-bottom: none; - border-top: none; height: 35px; &.active { background-color: var(--base-color); @@ -294,19 +291,28 @@ ul.reviews, ol.reviews { } input { + border: thin solid var(--color--input-field-border); + border-top-left-radius: var(--border-radius-search); + border-bottom-left-radius: var(--border-radius-search); + border-right: none; padding-left: 10px; - border: none; width: 100%; } } button { - border: thin solid var(--content-color-40); - background-color: var(--content-color-20); + border: thin solid var(--color--input-field-border); + background-color: var(--color--button-background); display: flex; align-items: center; justify-content: center; width: 35px; + + &.button-search { + border-right: thin solid var(--color--input-field-border); + border-top-right-radius: var(--border-radius-search); + border-bottom-right-radius: var(--border-radius-search); + } } > button { diff --git a/resources/assets/stylesheets/scss/personal-notifications.scss b/resources/assets/stylesheets/scss/personal-notifications.scss index 610d6260a630be28f6effde67f53f94ae43553e2..ada6054e7ac6ee29d8c6339a32913ee222f9a2ac 100644 --- a/resources/assets/stylesheets/scss/personal-notifications.scss +++ b/resources/assets/stylesheets/scss/personal-notifications.scss @@ -8,7 +8,7 @@ font-size: 12px; color: var(--color--font-primary); text-align: center; - line-height: 26px; + line-height: 28px; border: none; border-radius: var(--border-radius-avatar-menu); background-color: var(--color--global-background); @@ -19,8 +19,8 @@ border-radius: var(--border-radius-avatar-menu); $list-width: 400px; - width: 26px; - height: 26px; + width: 28px; + height: 28px; color: var(--base-color); vertical-align: text-bottom; position: relative; diff --git a/resources/assets/stylesheets/scss/quicksearch.scss b/resources/assets/stylesheets/scss/quicksearch.scss index ef6c37279f92c93b81bb8e6e10b9c3883ace8782..f91af9394dfb063b8f6aae26a251e3dbd1e99c1a 100644 --- a/resources/assets/stylesheets/scss/quicksearch.scss +++ b/resources/assets/stylesheets/scss/quicksearch.scss @@ -16,13 +16,15 @@ input.quicksearchbox { div.quicksearch_frame { text-indent: 0; + flex-grow: 1; input[type="text"] { box-sizing: border-box; - border-width: 1px 30px 1px 1px; + border-width: 1px; border-style: solid; - border-color: var(--base-color-60); + border-color: var(--color--input-field-border); border-image: none; + border-radius: var(--border-radius-search); display: inline-block !important; } @@ -37,14 +39,15 @@ div.quicksearch_frame { text-shadow: none; background-color: transparent; border: 0; - width: 29px; - height: 24px; - @include background-icon(search, info_alt); + width: 36px; + height: 30px; + @include background-icon(search); background-position: center; background-repeat: no-repeat; vertical-align: middle; - margin-left: -32px; + margin-left: -40px; margin-top: 1px; + border-left: solid thin var(--color--input-field-border); } } diff --git a/resources/assets/stylesheets/scss/sidebar.scss b/resources/assets/stylesheets/scss/sidebar.scss index 276054983cf065a697648c13bc121b2853c7b6bb..1fcd1ce8392392b980b4a15df68146ad0b7827ce 100644 --- a/resources/assets/stylesheets/scss/sidebar.scss +++ b/resources/assets/stylesheets/scss/sidebar.scss @@ -341,24 +341,27 @@ select.sidebar-selectlist { input[type=text] { box-sizing: border-box; - border: 1px solid var(--dark-gray-color-30); + border: 1px solid var(--color--input-field-border); border-right: none; flex: 1; padding: .25em .5em; width: 100%; order: 1; + border-top-left-radius: var(--border-radius-search); + border-bottom-left-radius: var(--border-radius-search); } .submit-search { - background-color: var(--content-color-20); - border: 1px solid var(--dark-gray-color-30); - border-left-color: var(--light-gray-color-40); + background-color: var(--color--button-background); + border: 1px solid var(--color--input-field-border); border-radius: 0; color: transparent; cursor: pointer; font: 0/0 a; text-shadow: none; order: 3; + border-top-right-radius: var(--border-radius-search); + border-bottom-right-radius: var(--border-radius-search); } .reset-search { diff --git a/resources/assets/stylesheets/scss/variables.scss b/resources/assets/stylesheets/scss/variables.scss index 77de3532b205a817358882a8030848f0c4542e77..a31456ea0be9e91fd4a1d2f2536cfd64049f1a8e 100644 --- a/resources/assets/stylesheets/scss/variables.scss +++ b/resources/assets/stylesheets/scss/variables.scss @@ -60,6 +60,7 @@ $transition-duration-superslow: 1s; // Border radius: $border-radius: 4px; $border-radius-avatar-menu: 7px; +$border-radius-search: 7px; // Layout $page-margin: 15px; @@ -301,6 +302,7 @@ $grid-gap: 0; --border-radius-default: #{$border-radius}; --border-radius-avatar-menu: #{$border-radius-avatar-menu}; + --border-radius-search: #{$border-radius-search}; @media (prefers-reduced-motion) { #{"--"}transition-duration: 0s; diff --git a/resources/vue/components/StudipMultiPersonSearch.vue b/resources/vue/components/StudipMultiPersonSearch.vue index 195a2ea8225c4359bfceb7b861399f34f0063c17..5a0cf9dfcdf43d92966d155ea1c24bfb54623c3d 100644 --- a/resources/vue/components/StudipMultiPersonSearch.vue +++ b/resources/vue/components/StudipMultiPersonSearch.vue @@ -2,13 +2,15 @@ <div class="mpscontainer studip-msp-vue"> <form method="post" class="default" @submit.prevent="search"> <label class="with-action"> - <input type="text" ref="searchInputField" v-model="searchTerm" :placeholder="$gettext('Suchen')" style="width: 260px;"> - <a href="#" class="msp-btn" @click.prevent="search" :title="$gettext('Suche starten')"> - <studip-icon shape="search" /> - </a> - <a href="#" class="msp-btn" @click.prevent="resetSearch" :title="$gettext('Suche zurücksetzen')"> - <studip-icon shape="decline" /> - </a> + <div class="search-wrapper"> + <input type="text" ref="searchInputField" v-model="searchTerm" :placeholder="$gettext('Suchen')" > + <button :class="{ visible: showResetButton }" class="icon-button enter-accessible msp-btn reset-search" @click.prevent="resetSearch" :title="$gettext('Suche zurücksetzen')"> + <studip-icon shape="decline" class="text-bottom" /> + </button> + <button class="icon-button enter-accessible msp-btn search" @click.prevent="search" :title="$gettext('Suche starten')"> + <studip-icon shape="search" class="text-bottom"/> + </button> + </div> </label> <select multiple="multiple" :id="select_box_id" name="selectbox[]"></select> </form> @@ -51,6 +53,9 @@ export default { select_box_id() { return this.id + '_selectbox'; }, + showResetButton() { + return this.searchTerm !== ''; + } }, methods: { init() {