Commit 2a1485c3 authored by deb355529's avatar deb355529
Browse files

DEICH-5721: deichman.no: added horizontal scroll for mobile displays and also rewritten to hooks

parent 7d1f5bbc
import React from "react";
import PropTypes from "prop-types";
import { slugify } from "../../utilities/slug";
import CardGrid from "../CardGrid";
import { Block } from "@digibib/deichman-ui";
import "./styles.css";
import Pagination from "../Grid/Pagination";
export default function ServiceGrid({
items = [],
expandAll = false,
......@@ -29,7 +27,7 @@ export default function ServiceGrid({
const sortedKeys = Object.keys(groupedServices).sort();
return (
<section>
<section className="service-grid">
{sortedKeys.map(category => {
// Sort items by name
const sortedItems = groupedServices[category].sort((a, b) =>
......@@ -60,15 +58,27 @@ export default function ServiceGrid({
>
{({ items, totalCount, collapseCallback, expandCallback }) => {
return (
<CardGrid
items={items}
totalCount={totalCount}
headline={showHeadline ? category : ""}
expandLabel="Se flere"
collapseLabel="Se færre"
expandHandler={expandCallback}
collapseHandler={collapseCallback}
/>
<>
<div className="service-grid__grid--vertical">
<CardGrid
items={items}
totalCount={totalCount}
headline={showHeadline ? category : ""}
expandLabel="Se flere"
collapseLabel="Se færre"
expandHandler={expandCallback}
collapseHandler={collapseCallback}
/>
</div>
<div className="service-grid__grid--horizontal">
<CardGrid
items={items}
totalCount={totalCount}
headline={showHeadline ? category : ""}
isHorizontal
/>
</div>
</>
);
}}
</Pagination>
......
.service-grid {
@media (min-width: 800px) {
.service-grid__grid--horizontal {
display: none;
}
}
@media (max-width: 799px) {
.service-grid__grid--vertical {
display: none;
}
}
}
\ No newline at end of file
import React, { Fragment } from "react";
import PropTypes from "prop-types";
import autoBind from "auto-bind";
import { connect } from "react-redux";
import { useSelector } from "react-redux";
import {
getLibraryServices,
getHighlightedLibraryServices
......@@ -18,95 +16,65 @@ import { Container, Block } from "@digibib/deichman-ui";
import HighlightedServices from "../../components/HighlightedServices/HighlightedServices";
import { getCampaigns } from "../../store/campaigns";
class ServicesPage extends React.Component {
constructor(props) {
super(props);
autoBind(this);
this.state = {};
}
static getInitialProps = async ({ reduxStore, req, query }) => {
await Promise.all([
reduxStore.dispatch(getHighlightedLibraryServices(req)),
reduxStore.dispatch(getCampaigns(req)),
reduxStore.dispatch(getLibraryServices(req, query))
]);
const isFiltering = !!query.serviceForm;
return { query, isFiltering };
};
render() {
const {
items,
query,
isFiltering,
highlighted,
highlightedTitle
} = this.props;
const { result } = items;
const ServicesPage = props => {
const { query, isFiltering } = props;
const { items, highlighted = [], highlightedTitle = "" } = useSelector(
state => state.libraryServices
);
const { result } = items;
// Only show campaignZone if we're not filtering (but allow pagination)
const showCampaignZone = !Object.keys(query).some(key => key !== "page");
// Only show campaignZone if we're not filtering (but allow pagination)
const showCampaignZone = !Object.keys(query).some(key => key !== "page");
return (
<Fragment>
<Head
title="Tjenester - Deichman.no"
description="Tjenester hos Deichman"
/>
<A11yJumpTo target="#results" text="Hopp til resultater" />
return (
<Fragment>
<Head
title="Tjenester - Deichman.no"
description="Tjenester hos Deichman"
/>
<A11yJumpTo target="#results" text="Hopp til resultater"/>
<SearchFilters type="services" results={items} />
<SearchFilters type="services" results={items}/>
{showCampaignZone && highlightedTitle && highlighted.length > 0 && (
<Container>
<Block top={8} bottom={8}>
<HighlightedServices
items={highlighted}
title={highlightedTitle}
/>
</Block>
</Container>
)}
{showCampaignZone && highlightedTitle && highlighted.length > 0 && (
<Container>
<Block top={8} bottom={8}>
{showCampaignZone && (
<CampaignZone type="midi" page="Vi-tilbyr" withSpacing />
)}
<div id="results" data-cy="service-search-results">
<ServiceGrid items={result} expandAll={isFiltering} />
</div>
<HighlightedServices items={highlighted} title={highlightedTitle} />
</Block>
</Container>
</Fragment>
);
}
}
)}
<Container>
<Block top={8} bottom={8}>
{showCampaignZone && (
<CampaignZone type="midi" page="Vi-tilbyr" withSpacing />
)}
<div id="results" data-cy="service-search-results">
<ServiceGrid items={result} expandAll={isFiltering} />
</div>
</Block>
</Container>
</Fragment>
);
};
ServicesPage.getInitialProps = async ({ reduxStore, req, query }) => {
await Promise.all([
reduxStore.dispatch(getHighlightedLibraryServices(req)),
reduxStore.dispatch(getCampaigns(req)),
reduxStore.dispatch(getLibraryServices(req, query))
]);
const isFiltering = !!query.serviceForm;
return { query, isFiltering };
};
ServicesPage.defaultProps = {
isFiltering: ""
};
ServicesPage.propTypes = {
items: PropTypes.object.isRequired,
highlighted: PropTypes.array.isRequired,
highlightedTitle: PropTypes.string.isRequired,
isFiltering: PropTypes.bool,
query: PropTypes.object.isRequired
};
const mapStateToProps = state => {
const {
items,
highlighted = [],
highlightedTitle = ""
} = state.libraryServices;
return {
items,
highlighted,
highlightedTitle
};
};
export default connect(mapStateToProps)(ServicesPage);
export default ServicesPage;
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