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

more table styling

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