rooty/fab-manager
1
0
Fork 0
mirror of https://github.com/LaCasemate/fab-manager.git synced 2025-01-18 07:52:23 +01:00
Code Issues Releases Activity

responsively styled the machines list

Browse Source
This commit is contained in:
Sylvain 2021-06-17 09:48:29 +02:00
parent de3ab3b6d0
commit 80d206fc99
3 changed files with 22 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/frontend/src/javascript/components/machines/machines-list.tsx
View File

@ -29,7 +29,7 @@ const MachinesList: React.FC<MachinesListProps> = ({ onError, onShowMachine, onR
return ( return (
<div className="machines-list"> <div className="machines-list">
{machines && machines.map(machine => { {machines && machines.map(machine => {
return <MachineCard machine={machine} onShowMachine={onShowMachine} onReserveMachine={onReserveMachine} /> return <MachineCard key={machine.id} machine={machine} onShowMachine={onShowMachine} onReserveMachine={onReserveMachine} />
})} })}
</div> </div>
); );

14
app/frontend/src/stylesheets/modules/machines/machine-card.scss
View File

@ -4,7 +4,19 @@
border-radius: 6px; border-radius: 6px;
margin: 0 15px 30px; margin: 0 15px 30px;
width: 30%; width: 30%;
min-width: 300px; min-width: 263px;
@media screen and (max-width: 1219px) {
width: 45%;
min-width: 195px;
margin: 0 auto 30px;
}
@media screen and (max-width: 674px) {
width: 95%;
max-width: 400px;
margin: 0 auto 30px;
}
.machine-picture { .machine-picture {
height: 250px; height: 250px;

8
app/themes/casemate/style.scss.erb
View File

@ -387,3 +387,11 @@ section#cookies-modal div.cookies-consent .cookies-actions button.accept {
color: $secondary-text-color; color: $secondary-text-color;
} }
} }
.machine-card {
.machine-actions {
button {
color: $secondary;
}
}
}