M-Labs
/
web2019
5
0
Fork 2
Code Issues 20 Pull Requests 3 Releases Wiki Activity

Fix bottom side gradient 

Signed-off-by: Egor Savkin <es@m-labs.hk>
This commit is contained in:
Egor Savkin 2024-02-27 17:23:05 +08:00
parent 54b8dfcc03
commit 0b905c1484
5 changed files with 36 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
sass/css/_shop.scss
View File

@ -72,29 +72,28 @@ button {
overflow-y: scroll;
overflow-x: hidden;
position: relative;
max-width: calc(3/10 * 100%);
min-width: calc(1/4 * 100%);
max-width: max(1/4 * 100%, 310px);
/*padding-bottom: 4rem!important;*/
}
> aside.aside:after {
position: fixed;
bottom: 0;
height: 100px;
max-width: calc(3/10 * 100%);
min-width: 0;
content: "";
background: linear-gradient(
to top,
rgba(13, 53, 71, 1),
rgba(13, 53, 71, 0)
);
pointer-events: none;
.gradient-bottom {
position: sticky;
bottom: 0;
height: 100px;
//width: max(1/4 * 100%, 310px);
width: inherit;
content: "";
background: linear-gradient(
to top,
rgba(13, 53, 71, 1),
rgba(13, 53, 71, 0)
);
pointer-events: none;
}
}
> section.main {
flex: 4;
max-width: calc(3/4 * 100%);
width: calc(3/4 * 100%);
overflow-y: scroll;
}
}

14
static/css/order-hardware.css
View File

@ -98,6 +98,10 @@
min-width: max(300px, 30%);
}
#root-shop .layout>aside.aside .gradient-bottom {
width: inherit;
}
#root-shop .productItem {
padding: 2rem 1rem 1rem;
}
@ -412,7 +416,7 @@
#root-shop .layout>aside.aside.menu-opened + section.main:after {
content: '';
position: absolute;
position: fixed;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, .3);
@ -431,8 +435,8 @@
height: 100%;
}
#root-shop .layout>aside.aside:after {
width: 0;
#root-shop .layout>aside.aside .gradient-bottom {
display: none;
}
#root-shop .layout>aside.aside + section.main {
@ -559,8 +563,8 @@
height: 100%;
}
#root-shop .layout>aside.aside:after {
width: 0;
#root-shop .layout>aside.aside .gradient-bottom {
display: none;
}
#root-shop .layout>aside.aside + section.main {

2
static/js/shop.bundle.js
View File

File diff suppressed because one or more lines are too long

3
static/js/shop/Backlog.jsx
View File

@ -6,6 +6,7 @@ import {useRenderCount} from "@uidotdev/usehooks";
import {BacklogGroups} from "./BacklogGroups";
import {SearchBar} from "./SearchBar";
import {BacklogSearchResult} from "./BacklogSearchResult";
import {GradientBottom} from "./GradientBottom";
/**
* Component that renders the backlog in the aside
@ -56,6 +57,8 @@ export function Backlog() {
{provided.placeholder}
</div>
)}
<GradientBottom/>
</div>
)}

7
static/js/shop/GradientBottom.jsx Normal file
View File

@ -0,0 +1,7 @@
import React from 'react';
export function GradientBottom() {
return (
<div className="gradient-bottom"></div>
)
}