Commit ed7fce51 authored by alain's avatar alain 🐙
Browse files

more table styling

parent 127074d0
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
body { body {
margin: 0; margin: 0;
font-size: 18px; font-size: 18px;
background-color: #E6E6E6;
} }
</style> </style>
<noscript> <noscript>
......
...@@ -17,12 +17,13 @@ export default function Table(props) { ...@@ -17,12 +17,13 @@ export default function Table(props) {
const [filter, setFilter] = React.useState(filterInitial); const [filter, setFilter] = React.useState(filterInitial);
const [activeFilter, setActiveFilter] = React.useState(activeFilterInitial); const [activeFilter, setActiveFilter] = React.useState(activeFilterInitial);
const { items, requestSort, sortConfig } = useSortableData(props.items, filter); const { items, requestSort, sortConfig } = useSortableData(props.items, filter, {key: "url", direction: "ascending"});
const getSortState = (name) => { const getSortState = (name) => {
if (!sortConfig) { if (!sortConfig) {
return; return;
} }
return sortConfig.key === name ? sortConfig.direction : ''; return sortConfig.key === name ? sortConfig.direction : '';
}; };
......
...@@ -4,7 +4,7 @@ body { ...@@ -4,7 +4,7 @@ body {
#databronnen { #databronnen {
font-family: "Maax", Arial, Helvetica, sans-serif; font-family: "Maax", Arial, Helvetica, sans-serif;
padding: 1rem; padding: 0.5rem;
overflow: auto; overflow: auto;
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -19,29 +19,33 @@ body { ...@@ -19,29 +19,33 @@ body {
th, td { th, td {
line-height: 1.25rem; line-height: 1.25rem;
vertical-align: top; vertical-align: top;
font-size: 0.8rem; font-size: 0.75rem;
background-color: #fff;
&:not(:last-child) { &:not(:last-child) {
border-right: 1px dashed #ccc; border-right: 1px dashed #ccc;
} }
&.url { min-width: 14rem; max-width: 14rem; } &.url { min-width: 13rem; max-width: 13rem; }
&.titel { min-width: 14rem; max-width: 14rem; } &.titel { min-width: 13rem; max-width: 13rem; }
&.omschrijving { min-width: 14rem; max-width: 14rem; } &.omschrijving { min-width: 15rem; max-width: 15rem; }
&.scope { min-width: 6rem; max-width: 6rem; } &.scope { min-width: 7rem; max-width: 7rem; }
&.toegang { min-width: 6rem; max-width: 6rem; } &.toegang { min-width: 7rem; max-width: 7rem; }
&.type { min-width: 6rem; max-width: 6rem; } &.type { min-width: 7rem; max-width: 7rem; }
&.formaat { min-width: 6rem; max-width: 6rem; } &.formaat { min-width: 7rem; max-width: 7rem; }
&.thema { min-width: 8rem; max-width: 8rem; } &.thema { min-width: 7rem; max-width: 7rem; }
&.subthema { min-width: 8rem; max-width: 8rem; } &.subthema { min-width: 7rem; max-width: 7rem; }
} }
thead { thead {
th { th {
text-align: left; text-align: left;
border-bottom: 2px solid black; background-color: #00954a;
color: #fff;
font-weight: 500; font-weight: 500;
min-width: 7em; min-width: 7em;
padding: 0.25em 0 0.15em;
font-size: 0.8rem;
> div { > div {
display: flex; display: flex;
...@@ -51,9 +55,11 @@ body { ...@@ -51,9 +55,11 @@ body {
span { span {
padding: 0 0.25em; padding: 0 0.25em;
margin-right: 1rem;
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
flex-grow: 1;
} }
svg { svg {
...@@ -65,7 +71,7 @@ body { ...@@ -65,7 +71,7 @@ body {
path { path {
pointer-events: auto; pointer-events: auto;
fill: #ccc; fill: #fff;
} }
} }
...@@ -88,10 +94,20 @@ body { ...@@ -88,10 +94,20 @@ body {
tbody td { tbody td {
padding: 0.5em; padding: 0.5em;
border-bottom: 1px dashed #ccc; border-bottom: 1px dashed #ccc;
font-size: 0.75rem;
&.url { &.url {
word-break: break-all; word-break: break-all;
a {
display: block;
max-height: 4.25rem;
overflow: hidden;
transition: max-height 200ms ease;
&:hover {
max-height: 15rem;
}
}
} }
&.titel { &.titel {
...@@ -110,8 +126,6 @@ body { ...@@ -110,8 +126,6 @@ body {
} }
} }
} }
} }
input { input {
...@@ -122,8 +136,8 @@ body { ...@@ -122,8 +136,8 @@ body {
border: none; border: none;
background-color: #eee; background-color: #eee;
font-family: "Maax", Arial, Helvetica, sans-serif; font-family: "Maax", Arial, Helvetica, sans-serif;
padding: 0.25rem; padding: 0.25rem 0.25rem 0;
line-height: 1rem; line-height: 1.25rem;
} }
} }
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