Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
W
whats-open-web
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Service Desk
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Operations
Operations
Incidents
Environments
Packages & Registries
Packages & Registries
Package Registry
Container Registry
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Enes Tasbasi
whats-open-web
Commits
bf450a88
Commit
bf450a88
authored
Feb 04, 2020
by
Andrew Hrdy
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Remove @media queries for screen size
parent
f4ace873
Changes
13
Hide whitespace changes
Inline
Side-by-side
Showing
13 changed files
with
77 additions
and
73 deletions
+77
-73
src/components/AppBar.tsx
src/components/AppBar.tsx
+2
-6
src/containers/DesktopLayout.tsx
src/containers/DesktopLayout.tsx
+4
-4
src/containers/MobileLayout.tsx
src/containers/MobileLayout.tsx
+1
-1
src/containers/SearchBar.tsx
src/containers/SearchBar.tsx
+1
-3
src/styles/components/appBar.scss
src/styles/components/appBar.scss
+3
-3
src/styles/components/favoriteButton.scss
src/styles/components/favoriteButton.scss
+16
-15
src/styles/components/sidebar.scss
src/styles/components/sidebar.scss
+0
-10
src/styles/components/weekHours.scss
src/styles/components/weekHours.scss
+1
-7
src/styles/containers/desktopLayout.scss
src/styles/containers/desktopLayout.scss
+30
-0
src/styles/containers/facilityCard.scss
src/styles/containers/facilityCard.scss
+11
-15
src/styles/containers/searchBar.scss
src/styles/containers/searchBar.scss
+5
-5
src/styles/whatsOpen.scss
src/styles/whatsOpen.scss
+3
-1
src/styles/whatsOpenMobile.scss
src/styles/whatsOpenMobile.scss
+0
-3
No files found.
src/components/AppBar.tsx
View file @
bf450a88
...
...
@@ -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
'
}
/>
...
...
src/containers/DesktopLayout.tsx
View file @
bf450a88
...
...
@@ -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
>
...
...
src/containers/MobileLayout.tsx
View file @
bf450a88
...
...
@@ -43,7 +43,7 @@ export default () => {
return
(
<
div
className
=
{
'
mobile-layout-root
'
}
>
<
AppBar
isMobile
=
{
true
}
/>
<
AppBar
/>
{
showSpinner
&&
<
LoadingSpinner
/>
}
...
...
src/containers/SearchBar.tsx
View file @
bf450a88
...
...
@@ -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
>
...
...
src/styles/components/appBar.scss
View file @
bf450a88
...
...
@@ -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
;
}
...
...
src/styles/components/favoriteButton.scss
View file @
bf450a88
...
...
@@ -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
;
...
...
src/styles/components/sidebar.scss
View file @
bf450a88
...
...
@@ -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
src/styles/components/weekHours.scss
View file @
bf450a88
...
...
@@ -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
src/styles/containers/
l
ayout.scss
→
src/styles/containers/
desktopL
ayout.scss
View file @
bf450a88
@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
src/styles/containers/facilityCard.scss
View file @
bf450a88
...
...
@@ -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
;
}
}
}
}
}
...
...
src/styles/containers/searchBar.scss
View file @
bf450a88
...
...
@@ -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
;
...
...
src/styles/whatsOpen.scss
View file @
bf450a88
...
...
@@ -14,8 +14,10 @@
/* Containers */
@import
'./containers/alertContainer'
;
@import
'./containers/facilityCard'
;
@import
'./containers/
l
ayout'
;
@import
'./containers/
desktopL
ayout'
;
@import
'./containers/searchBar'
;
@import
"./containers/facilityDetail.scss"
;
@import
"./containers/mobileLayout.scss"
;
html
{
width
:
100%
;
...
...
src/styles/whatsOpenMobile.scss
View file @
bf450a88
@import
"./containers/mobileLayout.scss"
;
@import
"./containers/facilityDetail.scss"
;
body
{
overflow-y
:
auto
;
overflow-x
:
hidden
;
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment