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

Remove @media queries for screen size

parent f4ace873
...@@ -4,17 +4,13 @@ import SearchBar from '../containers/SearchBar'; ...@@ -4,17 +4,13 @@ import SearchBar from '../containers/SearchBar';
import AlertContainer from '../containers/AlertContainer'; import AlertContainer from '../containers/AlertContainer';
import { AppBar, Toolbar, Typography, Button } from '@material-ui/core'; import { AppBar, Toolbar, Typography, Button } from '@material-ui/core';
interface AppBarProps { export default () => {
isMobile?: boolean;
}
export default ({isMobile}: AppBarProps) => {
const [isSearchExpanded, setIsSearchExpanded] = React.useState<boolean>(false); const [isSearchExpanded, setIsSearchExpanded] = React.useState<boolean>(false);
return ( return (
<div> <div>
<AppBar position="absolute" <AppBar position="absolute"
className={classNames('app-bar', isSearchExpanded && 'app-bar-search-expanded', isMobile && 'app-bar-mobile')}> className={classNames('app-bar', isSearchExpanded && 'app-bar-search-expanded')}>
<Toolbar className={'app-bar-tool-bar'}> <Toolbar className={'app-bar-tool-bar'}>
<div className={'app-bar-logo-name'}> <div className={'app-bar-logo-name'}>
<img src={'favicon.png'} className={'app-bar-logo'}/> <img src={'favicon.png'} className={'app-bar-logo'}/>
......
...@@ -36,14 +36,14 @@ export default () => { ...@@ -36,14 +36,14 @@ export default () => {
const showSpinner = isFetching && (!facilities || facilities.length === 0); const showSpinner = isFetching && (!facilities || facilities.length === 0);
return ( return (
<div className={'layout-root'}> <div className={'desktop-layout-root'}>
<AppBar /> <AppBar />
{showSpinner && <LoadingSpinner />} {showSpinner && <LoadingSpinner />}
<div className={'layout-container'}> <div className={'desktop-layout-container'}>
<div className={'layout-main-content'}> <div className={'desktop-layout-main-content'}>
<div className={'layout-card-container'}> <div className={'desktop-layout-card-container'}>
<CardContainer facilities={filterFacilities(facilities, searchTerm.searchTerm, searchTerm.campusRegion)} showFavoriteIcons={true} /> <CardContainer facilities={filterFacilities(facilities, searchTerm.searchTerm, searchTerm.campusRegion)} showFavoriteIcons={true} />
</div> </div>
</div> </div>
......
...@@ -43,7 +43,7 @@ export default () => { ...@@ -43,7 +43,7 @@ export default () => {
return ( return (
<div className={'mobile-layout-root'}> <div className={'mobile-layout-root'}>
<AppBar isMobile={true} /> <AppBar />
{showSpinner && <LoadingSpinner />} {showSpinner && <LoadingSpinner />}
......
...@@ -4,7 +4,6 @@ import { useDispatch } from 'react-redux'; ...@@ -4,7 +4,6 @@ import { useDispatch } from 'react-redux';
import { CampusRegion } from '../models/facility.model'; import { CampusRegion } from '../models/facility.model';
import { setSearchTermAction, setSelectedCampusRegionAction } from '../store/ui/ui.actions'; import { setSearchTermAction, setSelectedCampusRegionAction } from '../store/ui/ui.actions';
import { trackPiwikEvent } from '../piwik/piwik'; import { trackPiwikEvent } from '../piwik/piwik';
import { isMobile } from 'react-device-detect';
import { IconButton, Input, Paper, MenuItem, Select, FormControl } from '@material-ui/core'; import { IconButton, Input, Paper, MenuItem, Select, FormControl } from '@material-ui/core';
import SearchIcon from '@material-ui/icons/Search'; import SearchIcon from '@material-ui/icons/Search';
import CloseIcon from '@material-ui/icons/Close'; import CloseIcon from '@material-ui/icons/Close';
...@@ -80,8 +79,7 @@ export default ({onSearchExpand, onSearchCollapse}: SearchBarProps) => { ...@@ -80,8 +79,7 @@ export default ({onSearchExpand, onSearchCollapse}: SearchBarProps) => {
return ( return (
<Paper className={classNames('search-bar-paper-background', isFocused && 'search-bar-focus', <Paper className={classNames('search-bar-paper-background', isFocused && 'search-bar-focus',
value && 'search-bar-has-value', isMobileOpen && 'search-bar-mobile-open', value && 'search-bar-has-value', isMobileOpen && 'search-bar-mobile-open')}>
isMobile && 'search-bar-mobile')}>
<IconButton onClick={handleMobileExpand} disableRipple={true} className={'search-bar-search-btn'}> <IconButton onClick={handleMobileExpand} disableRipple={true} className={'search-bar-search-btn'}>
<SearchIcon className={'search-bar-search-icon'}/> <SearchIcon className={'search-bar-search-icon'}/>
</IconButton> </IconButton>
......
...@@ -28,13 +28,13 @@ ...@@ -28,13 +28,13 @@
align-items: center; align-items: center;
} }
.app-bar:not(.app-bar-mobile) { .desktop-layout-root {
.app-bar-logo-name { .app-bar-logo-name {
margin-right: auto !important; margin-right: auto !important;
} }
} }
.app-bar-mobile { .mobile-layout-root {
.app-bar-link-container { .app-bar-link-container {
display: none !important; display: none !important;
} }
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
justify-content: space-between; justify-content: space-between;
} }
&.app-bar-search-expanded { .app-bar-search-expanded {
.app-bar-tool-bar { .app-bar-tool-bar {
padding: 0 !important; padding: 0 !important;
} }
......
...@@ -15,28 +15,29 @@ ...@@ -15,28 +15,29 @@
color: #E91E63 !important; //TODO: Somehow use materials color system color: #E91E63 !important; //TODO: Somehow use materials color system
} }
//Between lg and xl .desktop-layout-root {
@media screen and (min-width: map-get($breakpoints, lg)) and (max-width: map-get($breakpoints, xl)) { //Between lg and xl
.favorite-button-heart { @media screen and (min-width: map-get($breakpoints, lg)) and (max-width: map-get($breakpoints, xl)) {
height: 24px * $favorite-button-lg-scale !important; .favorite-button-heart {
width: 24px * $favorite-button-lg-scale !important; height: 24px * $favorite-button-lg-scale !important;
padding: 5px * $favorite-button-lg-scale !important; width: 24px * $favorite-button-lg-scale !important;
padding: 5px * $favorite-button-lg-scale !important;
}
} }
}
//Above lg //Above lg
@media screen and (min-width: map-get($breakpoints, lg)) { @media screen and (min-width: map-get($breakpoints, lg)) {
.favorite-button-heart-hover { .favorite-button-heart-hover {
color: grey; color: grey;
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
color: white; color: white;
}
} }
} }
} }
//Under lg .mobile-layout-root {
@media screen and (max-width: map-get($breakpoints, lg) - 1px) {
.favorite-button-heart { .favorite-button-heart {
top: 5px; top: 5px;
left: 5px; left: 5px;
......
...@@ -90,14 +90,4 @@ ...@@ -90,14 +90,4 @@
.sidebar-scroll { .sidebar-scroll {
height: calc(100% - 220px - 116px - 32px) !important; height: calc(100% - 220px - 116px - 32px) !important;
overflow-y: auto; overflow-y: auto;
}
@media screen and (max-width: map-get($breakpoints, lg) - 1px) {
.sidebar-root {
display: none !important;
}
.sidebar-container {
display: none !important;
}
} }
\ No newline at end of file
...@@ -2,10 +2,4 @@ ...@@ -2,10 +2,4 @@
.week-hours-row { .week-hours-row {
font-size: 14px; font-size: 14px;
} }
\ No newline at end of file
/*@media screen and (max-width: map-get($breakpoints, lg) - 1px) {
.week-hours-row {
justify-content: center;
}
}*/
\ No newline at end of file
@import '../_variables.scss'; @import '../_variables.scss';
.layout-root { .desktop-layout-root {
padding-top: 64px; padding-top: 64px;
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
} }
.layout-container { .desktop-layout-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
.layout-main-content { .desktop-layout-main-content {
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
flex: 1 1 100%; flex: 1 1 100%;
...@@ -23,42 +23,8 @@ ...@@ -23,42 +23,8 @@
width: 100%; width: 100%;
} }
.layout-sidebar-toggle-container { .desktop-layout-card-container {
width: 16px;
position: relative;
}
.layout-sidebar-toggle-btn {
width: 24px;
height: 54px;
position: absolute;
top: 16px;
right: -1px;
border: 0;
background-color: white;
box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
outline: none;
border-radius: 1px;
}
.layout-arrow-icon {
position: absolute;
top: 16px;
right: 0;
color: rgba(0, 0, 0, 0.54);
width: 24px !important;
height: 24px !important;
}
.layout-card-container {
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
}
@media screen and (max-width: map-get($breakpoints, lg) - 1px) {
.layout-sidebar-toggle-container {
display: none;
}
} }
\ No newline at end of file
...@@ -7,19 +7,6 @@ ...@@ -7,19 +7,6 @@
position: relative; position: relative;
} }
//Above lg
@media screen and (min-width: map-get($breakpoints, lg)) {
.fc-root:hover {
.favorite-button-heart {
color: grey;
@media (prefers-color-scheme: dark) {
color: white;
}
}
}
}
.fc-card-content { .fc-card-content {
padding: 8px 4px 0 !important; padding: 8px 4px 0 !important;
} }
...@@ -94,14 +81,23 @@ ...@@ -94,14 +81,23 @@
} }
} }
//Above lg .desktop-layout-root {
@media screen and (min-width: map-get($breakpoints, lg)) {
.fc-root { .fc-root {
@include transition(150ms ease-in-out); @include transition(150ms ease-in-out);
&.fc-selected { &.fc-selected {
transform: scale(.9); transform: scale(.9);
} }
&:hover {
.favorite-button-heart {
color: grey;
@media (prefers-color-scheme: dark) {
color: white;
}
}
}
} }
} }
......
...@@ -48,8 +48,8 @@ ...@@ -48,8 +48,8 @@
justify-content: center; justify-content: center;
} }
.search-bar-paper-background:not(.search-bar-mobile) { .desktop-layout-root {
&.search-bar-focus { .search-bar-focus {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.24) !important; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.24) !important;
border: 1px solid rgba(0, 0, 0, 0.15); border: 1px solid rgba(0, 0, 0, 0.15);
} }
...@@ -65,8 +65,8 @@ ...@@ -65,8 +65,8 @@
} }
} }
.search-bar-mobile { .mobile-layout-root {
&.search-bar-paper-background { .search-bar-paper-background {
width: auto !important; width: auto !important;
&.search-bar-mobile-open { &.search-bar-mobile-open {
...@@ -91,7 +91,7 @@ ...@@ -91,7 +91,7 @@
display: none !important; display: none !important;
} }
&.search-bar-mobile-open { .search-bar-mobile-open {
&.search-bar-has-value { &.search-bar-has-value {
.search-bar-close-btn { .search-bar-close-btn {
display: inline-flex !important; display: inline-flex !important;
......
...@@ -14,8 +14,10 @@ ...@@ -14,8 +14,10 @@
/* Containers */ /* Containers */
@import './containers/alertContainer'; @import './containers/alertContainer';
@import './containers/facilityCard'; @import './containers/facilityCard';
@import './containers/layout'; @import './containers/desktopLayout';
@import './containers/searchBar'; @import './containers/searchBar';
@import "./containers/facilityDetail.scss";
@import "./containers/mobileLayout.scss";
html { html {
width: 100%; width: 100%;
......
@import "./containers/mobileLayout.scss";
@import "./containers/facilityDetail.scss";
body { body {
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
......
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