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
};
return (
<Paper
className={classNames(['sidebar-root', (!isSidebarOpen && 'sidebar-open'), (isSidebarOpen && 'sidebar-closed')])}>
<div className={'sidebar-row1'}>
......
......@@ -156,7 +156,7 @@ class FacilityCard extends React.Component {
<CardContent className={'fc-card-content'}>
<Grid container align={'center'} direction={'column'} className={'fc-small-grid-container-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)}
</Typography>
</Grid>
......
......@@ -97,11 +97,6 @@ function getSuggestions(value,suggestions) {
}
const styles = theme => ({
'@media screen and (max-width: 600px)': {
paperBackground: {
width: '90% !important'
}
},
container: {
flexGrow: 1,
position: 'relative',
......@@ -133,7 +128,8 @@ const styles = theme => ({
},
paperBackground:{
height:54,
width:600,
maxWidth:600,
width:'90%',
display:'flex',
margin:'0px auto 16px auto',
},
......
.facility-status-text {
display: flex;
display: flex !important;
align-items: center;
}
\ No newline at end of file
......@@ -54,7 +54,7 @@
width: 100%;
}
@media screen and (max-width: 600px) {
@media screen and (max-width: 960px) {
.sidebar-root {
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 {
position: relative;
line-height: 1em;
......@@ -19,16 +69,6 @@
.fc-root {
width: 250px * $fc-mdScale;
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 {
......@@ -36,7 +76,6 @@
}
.fc-media {
flex: 1;
border-radius: 5px 5px 0 0;
height: 115px * $fc-mdScale;
}
......@@ -44,24 +83,17 @@
.fc-logo-container {
width: 100px * $fc-mdScale;
height: 100px * $fc-mdScale;
margin: auto;
margin-top: -60px * $fc-mdScale;
border-radius: 50%;
border: 5px solid white;
border: 5px * $fc-mdScale solid white;
}
.fc-logo {
width: 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 {
display: flex;
align-items: center;
max-width: 50%;
font-size: 11px;
}
......@@ -70,51 +102,3 @@
width: 20px !important;
}
}
\ No newline at end of file
@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 @@
width: 100%;
height: 100%;
display: flex;
overflow-x: hidden;
}
.layout-main-content {
......@@ -51,7 +52,7 @@
overflow-x: hidden;
}
@media screen and (max-width: 600px) {
@media screen and (max-width: 960px) {
.layout-sidebar-toggle-container {
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