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
Branches
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
app/views/search/globalsearch/index.php
+ 4
− 4
View file @ 2167eb75
......@@ -5,14 +5,14 @@
placeholder="<?= _('Was suchen Sie?') ?>">
<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">
<?= Icon::create('decline')->asImg(['title' => _('Suche zurücksetzen')]) ?>
</button>
<button type="submit" class="button" id="search-btn">
<?= Icon::create('search')->asImg(['title' => _('Suche starten')]) ?>
</button>
</span>
</div>
</form>
......
lib/classes/sidebar/SearchWidget.php
+ 12
− 7
View file @ 2167eb75
......@@ -145,15 +145,20 @@ class SearchWidget extends SidebarWidget
$reset_params = $query_params;
foreach ($this->needles as $needle) {
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(
'<a href="%s">%s %s</a>',
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;
$reset_link = URLHelper::getLink($this->url, array_merge($reset_params, ['reset-search' => 1]));
$this->template_variables['reset_link'] = $reset_link;
}
$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 {
// visual adjustments for the reset button
button#reset-search {
background-color: transparent;
border: 0;
background-color: $white;
border-bottom: 1px solid $light-gray-color-40;
border-top: 1px solid $light-gray-color-40;
margin-left: -1px;
padding-left: 10px;
}
......
resources/assets/stylesheets/scss/sidebar.scss
+ 42
− 29
View file @ 2167eb75
......@@ -298,45 +298,58 @@ select.sidebar-selectlist {
}
.sidebar-search {
.needles input[type=text] {
.needles {
list-style: none;
margin: 0;
padding: 0;
li {
display: flex;
margin-bottom: 0.5em;
&:last-child {
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-width: 30px;
float: left;
height: 22px;
border-right: none;
flex: 1;
padding: .375rem .75rem;
width: 100%;
}
input[type=submit] {
font: 0/0 a;
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;
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;
.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.needles {
list-style: none;
margin: 0;
padding: 0;
li {
@include clearfix();
margin-bottom: 0.5em;
&:last-child {
margin-bottom: 0;
}
}
}
ul.filters {
list-style: none;
margin: 0;
......
resources/vue/components/courseware/CoursewareSearchWidget.vue
+ 26
− 15
View file @ 2167eb75
......@@ -2,19 +2,25 @@
<form class="sidebar-search" @submit.prevent="">
<ul class="needles">
<li>
<form @submit.prevent="">
<div class="input-group files-search">
<input
type="text"
v-model="searchTerm"
:aria-label="$gettext('Geben Sie einen Suchbegriff mit mindestens 3 Zeichen ein.')"
/>
<input
<a v-if="searched" @click.prevent="setShowSearchResults(false)" class="reset-search">
<studip-icon shape="decline" size="20"></studip-icon>
</a>
<button
type="submit"
:value="$gettext('Suchen')"
aria-controls="search"
class="submit-search"
@click="loadResults"
/>
</form>
>
<studip-icon shape="search" size="20"></studip-icon>
</button>
</div>
</li>
</ul>
</form>
......@@ -23,12 +29,14 @@
<script>
import axios from 'axios';
import { mapActions, mapGetters } from 'vuex';
import StudipIcon from '../StudipIcon.vue';
export default {
name: 'courseware-search-widget',
components: { StudipIcon },
data() {
return {
searchTerm: '',
searchTerm: ''
}
},
computed: {
......@@ -36,6 +44,9 @@ export default {
courseware: 'courseware',
context: 'context',
}),
searched() {
return this.$store.state.courseware.showSearchResults
}
},
methods: {
...mapActions({
......
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">
<? foreach ($url_params as $key => $value): ?>
<?=addHiddenFields($key,$value)?>
......@@ -10,6 +5,7 @@
<ul class="needles">
<? foreach ($needles as $needle): ?>
<li <? if ($needle['quick_search'] && $needle['quick_search']->hasExtendedLayout()) echo 'class="extendedLayout" id="' . $needle['quick_search']->getId() . '_frame"'; ?>>
<div class="input-group files-search">
<label for="needle-<?= $hash = md5($url . '|' . $needle['name']) ?>" <? if ($needle['placeholder']) echo 'style="display:none;"'; ?>>
<?= htmlReady($needle['label']) ?>
</label>
......@@ -22,7 +18,16 @@
<? if ($needle['placeholder']) printf('placeholder="%s"', htmlReady($needle['label'])); ?>
<?= arrayToHtmlAttributes($needle['attributes']) ?>>
<? endif; ?>
<input type="submit" value="<?= _('Suchen') ?>">
<? 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>
<? endforeach; ?>
</ul>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment