Skip to content
Snippets Groups Projects
Commit 2167eb75 authored by Thomas Hackl's avatar Thomas Hackl
Browse files

Resolve "Styling des Sidebar-Suchwidgets an das Erscheinungsbild der globalen Suche anpassen" 

Closes #1103

Merge request studip/studip!656
parent 258732f5
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
app/views/search/globalsearch/index.php
+ 4
− 4
View file @ 2167eb75
...@@ -5,14 +5,14 @@ ...@@ -5,14 +5,14 @@
placeholder="<?= _('Was suchen Sie?') ?>"> placeholder="<?= _('Was suchen Sie?') ?>">
<span class="input-group-append"> <span class="input-group-append">
<button type="submit" class="button" id="search-btn">
<?= Icon::create('search')->asImg(['title' => _('Suche starten')]) ?>
</button>
<button type="submit" class="button" id="reset-search"> <button type="submit" class="button" id="reset-search">
<?= Icon::create('decline')->asImg(['title' => _('Suche zurücksetzen')]) ?> <?= Icon::create('decline')->asImg(['title' => _('Suche zurücksetzen')]) ?>
</button> </button>
<button type="submit" class="button" id="search-btn">
<?= Icon::create('search')->asImg(['title' => _('Suche starten')]) ?>
</button>
</span> </span>
</div> </div>
</form> </form>
......
lib/classes/sidebar/SearchWidget.php
+ 12
− 7
View file @ 2167eb75
...@@ -145,15 +145,20 @@ class SearchWidget extends SidebarWidget ...@@ -145,15 +145,20 @@ class SearchWidget extends SidebarWidget
$reset_params = $query_params; $reset_params = $query_params;
foreach ($this->needles as $needle) { foreach ($this->needles as $needle) {
unset($reset_params[$needle['name']]); unset($reset_params[$needle['name']]);
// Search view in Wiki must be cleared.
if ($reset_params['view'] == 'search') {
$reset_params['view'] = 'show';
}
// Search view in Forum must be cleared.
if ($reset_params['backend'] == 'search') {
unset($reset_params['backend']);
$this->url = str_replace('index/search', 'index', $this->url);
}
} }
$reset_link = sprintf( $reset_link = URLHelper::getLink($this->url, array_merge($reset_params, ['reset-search' => 1]));
'<a href="%s">%s %s</a>', $this->template_variables['reset_link'] = $reset_link;
URLHelper::getLink($this->url, array_merge($reset_params, ['reset-search' => 1])),
Icon::create('decline')->asImg(['class' => 'text-top']),
_('Zurücksetzen')
);
$this->template_variables['reset_search'] = $reset_link;
} }
$this->template_variables['needles'] = $this->needles; $this->template_variables['needles'] = $this->needles;
......
resources/assets/stylesheets/scss/search.scss
+ 4
− 2
View file @ 2167eb75
...@@ -191,8 +191,10 @@ div#div-search-input { ...@@ -191,8 +191,10 @@ div#div-search-input {
// visual adjustments for the reset button // visual adjustments for the reset button
button#reset-search { button#reset-search {
background-color: transparent; background-color: $white;
border: 0; border-bottom: 1px solid $light-gray-color-40;
border-top: 1px solid $light-gray-color-40;
margin-left: -1px;
padding-left: 10px; padding-left: 10px;
} }
......
resources/assets/stylesheets/scss/sidebar.scss
+ 42
− 29
View file @ 2167eb75
...@@ -298,45 +298,58 @@ select.sidebar-selectlist { ...@@ -298,45 +298,58 @@ select.sidebar-selectlist {
} }
.sidebar-search { .sidebar-search {
.needles input[type=text] { .needles {
box-sizing: border-box;
border: 1px solid $base-color-60;
border-right-width: 30px;
float: left;
height: 22px;
width: 100%;
}
input[type=submit] {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
// Activate when twitter-mixins is included as scss and remove the above rules
// @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 {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
li { li {
@include clearfix(); display: flex;
margin-bottom: 0.5em; margin-bottom: 0.5em;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.input-group {
margin-bottom: 0;
margin-top: 0;
input[type=text] {
box-sizing: border-box;
border: 1px solid $base-color-60;
border-right: none;
flex: 1;
padding: .375rem .75rem;
width: 100%;
}
button {
background-color: $content-color-20;
border: 1px solid $base-color-60;
border-left-color: $light-gray-color-40;
border-radius: 0;
color: transparent;
cursor: pointer;
font: 0/0 a;
height: 30px;
text-shadow: none;
}
.reset-search {
border: 1px solid $base-color-60;
border-left: 0;
border-right: 0;
display: inline-block;
padding-right: 5px;
padding-top: 4px;
cursor: pointer;
}
}
} }
} }
ul.filters { ul.filters {
list-style: none; list-style: none;
margin: 0; margin: 0;
......
resources/vue/components/courseware/CoursewareSearchWidget.vue
+ 26
− 15
View file @ 2167eb75
...@@ -2,19 +2,25 @@ ...@@ -2,19 +2,25 @@
<form class="sidebar-search" @submit.prevent=""> <form class="sidebar-search" @submit.prevent="">
<ul class="needles"> <ul class="needles">
<li> <li>
<form @submit.prevent=""> <div class="input-group files-search">
<input <input
type="text" type="text"
v-model="searchTerm" v-model="searchTerm"
:aria-label="$gettext('Geben Sie einen Suchbegriff mit mindestens 3 Zeichen ein.')" :aria-label="$gettext('Geben Sie einen Suchbegriff mit mindestens 3 Zeichen ein.')"
/> />
<input <a v-if="searched" @click.prevent="setShowSearchResults(false)" class="reset-search">
type="submit" <studip-icon shape="decline" size="20"></studip-icon>
:value="$gettext('Suchen')" </a>
aria-controls="search" <button
@click="loadResults" type="submit"
/> :value="$gettext('Suchen')"
</form> aria-controls="search"
class="submit-search"
@click="loadResults"
>
<studip-icon shape="search" size="20"></studip-icon>
</button>
</div>
</li> </li>
</ul> </ul>
</form> </form>
...@@ -23,12 +29,14 @@ ...@@ -23,12 +29,14 @@
<script> <script>
import axios from 'axios'; import axios from 'axios';
import { mapActions, mapGetters } from 'vuex'; import { mapActions, mapGetters } from 'vuex';
import StudipIcon from '../StudipIcon.vue';
export default { export default {
name: 'courseware-search-widget', name: 'courseware-search-widget',
components: { StudipIcon },
data() { data() {
return { return {
searchTerm: '', searchTerm: ''
} }
}, },
computed: { computed: {
...@@ -36,6 +44,9 @@ export default { ...@@ -36,6 +44,9 @@ export default {
courseware: 'courseware', courseware: 'courseware',
context: 'context', context: 'context',
}), }),
searched() {
return this.$store.state.courseware.showSearchResults
}
}, },
methods: { methods: {
...mapActions({ ...mapActions({
...@@ -70,7 +81,7 @@ export default { ...@@ -70,7 +81,7 @@ export default {
}); });
} }
} }
} }
</script> </script>
templates/sidebar/search-widget.php
+ 23
− 18
View file @ 2167eb75
<? if ($reset_search): ?>
<div style="text-align: right;">
<?= $reset_search ?>
</div>
<? endif; ?>
<form action="<?= URLHelper::getLink($url) ?>" method="<?= $method ?>" <? if (isset($id)) printf('id="%s"', htmlReady($id)); ?> class="sidebar-search"> <form action="<?= URLHelper::getLink($url) ?>" method="<?= $method ?>" <? if (isset($id)) printf('id="%s"', htmlReady($id)); ?> class="sidebar-search">
<? foreach ($url_params as $key => $value): ?> <? foreach ($url_params as $key => $value): ?>
<?=addHiddenFields($key,$value)?> <?=addHiddenFields($key,$value)?>
...@@ -10,19 +5,29 @@ ...@@ -10,19 +5,29 @@
<ul class="needles"> <ul class="needles">
<? foreach ($needles as $needle): ?> <? foreach ($needles as $needle): ?>
<li <? if ($needle['quick_search'] && $needle['quick_search']->hasExtendedLayout()) echo 'class="extendedLayout" id="' . $needle['quick_search']->getId() . '_frame"'; ?>> <li <? if ($needle['quick_search'] && $needle['quick_search']->hasExtendedLayout()) echo 'class="extendedLayout" id="' . $needle['quick_search']->getId() . '_frame"'; ?>>
<label for="needle-<?= $hash = md5($url . '|' . $needle['name']) ?>" <? if ($needle['placeholder']) echo 'style="display:none;"'; ?>> <div class="input-group files-search">
<?= htmlReady($needle['label']) ?> <label for="needle-<?= $hash = md5($url . '|' . $needle['name']) ?>" <? if ($needle['placeholder']) echo 'style="display:none;"'; ?>>
</label> <?= htmlReady($needle['label']) ?>
<? if ($needle['quick_search']): ?> </label>
<?= $needle['quick_search']->render() ?> <? if ($needle['quick_search']): ?>
<? else: ?> <?= $needle['quick_search']->render() ?>
<input type="text" id="needle-<?= $hash ?>" <? else: ?>
name="<?= htmlReady($needle['name']) ?>" <input type="text" id="needle-<?= $hash ?>"
value="<?= htmlReady($needle['value']) ?>" name="<?= htmlReady($needle['name']) ?>"
<? if ($needle['placeholder']) printf('placeholder="%s"', htmlReady($needle['label'])); ?> value="<?= htmlReady($needle['value']) ?>"
<?= arrayToHtmlAttributes($needle['attributes']) ?>> <? if ($needle['placeholder']) printf('placeholder="%s"', htmlReady($needle['label'])); ?>
<? endif; ?> <?= arrayToHtmlAttributes($needle['attributes']) ?>>
<input type="submit" value="<?= _('Suchen') ?>"> <? endif; ?>
<? if ($reset_link): ?>
<a class="reset-search" href="<?= $reset_link ?>" tabindex="0"
title="<?= _('Suche zurücksetzen') ?>">
<?= Icon::create('decline')->asImg(20) ?>
</a>
<? endif; ?>
<button type="submit" class="submit-search<?= $reset_link ? ' is-executed' : '' ?>"
title="<?= _('Suche ausführen') ?>">
<?= Icon::create('search')->asImg(20) ?>
</button>
</li> </li>
<? endforeach; ?> <? endforeach; ?>
</ul> </ul>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment