From 9c3d0c1a6575d2baf78492fb12c65a4ce27be93e Mon Sep 17 00:00:00 2001
From: Aria <aria@suma-ev.de>
Date: Thu, 1 Feb 2018 12:02:21 +0100
Subject: [PATCH] =?UTF-8?q?fokus=20erstellen=20wird=20zumindest=20eingeble?=
=?UTF-8?q?ndet,=20muss=20komplett=20veraendert=20werden,=20tooltip=20posi?=
=?UTF-8?q?tion=20korrigiert,=20icon=20angepasst=20yum=20=C3=B6ffnen=20des?=
=?UTF-8?q?=20suche=20anpassen=20modals,=20styles=20ausgelagert=20in=20eig?=
=?UTF-8?q?ene=20less=20datei?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
gulpfile.js | 2 +-
resources/assets/js/searchbar.js | 28 +------
resources/assets/less/metager/foki.less | 32 ++++++++
resources/assets/less/metager/metager.less | 1 +
resources/assets/less/metager/searchbar.less | 74 ++++++++++---------
resources/lang/de/index.php | 2 +-
.../views/layouts/researchandtabs.blade.php | 4 +-
.../views/modals/create-focus-modal.blade.php | 13 ++--
resources/views/parts/foki.blade.php | 25 +++----
9 files changed, 95 insertions(+), 86 deletions(-)
create mode 100644 resources/assets/less/metager/foki.less
diff --git a/gulpfile.js b/gulpfile.js
index 4de54a12e..a831d50ba 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -18,7 +18,7 @@ elixir(function (mix) {
mix.scripts(['lib/jquery.js', 'lib/jquery-ui.min.js', 'lib/bootstrap.js', 'lib/lightslider.js', 'lib/masonry.js', 'lib/imagesloaded.js', 'lib/openpgp.min.js', 'lib/iframeResizer.min.js', 'lib/md5.js'], 'public/js/lib.js')
mix.scripts(['scriptStartPage.js', 'result-saver.js'], 'public/js/scriptStartPage.js');
mix.scripts(['scriptResultPage.js', 'result-saver.js', 'quicktips.js'], 'public/js/scriptResultPage.js');
- mix.scripts(['searchbar.js', 'focus-creator.js'], 'public/js/searchbar.js');
+ mix.scripts('searchbar.js', 'public/js/searchbar.js');
// utility
mix.scripts(['utility.js'], 'public/js/utility.js');
mix.less('utility.less', 'public/css/utility.css');
diff --git a/resources/assets/js/searchbar.js b/resources/assets/js/searchbar.js
index 636c9c1cb..16e3a4dd2 100644
--- a/resources/assets/js/searchbar.js
+++ b/resources/assets/js/searchbar.js
@@ -1,6 +1,5 @@
$(function () {
loadLocalStorage();
- setSearchbarActionListeners();
});
/**
@@ -12,10 +11,6 @@ function loadLocalStorage () {
}
}
-function setSearchbarActionListeners () {
- $('#toggleOptBtn').click(toggleOptionsDialog);
-}
-
function setSettings () {
var acceptedParams = ['autocomplete', 'key', 'lang', 'newtab', 'sprueche'];
for (var key in localStorage) {
@@ -41,25 +36,4 @@ function setSettings () {
if (requestMethod !== null && (requestMethod === 'GET' || requestMethod === 'POST')) {
$('#searchForm').attr('method', requestMethod);
}
-}
-
-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').removeClass('hide');
-}
-
-function closeOptionsDialog () {
- $('#toggleOptBtn').html('<i class="fa fa-sliders" aria-hidden="true"></i>');
- $('#toggleOptBtn').attr('data-mode', 'o');
- $('.search-option-frame').addClass('hide');
-}
+}
\ No newline at end of file
diff --git a/resources/assets/less/metager/foki.less b/resources/assets/less/metager/foki.less
new file mode 100644
index 000000000..f7732acc2
--- /dev/null
+++ b/resources/assets/less/metager/foki.less
@@ -0,0 +1,32 @@
+/* Rund um die Foki */
+
+#show-create-focus {
+ display: none;
+}
+
+#show-create-focus:checked {
+ display: inline-block;
+ & + #create-focus-modal {
+ display: inline;
+ }
+}
+
+#create-focus-modal {
+ display: none;
+ position: fixed;
+ min-height: 100%;
+ min-width: 100%;
+ background-color: lightgray;
+
+ #close-create-focus:after {
+ content: "×";
+ }
+
+ #foki-modal-dialog {
+
+ }
+
+ #foki-modal-content {
+ max-width: 70%;
+ }
+}
\ No newline at end of file
diff --git a/resources/assets/less/metager/metager.less b/resources/assets/less/metager/metager.less
index 03eba70fb..a2d2732d8 100644
--- a/resources/assets/less/metager/metager.less
+++ b/resources/assets/less/metager/metager.less
@@ -5,6 +5,7 @@
@import "./settings.less";
@import "./variables.less";
@import "./sidebar.less";
+@import "./foki.less";
@import "./footer.less";
@import "./searchbar.less";
@import "./aufruf-winter.less";
\ No newline at end of file
diff --git a/resources/assets/less/metager/searchbar.less b/resources/assets/less/metager/searchbar.less
index 001f4fa1d..7a83270d8 100644
--- a/resources/assets/less/metager/searchbar.less
+++ b/resources/assets/less/metager/searchbar.less
@@ -173,9 +173,11 @@
}
}
-div:hover>.searchbar-tooltip {
+label:hover+.searchbar-tooltip {
display: inline-block;
- @media (max-width: @screen-xs-max) {
+ top: 30px;
+ left: -10px;
+ @media (max-width: 799px) {
display: none;
}
}
@@ -246,8 +248,6 @@ div:hover>.searchbar-tooltip {
.searchbar-tooltip {
display: none;
position: absolute;
- top: 45px;
- left: -10px;
&>.searchbar-tooltip-arrow {
position: absolute;
top: -4px;
@@ -312,42 +312,50 @@ header:nth-child(1) {
}
#foki {
- display: flex;
- width: auto;
- max-width: 700px;
- background-color: white;
- border: 1px solid #ccc;
- margin-top:10px;
- padding: 10px;
- margin-left: 50px;
- overflow-x: auto;
- box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
+ display: flex;
+ width: auto;
+ max-width: 700px;
+ background-color: white;
+ border: 1px solid #ccc;
+ margin-top:10px;
+ padding: 10px;
+ margin-left: 50px;
+ box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
- &::-webkit-scrollbar {
- height: 0px; /* remove scrollbar space */
- background: transparent; /* optional: just make scrollbar invisible */
- }
+ &::-webkit-scrollbar {
+ height: 0px; /* remove scrollbar space */
+ background: transparent; /* optional: just make scrollbar invisible */
+ }
- @media (max-width: 799px) {
- margin: 10px 8px 0px 8px;
-
- }
+ @media (max-width: 799px) {
+ margin: 10px 8px 0px 8px;
+ overflow-x: auto;
+
+ }
- &>div {
- padding: 0px 10px;
+ &>div {
+ padding: 0px 10px;
- &>a {
- color: black;
- }
- &.active>a{
- border-bottom: 1px solid rgb(255,128,0);
- color: rgb(255,128,0);
- }
+ &>a {
+ color: black;
}
- .edit-focus{
- margin-left: 7px;
+ &.active>a{
+ border-bottom: 1px solid rgb(255,128,0);
+ color: rgb(255,128,0);
}
}
+ .edit-focus{
+ margin-left: 7px;
+ }
+
+ .search-option-frame {
+ position: relative;
+ }
+}
+
+.foki-modal-wrapper {
+ display: none;
+}
#research-bar-placeholder {
width: 100%;
diff --git a/resources/lang/de/index.php b/resources/lang/de/index.php
index c9ae69adf..82ffd06b6 100644
--- a/resources/lang/de/index.php
+++ b/resources/lang/de/index.php
@@ -119,7 +119,7 @@ return [
'plugin.vivaldi.9' => 'Klicken Sie in Ihrem Browser oben links auf das rote Vivaldi Logo und wählen Sie zuerst "Werkzeuge", dann im Untermenü "Einstellungen".',
'plugin.vivaldi.10' => 'Tragen Sie im Feld "Startseite" "https://metager.de" ein.',
- 'tooltips.add-focus' => 'Eigenen Fokus hinzufügen',
+ 'tooltips.add-focus' => 'Suche anpassen',
'tooltips.edit-focus' => 'Aktuellen Fokus bearbeiten',
'tooltips.settings' => 'Allgemeine Einstellungen',
];
diff --git a/resources/views/layouts/researchandtabs.blade.php b/resources/views/layouts/researchandtabs.blade.php
index 2ddbec1a7..82ed76efb 100644
--- a/resources/views/layouts/researchandtabs.blade.php
+++ b/resources/views/layouts/researchandtabs.blade.php
@@ -27,8 +27,8 @@
<div id="results-container">
@yield('results')
</div>
- <div id="additions-container">
- <div id="search-settings" style="display:none">
+ <div id="additions-container" style="display: none;">
+ <div id="search-settings">
<h1>Eigene Suche</h1>
@foreach( App\Http\Controllers\FokiLoader::loadFoki() as $fokus => $sumas )
<h2 class="focus-category">
diff --git a/resources/views/modals/create-focus-modal.blade.php b/resources/views/modals/create-focus-modal.blade.php
index 4000e10cd..bd3b86b5a 100644
--- a/resources/views/modals/create-focus-modal.blade.php
+++ b/resources/views/modals/create-focus-modal.blade.php
@@ -1,10 +1,9 @@
-<div id="create-focus-modal" class="modal fade" tab-index="-1" role="dialog">
- <div class="modal-dialog modal-lg">
- <div class="content modal-content">
- <div class="modal-header">
- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
- <span aria-hidden="true">×</span>
- </button>
+<input type="checkbox" id="show-create-focus">
+<div id="create-focus-modal" tab-index="-1" role="dialog">
+ <div class="foki-modal-dialog">
+ <div class="foki-modal-content">
+ <div class="foki-modal-header">
+ <label type="button" id="close-create-focus" for="show-create-focus"></label>
<h4>
@lang("index.focus-creator.head")
</h4>
diff --git a/resources/views/parts/foki.blade.php b/resources/views/parts/foki.blade.php
index 7d899edce..61145bb7b 100644
--- a/resources/views/parts/foki.blade.php
+++ b/resources/views/parts/foki.blade.php
@@ -14,18 +14,13 @@
<a href="https://maps.metager.de/map/{{ $metager->getQ() }}/9.7380161,52.37119740000003,12" target="_self">@lang('index.foki.maps')</a>
</div>
<div class="search-option-frame">
- <div class="searchbar-options-arrow"></div>
- <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.tooltips.add-focus') }}}</p>
- </div>
- </div>
- </div>
- </div>
- </div>
+ <label for="show-create-focus" id="addFocusBtn">
+ <i class="fa fa-sliders"></i>
+ </label>
+ <div class="searchbar-tooltip">
+ <div class="searchbar-tooltip-arrow"></div>
+ <div class="searchbar-tooltip-content">
+ <p>{{{ trans('index.tooltips.add-focus') }}}</p>
+ </div>
+ </div>
+</div>
--
GitLab