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

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

@ -98,6 +98,10 @@
min-width: max(300px, 30%); min-width: max(300px, 30%);
} }
#root-shop .layout>aside.aside .gradient-bottom {
width: inherit;
}
#root-shop .productItem { #root-shop .productItem {
padding: 2rem 1rem 1rem; padding: 2rem 1rem 1rem;
} }
@ -412,7 +416,7 @@
#root-shop .layout>aside.aside.menu-opened + section.main:after { #root-shop .layout>aside.aside.menu-opened + section.main:after {
content: ''; content: '';
position: absolute; position: fixed;
height: 100%; height: 100%;
width: 100%; width: 100%;
background-color: rgba(0, 0, 0, .3); background-color: rgba(0, 0, 0, .3);
@ -431,8 +435,8 @@
height: 100%; height: 100%;
} }
#root-shop .layout>aside.aside:after { #root-shop .layout>aside.aside .gradient-bottom {
width: 0; display: none;
} }
#root-shop .layout>aside.aside + section.main { #root-shop .layout>aside.aside + section.main {
@ -559,8 +563,8 @@
height: 100%; height: 100%;
} }
#root-shop .layout>aside.aside:after { #root-shop .layout>aside.aside .gradient-bottom {
width: 0; display: none;
} }
#root-shop .layout>aside.aside + section.main { #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 {BacklogGroups} from "./BacklogGroups";
import {SearchBar} from "./SearchBar"; import {SearchBar} from "./SearchBar";
import {BacklogSearchResult} from "./BacklogSearchResult"; import {BacklogSearchResult} from "./BacklogSearchResult";
import {GradientBottom} from "./GradientBottom";
/** /**
* Component that renders the backlog in the aside * Component that renders the backlog in the aside
@ -56,6 +57,8 @@ export function Backlog() {
{provided.placeholder} {provided.placeholder}
</div> </div>
)} )}
<GradientBottom/>
</div> </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>
)
}