Styling
This commit is contained in:
parent
f9a44b3b70
commit
a2149f9a43
|
@ -21,7 +21,10 @@ const GpxViewer: Component<Props> = ({ gpxId, restrictToHierarchy }) => {
|
|||
<Tree
|
||||
title={
|
||||
<>
|
||||
<GpxIcon /> {title()}
|
||||
<span>
|
||||
{' '}
|
||||
<GpxIcon /> {title()}
|
||||
</span>
|
||||
</>
|
||||
}
|
||||
content={undefined}
|
||||
|
|
|
@ -29,7 +29,9 @@ const RteViewer: Component<Props> = ({ rteId }) => {
|
|||
<Tree
|
||||
title={
|
||||
<>
|
||||
<RteIcon fill='black' width='24' height='24' /> {title()}
|
||||
<span>
|
||||
<RteIcon fill='black' width='24' height='24' /> {title()}
|
||||
</span>
|
||||
</>
|
||||
}
|
||||
content={
|
||||
|
|
|
@ -0,0 +1,12 @@
|
|||
.title {
|
||||
background-color: rgba(14, 116, 144, 0.7);
|
||||
color: white;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.title > div {
|
||||
display: inline-block;
|
||||
}
|
|
@ -1,6 +1,7 @@
|
|||
import { Paper, Stack } from '@suid/material';
|
||||
import styled from '@suid/material/styles/styled';
|
||||
import { Component, JSXElement, Show } from 'solid-js';
|
||||
import style from './Tree.module.css';
|
||||
|
||||
interface Props {
|
||||
title: string | JSXElement;
|
||||
|
@ -24,7 +25,7 @@ const Tree: Component<Props> = ({ title, content, subTree }) => {
|
|||
sx={{ width: 'calc(100% - 5px)' }}
|
||||
>
|
||||
<Item sx={{ width: 'calc(100% - 1px)' }}>
|
||||
<div>{title}</div>
|
||||
<div class={style.title}>{title}</div>
|
||||
<Show when={content !== undefined}>
|
||||
<div>{content}</div>
|
||||
</Show>
|
||||
|
|
|
@ -1,9 +1,8 @@
|
|||
import { Component, For, from } from 'solid-js';
|
||||
import { Component, For } from 'solid-js';
|
||||
import { peekCachedSignal } from '../../workers/cached-signals';
|
||||
import Tree from '../tree';
|
||||
import TrkIcon from '../../icons/human-footprints-svgrepo-com.svg?component-solid';
|
||||
import { TrksegViewer } from '../trkseg';
|
||||
import { findAddress } from '../../lib/osm';
|
||||
|
||||
interface Props {
|
||||
trkId: string;
|
||||
|
@ -21,14 +20,15 @@ const TrkViewer: Component<Props> = ({ trkId, restrictToHierarchy }) => {
|
|||
<Tree
|
||||
title={
|
||||
<>
|
||||
<TrkIcon width='24' height='24' /> {title()}
|
||||
<div>
|
||||
<span>
|
||||
<TrkIcon fill='white' width='24' height='24' /> {title()}
|
||||
</span>
|
||||
</div>
|
||||
<div>x</div>
|
||||
</>
|
||||
}
|
||||
content={
|
||||
<div>
|
||||
|
||||
</div>
|
||||
}
|
||||
content={<div></div>}
|
||||
subTree={
|
||||
<For
|
||||
each={Object.keys(restrictToHierarchy).filter((key: string) =>
|
||||
|
|
|
@ -32,7 +32,9 @@ const TrksegViewer: Component<Props> = ({ trksegId }) => {
|
|||
<Tree
|
||||
title={
|
||||
<>
|
||||
<TrkIcon fill='grey' width='16' height='16' /> {title()}
|
||||
<span>
|
||||
<TrkIcon fill='white' width='16' height='16' /> {title()}
|
||||
</span>
|
||||
</>
|
||||
}
|
||||
content={
|
||||
|
|
Loading…
Reference in New Issue