QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-17 05:10:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(warehouse ): warehouse style.

Browse Source
This commit is contained in:
elforjani13
2022-02-09 00:23:50 +02:00
committed by a.bouhuolia
parent 91c7d746b1
commit dd7516f6b2
1 changed files with 40 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/containers/Preferences/Warehouses/components.js
View File

@@ -39,36 +39,47 @@ export function WarehouseContextMenu({
export function WarehousesGrid({ warehouse }) {
return (
<WarehouseGrid>
<WarehouseGridWrapper>
<WarehouseHeader>
<WarehouseTitle>{warehouse.name}</WarehouseTitle>
<WarehouseCode>{warehouse.code}</WarehouseCode>
<WarehouseIcon>
<Icon icon="warehouse-16" iconSize={20} />
</WarehouseIcon>
</WarehouseHeader>
<WarehouseInfoItem>{warehouse.city}</WarehouseInfoItem>
<WarehouseInfoItem>{warehouse.country}</WarehouseInfoItem>
<WarehouseInfoItem>{warehouse.email}</WarehouseInfoItem>
<WarehouseInfoItem>{warehouse.phone_number}</WarehouseInfoItem>
</WarehouseGrid>
<WarehouseContent>
<WarehouseItem>{warehouse.city}</WarehouseItem>
<WarehouseItem>{warehouse.country}</WarehouseItem>
<WarehouseItem>{warehouse.email}</WarehouseItem>
<WarehouseItem>{warehouse.phone_number}</WarehouseItem>
</WarehouseContent>
</WarehouseGridWrapper>
);
}
const WarehouseGrid = styled.div`
const WarehouseGridWrapper = styled.div`
display: flex;
flex-direction: column;
flex-shrink: 0;
border-radius: 3px;
width: 280px; // 453px
height: 160px; //225px
background: #fff;
margin: 5px;
padding: 16px 12px 10px;
border: 1px solid #c8cad0; //#CFD1D6
background: #fff;
margin: 5px 5px 8px;
width: 300px; // 453px
height: 160px; //225px
transition: all 0.1s ease-in-out;
position: relative;
&:hover {
border-color: #0153cc;
}
`;
const WarehouseHeader = styled.div`
position: relative;
padding: 16px 12px 10px;
`;
const WarehouseTitle = styled.div`
font-size: 14px; //22px
font-style: inherit;
@@ -78,22 +89,31 @@ const WarehouseTitle = styled.div`
line-height: 1;
`;
const WarehouseHeader = styled.div`
margin: 4px 0px 15px;
`;
const WarehouseCode = styled.div`
display: inline-block;
font-size: 11px;
color: #6b7176;
`;
const WarehouseInfoItem = styled.div`
const WarehouseIcon = styled.div`
position: absolute;
top: 14px;
color: #abb3bb;
right: 12px;
`;
const WarehouseContent = styled.div`
display: inline-block;
font-size: 12px;
position: absolute;
bottom: 8px;
width: 100%;
padding: 0 12px 0px;
`;
const WarehouseItem = styled.div`
font-size: 11px;
color: #000;
line-height: 1.3rem;
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
overflow: hidden;
`;