Skip to content
This repository has been archived by the owner on May 25, 2019. It is now read-only.

Commit

Permalink
IE 9 support
Browse files Browse the repository at this point in the history 
Pulls in IE9 CSS and polyfill. Changes around some layouts to add clearfix and use floats.
  • Loading branch information
Fin Hopkins committed Jun 12, 2017
1 parent 02ae623 commit b24aa68
Show file tree
Hide file tree
Showing 17 changed files with 152 additions and 44 deletions.
1 change: 1 addition & 0 deletions .eslintignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,4 @@
/build
/coverage
/vendor
/static/vendor
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
/server.csr

/build
/static/vendor
/node_modules
/coverage
/newrelic_agent.log
3 changes: 2 additions & 1 deletion components/common/FormDialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import React from 'react';
import { css } from 'glamor';

import { MEDIA_LARGE, HEADER_HEIGHT } from '../style-constants';
import { MEDIA_LARGE, HEADER_HEIGHT, CLEAR_FIX } from '../style-constants';

export const MAX_WIDTH = 1300;

Expand All @@ -20,6 +20,7 @@ const DIALOG_STYLE = css({
margin: '2rem auto',
minHeight: 'auto',
},
...CLEAR_FIX,
});

type Props = {|
Expand Down
20 changes: 10 additions & 10 deletions components/request/__snapshots__/RequestLayout.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,12 +94,12 @@ exports[`existing service page rendering 1`] = `
<div
className={
Object {
"data-css-17e37we": "",
"data-css-1prrpm3": "",
}
}
>
<div
className="p-a300 p-a800--xl br br-t400 br--y css-1c1v7yi"
className="p-a300 p-a800--xl br br-t400 br--y css-1aypqv0"
style={Object {}}
>
<form
Expand Down Expand Up @@ -502,12 +502,12 @@ exports[`existing service page rendering phone 1`] = `
<div
className={
Object {
"data-css-17e37we": "",
"data-css-1prrpm3": "",
}
}
>
<div
className="p-a300 p-a800--xl br br-t400 br--y css-1c1v7yi"
className="p-a300 p-a800--xl br br-t400 br--y css-1aypqv0"
style={Object {}}
>
<form
Expand Down Expand Up @@ -910,12 +910,12 @@ exports[`existing service page rendering phone location step 1`] = `
<div
className={
Object {
"data-css-5ju6dk": "",
"data-css-1msyv6a": "",
}
}
>
<div
className=" br br-t400 br--y css-1c1v7yi"
className=" br br-t400 br--y css-1aypqv0"
style={Object {}}
>
<div
Expand Down Expand Up @@ -1088,12 +1088,12 @@ exports[`missing service page rendering 1`] = `
<div
className={
Object {
"data-css-17e37we": "",
"data-css-1prrpm3": "",
}
}
>
<div
className="p-a300 p-a800--xl br br-t400 br--y css-1c1v7yi"
className="p-a300 p-a800--xl br br-t400 br--y css-1aypqv0"
style={Object {}}
>
<div
Expand Down Expand Up @@ -1210,7 +1210,7 @@ exports[`request form rendering 1`] = `
}
>
<div
className=" br br-t400 br--y css-1c1v7yi"
className=" br br-t400 br--y css-1aypqv0"
style={Object {}}
>
<div>
Expand Down Expand Up @@ -1552,7 +1552,7 @@ exports[`translate page rendering 1`] = `
}
>
<div
className="p-a300 p-a800--xl br br-t400 br--y css-1c1v7yi"
className="p-a300 p-a800--xl br br-t400 br--y css-1aypqv0"
style={Object {}}
>
<div
Expand Down
4 changes: 2 additions & 2 deletions components/request/home/__snapshots__/HomeDialog.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ exports[`choose page rendering 1`] = `
}
>
<div
className=" br br-t400 br--y css-1c1v7yi"
className=" br br-t400 br--y css-1aypqv0"
style={
Object {
"maxWidth": 800,
Expand Down Expand Up @@ -134,7 +134,7 @@ exports[`home page rendering 1`] = `
}
>
<div
className=" br br-t400 br--y css-1c1v7yi"
className=" br br-t400 br--y css-1aypqv0"
style={Object {}}
>
<div>
Expand Down
2 changes: 2 additions & 0 deletions components/request/request/RequestDialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,8 @@ export type Props = {|

const COMMON_DIALOG_STYLE = {
transition: 'margin 400ms',
position: 'relative',
zIndex: 2,
};

export const CORNER_DIALOG_STYLE = css(COMMON_DIALOG_STYLE, {
Expand Down
18 changes: 9 additions & 9 deletions components/request/request/__snapshots__/RequestDialog.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ exports[`methods submitRequest graphql failure 1`] = `
<div
className={
Object {
"data-css-17e37we": "",
"data-css-1prrpm3": "",
}
}
>
Expand All @@ -30,7 +30,7 @@ exports[`methods submitRequest success 1`] = `
<div
className={
Object {
"data-css-17e37we": "",
"data-css-1prrpm3": "",
}
}
>
Expand Down Expand Up @@ -61,7 +61,7 @@ exports[`methods submitRequest success 2`] = `
<div
className={
Object {
"data-css-17e37we": "",
"data-css-1prrpm3": "",
}
}
>
Expand Down Expand Up @@ -179,12 +179,12 @@ exports[`rendering contact 1`] = `
<div
className={
Object {
"data-css-17e37we": "",
"data-css-1prrpm3": "",
}
}
>
<div
className="p-a300 p-a800--xl br br-t400 br--y css-1c1v7yi"
className="p-a300 p-a800--xl br br-t400 br--y css-1aypqv0"
style={
Object {
"maxWidth": 800,
Expand Down Expand Up @@ -393,12 +393,12 @@ exports[`rendering location 1`] = `
<div
className={
Object {
"data-css-5ju6dk": "",
"data-css-1msyv6a": "",
}
}
>
<div
className=" br br-t400 br--y css-1c1v7yi"
className=" br br-t400 br--y css-1aypqv0"
style={Object {}}
>
<div
Expand Down Expand Up @@ -479,12 +479,12 @@ exports[`rendering questions 1`] = `
<div
className={
Object {
"data-css-17e37we": "",
"data-css-1prrpm3": "",
}
}
>
<div
className="p-a300 p-a800--xl br br-t400 br--y css-1c1v7yi"
className="p-a300 p-a800--xl br br-t400 br--y css-1aypqv0"
style={Object {}}
>
<form
Expand Down
12 changes: 8 additions & 4 deletions components/search/RecentRequestRow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,23 +10,26 @@ import type RequestSearch from '../../data/store/RequestSearch';
import type Ui from '../../data/store/Ui';
import type { SearchCase } from '../../data/types';

import { HEADER_HEIGHT, MEDIA_LARGE, GREEN, YELLOW, GRAY_100 } from '../style-constants';
import { HEADER_HEIGHT, MEDIA_LARGE, GREEN, YELLOW, GRAY_100, CLEAR_FIX } from '../style-constants';

const REQUEST_STYLE = css({
display: 'flex',
display: 'block',
cursor: 'pointer',
borderBottom: `1px dashed ${GRAY_100}`,
width: '100%',
float: 'left',
':last-child': {
borderBottom: 'none',
},
...CLEAR_FIX,
});

const THUMBNAIL_SYLE = css({
width: '4rem',
height: '4rem',
margin: '0 1rem 0 0',
flexShrink: 0,
backgroundSize: 'cover',
float: 'left',
[MEDIA_LARGE]: {
width: '6rem',
height: '6rem',
Expand All @@ -36,12 +39,13 @@ const THUMBNAIL_SYLE = css({
const REQUEST_INFO_STYLE = css({
height: '4rem',
display: 'flex',
flex: 1,
marginLeft: '5rem',
flexDirection: 'column',
justifyContent: 'space-between',
minWidth: 0,
[MEDIA_LARGE]: {
height: '6rem',
marginLeft: '7rem',
},
});

Expand Down
4 changes: 3 additions & 1 deletion components/search/RecentRequests.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { observer } from 'mobx-react';
import { css } from 'glamor';

import type { AppStore } from '../../data/store';
import { HEADER_HEIGHT, MEDIA_LARGE, GRAY_100 } from '../style-constants';
import { HEADER_HEIGHT, MEDIA_LARGE, GRAY_100, CLEAR_FIX } from '../style-constants';

import LoadingIcons from '../common/LoadingIcons';
import RecentRequestRow from './RecentRequestRow';
Expand All @@ -28,6 +28,8 @@ const CONTAINER_STYLE = css({
// a little slop because of the sticky header.
minHeight: `calc(100vh - ${HEADER_HEIGHT}px)`,
},

...CLEAR_FIX,
});

const SEARCH_CONTAINER_STYLE = css({
Expand Down
20 changes: 10 additions & 10 deletions components/search/__snapshots__/RecentRequests.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ exports[`rendering results loaded 1`] = `
<div
className={
Object {
"data-css-hrpe2f": "",
"data-css-1q78t83": "",
}
}
>
Expand Down Expand Up @@ -46,7 +46,7 @@ exports[`rendering results loaded 1`] = `
Search Results
</h2>
<a
className="p-a300 br css-1d0pha"
className="p-a300 br css-1vruwkh"
data-request-id="17-000000001"
href="/case/17-000000001"
onClick={[Function]}
Expand All @@ -62,7 +62,7 @@ exports[`rendering results loaded 1`] = `
<div
className={
Object {
"data-css-1bo6x5a": "",
"data-css-1vs5gdh": "",
}
}
style={
Expand All @@ -74,7 +74,7 @@ exports[`rendering results loaded 1`] = `
<div
className={
Object {
"data-css-1bo6x5a": "",
"data-css-1vs5gdh": "",
}
}
style={
Expand All @@ -87,7 +87,7 @@ exports[`rendering results loaded 1`] = `
<div
className={
Object {
"data-css-10itrk": "",
"data-css-1abryh3": "",
}
}
>
Expand Down Expand Up @@ -137,7 +137,7 @@ exports[`rendering with request selected 1`] = `
<div
className={
Object {
"data-css-hrpe2f": "",
"data-css-1q78t83": "",
}
}
>
Expand Down Expand Up @@ -179,7 +179,7 @@ exports[`rendering with request selected 1`] = `
Search Results
</h2>
<a
className="p-a300 br css-1d0pha"
className="p-a300 br css-1vruwkh"
data-request-id="17-000000001"
href="/case/17-000000001"
onClick={[Function]}
Expand All @@ -195,7 +195,7 @@ exports[`rendering with request selected 1`] = `
<div
className={
Object {
"data-css-1bo6x5a": "",
"data-css-1vs5gdh": "",
}
}
style={
Expand All @@ -207,7 +207,7 @@ exports[`rendering with request selected 1`] = `
<div
className={
Object {
"data-css-1bo6x5a": "",
"data-css-1vs5gdh": "",
}
}
style={
Expand All @@ -220,7 +220,7 @@ exports[`rendering with request selected 1`] = `
<div
className={
Object {
"data-css-10itrk": "",
"data-css-1abryh3": "",
}
}
>
Expand Down
2 changes: 1 addition & 1 deletion components/search/__snapshots__/SearchLayout.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ exports[`search form rendering 1`] = `
<div
className={
Object {
"data-css-hrpe2f": "",
"data-css-1q78t83": "",
}
}
>
Expand Down
8 changes: 8 additions & 0 deletions components/style-constants.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,3 +30,11 @@ export const CENTERED_DIALOG_STYLE = css({
padding: '0 40px',
},
});

export const CLEAR_FIX = {
'::after': {
content: '""',
display: 'table',
clear: 'both',
},
};
Loading

0 comments on commit b24aa68

Please sign in to comment.