Commit fe56c7a1 authored by Andrew Hrdy's avatar Andrew Hrdy
Browse files

Made facility card SCSS file "DRYer"

parent af713e04
...@@ -24,7 +24,6 @@ const Sidebar = ({facility, isSidebarOpen, isSidebarMapOpen, toggleSidebarMap, f ...@@ -24,7 +24,6 @@ const Sidebar = ({facility, isSidebarOpen, isSidebarMapOpen, toggleSidebarMap, f
}; };
return ( return (
<Paper <Paper
className={classNames(['sidebar-root', (!isSidebarOpen && 'sidebar-open'), (isSidebarOpen && 'sidebar-closed')])}> className={classNames(['sidebar-root', (!isSidebarOpen && 'sidebar-open'), (isSidebarOpen && 'sidebar-closed')])}>
<div className={'sidebar-row1'}> <div className={'sidebar-row1'}>
......
...@@ -156,7 +156,7 @@ class FacilityCard extends React.Component { ...@@ -156,7 +156,7 @@ class FacilityCard extends React.Component {
<CardContent className={'fc-card-content'}> <CardContent className={'fc-card-content'}>
<Grid container align={'center'} direction={'column'} className={'fc-small-grid-container-spacing'}> <Grid container align={'center'} direction={'column'} className={'fc-small-grid-container-spacing'}>
<Grid item className={'fc-small-grid-item-spacing'}> <Grid item className={'fc-small-grid-item-spacing'}>
<Typography type={'subheading'} align={'center'} className={twoLineEllipsis}> <Typography type={'subheading'} align={'center'} className={classnames('fc-title', twoLineEllipsis)}>
{removeBrackets(facility.facility_name)} {removeBrackets(facility.facility_name)}
</Typography> </Typography>
</Grid> </Grid>
......
...@@ -97,11 +97,6 @@ function getSuggestions(value,suggestions) { ...@@ -97,11 +97,6 @@ function getSuggestions(value,suggestions) {
} }
const styles = theme => ({ const styles = theme => ({
'@media screen and (max-width: 600px)': {
paperBackground: {
width: '90% !important'
}
},
container: { container: {
flexGrow: 1, flexGrow: 1,
position: 'relative', position: 'relative',
...@@ -133,7 +128,8 @@ const styles = theme => ({ ...@@ -133,7 +128,8 @@ const styles = theme => ({
}, },
paperBackground:{ paperBackground:{
height:54, height:54,
width:600, maxWidth:600,
width:'90%',
display:'flex', display:'flex',
margin:'0px auto 16px auto', margin:'0px auto 16px auto',
}, },
......
.facility-status-text { .facility-status-text {
display: flex; display: flex !important;
align-items: center; align-items: center;
} }
\ No newline at end of file
...@@ -54,7 +54,7 @@ ...@@ -54,7 +54,7 @@
width: 100%; width: 100%;
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 960px) {
.sidebar-root { .sidebar-root {
display: none !important; display: none !important;
} }
......
.fc-root {
width: 250px;
border-radius: 5px;
position: relative;
}
.fc-card-content {
padding: 8px 4px 0 4px !important;
}
.fc-small-grid-container-spacing {
margin: -2px -8px !important;
}
.fc-small-grid-item-spacing {
padding: 3px 8px !important;
}
.fc-media {
flex: 1;
height: 115px;
}
.fc-logo-container {
width: 100px;
height: 100px;
margin: auto;
margin-top: -60px;
border-radius: 90px;
border: 5px solid white;
}
.fc-logo {
width: 100px;
height: 100px;
margin: auto;
border-radius: 50%;
box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.fc-title {
font-weight: bold !important;
}
.fc-extra-info-wrapper {
display: flex;
align-items: center;
max-width: 50%;
}
.fc-two-line-ellipsis { .fc-two-line-ellipsis {
position: relative; position: relative;
line-height: 1em; line-height: 1em;
...@@ -19,16 +69,6 @@ ...@@ -19,16 +69,6 @@
.fc-root { .fc-root {
width: 250px * $fc-mdScale; width: 250px * $fc-mdScale;
height: 230px; height: 230px;
border-radius: 5px !important;
position: relative;
}
.fc-card-content {
padding: 8px 4px 0 4px !important;
}
.fc-small-grid-container-spacing {
margin: -2px -8px !important;
} }
.fc-small-grid-item-spacing { .fc-small-grid-item-spacing {
...@@ -36,7 +76,6 @@ ...@@ -36,7 +76,6 @@
} }
.fc-media { .fc-media {
flex: 1;
border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;
height: 115px * $fc-mdScale; height: 115px * $fc-mdScale;
} }
...@@ -44,24 +83,17 @@ ...@@ -44,24 +83,17 @@
.fc-logo-container { .fc-logo-container {
width: 100px * $fc-mdScale; width: 100px * $fc-mdScale;
height: 100px * $fc-mdScale; height: 100px * $fc-mdScale;
margin: auto;
margin-top: -60px * $fc-mdScale; margin-top: -60px * $fc-mdScale;
border-radius: 50%; border-radius: 50%;
border: 5px solid white; border: 5px * $fc-mdScale solid white;
} }
.fc-logo { .fc-logo {
width: 100px * $fc-mdScale; width: 100px * $fc-mdScale;
height: 100px * $fc-mdScale; height: 100px * $fc-mdScale;
margin: auto;
border-radius: 50%;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
} }
.fc-extra-info-wrapper { .fc-extra-info-wrapper {
display: flex;
align-items: center;
max-width: 50%;
font-size: 11px; font-size: 11px;
} }
...@@ -69,52 +101,4 @@ ...@@ -69,52 +101,4 @@
height: 20px !important; height: 20px !important;
width: 20px !important; width: 20px !important;
} }
}
@media screen and (min-width: 1680px) {
.fc-root {
width: 250px;
border-radius: 5px;
position: relative;
}
.fc-card-content {
padding: 8px 4px 0 4px !important;
}
.fc-small-grid-container-spacing {
margin: -2px -8px !important;
}
.fc-small-grid-item-spacing {
padding: 3px 8px !important;
}
.fc-media {
flex: 1;
height: 115px;
}
.fc-logo-container {
width: 100px;
height: 100px;
margin: auto;
margin-top: -60px;
border-radius: 90px;
border: 5px solid white;
}
.fc-logo {
width: 100px;
height: 100px;
margin: auto;
border-radius: 50%;
box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.fc-extra-info-wrapper {
display: flex;
align-items: center;
max-width: 50%;
}
} }
\ No newline at end of file
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
overflow-x: hidden;
} }
.layout-main-content { .layout-main-content {
...@@ -51,7 +52,7 @@ ...@@ -51,7 +52,7 @@
overflow-x: hidden; overflow-x: hidden;
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 960px) {
.layout-sidebar-toggle-container { .layout-sidebar-toggle-container {
display: none; display: none;
} }
......
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