Skip to content
Snippets Groups Projects
Commit e73fcdcd authored by Aria Givi's avatar Aria Givi
Browse files

modal hinzugefuegt, styles angepasst, todo: button zum oeffnen + close button + inhalt des modals

parent 581ffc92
No related branches found
No related tags found
1 merge request!1365Resolve "Filter Options for MetaGer"
Hide whitespace changes
Inline Side-by-side
resources/assets/less/metager/foki.less deleted 100644 → 0
+ 0
− 82
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
+ 1
− 1
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
+ 96
− 0
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
+ 1
− 2
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
+ 5
− 5
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
+ 130
− 130
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">&times;</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">&times;</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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment