Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
open-source
MetaGer
Commits
e73fcdcd
Commit
e73fcdcd
authored
Jun 25, 2018
by
Aria Givi
Browse files
modal hinzugefuegt, styles angepasst, todo: button zum oeffnen + close button + inhalt des modals
parent
581ffc92
Changes
6
Hide whitespace changes
Inline
Side-by-side
resources/assets/less/metager/foki.less
deleted
100644 → 0
View file @
581ffc92
/* 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
resources/assets/less/metager/metager.less
View file @
e73fcdcd
...
...
@@ -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";
...
...
resources/assets/less/metager/modals.less
0 → 100644
View file @
e73fcdcd
/* 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;
}
}
}
}
}
resources/views/index.blade.php
View file @
e73fcdcd
...
...
@@ -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
>
...
...
resources/views/modals/create-focus-modal.blade.php
View file @
e73fcdcd
<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>
...
...
resources/views/modals/plugin-modal.blade.php
View file @
e73fcdcd
<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
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment