Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
SRCT
whats-open-web
Commits
f5b7adfd
Commit
f5b7adfd
authored
Nov 21, 2017
by
Andrew Hrdy
Browse files
Changes to card on mobile (short and fat design). Introduced breakpoints map (SASS)
parent
4615625b
Changes
4
Hide whitespace changes
Inline
Side-by-side
src/containers/FacilityCard.js
View file @
f5b7adfd
...
...
@@ -168,15 +168,13 @@ class FacilityCard extends React.Component {
<
FacilityCategory
category
=
{
facility
.
facility_category
}
/
>
<
/Grid
>
<
/Grid
>
<
/CardContent
>
<
CardActions
className
=
{
'
fc-card-actions
'
}
>
<
Grid
container
justify
=
{
'
space-around
'
}
>
<
Grid
item
className
=
{
'
fc-extra-info-wrapper
'
}
>
<
Grid
container
justify
=
{
'
space-around
'
}
className
=
{
'
fc-extra-info-wrapper
'
}
>
<
Grid
item
className
=
{
'
fc-extra-info
'
}
>
<
FacilityStatus
facility
=
{
facility
}
/
>
<
/Grid
>
<
Grid
item
className
=
{
'
fc-extra-info
-wrapper
'
}
>
<
Grid
item
className
=
{
'
fc-extra-info
'
}
>
<
Typography
type
=
{
'
caption
'
}
>
<
LocationOnIcon
className
=
{
'
fc-card-map-marker-icon
'
}
/
>
<
/Typography
>
...
...
@@ -184,12 +182,12 @@ class FacilityCard extends React.Component {
{
facility
.
facility_location
.
building
}
<
/Typography
>
<
/Grid
>
<
/Grid
>
<
Grid
item
className
=
{
classnames
(
'
fc-extra-info-wrapper
'
,
'
fc-toggle-map-btn-container
'
)}
>
<
Button
className
=
{
'
fc-toggle-map-btn
'
}
onClick
=
{
this
.
toggleMap
}
>
Open
Map
<
/Button
>
<
/Grid
>
<
Grid
item
className
=
{
'
fc-toggle-map-btn-container
'
}
>
<
Button
className
=
{
'
fc-toggle-map-btn
'
}
onClick
=
{
this
.
toggleMap
}
>
Open
Map
<
/Button
>
<
/Grid
>
<
/Card
Actions
>
<
/Card
Content
>
<
Dialog
open
=
{
this
.
state
.
isMapOpen
}
onRequestClose
=
{
this
.
toggleMap
}
classes
=
{{
paper
:
'
fc-map-dialog
'
}}
>
<
FacilitiesMap
facilities
=
{
facilities
}
facility
=
{
facility
}
isMapOpen
=
{
true
}
/
>
...
...
src/styles/_variables.scss
View file @
f5b7adfd
$breakpoints
:
(
xs
:
360px
,
sm
:
600px
,
md
:
900px
,
lg
:
1024px
,
xl
:
1680px
,
);
/* FacilityCard */
/*
This is the scaling that is applied to medium sized devices.
*/
$fc-mdScale
:
.8
;
$fc-lg-scale
:
.8
;
$fc-sm-scale
:
.75
;
/* Favorite Button */
$favorite-button-md-scale
:
.8
;
\ No newline at end of file
$favorite-button-lg-scale
:
.8
;
$favorite-button-sm-scale
:
.75
;
\ No newline at end of file
src/styles/components/favoriteButton.scss
View file @
f5b7adfd
...
...
@@ -20,10 +20,20 @@
color
:
rgba
(
0
,
0
,
0
,
0
);
}
@media
screen
and
(
min-width
:
1024px
)
and
(
max-width
:
1679px
)
{
//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-md-scale
!
important
;
width
:
24px
*
$favorite-button-md-scale
!
important
;
padding
:
5px
*
$favorite-button-md-scale
!
important
;
height
:
24px
*
$favorite-button-lg-scale
!
important
;
width
:
24px
*
$favorite-button-lg-scale
!
important
;
padding
:
5px
*
$favorite-button-lg-scale
!
important
;
}
}
//Under lg
@media
screen
and
(
max-width
:
map-get
(
$breakpoints
,
lg
))
{
.favorite-button-heart
{
height
:
24px
*
$favorite-button-sm-scale
!
important
;
width
:
24px
*
$favorite-button-sm-scale
!
important
;
padding
:
5px
*
$favorite-button-sm-scale
!
important
;
}
}
\ No newline at end of file
src/styles/containers/facilityCard.scss
View file @
f5b7adfd
...
...
@@ -5,7 +5,7 @@
}
.fc-card-content
{
padding
:
8px
4px
0
4px
!
important
;
padding
:
8px
4px
!
important
;
}
.fc-small-grid-container-spacing
{
...
...
@@ -47,12 +47,16 @@
font-weight
:
bold
!
important
;
}
.fc-extra-info
-wrapper
{
.fc-extra-info
{
display
:
flex
;
align-items
:
center
;
max-width
:
50%
;
}
.fc-extra-info-wrapper
{
padding-top
:
8px
;
}
.fc-two-line-ellipsis
{
position
:
relative
;
line-height
:
1em
;
...
...
@@ -82,9 +86,10 @@
overflow
:
hidden
;
}
@media
screen
and
(
min-width
:
1024px
)
and
(
max-width
:
1679px
)
{
//Between lg and xl
@media
screen
and
(
min-width
:
map-get
(
$breakpoints
,
lg
))
and
(
max-width
:
map-get
(
$breakpoints
,
xl
))
{
.fc-root
{
width
:
250px
*
$fc-
mdS
cale
;
width
:
250px
*
$fc-
lg-s
cale
;
height
:
230px
;
}
...
...
@@ -93,24 +98,23 @@
}
.fc-media
{
border-radius
:
5px
5px
0
0
;
height
:
115px
*
$fc-mdScale
;
height
:
115px
*
$fc-lg-scale
;
}
.fc-logo-container
{
width
:
100px
*
$fc-
mdS
cale
;
height
:
100px
*
$fc-
mdS
cale
;
margin-top
:
-60px
*
$fc-
mdS
cale
;
width
:
100px
*
$fc-
lg-s
cale
;
height
:
100px
*
$fc-
lg-s
cale
;
margin-top
:
-60px
*
$fc-
lg-s
cale
;
border-radius
:
50%
;
border
:
5px
*
$fc-
mdS
cale
solid
white
;
border
:
5px
*
$fc-
lg-s
cale
solid
white
;
}
.fc-logo
{
width
:
100px
*
$fc-
mdS
cale
;
height
:
100px
*
$fc-
mdS
cale
;
width
:
100px
*
$fc-
lg-s
cale
;
height
:
100px
*
$fc-
lg-s
cale
;
}
.fc-extra-info
-wrapper
{
.fc-extra-info
{
font-size
:
11px
;
}
...
...
@@ -120,10 +124,9 @@
}
}
@media
screen
and
(
max-width
:
1023px
)
{
//Under lg
@media
screen
and
(
max-width
:
map-get
(
$breakpoints
,
lg
))
{
.fc-root
{
@include
transition
(
150ms
ease-in-out
);
&
.fc-selected
{
.fc-one-line-ellipsis
{
white-space
:
normal
;
...
...
@@ -138,20 +141,49 @@
width
:
100%
!
important
;
}
.fc-extra-info
-wrapper
{
max-width
:
100%
;
.fc-extra-info
{
max-width
:
100%
;
width
:
100%
;
justify-content
:
center
;
padding
:
4px
!
important
;
padding
:
4px
8px
!
important
;
}
.fc-card-actions
{
height
:
inherit
!
important
;
padding-top
:
8px
!
important
;
.fc-card-content
{
padding-bottom
:
0
!
important
;
}
}
}
.fc-small-grid-item-spacing
{
padding
:
0
8px
!
important
;
}
.fc-media
{
height
:
115px
*
$fc-sm-scale
;
}
.fc-logo-container
{
width
:
100px
*
$fc-sm-scale
;
height
:
100px
*
$fc-sm-scale
;
margin-top
:
-60px
*
$fc-sm-scale
;
border-radius
:
50%
;
border
:
5px
*
$fc-sm-scale
solid
white
;
}
.fc-logo
{
width
:
100px
*
$fc-sm-scale
;
height
:
100px
*
$fc-sm-scale
;
}
.fc-extra-info
{
font-size
:
11px
;
}
.fc-card-map-marker-icon
{
height
:
20px
!
important
;
width
:
20px
!
important
;
}
.fc-map-dialog
{
width
:
100%
!
important
;
}
...
...
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