mirror of
https://github.com/LaCasemate/fab-manager.git
synced 2025-02-20 14:54:15 +01:00
Store ad on machines list
This commit is contained in:
parent
d602087710
commit
4e76396dee
@ -7,6 +7,8 @@ import MachineAPI from '../../api/machine';
|
||||
import { MachineCard } from './machine-card';
|
||||
import { MachinesFilters } from './machines-filters';
|
||||
import { User } from '../../models/user';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { FabButton } from '../base/fab-button';
|
||||
|
||||
declare const Application: IApplication;
|
||||
|
||||
@ -25,6 +27,7 @@ interface MachinesListProps {
|
||||
* This component shows a list of all machines and allows filtering on that list.
|
||||
*/
|
||||
export const MachinesList: React.FC<MachinesListProps> = ({ onError, onSuccess, onShowMachine, onReserveMachine, onLoginRequested, onEnrollRequested, user, canProposePacks }) => {
|
||||
const { t } = useTranslation('public');
|
||||
// shown machines
|
||||
const [machines, setMachines] = useState<Array<Machine>>(null);
|
||||
// we keep the full list of machines, for filtering
|
||||
@ -56,10 +59,30 @@ export const MachinesList: React.FC<MachinesListProps> = ({ onError, onSuccess,
|
||||
setMachines(allMachines.filter(m => !!m.disabled === !status));
|
||||
};
|
||||
|
||||
/**
|
||||
* Go to store
|
||||
*/
|
||||
const linkToStore = (): void => {
|
||||
window.location.href = '/#!/store';
|
||||
};
|
||||
|
||||
// TODO: Conditionally display the store ad
|
||||
return (
|
||||
<div className="machines-list">
|
||||
<MachinesFilters onStatusSelected={handleFilterByStatus} />
|
||||
<div className="all-machines">
|
||||
{false &&
|
||||
<div className='store-ad' onClick={() => linkToStore}>
|
||||
<div className='content'>
|
||||
<h3>{t('app.public.machines_list.store_ad.title')}</h3>
|
||||
<p>{t('app.public.machines_list.store_ad.buy')}</p>
|
||||
<p className='sell'>{t('app.public.machines_list.store_ad.sell')}</p>
|
||||
</div>
|
||||
<FabButton icon={<i className="fa fa-cart-plus fa-lg" />} className="cta" onClick={linkToStore}>
|
||||
{t('app.public.machines_list.store_ad.link')}
|
||||
</FabButton>
|
||||
</div>
|
||||
}
|
||||
{machines && machines.map(machine => {
|
||||
return <MachineCard key={machine.id}
|
||||
user={user}
|
||||
|
@ -1,11 +1,9 @@
|
||||
.machine-card {
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
margin: 0 15px 30px;
|
||||
width: 30%;
|
||||
min-width: 263px;
|
||||
border-radius: var(--border-radius);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&.loading::before {
|
||||
content: '';
|
||||
@ -37,18 +35,6 @@
|
||||
100% { transform: rotate(360deg);}
|
||||
}
|
||||
|
||||
@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 {
|
||||
height: 250px;
|
||||
background-size: cover;
|
||||
|
@ -1,6 +1,44 @@
|
||||
.machines-list {
|
||||
.machines-list {
|
||||
.all-machines {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
|
||||
gap: 3.2rem;
|
||||
|
||||
.store-ad {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--main);
|
||||
border-radius: var(--border-radius);
|
||||
overflow: hidden;
|
||||
color: var(--main-text-color);
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 3.2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
h3 {
|
||||
margin: 0 0 2.4rem;
|
||||
@include title-lg;
|
||||
color: var(--main-text-color) !important;
|
||||
}
|
||||
p { margin: 0; }
|
||||
.sell {
|
||||
margin-top: auto;
|
||||
@include text-lg(500);
|
||||
}
|
||||
}
|
||||
.cta {
|
||||
margin-top: auto;
|
||||
width: 100%;
|
||||
height: 5.4rem;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background-color: var(--gray-hard-darkest);
|
||||
color: var(--main-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -219,6 +219,11 @@ en:
|
||||
new_availability: "Open reservations"
|
||||
book: "Book"
|
||||
_or_the_: " or the "
|
||||
store_ad:
|
||||
title: "Discover our store"
|
||||
buy: "Check out products from members' projects along with consumable related to the different machines and tools of the workshop."
|
||||
sell: "If you also want to sell your creations, please let us know."
|
||||
link: "To the store"
|
||||
machines_filters:
|
||||
show_machines: "Show machines"
|
||||
status_enabled: "Enabled"
|
||||
|
Loading…
x
Reference in New Issue
Block a user