maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-28 20:53:24 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'master' into searchPage-review

Browse source
This commit is contained in:
Janne Koivistoinen 2017-07-19 16:21:04 +03:00 • committed by GitHub
commit 88eef96ac6
28 changed files with 97 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/BookingBreakdown/BookingBreakdown.css
View file

@ -17,7 +17,7 @@
baseline. */
margin: -1px 0 0 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin: -1px 0 0 0;
}
@ -56,7 +56,7 @@
@apply --marketplaceH2FontStyles;
margin: 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin: 0;
}
}

2
src/components/DateRangeInputField/DateRangeInput.css
View file

@ -67,7 +67,7 @@
margin-top: 0;
margin-bottom: 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}

2
src/components/DateRangeInputField/DateRangeInputField.css
View file

@ -19,7 +19,7 @@
margin-top: 0;
margin-bottom: 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}

8
src/components/HeroSection/HeroSection.css
View file

@ -43,7 +43,7 @@
margin-top: auto;
margin-bottom: 22px;
@media (--desktopViewport) {
@media (--viewportMedium) {
max-width: var(--desktopTitleMaxWidth);
margin-top: auto;
margin-bottom: 22px;
@ -55,7 +55,7 @@
margin-bottom: 63px;
margin-top: 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
max-width: var(--desktopTitleMaxWidth);
}
}
@ -64,7 +64,7 @@
border-radius: 4px;
flex-shrink: 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
display: none;
}
}
@ -85,7 +85,7 @@
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
@media (--desktopViewport) {
@media (--viewportMedium) {
display: block;
width: 400px;
}

8
src/components/ListingCard/ListingCard.css
View file

@ -66,7 +66,7 @@
margin-top: 0;
margin-bottom: 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}
@ -81,7 +81,7 @@
margin-top: 0;
margin-bottom: 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}
@ -102,7 +102,7 @@
margin-top: 0;
margin-bottom: 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}
@ -118,7 +118,7 @@
margin-top: 0;
margin-bottom: 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}

6
src/components/LocationAutocompleteInput/LocationAutocompleteInput.css
View file

@ -28,7 +28,7 @@
stroke: var(--marketplaceColor);
stroke-width: 2.5px;
@media (--desktopViewport) {
@media (--viewportMedium) {
stroke-width: 2px;
}
@ -85,7 +85,7 @@ bottom of the container.
background-size: auto var(--poweredImageHeight);
background-position: center;
@media (--desktopViewport) {
@media (--viewportMedium) {
background-position: center left var(--sidePaddingDesktop);
}
}
@ -105,7 +105,7 @@ bottom of the container.
/* Assign enough vertical padding to make the element at least 44px high */
padding: 9px var(--sidePadding);
@media (--desktopViewport) {
@media (--viewportMedium) {
color: var(--matterColorLightTransparent);
padding: 10px var(--sidePaddingDesktop);
margin: 0;

2
src/components/MapPriceMarker/MapPriceMarker.css
View file

@ -44,7 +44,7 @@
}
/* Overwrite dimensions from font styles */
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}

26
src/components/MapPriceMarker/OverlayLayer.js
View file

@ -8,29 +8,28 @@ class OverlayLayer extends Component {
this.onAdd = this.onAdd.bind(this);
this.onRemove = this.onRemove.bind(this);
this.draw = this.draw.bind(this);
this.overlayView = null;
this.overlayContainer = null;
}
componentDidMount() {
// https://developers.google.com/maps/documentation/javascript/3.exp/reference#OverlayView
const overlayView = new window.google.maps.OverlayView();
this.overlayView = new window.google.maps.OverlayView();
// As stated by Google these three methods must implemented: onAdd(), draw(), and onRemove().
overlayView.onAdd = this.onAdd;
overlayView.draw = this.draw;
overlayView.onRemove = this.onRemove;
this.overlayView.onAdd = this.onAdd;
this.overlayView.draw = this.draw;
this.overlayView.onRemove = this.onRemove;
// You must call setMap() with a valid Map object to trigger the call to
// the onAdd() method and setMap(null) in order to trigger the onRemove() method.
overlayView.setMap(props.map);
this.overlayView.setMap(this.props.map);
this.state = { overlayView };
}
componentWillMount() {
const onAddOverlay = this.props.onAddOverlay;
if (onAddOverlay) {
// If onAddOverlay is saving anything to parent component's state,
// it must be called here to avoid warnings.
onAddOverlay(this.state.overlayView);
onAddOverlay(this.overlayView);
}
}
@ -39,7 +38,7 @@ class OverlayLayer extends Component {
}
componentWillUnmount() {
const overlayView = this.state.overlayView;
const overlayView = this.overlayView;
if (overlayView) {
overlayView.setMap(null);
overlayView.onAdd = null;
@ -62,9 +61,8 @@ class OverlayLayer extends Component {
}
draw() {
const overlayView = this.state.overlayView;
// https://developers.google.com/maps/documentation/javascript/3.exp/reference#MapCanvasProjection
const overlayProjection = overlayView.getProjection();
const overlayProjection = this.overlayView.getProjection();
// render children to overlayContainer.
if (this.overlayContainer) {
@ -74,7 +72,7 @@ class OverlayLayer extends Component {
// Add the element to the "overlayMouseTarget" pane.
// https://developers.google.com/maps/documentation/javascript/3.exp/reference#MapPanes
const mapPanes = this.state.overlayView.getPanes();
const mapPanes = this.overlayView.getPanes();
if (mapPanes && this.overlayContainer) {
const geolocation = this.props.geolocation;

2
src/components/NotificationBadge/NotificationBadge.css
View file

@ -21,7 +21,7 @@
/* Font margins off */
margin-top: 0;
margin-bottom: 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}

2
src/components/OrderDetailsPanel/OrderDetailsPanel.css
View file

@ -37,7 +37,7 @@
margin-top: 5px;
margin-bottom: 14px;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 5px;
margin-bottom: 14px;
}

2
src/components/ResponsiveImage/ResponsiveImage.css
View file

@ -30,7 +30,7 @@
padding-bottom: 24px;
margin-bottom: 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-bottom: 0;
}
}

4
src/components/SaleDetailsPanel/SaleDetailsPanel.css
View file

@ -18,7 +18,7 @@
flex: 1;
margin: 0 12px 0 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin: 0 12px 0 0;
}
}
@ -46,7 +46,7 @@
margin-top: 5px;
margin-bottom: 14px;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 5px;
margin-bottom: 14px;
}

2
src/components/TabNav/TabNav.css
View file

@ -30,7 +30,7 @@
color: var(--matterColorDark);
}
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}

4
src/components/Topbar/Topbar.css
View file

@ -25,7 +25,7 @@
/* shadows */
box-shadow: var(--boxShadow);
@media (--desktopViewport) {
@media (--viewportMedium) {
display: none;
}
}
@ -100,7 +100,7 @@
.desktop {
display: none;
@media (--desktopViewport) {
@media (--viewportMedium) {
display: block;
}
}

8
src/components/TopbarDesktop/TopbarDesktop.css
View file

@ -10,7 +10,7 @@
margin: 24px 0;
text-decoration: inherit;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin: 24px 0;
}
}
@ -112,7 +112,7 @@
color: var(--marketplaceColorDark);
}
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}
@ -136,7 +136,7 @@
color: var(--matterColorDark);
}
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}
@ -237,7 +237,7 @@
border-left: 6px solid var(--marketplaceColor);
}
@media (--desktopViewport) {
@media (--viewportMedium) {
margin: 0;
}
}

4
src/containers/BookingDatesForm/BookingDatesForm.css
View file

@ -21,7 +21,7 @@
margin-top: 5px;
margin-bottom: 14px;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 5px;
margin-bottom: 14px;
}
@ -45,7 +45,7 @@
margin: auto 24px 20px 24px;
flex-shrink: 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}

8
src/containers/CheckoutPage/CheckoutPage.css
View file

@ -19,7 +19,7 @@
width: 100%;
margin-top: 0;
margin-bottom: 7px;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 7px;
}
@ -43,7 +43,7 @@
margin-top: 0;
margin-bottom: 14px;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 14px;
}
@ -63,7 +63,7 @@
margin-top: 0;
margin-bottom: 14px;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 14px;
}
@ -97,7 +97,7 @@
/* shadows */
box-shadow: var(--boxShadow);
@media (--desktopViewport) {
@media (--viewportMedium) {
display: none;
}
}

2
src/containers/EditListingPage/EditListingPage.css
View file

@ -17,7 +17,7 @@
/* shadows */
box-shadow: none;
@media (--desktopViewport) {
@media (--viewportMedium) {
display: none;
}
}

4
src/containers/EditListingPhotosForm/EditListingPhotosForm.css
View file

@ -74,7 +74,7 @@
margin-top: 0;
margin-bottom: 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}
@ -86,7 +86,7 @@
margin-top: 0;
margin-bottom: 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}

10
src/containers/InboxPage/InboxPage.css
View file

@ -17,7 +17,7 @@
/* shadows */
box-shadow: none;
@media (--desktopViewport) {
@media (--viewportMedium) {
display: none;
}
}
@ -46,7 +46,7 @@
/* Layout */
margin-top: 0;
margin-bottom: 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}
@ -136,7 +136,7 @@
margin-top: 3px;
margin-bottom: 0px;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}
@ -148,7 +148,7 @@
margin-top: 0px;
margin-bottom: 0px;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 4px;
margin-bottom: 0;
}
@ -160,7 +160,7 @@
margin-top: 4px;
margin-bottom: 0px;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 4px;
margin-bottom: 0;
}

2
src/containers/LandingPage/LandingPage.css
View file

@ -11,7 +11,7 @@
flex-direction: column;
min-height: calc(100vh - var(--topbarHeight));
@media (--desktopViewport) {
@media (--viewportMedium) {
min-height: calc(100vh - var(--topbarHeightDesktop));
}
}

16
src/containers/ListingPage/ListingPage.css
View file

@ -68,7 +68,7 @@
background-color: var(--matterColorAnti);
color: var(--matterColorLight);
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}
@ -94,7 +94,7 @@
width: 100%;
margin-top: 0;
margin-bottom: 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}
@ -105,7 +105,7 @@
@apply --marketplaceH4FontStyles;
margin-top: 7px;
margin-bottom: 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}
@ -122,7 +122,7 @@
margin-top: 0;
margin-bottom: 13px;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 13px;
}
@ -131,7 +131,7 @@
.description {
margin-top: 0;
margin-bottom: 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}
@ -148,7 +148,7 @@
margin-top: 0;
margin-bottom: 20px;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 24px;
}
@ -193,7 +193,7 @@
margin-top: 0;
margin-bottom: 0px;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}
@ -206,7 +206,7 @@
margin-top: 0;
margin-bottom: 0px;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}

2
src/containers/PayoutDetailsForm/PayoutDetailsForm.css
View file

@ -14,7 +14,7 @@
margin-top: 0;
margin-bottom: 13px;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 13px;
}

12
src/containers/SearchPage/SearchPage.css
View file

@ -5,7 +5,7 @@
}
.topbar {
@media (--desktopViewport) {
@media (--viewportMedium) {
position: fixed;
top: 0;
left: 0;
@ -20,7 +20,7 @@
flex-grow: 1;
display: flex;
@media (--desktopViewport) {
@media (--viewportMedium) {
position: relative;
padding-top: var(--topbarHeightDesktop);
min-height: var(--containerHeight);
@ -32,7 +32,7 @@
display: flex;
flex-direction: column;
@media (--desktopViewport) {
@media (--viewportMedium) {
/**
* .container is using flexbox,
* This specifies that searchResultContainer is taking 60% from the viewport width
@ -76,7 +76,7 @@
.mapPanel {
display: none;
@media (--desktopViewport) {
@media (--viewportMedium) {
/**
* .container is using flexbox,
* This specifies that mapPanel is taking 34% from the viewport width
@ -94,7 +94,9 @@
}
.map {
@media (--desktopViewport) {
@media (--viewportMedium) {
/* Map is fixed so that it doesn't scroll along search results */
position: fixed;
top: var(--topbarHeightDesktop);
right: 0;

20
src/containers/StyleguidePage/StyleguidePage.css
View file

@ -4,7 +4,7 @@
display: flex;
flex-direction: column;
@media (--desktopViewport) {
@media (--viewportMedium) {
flex-direction: row;
}
}
@ -12,7 +12,7 @@
.withPadding {
padding: calc(2 * var(--spacingUnit));
@media (--desktopViewport) {
@media (--viewportMedium) {
padding: calc(2 * var(--spacingUnitDesktop));
}
}
@ -21,7 +21,7 @@
.defaultWrapperStyles {
margin: calc(2 * var(--spacingUnit)) 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin: calc(2 * var(--spacingUnitDesktop)) 0;
}
}
@ -37,7 +37,7 @@
flex-grow: 1;
composes: withPadding;
@media (--desktopViewport) {
@media (--viewportMedium) {
padding: 48px 0 0 16px;
}
}
@ -74,7 +74,7 @@
background-image: url('data:image/svg+xml;utf8,<svg width="10" height="24" viewBox="0 0 10 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h10M0 06h10M0 12h10" stroke="#ccc" shape-rendering="crispEdges" /><path d="M0 18h10" stroke="#ddd" stroke-width="1" shape-rendering="crispEdges" /></svg>');
background-repeat: repeat;
@media (--desktopViewport) {
@media (--viewportMedium) {
background-image: url('data:image/svg+xml;utf8,<svg width="10" height="24" viewBox="0 0 10 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h10" stroke="#ddd" stroke-width="1" shape-rendering="crispEdges" /><path d="M0 08h10M0 16h10M0" stroke="#ccc" shape-rendering="crispEdges" /></svg>');
background-repeat: repeat;
}
@ -83,7 +83,7 @@
.spacing2x {
margin: calc(2 * var(--spacingUnit)) 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin: calc(2 * var(--spacingUnitDesktop)) 0;
}
}
@ -93,7 +93,7 @@
flex-wrap: wrap;
margin-top: 15px;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 19px;
}
}
@ -106,7 +106,7 @@
margin-right: calc(2 * var(--spacingUnit));
margin-bottom: calc(2 * var(--spacingUnit) + 2px);
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-right: calc(2 * var(--spacingUnitDesktop));
margin-bottom: calc(2 * var(--spacingUnitDesktop) + 2px);
}
@ -130,7 +130,7 @@
border-width: 1px;
border-top-color: transparent;
@media (--desktopViewport) {
@media (--viewportMedium) {
padding: calc(2 * var(--spacingUnitDesktop) - 3px) calc(2 * var(--spacingUnitDesktop));
}
}
@ -180,7 +180,7 @@
background-color: #fff;
padding: calc(2 * var(--spacingUnit));
@media (--desktopViewport) {
@media (--viewportMedium) {
padding: calc(2 * var(--spacingUnitDesktop) - 2px) calc(2 * var(--spacingUnitDesktop));
}
}

2
src/containers/TopbarSearchForm/TopbarSearchForm.css
View file

@ -70,7 +70,7 @@
margin-top: 0;
margin-bottom: 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
font-weight: var(--fontWeightSemiBold);

8
src/marketplace.css
View file

@ -94,7 +94,7 @@
line-height: 24px;
letter-spacing: -0.3px;
@media (--desktopViewport) {
@media (--viewportMedium) {
/* TODO: Make sure button text aligns with the baseline */
}
}
@ -238,7 +238,9 @@
/* ================ Custom media queries ================ */
@custom-media --desktopViewport (min-width: 768px);
@custom-media --viewportMedium (min-width: 768px);
@custom-media --viewportLarge (min-width: 1024px);
@custom-media --viewportXLarge (min-width: 1921px);
/* ================ Fonts ================ */
@ -299,7 +301,7 @@ label {
margin-top: 0;
margin-bottom: 0;
@media (--desktopViewport) {
@media (--viewportMedium) {
margin-top: 0;
margin-bottom: 0;
}

20
src/marketplaceFonts.css
View file

@ -15,7 +15,7 @@
letter-spacing: -0.1px;
/* No margins for default font */
@media (--desktopViewport) {
@media (--viewportMedium) {
font-size: 20px;
line-height: 24px;
}
@ -31,7 +31,7 @@
margin-top: 12px;
margin-bottom: 12px;
@media (--desktopViewport) {
@media (--viewportMedium) {
font-size: 20px;
line-height: 24px;
/* margin-top + n * line-height + margin-bottom => x * 8px */
@ -50,7 +50,7 @@
margin-top: 25px;
margin-bottom: 29px;
@media (--desktopViewport) {
@media (--viewportMedium) {
font-size: 90px;
line-height: 96px;
letter-spacing: -2px;
@ -69,7 +69,7 @@
margin-top: 18px;
margin-bottom: 18px;
@media (--desktopViewport) {
@media (--viewportMedium) {
font-size: 48px;
line-height: 56px;
letter-spacing: -1px;
@ -88,7 +88,7 @@
margin-top: 21px;
margin-bottom: 17px;
@media (--desktopViewport) {
@media (--viewportMedium) {
line-height: 32px;
/* margin-top + n * line-height + margin-bottom => x * 8px */
margin-top: 21px;
@ -105,7 +105,7 @@
margin-top: 16px;
margin-bottom: 14px;
@media (--desktopViewport) {
@media (--viewportMedium) {
/* margin-top + n * line-height + margin-bottom => x * 8px */
margin-top: 16px;
margin-bottom: 16px;
@ -121,7 +121,7 @@
margin-top: 12px;
margin-bottom: 12px;
@media (--desktopViewport) {
@media (--viewportMedium) {
font-weight: var(--fontWeightMedium);
/* margin-top + n * line-height + margin-bottom => x * 8px */
margin-top: 17px;
@ -138,7 +138,7 @@
margin-top: 10px;
margin-bottom: 8px;
@media (--desktopViewport) {
@media (--viewportMedium) {
font-size: 16px;
line-height: 20px;
/* margin-top + n * line-height + margin-bottom => x * 8px */
@ -157,7 +157,7 @@
margin-top: 10px;
margin-bottom: 8px;
@media (--desktopViewport) {
@media (--viewportMedium) {
line-height: 16px;
/* margin-top + n * line-height + margin-bottom => x * 8px */
margin-top: 10px;
@ -174,7 +174,7 @@
margin-top: 9.5px;
margin-bottom: 8.5px;
@media (--desktopViewport) {
@media (--viewportMedium) {
line-height: 16px;
/* margin-top + n * line-height + margin-bottom => x * 8px */
margin-top: 10.5px;