Commit fa581885 authored by Karl Hasselbring's avatar Karl Hasselbring
Browse files

Merge branch '674' into 'MetaGer-Redesign'

Die Foki haben jetzt eine Scrollbox und zwei Scrollfades, wodurch die Ränder weiß ausblenden

See merge request !1161
parents c0c97b60 b94cd5ba
...@@ -83,7 +83,7 @@ h1.mg-logo { ...@@ -83,7 +83,7 @@ h1.mg-logo {
background-color: #FFF; background-color: #FFF;
background-image: none; background-image: none;
border: 1px solid #CCC; border: 1px solid #CCC;
margin:0px; margin: 0px;
} }
.metager-searchbutton { .metager-searchbutton {
...@@ -95,7 +95,7 @@ h1.mg-logo { ...@@ -95,7 +95,7 @@ h1.mg-logo {
border-bottom-left-radius: 0px; border-bottom-left-radius: 0px;
border: 1px solid #CCC; border: 1px solid #CCC;
padding: 6px 12px; padding: 6px 12px;
margin:0px; margin: 0px;
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
line-height: 1; line-height: 1;
......
...@@ -282,14 +282,12 @@ div:hover>.searchbar-tooltip { ...@@ -282,14 +282,12 @@ div:hover>.searchbar-tooltip {
@resultpage-leftbox-min-dist-left-right: 8px; @resultpage-leftbox-min-dist-left-right: 8px;
@resultpage-leftbox-min-dist-top-bottom: 8px; @resultpage-leftbox-min-dist-top-bottom: 8px;
@resultpage-leftbox-big-screen-margin-left: 50px; @resultpage-leftbox-big-screen-margin-left: 50px;
header { header {
padding-top: @resultpage-leftbox-min-dist-top-bottom; padding-top: @resultpage-leftbox-min-dist-top-bottom;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: fixed; position: fixed;
z-index: 100; z-index: 100; // Makes the header larger, so it correctly covers the non scrolling parts below
// 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; width: @resultpage-leftbox-max-width + @resultpage-leftbox-big-screen-margin-left + 10;
padding-left: @resultpage-leftbox-big-screen-margin-left; padding-left: @resultpage-leftbox-big-screen-margin-left;
background-color: inherit; background-color: inherit;
...@@ -343,15 +341,9 @@ header:nth-child(1) { ...@@ -343,15 +341,9 @@ header:nth-child(1) {
max-width: @resultpage-leftbox-max-width; max-width: @resultpage-leftbox-max-width;
background-color: white; background-color: white;
border: 1px solid #ccc; 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); 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 { overflow-x: auto;
height: 0px; padding: 10px;
/* remove scrollbar space */
background: transparent;
/* optional: just make scrollbar invisible */
}
&>div { &>div {
padding: 0px 10px; padding: 0px 10px;
&>a { &>a {
...@@ -365,12 +357,45 @@ header:nth-child(1) { ...@@ -365,12 +357,45 @@ header:nth-child(1) {
.edit-focus { .edit-focus {
margin-left: 7px; 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 { #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%; width: 100%;
max-width: 700px; max-width: 700px;
height: 53px; height: 61px;
} }
\ No newline at end of file
...@@ -21,8 +21,12 @@ ...@@ -21,8 +21,12 @@
</header> </header>
<div id="research-bar-placeholder"></div> <div id="research-bar-placeholder"></div>
<div id="foki"> <div id="foki">
<div id="foki-box"> <div class="scrollbox">
@include('parts.foki') <div class="foki-scrollfade-left"></div>
<div id="foki-box">
@include('parts.foki')
</div>
<div class="foki-scrollfade-right"></div>
</div> </div>
</div> </div>
<div id="resultpage-container"> <div id="resultpage-container">
......
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