Align options table scrolling
This commit is contained in:
parent
ba0daf5208
commit
c31d59ea79
2 changed files with 32 additions and 18 deletions
|
|
@ -898,28 +898,33 @@ h3 {
|
||||||
}
|
}
|
||||||
|
|
||||||
.options-table-wrap {
|
.options-table-wrap {
|
||||||
|
display: flex;
|
||||||
|
flex: 1 1 auto;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
overflow: auto;
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.options-table {
|
.options-table {
|
||||||
min-width: 1040px;
|
display: flex;
|
||||||
|
min-height: 0;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.options-table-head,
|
.options-table-head,
|
||||||
.options-table-row {
|
.options-table-row {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 88px 72px 76px 72px 44px 76px 130px 70px 82px 64px 56px minmax(150px, 1fr);
|
grid-template-columns: minmax(72px, 0.8fr) minmax(50px, 0.55fr) minmax(64px, 0.7fr) minmax(58px, 0.6fr) minmax(34px, 0.35fr) minmax(62px, 0.65fr) minmax(104px, 1fr) minmax(54px, 0.55fr) minmax(66px, 0.7fr) minmax(48px, 0.5fr) minmax(42px, 0.45fr) minmax(92px, 0.9fr);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
column-gap: 10px;
|
column-gap: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.options-table-head {
|
.options-table-head {
|
||||||
position: sticky;
|
flex: 0 0 auto;
|
||||||
top: 0;
|
|
||||||
z-index: 2;
|
|
||||||
height: 30px;
|
height: 30px;
|
||||||
padding: 0 10px;
|
padding: 0 8px;
|
||||||
border-bottom: 1px solid var(--border);
|
border-bottom: 1px solid var(--border);
|
||||||
background: rgba(8, 11, 16, 0.98);
|
background: rgba(8, 11, 16, 0.98);
|
||||||
color: var(--muted);
|
color: var(--muted);
|
||||||
|
|
@ -928,10 +933,17 @@ h3 {
|
||||||
letter-spacing: 0.08em;
|
letter-spacing: 0.08em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.options-table-body {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
min-height: 0;
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
.options-table-row {
|
.options-table-row {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 34px;
|
min-height: 34px;
|
||||||
padding: 0 10px;
|
padding: 0 8px;
|
||||||
border: 0;
|
border: 0;
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.055);
|
border-bottom: 1px solid rgba(255, 255, 255, 0.055);
|
||||||
background:
|
background:
|
||||||
|
|
|
||||||
|
|
@ -5369,7 +5369,7 @@ const OptionsPane = ({ limit }: OptionsPaneProps) => {
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<div className="options-table-wrap" ref={state.optionsScroll.listRef}>
|
<div className="options-table-wrap">
|
||||||
{items.length === 0 ? (
|
{items.length === 0 ? (
|
||||||
<div className="empty">
|
<div className="empty">
|
||||||
{state.tickerSet.size > 0
|
{state.tickerSet.size > 0
|
||||||
|
|
@ -5396,6 +5396,7 @@ const OptionsPane = ({ limit }: OptionsPaneProps) => {
|
||||||
<span>IV</span>
|
<span>IV</span>
|
||||||
<span>CLASSIFIER</span>
|
<span>CLASSIFIER</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="options-table-body" ref={state.optionsScroll.listRef}>
|
||||||
{virtual.topSpacerHeight > 0 ? (
|
{virtual.topSpacerHeight > 0 ? (
|
||||||
<div style={{ height: `${virtual.topSpacerHeight}px` }} aria-hidden />
|
<div style={{ height: `${virtual.topSpacerHeight}px` }} aria-hidden />
|
||||||
) : null}
|
) : null}
|
||||||
|
|
@ -5467,6 +5468,7 @@ const OptionsPane = ({ limit }: OptionsPaneProps) => {
|
||||||
<div style={{ height: `${virtual.bottomSpacerHeight}px` }} aria-hidden />
|
<div style={{ height: `${virtual.bottomSpacerHeight}px` }} aria-hidden />
|
||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
{!limit ? <LoadOlderControl channel="options" /> : null}
|
{!limit ? <LoadOlderControl channel="options" /> : null}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue