Skip to content

Commit fa7b440

Browse files
sinejespersensinejespersen
authored
Merge pull request danskernesdigitalebibliotek#239 from itk-dev/feature/5389-group-modal-fixed-buttons
5389: positioning of pager/buttons fixed in bottom
2 parents 7769be7 + 47d7ac7 commit fa7b440

File tree

6 files changed

+102
-88
lines changed

6 files changed

+102
-88
lines changed

‎src/stories/Library/Lists/list-materials/ListMaterials.stories.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,9 @@ export default {
2424
} as ComponentMeta<typeof ListMaterials>;
2525

2626
const Template: ComponentStory<typeof ListMaterials> = (args) => (
27-
<ListMaterials {...args} />
27+
<ul>
28+
<ListMaterials {...args} />
29+
</ul>
2830
);
2931

3032
export const Item = Template.bind({});

‎src/stories/Library/Lists/list-materials/ListMaterials.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export const ListMaterials: FC<ListMaterialsProps> = ({
2828
};
2929

3030
return (
31-
<ul className="modal-loan__list-materials">
31+
<>
3232
<li>
3333
<div
3434
className={`list-materials ${
@@ -108,6 +108,6 @@ export const ListMaterials: FC<ListMaterialsProps> = ({
108108
</div>
109109
</div>
110110
</li>
111-
</ul>
111+
</>
112112
);
113113
};

‎src/stories/Library/Modals/modal-loan/ModalLoan.tsx‎

Lines changed: 80 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
} from "../../Lists/list-materials/ListMaterials";
99
import { WarningStatus } from "../../warning-status/WarningStatus";
1010
import Modal from "../Modal";
11+
import ResultPager from "../../card-list-page/ResultPager";
1112

1213
type LoanMaterials = Array<{
1314
materialType?: string;
@@ -113,88 +114,91 @@ export const ModalLoan: React.FC<ModalLoanProps> = ({
113114
};
114115

115116
return (
116-
<Modal shownModal={showModal} classNames="modal-loan">
117-
<div className="modal-loan__container">
118-
<div className="modal-loan__header">
117+
<Modal shownModal={showModal}>
118+
<div className="modal-loan">
119+
<div className="modal-loan__container">
120+
<div className="modal-loan__header">
121+
{isExpired && (
122+
<div className="mr-32">
123+
<Counter
124+
label="dage"
125+
percentage={100}
126+
value={0}
127+
status="danger"
128+
isReady={false}
129+
/>
130+
</div>
131+
)}
132+
<div>
133+
<h2 className="modal-loan__title text-header-h2">{title}</h2>
134+
<p className="text-body-medium-regular color-secondary-gray mt-4">
135+
{description}
136+
</p>
137+
</div>
138+
</div>
119139
{isExpired && (
120-
<div className="mr-32">
121-
<Counter
122-
label="dage"
123-
percentage={100}
124-
value={0}
125-
status="danger"
126-
isReady={false}
140+
<div className="modal-loan__warning mt-48 mb-48">
141+
<WarningStatus
142+
url="/"
143+
description="Afleveringsdatoen for lånet er overskredet, derfor pålægges du et gebyr, når materialet afleveres"
127144
/>
128145
</div>
129146
)}
130-
<div>
131-
<h2 className="modal-loan__title text-header-h2">{title}</h2>
132-
<p className="text-body-medium-regular color-secondary-gray mt-4">
133-
{description}
134-
</p>
135-
</div>
136-
</div>
137-
{isExpired && (
138-
<div className="modal-loan__warning mt-48 mb-48">
139-
<WarningStatus
140-
url="/"
141-
description="Afleveringsdatoen for lånet er overskredet, derfor pålægges du et gebyr, når materialet afleveres"
142-
/>
143-
</div>
144-
)}
145-
{buttonsUpTop && (
146-
<div className="modal-loan__buttons">
147-
<Checkbox
148-
hiddenLabel={false}
149-
isChecked={isAllChecked}
150-
callback={handleToggleAll}
151-
label="Vælg alle med mulighed for fornyelse"
152-
/>
153-
<Button
154-
buttonType="default"
155-
label="Forny mulige (2)"
156-
size="small"
157-
variant="filled"
158-
disabled={false}
159-
collapsible
160-
/>
161-
</div>
162-
)}
163-
<ul className="modal-loan__list-container">
164-
{loanList.map(({ list }) => (
165-
<li className="modal-loan__list">
166-
<ul className="modal-loan__list-materials">
147+
{buttonsUpTop && (
148+
<div className="modal-loan__buttons">
149+
<Checkbox
150+
hiddenLabel={false}
151+
isChecked={isAllChecked}
152+
callback={handleToggleAll}
153+
label="Vælg alle med mulighed for fornyelse"
154+
/>
155+
<Button
156+
buttonType="default"
157+
label="Forny mulige (2)"
158+
size="small"
159+
variant="filled"
160+
disabled={false}
161+
collapsible
162+
/>
163+
</div>
164+
)}
165+
<ul className="modal-loan__list-materials">
166+
{loanList.map(({ list }) => (
167+
<>
167168
{list.map((listItem, index) => (
168-
<li>
169-
<ListMaterials
170-
key={`${index}-${isAllChecked}`}
171-
{...listItem}
172-
isChecked={listItem.isChecked}
173-
/>
174-
</li>
169+
<ListMaterials
170+
key={`${index}-${isAllChecked}`}
171+
{...listItem}
172+
isChecked={listItem.isChecked}
173+
/>
175174
))}
176-
</ul>
177-
</li>
178-
))}
179-
</ul>
180-
{!buttonsUpTop && (
181-
<div className="modal-loan__buttons modal-loan__buttons--bottom">
182-
<Checkbox
183-
hiddenLabel={false}
184-
isChecked={isAllChecked}
185-
callback={handleToggleAll}
186-
label="Vælg alle med mulighed for fornyelse"
187-
/>
188-
<Button
189-
buttonType="default"
190-
label="Forny mulige (2)"
191-
size="small"
192-
variant="filled"
193-
disabled={false}
194-
collapsible
195-
/>
196-
</div>
197-
)}
175+
</>
176+
))}
177+
</ul>
178+
<ResultPager
179+
currentResults={1}
180+
totalResults={2}
181+
classNames="result-pager--margin-bottom"
182+
/>
183+
{!buttonsUpTop && (
184+
<div className="modal-loan__buttons modal-loan__buttons--bottom">
185+
<Checkbox
186+
hiddenLabel={false}
187+
isChecked={isAllChecked}
188+
callback={handleToggleAll}
189+
label="Vælg alle med mulighed for fornyelse"
190+
/>
191+
<Button
192+
buttonType="default"
193+
label="Forny mulige (2)"
194+
size="small"
195+
variant="filled"
196+
disabled={false}
197+
collapsible
198+
/>
199+
</div>
200+
)}
201+
</div>
198202
</div>
199203
</Modal>
200204
);

‎src/stories/Library/Modals/modal-loan/modal-loan.scss‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ $MODAL_LOAN_CONTAINER_WIDTH: 1000px;
88

99
.modal-loan__container {
1010
max-width: $MODAL_LOAN_CONTAINER_WIDTH;
11-
width: 100%;
1211
overflow: scroll;
1312
}
1413

@@ -25,6 +24,7 @@ $MODAL_LOAN_CONTAINER_WIDTH: 1000px;
2524
.modal-loan__list {
2625
position: relative;
2726
margin-top: 24px;
27+
padding-bottom: 10px;
2828
}
2929

3030
.modal-loan__count {
@@ -42,6 +42,7 @@ $MODAL_LOAN_CONTAINER_WIDTH: 1000px;
4242
}
4343

4444
.modal-loan__buttons {
45+
background-color: $c-global-primary;
4546
display: flex;
4647
grid-gap: 24px;
4748
justify-content: flex-end;
@@ -51,16 +52,14 @@ $MODAL_LOAN_CONTAINER_WIDTH: 1000px;
5152

5253
.modal-loan__buttons--bottom {
5354
position: fixed;
54-
left: 0;
55+
right: 0;
5556
bottom: 0;
56-
width: 100vw;
57-
background-color: $c-global-primary;
5857
padding: $s-md;
5958

60-
@include breakpoint-m {
61-
padding: $s-sm $s-7xl;
59+
@include breakpoint-s {
60+
padding: $s-lg $s-7xl $s-lg 0;
6261
bottom: 100px;
62+
right: 100px;
6363
left: 100px;
64-
width: calc(100vw - 200px);
6564
}
6665
}

‎src/stories/Library/card-list-page/ResultPager.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,17 @@ import { Button } from "../Buttons/button/Button";
33
interface ResultPagerProps {
44
currentResults: number;
55
totalResults: number;
6+
classNames?: string;
67
}
78

8-
const ResultPager = ({ currentResults, totalResults }: ResultPagerProps) => {
9+
const ResultPager = ({
10+
currentResults,
11+
totalResults,
12+
classNames,
13+
}: ResultPagerProps) => {
914
const total = totalResults.toLocaleString("da-Dk");
1015
return (
11-
<div className="result-pager">
16+
<div className={`${classNames} result-pager`}>
1217
<p className="text-small-caption result-pager__title">
1318
{`Viser ${currentResults} ud af ${total} resultater`}
1419
</p>

‎src/stories/Library/card-list-page/result-pager.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@
66
}
77
}
88

9+
.result-pager--margin-bottom {
10+
margin-bottom: 80px;
11+
margin-top: 0px;
12+
}
913
// Override button css (Center + Width)
1014
.result-pager > .btn-primary {
1115
margin: 0 auto;

0 commit comments

Comments
 (0)