From e73fcdcdbaa8aeba51d3a9393dd0f52f0b51322d Mon Sep 17 00:00:00 2001
From: Aria <aria@suma-ev.de>
Date: Mon, 25 Jun 2018 12:30:23 +0200
Subject: [PATCH] modal hinzugefuegt, styles angepasst, todo: button zum
oeffnen + close button + inhalt des modals
---
resources/assets/less/metager/foki.less | 82 ------
resources/assets/less/metager/metager.less | 2 +-
resources/assets/less/metager/modals.less | 96 +++++++
resources/views/index.blade.php | 3 +-
.../views/modals/create-focus-modal.blade.php | 10 +-
resources/views/modals/plugin-modal.blade.php | 260 +++++++++---------
6 files changed, 233 insertions(+), 220 deletions(-)
delete mode 100644 resources/assets/less/metager/foki.less
create mode 100644 resources/assets/less/metager/modals.less
diff --git a/resources/assets/less/metager/foki.less b/resources/assets/less/metager/foki.less
deleted file mode 100644
index 53d727989..000000000
--- a/resources/assets/less/metager/foki.less
+++ /dev/null
@@ -1,82 +0,0 @@
-/* Rund ums Fokus Modal */
-
-#show-create-focus:checked {
- &+#create-focus-modal {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- }
-}
-
-#create-focus-modal {
- display: none;
- position: fixed;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- min-height: 100%;
- width: 100%;
- background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .7)), to(rgba(0, 0, 0, .7)));
- background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7));
- z-index: 150;
- #foki-modal-dialog {
- background-color: white;
- max-width: 700px;
- margin: 30px auto;
- height: 90vh;
- overflow-y: auto;
- #foki-modal-content {
- #foki-modal-header {
- padding: 15px;
- position: relative;
- border-bottom: 1px solid #e5e5e5;
- #close-create-focus {
- position: absolute;
- right: 15px;
- &::after {
- font-size: 24px;
- content: "×";
- }
- }
- }
- #toggle-dropdowns-label {
- cursor: pointer;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- }
- .focus-dropdown-toggle {
- display: none;
- &:not(:checked) {
- &~.focus-dropdown-label~.row {
- max-height: 0px;
- overflow: hidden;
- }
- }
- &:checked {
- &~.focus-dropdown-label::after {
- content: " âž– ";
- }
- }
- }
- .focus-dropdown-label {
- cursor: pointer;
- &::after {
- font-size: 16px;
- content: " âž• ";
- margin-left: 3px;
- vertical-align: middle;
- }
- &~.row {
- -webkit-transition: max-height 0.4s ease;
- /* Chrome 1-25, Safari 3.2+ */
- /* Firefox 4-15 */
- /* Opera 10.50–12.00 */
- transition: max-height 0.4s ease;
- max-height: 400px;
- }
- }
- }
- }
-}
\ No newline at end of file
diff --git a/resources/assets/less/metager/metager.less b/resources/assets/less/metager/metager.less
index 5ed01cb8f..1351c3a8e 100644
--- a/resources/assets/less/metager/metager.less
+++ b/resources/assets/less/metager/metager.less
@@ -5,7 +5,7 @@
@import "./settings.less";
@import "./variables.less";
@import "./sidebar.less";
-@import "./foki.less";
+@import "./modals.less";
@import "./footer.less";
@import "./searchbar.less";
@import "./aufruf-winter.less";
diff --git a/resources/assets/less/metager/modals.less b/resources/assets/less/metager/modals.less
new file mode 100644
index 000000000..c1261b7f0
--- /dev/null
+++ b/resources/assets/less/metager/modals.less
@@ -0,0 +1,96 @@
+/* Rund ums Fokus Modal */
+
+#show-create-focus:checked {
+ & + #create-focus-modal {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ }
+}
+
+#show-plugin-modal:checked {
+ & + #plugin-modal {
+ display: block;
+ }
+}
+
+.metager-modal {
+ display: none;
+ position: absolute;
+ top: 0;
+ right: 0;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ min-height: 100%;
+ width: 100%;
+ background: -webkit-gradient(
+ linear,
+ left top,
+ left bottom,
+ from(rgba(0, 0, 0, 0.7)),
+ to(rgba(0, 0, 0, 0.7))
+ );
+ background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
+ z-index: 150;
+ .metager-modal-dialog {
+ background-color: white;
+ max-width: 700px;
+ margin: 30px auto;
+ height: 90vh;
+ overflow-y: auto;
+ .metager-modal-content {
+ .metager-modal-header {
+ padding: 15px;
+ position: relative;
+ border-bottom: 1px solid #e5e5e5;
+ .close-metager-modal {
+ position: absolute;
+ right: 15px;
+ &::after {
+ font-size: 24px;
+ content: "×";
+ }
+ }
+ }
+ #toggle-dropdowns-label {
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ }
+ .focus-dropdown-toggle {
+ display: none;
+ &:not(:checked) {
+ & ~ .focus-dropdown-label ~ .row {
+ max-height: 0px;
+ overflow: hidden;
+ }
+ }
+ &:checked {
+ & ~ .focus-dropdown-label::after {
+ content: " âž– ";
+ }
+ }
+ }
+ .focus-dropdown-label {
+ cursor: pointer;
+ &::after {
+ font-size: 16px;
+ content: " âž• ";
+ margin-left: 3px;
+ vertical-align: middle;
+ }
+ & ~ .row {
+ -webkit-transition: max-height 0.4s ease;
+ /* Chrome 1-25, Safari 3.2+ */
+ /* Firefox 4-15 */
+ /* Opera 10.50–12.00 */
+ transition: max-height 0.4s ease;
+ max-height: 400px;
+ }
+ }
+ }
+ }
+}
diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php
index 027228fb3..1e05af4e0 100644
--- a/resources/views/index.blade.php
+++ b/resources/views/index.blade.php
@@ -3,14 +3,13 @@
@section('title', $title )
@section('content')
- @include('modals.create-focus-modal')
@include('modals.plugin-modal')
<h1 id="startpage-logo">
<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}">MetaGer</a>
</h1>
@include('parts.searchbar', ['class' => 'startpage-searchbar'])
<div>
-
+ <label for="show-plugin-modal" role="button" class="btn btn-default" title="MetaGer zu Ihrem Browser hinzufügen"><i class="fa fa-plug" aria-hidden="true"></i> MetaGer-Plugin hinzufügen</a>
</div>
<script type="text/javascript" src="{{ mix('js/scriptStartPage.js') }}"></script>
<script type="text/javascript" src="{{ mix('js/searchbar.js') }}"></script>
diff --git a/resources/views/modals/create-focus-modal.blade.php b/resources/views/modals/create-focus-modal.blade.php
index 7a355a372..8a68de53b 100644
--- a/resources/views/modals/create-focus-modal.blade.php
+++ b/resources/views/modals/create-focus-modal.blade.php
@@ -1,9 +1,9 @@
<input type="checkbox" id="show-create-focus" class="hidden">
-<div id="create-focus-modal" tab-index="-1" role="dialog">
- <div id="foki-modal-dialog">
- <div id="foki-modal-content">
- <div id="foki-modal-header">
- <label type="button" id="close-create-focus" role= "button" for="show-create-focus"></label>
+<div class="metager-modal" id="create-focus-modal" tab-index="-1" role="dialog">
+ <div class="metager-modal-dialog">
+ <div class="metager-modal-content">
+ <div class="metager-modal-header">
+ <label type="button" class="close-metager-modal" role= "button" for="show-create-focus"></label>
<h4>
@lang("index.focus-creator.head")
</h4>
diff --git a/resources/views/modals/plugin-modal.blade.php b/resources/views/modals/plugin-modal.blade.php
index 5b3f0e9a2..8c28dd5a5 100644
--- a/resources/views/modals/plugin-modal.blade.php
+++ b/resources/views/modals/plugin-modal.blade.php
@@ -1,140 +1,140 @@
-<div class="modal fade" id="plugin-modal" tab-index="-1" role="dialog">
- <div class="modal-dialog ">
- <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>
- <h4>
- @if ($browser === 'Firefox' || $browser === 'Mozilla')
- {{ trans('index.plugin.head.1') }}
+<input type="checkbox" id="show-plugin-modal" class="hidden">
+<div class="metager-modal" id="plugin-modal" tab-index="-1" role="dialog">
+ <div class="metager-modal-dialog ">
+ <div class="metager-modal-content">
+ <div class="metager-modal-header">
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+ <span aria-hidden="true">×</span>
+ </button>
+ <h4>
+ @if ($browser === 'Firefox' || $browser === 'Mozilla')
+ {{ trans('index.plugin.head.1') }}
+ @elseif ($browser === 'Chrome')
+ {{ trans('index.plugin.head.2') }}
+ @elseif ($browser === 'Opera')
+ {{ trans('index.plugin.head.3') }}
+ @elseif ($browser === 'IE')
+ {{ trans('index.plugin.head.4') }}
+ @elseif ($browser === 'Edge')
+ {{ trans('index.plugin.head.5') }}
+ @elseif ($browser === 'Safari')
+ {{ trans('index.plugin.head.6') }}
+ @elseif ($browser === 'Vivaldi')
+ {{ trans('index.plugin.head.6') }}
+ @else
+ $(".seperator").addClass("hidden");
+ @endif
+ </h4>
+ <p class="text-muted">{{ trans('index.plugin.head.info') }}</p>
+ </div>
+ <div class="modal-body">
+ @if ($browser === 'Firefox' || $browser === 'Mozilla')
+ <ol>
+ <li>{{ trans('index.plugin.firefox.1') }}<img src="/img/Firefox.png" width="100%" /></li>
+ <li>{{ trans('index.plugin.firefox.2') }}<img src="/img/Firefox_Standard.png" width="100%" /></li>
+ </ol>
+ <hr />
+ <h4>{!! trans('index.plugin.firefox.3', ['browser' => $browser]) !!}</h4>
+ <ol>
+ <li>{!! trans('index.plugin.firefox.4') !!}</li>
+ <li>{!! trans('index.plugin.firefox.5') !!}</li>
+ </ol>
+ <hr>
+ <h4>{{ trans('index.plugin.head.8') }}</h4>
+ <ol>
+ <li>{!! trans('index.plugin.firefox-klar.1') !!}</li>
+ <li>{{ trans('index.plugin.firefox-klar.2')}}<img src="/img/FirefoxKlar-Settings.png" width="100%"/></li>
+ <li>{{ trans('index.plugin.firefox-klar.3') }}<img src="/img/FirefoxKlar-addSearchengine.png" width="100%"/></li>
+ <li>{{ trans('index.plugin.firefox-klar.4') }}</li>
+ </ol>
@elseif ($browser === 'Chrome')
- {{ trans('index.plugin.head.2') }}
+ <ol>
+ <li>{!! trans('index.plugin.chrome.1') !!}</li>
+ <li>{!! trans('index.plugin.chrome.2') !!}</li>
+ <li>{{ trans('index.plugin.chrome.3') }}</li>
+ </ol>
+ <hr />
+ <h4>{!! trans('index.plugin.chrome.4', ['browser' => $browser]) !!}</h4>
+ <ol>
+ <li>{!! trans('index.plugin.chrome.5') !!}</li>
+ <li>{!! trans('index.plugin.chrome.6') !!}</li>
+ <li>{!! trans('index.plugin.chrome.7') !!}</li>
+ <li>{!! trans('index.plugin.chrome.8') !!}</li>
+ </ol>
@elseif ($browser === 'Opera')
- {{ trans('index.plugin.head.3') }}
+ <ol>
+ <li>{!! trans('index.plugin.opera.1') !!}</li>
+ <li>{!! trans('index.plugin.opera.2') !!}</li>
+ <li>{!! trans('index.plugin.opera.3') !!}</li>
+ <li>{!! trans('index.plugin.opera.4') !!}</li>
+ <li><small>{!! trans('index.plugin.opera.5') !!}</small>
+ </ol>
+ <hr />
+ <h4>{!! trans('index.plugin.opera.6', ['browser' => $browser]) !!}</h4>
+ <ol>
+ <li>{!! trans('index.plugin.opera.7') !!}</li>
+ <li>{!! trans('index.plugin.opera.8') !!}</li>
+ <li>{!! trans('index.plugin.opera.9') !!}</li>
+ <li>{!! trans('index.plugin.opera.10') !!}</li>
+ </ol>
@elseif ($browser === 'IE')
- {{ trans('index.plugin.head.4') }}
+ <ol>
+ <li>{!! trans('index.plugin.IE.1') !!}</li>
+ <li>{!! trans('index.plugin.IE.4') !!} (<i class="fa fa-cog" aria-hidden="true"></i>)</li>
+ <li>{!! trans('index.plugin.IE.5') !!}</li>
+ <li>{!! trans('index.plugin.IE.6') !!}</li>
+ <li>{!! trans('index.plugin.IE.7') !!}</li>
+ </ol>
+ <hr />
+ <h4>{!! trans('index.plugin.IE.8', ['browser' => $browser]) !!}</h4>
+ <ol>
+ <li>{!! trans('index.plugin.IE.9') !!}</li>
+ <li>{!! trans('index.plugin.IE.10') !!}</li>
+ <li>{!! trans('index.plugin.IE.11') !!}</li>
+ </ol>
@elseif ($browser === 'Edge')
- {{ trans('index.plugin.head.5') }}
+ <ol>
+ <li>{!! trans('index.plugin.edge.1') !!}<i class="fa fa-ellipsis-h" aria-hidden="true"></i>{!! trans('index.plugin.edge.2') !!}</li>
+ <li>{!! trans('index.plugin.edge.3') !!}</li>
+ <li>{!! trans('index.plugin.edge.4') !!}</li>
+ <li>{!! trans('index.plugin.edge.5') !!}</li>
+ </ol>
+ <hr />
+ <h4>{!! trans('index.plugin.edge.6', ['browser' => $browser]) !!}</h4>
+ <ol>
+ <li>{!! trans('index.plugin.edge.7') !!}</li>
+ <li>{!! trans('index.plugin.edge.8') !!}</li>
+ <li>{!! trans('index.plugin.edge.9') !!}</li>
+ <li>{!! trans('index.plugin.edge.10') !!}</li>
+ <li>{!! trans('index.plugin.edge.11') !!}</li>
+ </ol>
@elseif ($browser === 'Safari')
- {{ trans('index.plugin.head.6') }}
+ <ol>
+ <li>{!! trans('index.plugin.safari.1') !!}</li>
+ <li>{!! trans('index.plugin.safari.2') !!}</li>
+ <li>{!! trans('index.plugin.safari.3') !!}</li>
+ <li>{!! trans('index.plugin.safari.4') !!}</li>
+ </ol>
@elseif ($browser === 'Vivaldi')
- {{ trans('index.plugin.head.6') }}
- @else
- $(".seperator").addClass("hidden");
+ <ol>
+ <li>{!! trans('index.plugin.vivaldi.1') !!}</li>
+ <li>{!! trans('index.plugin.vivaldi.2') !!}</li>
+ <li>{!! trans('index.plugin.vivaldi.3') !!}</li>
+ <li>{!! trans('index.plugin.vivaldi.4') !!}</li>
+ <li>{!! trans('index.plugin.vivaldi.5') !!}</li>
+ <li>{!! trans('index.plugin.vivaldi.6') !!}</li>
+ <li>{!! trans('index.plugin.vivaldi.7') !!}</li>
+ </ol>
+ <hr />
+ <h4>{!! trans('index.plugin.vivaldi.8', ['browser' => $browser]) !!}</h4>
+ <ol>
+ <li>{!! trans('index.plugin.vivaldi.9') !!}</li>
+ <li>{!! trans('index.plugin.vivaldi.10') !!}</li>
+ </ol>
@endif
- </h4>
- <p class="text-muted">{{ trans('index.plugin.head.info') }}</p>
- </div>
- <div class="modal-body">
- @if ($browser === 'Firefox' || $browser === 'Mozilla')
- <ol>
- <li>{{ trans('index.plugin.firefox.1') }}
- <img src="/img/Firefox.png" width="100%" />
- </li>
- <li>{{ trans('index.plugin.firefox.2') }}
- <img src="/img/Firefox_Standard.png" width="100%" />
- </li>
- </ol>
- <hr />
- <h4>{!! trans('index.plugin.firefox.3', ['browser' => $browser]) !!}</h4>
- <ol>
- <li>{!! trans('index.plugin.firefox.4') !!}</li>
- <li>{!! trans('index.plugin.firefox.5') !!}</li>
- </ol>
- @elseif ($browser === 'Chrome')
- <ol>
- <li>{!! trans('index.plugin.chrome.1') !!}</li>
- <li>{!! trans('index.plugin.chrome.2') !!}</li>
- <li>{{ trans('index.plugin.chrome.3') }}</li>
- </ol>
- <hr />
- <h4>{!! trans('index.plugin.chrome.4', ['browser' => $browser]) !!}</h4>
- <ol>
- <li>{!! trans('index.plugin.chrome.5') !!}</li>
- <li>{!! trans('index.plugin.chrome.6') !!}</li>
- <li>{!! trans('index.plugin.chrome.7') !!}</li>
- <li>{!! trans('index.plugin.chrome.8') !!}</li>
- </ol>
- @elseif ($browser === 'Opera')
- <ol>
- <li>{!! trans('index.plugin.opera.1') !!}</li>
- <li>{!! trans('index.plugin.opera.2') !!}</li>
- <li>{!! trans('index.plugin.opera.3') !!}</li>
- <li>{!! trans('index.plugin.opera.4') !!}</li>
- <li>
- <small>{!! trans('index.plugin.opera.5') !!}</small>
- </ol>
- <hr />
- <h4>{!! trans('index.plugin.opera.6', ['browser' => $browser]) !!}</h4>
- <ol>
- <li>{!! trans('index.plugin.opera.7') !!}</li>
- <li>{!! trans('index.plugin.opera.8') !!}</li>
- <li>{!! trans('index.plugin.opera.9') !!}</li>
- <li>{!! trans('index.plugin.opera.10') !!}</li>
- </ol>
- @elseif ($browser === 'IE')
- <ol>
- <li>{!! trans('index.plugin.IE.1') !!}</li>
- <li>{!! trans('index.plugin.IE.4') !!} (
- <i class="fa fa-cog" aria-hidden="true"></i>)</li>
- <li>{!! trans('index.plugin.IE.5') !!}</li>
- <li>{!! trans('index.plugin.IE.6') !!}</li>
- <li>{!! trans('index.plugin.IE.7') !!}</li>
- </ol>
- <hr />
- <h4>{!! trans('index.plugin.IE.8', ['browser' => $browser]) !!}</h4>
- <ol>
- <li>{!! trans('index.plugin.IE.9') !!}</li>
- <li>{!! trans('index.plugin.IE.10') !!}</li>
- <li>{!! trans('index.plugin.IE.11') !!}</li>
- </ol>
- @elseif ($browser === 'Edge')
- <ol>
- <li>{!! trans('index.plugin.edge.1') !!}
- <i class="fa fa-ellipsis-h" aria-hidden="true"></i>{!! trans('index.plugin.edge.2') !!}</li>
- <li>{!! trans('index.plugin.edge.3') !!}</li>
- <li>{!! trans('index.plugin.edge.4') !!}</li>
- <li>{!! trans('index.plugin.edge.5') !!}</li>
- </ol>
- <hr />
- <h4>{!! trans('index.plugin.edge.6', ['browser' => $browser]) !!}</h4>
- <ol>
- <li>{!! trans('index.plugin.edge.7') !!}</li>
- <li>{!! trans('index.plugin.edge.8') !!}</li>
- <li>{!! trans('index.plugin.edge.9') !!}</li>
- <li>{!! trans('index.plugin.edge.10') !!}</li>
- <li>{!! trans('index.plugin.edge.11') !!}</li>
- </ol>
- @elseif ($browser === 'Safari')
- <ol>
- <li>{!! trans('index.plugin.safari.1') !!}</li>
- <li>{!! trans('index.plugin.safari.2') !!}</li>
- <li>{!! trans('index.plugin.safari.3') !!}</li>
- <li>{!! trans('index.plugin.safari.4') !!}</li>
- </ol>
- @elseif ($browser === 'Vivaldi')
- <ol>
- <li>{!! trans('index.plugin.vivaldi.1') !!}</li>
- <li>{!! trans('index.plugin.vivaldi.2') !!}</li>
- <li>{!! trans('index.plugin.vivaldi.3') !!}</li>
- <li>{!! trans('index.plugin.vivaldi.4') !!}</li>
- <li>{!! trans('index.plugin.vivaldi.5') !!}</li>
- <li>{!! trans('index.plugin.vivaldi.6') !!}</li>
- <li>{!! trans('index.plugin.vivaldi.7') !!}</li>
- </ol>
- <hr />
- <h4>{!! trans('index.plugin.vivaldi.8', ['browser' => $browser]) !!}</h4>
- <ol>
- <li>{!! trans('index.plugin.vivaldi.9') !!}</li>
- <li>{!! trans('index.plugin.vivaldi.10') !!}</li>
- </ol>
- @endif
- <hr>
- <p>@lang('index.plugin.faq.1')
- <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), " /faq#mg-plugin ") }}">@lang('index.plugin.faq.2')</a>
- </p>
+ <hr>
+ <p>@lang('index.plugin.faq.1')<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/faq#mg-plugin") }}">@lang('index.plugin.faq.2')</a></p>
+ </div>
</div>
</div>
</div>
-</div>
\ No newline at end of file
--
GitLab