diff --git a/public/js/searchbar.js b/public/js/searchbar.js
index 40040bc2ec84f120af7fad7c9a2e46309550def0..0923d4968b6892472ccce199bda6c7ac9a268bba 100644
--- a/public/js/searchbar.js
+++ b/public/js/searchbar.js
@@ -22,6 +22,7 @@ function setSearchbarActionListeners () {
$('.focusCheckbox').click(checkboxCheckListener);
$('#addFocusBtn').click(() => showFocusCreateDialog(''));
$('#editFocusBtn').click(editCurrentFocus);
+ $('#toggleOptBtn').click(toggleOptionsDialog);
$('.save-focus-btn').click(saveFocus);
$('.delete-focus-btn').click(deleteFocus);
$('#focus-select').change(focusChanged);
@@ -377,6 +378,30 @@ function getFocusInUrl () {
}
}
+function toggleOptionsDialog() {
+ var btnMode = $('#toggleOptBtn').attr('data-mode');
+ if (btnMode == 'o') {
+ openOptionsDialog();
+ } else {
+ closeOptionsDialog();
+ }
+}
+
+function openOptionsDialog() {
+ $('#toggleOptBtn').html('<i class="fa fa-chevron-up" aria-hidden="true"></i>');
+ $('#toggleOptBtn').attr('data-mode', 'c');
+ $('.search-option-frame').css('display', 'flex');
+
+}
+
+function closeOptionsDialog() {
+ $('#toggleOptBtn').html('<i class="fa fa-chevron-down" aria-hidden="true"></i>');
+ $('#toggleOptBtn').attr('data-mode', 'o');
+ $('.search-option-frame').css('display', 'none');
+}
+
+
+
function checkboxCheckListener (event) {
toggleDeleteButton();
var elem = event.target;
diff --git a/resources/assets/js/searchbar.js b/resources/assets/js/searchbar.js
index 42fa9f965b7e7379081c4e3c9c26ceb649f80039..5b4bb784eac07802d9ab278a034810f595404d7a 100644
--- a/resources/assets/js/searchbar.js
+++ b/resources/assets/js/searchbar.js
@@ -22,6 +22,7 @@ function setSearchbarActionListeners () {
$('.focusCheckbox').click(checkboxCheckListener);
$('#addFocusBtn').click(() => showFocusCreateDialog(''));
$('#editFocusBtn').click(editCurrentFocus);
+ $('#toggleOptBtn').click(toggleOptionsDialog);
$('.save-focus-btn').click(saveFocus);
$('.delete-focus-btn').click(deleteFocus);
$('#focus-select').change(focusChanged);
@@ -377,6 +378,30 @@ function getFocusInUrl () {
}
}
+function toggleOptionsDialog() {
+ var btnMode = $('#toggleOptBtn').attr('data-mode');
+ if (btnMode == 'o') {
+ openOptionsDialog();
+ } else {
+ closeOptionsDialog();
+ }
+}
+
+function openOptionsDialog() {
+ $('#toggleOptBtn').html('<i class="fa fa-chevron-up" aria-hidden="true"></i>');
+ $('#toggleOptBtn').attr('data-mode', 'c');
+ $('.search-option-frame').css('display', 'flex');
+
+}
+
+function closeOptionsDialog() {
+ $('#toggleOptBtn').html('<i class="fa fa-chevron-down" aria-hidden="true"></i>');
+ $('#toggleOptBtn').attr('data-mode', 'o');
+ $('.search-option-frame').css('display', 'none');
+}
+
+
+
function checkboxCheckListener (event) {
toggleDeleteButton();
var elem = event.target;
diff --git a/resources/assets/less/metager/searchbar.less b/resources/assets/less/metager/searchbar.less
index b5c00da6f1612de38a558e592346cff8f0cf73ac..7d26270aa966bb87b5d9b1f75caac931851c5ff7 100644
--- a/resources/assets/less/metager/searchbar.less
+++ b/resources/assets/less/metager/searchbar.less
@@ -9,10 +9,17 @@
color: #333;
.search-focus-selector {
border-radius: 5px 0px 0px 5px;
- background-color: white;
- position: relative;
- text-overflow: ellipsis;
display: flex;
+ align-items: center;
+ position: relative;
+
+ &>button {
+ border: none;
+ border-right: 1px solid rgb(170, 170, 170);
+ background-color: white;
+ margin: 5px;
+ }
+
select {
width: 100%;
-webkit-appearance: none;
@@ -38,8 +45,36 @@
pointer-events: none;
}
}
- .search-add-focus {
+
+ .search-option-frame {
+ display: none;
+ position: absolute;
+ background-color: white;
+ top: 50px;
+ padding: 10px;
+ border: 1px solid rgb(175, 175, 175);
+ border-radius: 4px;
+
+ .searchbar-options-arrow {
+ width: 0;
+ height: 0;
+ top: -5px;
+ position: absolute;
+ border-left: 5px solid transparent;
+ border-right: 5px solid transparent;
+ border-bottom: 5px solid rgb(175, 175, 175);
+ margin-left: 3%;
+ }
+ }
+
+ .search-button-container {
display: flex;
+ margin-top: 3%;
+ }
+
+ .search-add-focus {
+ //display: flex;
+ position: relative;
button {
background-color: white;
border: none;
@@ -51,7 +86,8 @@
}
}
.search-edit-focus {
- display: flex;
+ //display: flex;
+ position: relative;
button {
background-color: white;
border: none;
@@ -63,15 +99,17 @@
}
}
.search-settings {
- display: flex;
+ //display: flex;
+ position: relative;
a.btn {
border: none;
padding: 0px 8px;
- display: flex;
+ display: block;
align-items: center;
font-size: 16px;
}
}
+
.search-input-submit {
flex-grow: 1;
display: flex;
@@ -178,7 +216,7 @@ div:hover>.searchbar-tooltip {
border-left: 1px solid #aaa;
}
}
- *:not(.search-submit) {
+ *:not(.search-submit, .searchbar-options-arrow) {
width: 100%;
}
}
@@ -213,13 +251,32 @@ div:hover>.searchbar-tooltip {
}
}
-@media (min-width: @screen-sm-min) {
- #research-bar {
- position: fixed;
- width: 100%;
+.searchbar-tooltip {
+ display: none;
+ position: absolute;
+ top: 45px;
+ left: -10px;
+ &>.searchbar-tooltip-arrow {
+ position: absolute;
+ top: -4px;
+ left: 20px;
+ width: 0;
+ height: 0;
+ border-left: 5px solid transparent;
+ border-right: 5px solid transparent;
+ border-bottom: 5px solid #ff8000;
}
- #research-bar-placeholder {
- height: 60px;
+ &>.searchbar-tooltip-content {
+ position: relative;
+ &>p {
+ display: inline-block;
+ background: #ff8000;
+ border-radius: .25em;
+ font-size: 16px;
+ color: white;
+ padding: 5px 10px;
+ white-space: nowrap;
+ }
}
}
diff --git a/resources/views/parts/searchbar.blade.php b/resources/views/parts/searchbar.blade.php
index 366dcfcee7ccc0925874c02abef61e912c1f9a91..036c621783877621144b2e6acc7905da9ef19a12 100644
--- a/resources/views/parts/searchbar.blade.php
+++ b/resources/views/parts/searchbar.blade.php
@@ -4,6 +4,25 @@
<form id="searchForm" method={{ $request }} action="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/meta/meta.ger3 ") }}" accept-charset="UTF-8">
<div class="searchbar {{$class or ''}}">
<div class="search-focus-selector">
+ <button type="button" id="toggleOptBtn" data-mode="o">
+ <i class="fa fa-chevron-down"></i>
+ </button>
+ <noscript>
+ <style>
+ #toggleOptBtn {
+ display: none;
+ }
+ .search-settings {
+ padding: 5px;
+ border-right: solid 1px #ccc;
+ }
+ </style>
+ <div class="search-settings">
+ <a id="settings-btn" class="mutelink btn btn-default" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "settings ") }}">
+ <i class="fa fa-cog" aria-hidden="true"></i>
+ </a>
+ </div>
+ </noscript>
<select id="focus-select" name="focus" style="font-family: FontAwesome, sans-serif;">
<option value="web" style="font-family: FontAwesome, sans-serif;" selected> Websuche</option>
<option value="nachrichten" style="font-family: FontAwesome, sans-serif;"> Nachrichtensuche</option>
@@ -11,36 +30,42 @@
<option value="produktsuche" style="font-family: FontAwesome, sans-serif;"> Produktsuche</option>
<option value="maps" style="font-family: FontAwesome, sans-serif;"> Kartensuche</option>
</select>
- </div>
- <div class="search-add-focus js-only">
- <button type="button" id="addFocusBtn">
- <i class="fa fa-plus"></i>
- </button>
- <div class="searchbar-tooltip">
- <div class="searchbar-tooltip-arrow">
- </div>
- <div class="searchbar-tooltip-content">
- <p>{{{ trans('index.add-focus') }}}</p>
+ <div class="search-option-frame" style="display:none;">
+ <div class="searchbar-options-arrow">
</div>
- </div>
- </div>
- <div class="search-edit-focus js-only">
- <button type="button" id="editFocusBtn" title="@lang('index.edit-focus')">
- <i class="fa fa-wrench"></i>
- </button>
- <div class="searchbar-tooltip">
- <div class="searchbar-tooltip-arrow">
- </div>
- <div class="searchbar-tooltip-content">
- <p>{{{ trans('index.edit-focus') }}}</p>
+ <div class="search-button-container">
+ <div class="search-add-focus js-only">
+ <button type="button" id="addFocusBtn">
+ <i class="fa fa-plus"></i>
+ </button>
+ <div class="searchbar-tooltip">
+ <div class="searchbar-tooltip-arrow">
+ </div>
+ <div class="searchbar-tooltip-content">
+ <p>{{{ trans('index.add-focus') }}}</p>
+ </div>
+ </div>
+ </div>
+ <div class="search-edit-focus js-only">
+ <button type="button" id="editFocusBtn" title="@lang('index.edit-focus')">
+ <i class="fa fa-wrench"></i>
+ </button>
+ <div class="searchbar-tooltip">
+ <div class="searchbar-tooltip-arrow">
+ </div>
+ <div class="searchbar-tooltip-content">
+ <p>{{{ trans('index.edit-focus') }}}</p>
+ </div>
+ </div>
+ </div>
+ <div class="search-settings">
+ <a id="settings-btn" class="mutelink btn btn-default" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "settings ") }}">
+ <i class="fa fa-cog" aria-hidden="true"></i>
+ </a>
+ </div>
</div>
</div>
</div>
- <div class="search-settings">
- <a id="settings-btn" class="mutelink btn btn-default" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "settings ") }}">
- <i class="fa fa-cog" aria-hidden="true"></i>
- </a>
- </div>
<div class="search-input-submit">
<div class="search-input">
<input type="text" name="eingabe" required="" autofocus="" autocomplete="{{$autocomplete or 'off'}}" class="form-control"placeholder="{{ trans('index.placeholder') }}">