From 2f2e34596513948509cc5e6fb92bc2ac02a0ec93 Mon Sep 17 00:00:00 2001
From: Dominik Hebeler <dominik@suma-ev.de>
Date: Thu, 6 Jun 2019 17:01:17 +0200
Subject: [PATCH] fixed layout in IE
---
resources/less/metager/pages/start-page.less | 43 ++++++++++------
resources/less/metager/parts/searchbar.less | 29 +++++++++--
resources/views/index.blade.php | 52 +++++++++++---------
webpack.mix.js | 1 +
4 files changed, 81 insertions(+), 44 deletions(-)
diff --git a/resources/less/metager/pages/start-page.less b/resources/less/metager/pages/start-page.less
index acf3b3115..495eda18f 100644
--- a/resources/less/metager/pages/start-page.less
+++ b/resources/less/metager/pages/start-page.less
@@ -49,31 +49,42 @@
font-size: 1.4em;
color: #777;
text-align: center;
- display: grid;
- grid-gap: 24px;
margin-top: 60px;
- justify-content: center;
- grid-template-columns: 240px;
width: 100%;
top: 100vh;
position: absolute;
- @media(min-width: 504px){
- grid-template-columns: 240px 240px ;
- grid-gap: 24px;
+ @media(min-width: 520px){
top: inherit;
bottom: 100px;
position: inherit;
}
- > a {
+ > div {
display: flex;
- flex-direction: column;
- cursor: pointer;
- color: inherit;
- > div.teaser {
- font-size: .7em;
- }
- &:hover > div.teaser {
- visibility: inherit;
+ flex-wrap: wrap;
+ justify-content: center;
+ margin: 24px 0;
+ > a {
+ &:nth-child(1){
+ @media(min-width: 520px){
+ margin-right: 24px;
+ }
+ }
+ @media(max-width: 520px){
+ &:nth-child(2){
+ margin-top: 24px;
+ }
+ }
+ display: flex;
+ flex-direction: column;
+ cursor: pointer;
+ color: inherit;
+ width: 240px;
+ > div.teaser {
+ font-size: .7em;
+ }
+ &:hover > div.teaser {
+ visibility: inherit;
+ }
}
}
}
diff --git a/resources/less/metager/parts/searchbar.less b/resources/less/metager/parts/searchbar.less
index 85c849d65..28062575c 100644
--- a/resources/less/metager/parts/searchbar.less
+++ b/resources/less/metager/parts/searchbar.less
@@ -2,18 +2,39 @@
@searchbar-background-color: white;
.searchbar {
display: -webkit-box;
+ display: -moz-box;
display: -ms-flexbox;
+ display: -webkit-flex;
display: flex;
- -webkit-box-align: stretch;
- -ms-flex-align: stretch;
- align-items: stretch;
+ -webkit-box-direction: normal;
+ -moz-box-direction: normal;
+ -webkit-box-orient: horizontal;
+ -moz-box-orient: horizontal;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+ -webkit-flex-wrap: wrap;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
-webkit-box-pack: center;
+ -moz-box-pack: center;
+ -webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
+ -webkit-align-content: stretch;
+ -ms-flex-line-pack: stretch;
+ align-content: stretch;
+ -webkit-box-align: center;
+ -moz-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
font-size: 1em;
background-color: transparent;
color: #333;
.search-input-submit {
+ width: 100%;
+ max-width: 600px;
background-color: @searchbar-background-color;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
@@ -21,7 +42,7 @@
display: -webkit-box;
display: -ms-flexbox;
display: flex;
- max-width: 600px;
+
#search-key {
display: flex;
justify-content: center;
diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php
index 4f61be963..60a3c3ceb 100644
--- a/resources/views/index.blade.php
+++ b/resources/views/index.blade.php
@@ -11,30 +11,34 @@
<a id="plugin-btn" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/plugin") }}" title="{{ trans('index.plugin-title') }}"><i class="fa fa-plug" aria-hidden="true"></i> {{ trans('index.plugin') }}</a>
</div>
<div id="about-us">
- <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "about") }}">
- <i class="fas fa-user-secret"></i>
- <span>@lang('index.about.1.1')</span>
- <div class="teaser">@lang('index.about.1.2')</div>
- </a>
- @if(LaravelLocalization::getCurrentLocale() === "de")
- <a href="https://suma-ev.de" target="_blank">
- @else
- <a href="https://suma-ev.de/en/index.html" target="_blank">
- @endif
- <i class="fas fa-heart"></i>
- <span>@lang('index.about.2.1')</span>
- <div class="teaser">@lang('index.about.2.2')</div>
- </a>
- <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "spende") }}">
- <i class="fas fa-money-bill-wave"></i>
- <span>@lang('index.about.3.1')</span>
- <div class="teaser">@lang('index.about.3.2')</div>
- </a>
- <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "beitritt") }}">
- <i class="fas fa-user-friends"></i>
- <span>@lang('index.about.4.1')</span>
- <div class="teaser">@lang('index.about.4.2')</div>
- </a>
+ <div class="m-row">
+ <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "about") }}">
+ <i class="fas fa-user-secret"></i>
+ <span>@lang('index.about.1.1')</span>
+ <div class="teaser">@lang('index.about.1.2')</div>
+ </a>
+ @if(LaravelLocalization::getCurrentLocale() === "de")
+ <a href="https://suma-ev.de" target="_blank">
+ @else
+ <a href="https://suma-ev.de/en/index.html" target="_blank">
+ @endif
+ <i class="fas fa-heart"></i>
+ <span>@lang('index.about.2.1')</span>
+ <div class="teaser">@lang('index.about.2.2')</div>
+ </a>
+ </div>
+ <div class="m-row">
+ <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "spende") }}">
+ <i class="fas fa-money-bill-wave"></i>
+ <span>@lang('index.about.3.1')</span>
+ <div class="teaser">@lang('index.about.3.2')</div>
+ </a>
+ <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "beitritt") }}">
+ <i class="fas fa-user-friends"></i>
+ <span>@lang('index.about.4.1')</span>
+ <div class="teaser">@lang('index.about.4.2')</div>
+ </a>
+ </div>
</div>
<a id="scroll-helper" href="#about-us">
<i class="fas fa-angle-double-down"></i>
diff --git a/webpack.mix.js b/webpack.mix.js
index aea26fc5d..f4cdc8a2d 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -73,6 +73,7 @@ mix
)
.babel("resources/js/widgets.js", "public/js/widgets.js")
.babel("resources/js/scriptJoinPage.js", "public/js/scriptJoinPage.js")
+ .r
// source maps
.sourceMaps(false, "inline-source-map")
// versioning
--
GitLab