Skip to content

GitLab

MetaGer
MetaGer
Commit e73fcdcd authored by Aria Givi's avatar Aria Givi
Browse files
Options

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

parent 581ffc92
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 233 additions and 220 deletions
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>
......
Markdown is supported
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