games/factorio-sites
1
0
Fork 0
mirror of https://github.com/barthuijgen/factorio-sites.git synced 2025-01-07 13:40:12 +02:00
Code Issues Releases Activity

fix: pagination showing wrong page and improved select stylign and a11y

Browse Source
This commit is contained in:
Bart 2021-04-11 11:05:22 +02:00
parent b5347faa70
commit de86b1edee
2 changed files with 34 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
apps/blueprints/src/components/Pagination.tsx
View File

@ -30,7 +30,7 @@ export const Pagination: React.FC<BoxProps & PaginationProps> = ({
<StyledPagination>
{totalPages > 1 && (
<ReactPaginate
initialPage={page}
initialPage={page - 1}
pageRangeDisplayed={4}
marginPagesDisplayed={2}
pageCount={totalPages}
@ -76,7 +76,8 @@ const StyledPagination = styled(Box)`
0 0 4px 0 #000;
background-color: #8e8e8e;
&:hover {
&:hover,
&:focus {
color: #000;
text-decoration: none;
outline: 0;
@ -100,6 +101,16 @@ const StyledPagination = styled(Box)`
filter: none;
outline: 0;
}
&.disabled a,
&.disabled a:hover {
cursor: default;
filter: none;
background-color: #3d3d3d;
color: #818181;
box-shadow: inset 8px 0 4px -8px #000, inset -8px 0 4px -8px #000, inset 0 8px 4px -8px #000,
inset 0 -6px 4px -8px #818181, inset 0 -8px 4px -8px #000, 0 0 4px 0 #000;
}
}
}
`;

38
apps/blueprints/src/components/Select.tsx
View File

@ -18,29 +18,33 @@ const StyledSelect = styled(MultiSelect)`
color: black;
&.rmsc {
.dropdown-container {
outline: none;
border: none;
border-radius: 0;
background-color: #8e8e8e;
box-shadow: inset 8px 0 4px -8px #000, inset -8px 0 4px -8px #000,
inset 0 10px 2px -8px #e3e3e3, inset 0 10px 2px -8px #282828, inset 0 -9px 2px -8px #000,
0 0 4px 0 #000;
.gray {
color: #000 !important;
&:hover .dropdown-heading,
&:focus .dropdown-heading,
&[aria-expanded="true"] .dropdown-heading {
cursor: pointer;
color: #000;
text-decoration: none;
outline: 0;
box-shadow: inset 8px 0 4px -8px #000, inset -8px 0 4px -8px #000, inset 0 9px 2px -8px #fff,
inset 0 8px 4px -8px #000, inset 0 -8px 4px -8px #000, inset 0 -9px 2px -8px #432400,
0 0 4px 0 #000, inset 0 0 4px 2px #f9b44b;
background-color: #e39827;
filter: drop-shadow(0 0 2px #f9b44b);
}
.dropdown-heading {
cursor: pointer;
border: none;
border-radius: 0;
background-color: #8e8e8e;
box-shadow: inset 8px 0 4px -8px #000, inset -8px 0 4px -8px #000,
inset 0 10px 2px -8px #e3e3e3, inset 0 10px 2px -8px #282828, inset 0 -9px 2px -8px #000,
0 0 4px 0 #000;
&:hover {
color: #000;
text-decoration: none;
outline: 0;
box-shadow: inset 8px 0 4px -8px #000, inset -8px 0 4px -8px #000,
inset 0 9px 2px -8px #fff, inset 0 8px 4px -8px #000, inset 0 -8px 4px -8px #000,
inset 0 -9px 2px -8px #432400, 0 0 4px 0 #000, inset 0 0 4px 2px #f9b44b;
background-color: #e39827;
filter: drop-shadow(0 0 2px #f9b44b);
.gray {
color: #000 !important;
}
}
}