From b94cd5baef34b74e54e61b58067dd4d8fe5ca70e Mon Sep 17 00:00:00 2001
From: Karl Hasselbring <Karl Hasselbring>
Date: Tue, 13 Feb 2018 10:09:30 +0100
Subject: [PATCH] =?UTF-8?q?Die=20Foki=20haben=20jetzt=20eine=20Scrollbox?=
=?UTF-8?q?=20und=20zwei=20Scrollfades,=20wodurch=20die=20R=C3=A4nder=20we?=
=?UTF-8?q?i=C3=9F=20ausblenden?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
resources/assets/less/metager/general.less | 4 +-
resources/assets/less/metager/searchbar.less | 51 ++++++++++++++-----
.../views/layouts/researchandtabs.blade.php | 8 ++-
3 files changed, 46 insertions(+), 17 deletions(-)
diff --git a/resources/assets/less/metager/general.less b/resources/assets/less/metager/general.less
index 6e686c113..e8aecaad2 100644
--- a/resources/assets/less/metager/general.less
+++ b/resources/assets/less/metager/general.less
@@ -83,7 +83,7 @@ h1.mg-logo {
background-color: #FFF;
background-image: none;
border: 1px solid #CCC;
- margin:0px;
+ margin: 0px;
}
.metager-searchbutton {
@@ -95,7 +95,7 @@ h1.mg-logo {
border-bottom-left-radius: 0px;
border: 1px solid #CCC;
padding: 6px 12px;
- margin:0px;
+ margin: 0px;
font-size: 14px;
font-weight: normal;
line-height: 1;
diff --git a/resources/assets/less/metager/searchbar.less b/resources/assets/less/metager/searchbar.less
index b3fafa25b..d51290bfa 100644
--- a/resources/assets/less/metager/searchbar.less
+++ b/resources/assets/less/metager/searchbar.less
@@ -282,14 +282,12 @@ div:hover>.searchbar-tooltip {
@resultpage-leftbox-min-dist-left-right: 8px;
@resultpage-leftbox-min-dist-top-bottom: 8px;
@resultpage-leftbox-big-screen-margin-left: 50px;
-
header {
padding-top: @resultpage-leftbox-min-dist-top-bottom;
display: flex;
flex-direction: column;
position: fixed;
- z-index: 100;
- // Makes the header larger, so it correctly covers the non scrolling parts below
+ z-index: 100; // Makes the header larger, so it correctly covers the non scrolling parts below
width: @resultpage-leftbox-max-width + @resultpage-leftbox-big-screen-margin-left + 10;
padding-left: @resultpage-leftbox-big-screen-margin-left;
background-color: inherit;
@@ -343,15 +341,9 @@ header:nth-child(1) {
max-width: @resultpage-leftbox-max-width;
background-color: white;
border: 1px solid #ccc;
- padding: 10px;
- overflow-x: auto;
box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
- &::-webkit-scrollbar {
- height: 0px;
- /* remove scrollbar space */
- background: transparent;
- /* optional: just make scrollbar invisible */
- }
+ overflow-x: auto;
+ padding: 10px;
&>div {
padding: 0px 10px;
&>a {
@@ -365,12 +357,45 @@ header:nth-child(1) {
.edit-focus {
margin-left: 7px;
}
+ /* Scrollbar Style */
+ &::-webkit-scrollbar {
+ height: 0px;
+ /* remove scrollbar space */
+ background: transparent;
+ /* optional: just make scrollbar invisible */
+ }
+ }
+}
+
+
+/* Scrollbar Style */
+
+@scrollfade-color: white;
+.scrollbox {
+ position: relative;
+ width: 100%;
+ .foki-scrollfade {
+ &-left,
+ &-right {
+ position: absolute;
+ width: 20px;
+ height: 42px;
+ top: 1px;
+ }
+ &-left {
+ background: linear-gradient(to right, @scrollfade-color, fade(@scrollfade-color, 80%), fade(@scrollfade-color, 0%));
+ left: 0px;
+ }
+ &-right {
+ background: linear-gradient(to left, @scrollfade-color, fade(@scrollfade-color, 80%), fade(@scrollfade-color, 0%));
+ right: 0px;
+ }
}
}
#research-bar-placeholder {
- margin: @resultpage-leftbox-min-dist-top-bottom 0px 0px 50px;
+ padding: @resultpage-leftbox-min-dist-top-bottom 0px 0px 50px;
width: 100%;
max-width: 700px;
- height: 53px;
+ height: 61px;
}
\ No newline at end of file
diff --git a/resources/views/layouts/researchandtabs.blade.php b/resources/views/layouts/researchandtabs.blade.php
index dea887f0e..11f30aa54 100644
--- a/resources/views/layouts/researchandtabs.blade.php
+++ b/resources/views/layouts/researchandtabs.blade.php
@@ -21,8 +21,12 @@
</header>
<div id="research-bar-placeholder"></div>
<div id="foki">
- <div id="foki-box">
- @include('parts.foki')
+ <div class="scrollbox">
+ <div class="foki-scrollfade-left"></div>
+ <div id="foki-box">
+ @include('parts.foki')
+ </div>
+ <div class="foki-scrollfade-right"></div>
</div>
</div>
<div id="resultpage-container">
--
GitLab