Commit bf450a88 authored by Andrew Hrdy's avatar Andrew Hrdy

Remove @media queries for screen size

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