Skip to content
Snippets Groups Projects
Commit 8681967f authored by Ron Lucke's avatar Ron Lucke
Browse files

Polishing TIC: Suche 

Closes #4933

Merge request studip/studip!3720
parent 4d051059
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 236 additions and 110 deletions
app/controllers/help_content.php
+ 1
− 1
View file @ 8681967f
......@@ -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);
}
}
......
app/views/course/wizard/steps/studyareas/index.php
+ 3
− 3
View file @ 8681967f
......@@ -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()">
......
app/views/multipersonsearch/js_form.php
+ 9
− 8
View file @ 8681967f
......@@ -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') ?>">
<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>
......
app/views/oer/market/_searchform.php
+ 1
− 1
View file @ 8681967f
......@@ -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>
......
app/views/shared/filter.php
+ 14
− 6
View file @ 8681967f
......@@ -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">
<ul class="needles">
<li>
<div class="input-group files-search">
<label for="mvv-name-search" class="sr-only">
<?= $name_caption ?: _('Name') ?>
<input type="text" name="name_filter" value="<?= htmlReady($selected_name) ?>">
<input type="submit" value="<?= _('Suchen') ?>">
</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>
......
resources/assets/javascripts/lib/multi_person_search.js
+ 2
− 0
View file @ 8681967f
......@@ -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();
},
......
resources/assets/stylesheets/scss/coursewizard.scss
+ 30
− 0
View file @ 8681967f
......@@ -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;
}
}
}
}
}
......
resources/assets/stylesheets/scss/dashboard.scss
+ 9
− 2
View file @ 8681967f
......@@ -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 {
......
resources/assets/stylesheets/scss/globalsearch.scss
+ 63
− 36
View file @ 8681967f
......@@ -4,51 +4,54 @@
align-self: flex-start;
}
#globalsearch-searchbar {
$width: 423px;
$hidden-width: 215px;
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);
position: relative;
top: 4px;
white-space: nowrap;
&: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);
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);
}
&.is-visible #globalsearch-input {
width: $width;
}
// 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,9 +114,28 @@
}
}
}
&.is-visible #globalsearch-list {
&.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
#globalsearch-searching {
......@@ -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);
......
resources/assets/stylesheets/scss/header.scss
+ 5
− 5
View file @ 8681967f
......@@ -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);
}
......
resources/assets/stylesheets/scss/messages.scss
+ 9
− 0
View file @ 8681967f
......@@ -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 {
......
resources/assets/stylesheets/scss/multi_person_search.scss
+ 43
− 0
View file @ 8681967f
......@@ -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
resources/assets/stylesheets/scss/mvv.scss
+ 2
− 22
View file @ 8681967f
#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;
}
}
......
resources/assets/stylesheets/scss/oer.scss
+ 12
− 6
View file @ 8681967f
......@@ -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 {
......
resources/assets/stylesheets/scss/personal-notifications.scss
+ 3
− 3
View file @ 8681967f
......@@ -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;
......
resources/assets/stylesheets/scss/quicksearch.scss
+ 9
− 6
View file @ 8681967f
......@@ -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);
}
}
......
resources/assets/stylesheets/scss/sidebar.scss
+ 7
− 4
View file @ 8681967f
......@@ -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 {
......
resources/assets/stylesheets/scss/variables.scss
+ 2
− 0
View file @ 8681967f
......@@ -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;
......
resources/vue/components/StudipMultiPersonSearch.vue
+ 12
− 7
View file @ 8681967f
......@@ -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() {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment