diff --git a/app.py b/app.py index 31b3d1e..8f13231 100644 --- a/app.py +++ b/app.py @@ -17,15 +17,9 @@ from controls import COUNTIES, WELL_STATUSES, WELL_TYPES, WELL_COLORS app = dash.Dash(__name__) -app.css.append_css({'external_url': 'https://cdn.rawgit.com/plotly/dash-app-stylesheets/2d266c578d2a6e8850ebce48fdb52759b2aef506/stylesheet-oil-and-gas.css'}) # noqa: E501 server = app.server CORS(server) -if 'DYNO' in os.environ: - app.scripts.append_script({ - 'external_url': 'https://cdn.rawgit.com/chriddyp/ca0d8f02a1659981a0ea7f013a378bbd/raw/e79f3f789517deec58f41251f7dbb6bee72c44ab/plotly_ga.js' # noqa: E501 - }) - # Create controls county_options = [{'label': str(COUNTIES[county]), 'value': str(county)} diff --git a/assets/plotly_ga.js b/assets/plotly_ga.js new file mode 100644 index 0000000..779391b --- /dev/null +++ b/assets/plotly_ga.js @@ -0,0 +1,7 @@ +(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ + (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), + m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) + })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); + + ga('create', 'UA-39373211-1', 'auto'); + ga('send', 'pageview'); \ No newline at end of file diff --git a/assets/stylesheet.css b/assets/stylesheet.css new file mode 100644 index 0000000..483cc64 --- /dev/null +++ b/assets/stylesheet.css @@ -0,0 +1,393 @@ +/* Table of contents +–––––––––––––––––––––––––––––––––––––––––––––––––– +- Grid +- Base Styles +- Typography +- Links +- Buttons +- Forms +- Lists +- Code +- Tables +- Spacing +- Utilities +- Clearing +- Media Queries +*/ + + +/* Grid +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +.container { + position: relative; + width: 100%; + max-width: 960px; + margin: 0 auto; + padding: 0 20px; + box-sizing: border-box; } + .column, + .columns { + width: 100%; + float: left; + box-sizing: border-box; } + + /* For devices larger than 400px */ + @media (min-width: 400px) { + .container { + width: 85%; + padding: 0; } + } + + /* For devices larger than 550px */ + @media (min-width: 550px) { + .container { + width: 80%; } + .column, + .columns { + margin-left: 0.5%; } + .column:first-child, + .columns:first-child { + margin-left: 0; } + + .one.column, + .one.columns { width: 8%; } + .two.columns { width: 16.25%; } + .three.columns { width: 22%; } + .four.columns { width: 33%; } + .five.columns { width: 39.3333333333%; } + .six.columns { width: 49.75%; } + .seven.columns { width: 56.6666666667%; } + .eight.columns { width: 66.5%; } + .nine.columns { width: 74.0%; } + .ten.columns { width: 82.6666666667%; } + .eleven.columns { width: 91.5%; } + .twelve.columns { width: 100%; margin-left: 0; } + + .one-third.column { width: 30.6666666667%; } + .two-thirds.column { width: 65.3333333333%; } + + .one-half.column { width: 48%; } + + /* Offsets */ + .offset-by-one.column, + .offset-by-one.columns { margin-left: 8.66666666667%; } + .offset-by-two.column, + .offset-by-two.columns { margin-left: 17.3333333333%; } + .offset-by-three.column, + .offset-by-three.columns { margin-left: 26%; } + .offset-by-four.column, + .offset-by-four.columns { margin-left: 34.6666666667%; } + .offset-by-five.column, + .offset-by-five.columns { margin-left: 43.3333333333%; } + .offset-by-six.column, + .offset-by-six.columns { margin-left: 52%; } + .offset-by-seven.column, + .offset-by-seven.columns { margin-left: 60.6666666667%; } + .offset-by-eight.column, + .offset-by-eight.columns { margin-left: 69.3333333333%; } + .offset-by-nine.column, + .offset-by-nine.columns { margin-left: 78.0%; } + .offset-by-ten.column, + .offset-by-ten.columns { margin-left: 86.6666666667%; } + .offset-by-eleven.column, + .offset-by-eleven.columns { margin-left: 95.3333333333%; } + + .offset-by-one-third.column, + .offset-by-one-third.columns { margin-left: 34.6666666667%; } + .offset-by-two-thirds.column, + .offset-by-two-thirds.columns { margin-left: 69.3333333333%; } + + .offset-by-one-half.column, + .offset-by-one-half.columns { margin-left: 52%; } + + } + + + /* Base Styles + –––––––––––––––––––––––––––––––––––––––––––––––––– */ + /* NOTE + html is set to 62.5% so that all the REM measurements throughout Skeleton + are based on 10px sizing. So basically 1.5rem = 15px :) */ + html { + font-size: 62.5%; } + body { + font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ + line-height: 1.6; + font-weight: 400; + font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; + color: rgb(50, 50, 50); } + + + /* Typography + –––––––––––––––––––––––––––––––––––––––––––––––––– */ + h1, h2, h3, h4, h5, h6 { + margin-top: 0; + margin-bottom: 0; + font-weight: 300; } + h1 { font-size: 4.5rem; line-height: 1.2; letter-spacing: -.1rem; margin-bottom: 2rem; } + h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; margin-bottom: 1.8rem; margin-top: 1.8rem;} + h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; margin-bottom: 1.5rem; margin-top: 1.5rem;} + h4 { font-size: 2.6rem; line-height: 1.35; letter-spacing: -.08rem; margin-bottom: 1.2rem; margin-top: 1.2rem;} + h5 { font-size: 2.2rem; line-height: 1.5; letter-spacing: -.05rem; margin-bottom: 0.6rem; margin-top: 0.6rem;} + h6 { font-size: 2.0rem; line-height: 1.6; letter-spacing: 0; margin-bottom: 0.75rem; margin-top: 0.75rem;} + + p { + margin-top: 0; } + + + /* Blockquotes + –––––––––––––––––––––––––––––––––––––––––––––––––– */ + blockquote { + border-left: 4px lightgrey solid; + padding-left: 1rem; + margin-top: 2rem; + margin-bottom: 2rem; + margin-left: 0rem; + } + + + /* Links + –––––––––––––––––––––––––––––––––––––––––––––––––– */ + a { + color: #1EAEDB; } + a:hover { + color: #0FA0CE; } + + + /* Buttons + –––––––––––––––––––––––––––––––––––––––––––––––––– */ + .button, + button, + input[type="submit"], + input[type="reset"], + input[type="button"] { + display: inline-block; + height: 38px; + padding: 0 30px; + color: #555; + text-align: center; + font-size: 11px; + font-weight: 600; + line-height: 38px; + letter-spacing: .1rem; + text-transform: uppercase; + text-decoration: none; + white-space: nowrap; + background-color: transparent; + border-radius: 4px; + border: 1px solid #bbb; + cursor: pointer; + box-sizing: border-box; } + .button:hover, + button:hover, + input[type="submit"]:hover, + input[type="reset"]:hover, + input[type="button"]:hover, + .button:focus, + button:focus, + input[type="submit"]:focus, + input[type="reset"]:focus, + input[type="button"]:focus { + color: #333; + border-color: #888; + outline: 0; } + .button.button-primary, + button.button-primary, + input[type="submit"].button-primary, + input[type="reset"].button-primary, + input[type="button"].button-primary { + color: #FFF; + background-color: #33C3F0; + border-color: #33C3F0; } + .button.button-primary:hover, + button.button-primary:hover, + input[type="submit"].button-primary:hover, + input[type="reset"].button-primary:hover, + input[type="button"].button-primary:hover, + .button.button-primary:focus, + button.button-primary:focus, + input[type="submit"].button-primary:focus, + input[type="reset"].button-primary:focus, + input[type="button"].button-primary:focus { + color: #FFF; + background-color: #1EAEDB; + border-color: #1EAEDB; } + + + /* Forms + –––––––––––––––––––––––––––––––––––––––––––––––––– */ + input[type="email"], + input[type="number"], + input[type="search"], + input[type="text"], + input[type="tel"], + input[type="url"], + input[type="password"], + textarea, + select { + height: 38px; + padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ + background-color: #fff; + border: 1px solid #D1D1D1; + border-radius: 4px; + box-shadow: none; + box-sizing: border-box; + font-family: inherit; + font-size: inherit; /*https://stackoverflow.com/questions/6080413/why-doesnt-input-inherit-the-font-from-body*/} + /* Removes awkward default styles on some inputs for iOS */ + input[type="email"], + input[type="number"], + input[type="search"], + input[type="text"], + input[type="tel"], + input[type="url"], + input[type="password"], + textarea { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; } + textarea { + min-height: 65px; + padding-top: 6px; + padding-bottom: 6px; } + input[type="email"]:focus, + input[type="number"]:focus, + input[type="search"]:focus, + input[type="text"]:focus, + input[type="tel"]:focus, + input[type="url"]:focus, + input[type="password"]:focus, + textarea:focus, + select:focus { + border: 1px solid #33C3F0; + outline: 0; } + label, + legend { + display: block; + margin-bottom: 0px; } + fieldset { + padding: 0; + border-width: 0; } + input[type="checkbox"], + input[type="radio"] { + display: inline; } + label > .label-body { + display: inline-block; + margin-left: .5rem; + font-weight: normal; } + + + /* Lists + –––––––––––––––––––––––––––––––––––––––––––––––––– */ + ul { + list-style: circle inside; } + ol { + list-style: decimal inside; } + ol, ul { + padding-left: 0; + margin-top: 0; } + ul ul, + ul ol, + ol ol, + ol ul { + margin: 1.5rem 0 1.5rem 3rem; + font-size: 90%; } + li { + margin-bottom: 1rem; } + + + /* Tables + –––––––––––––––––––––––––––––––––––––––––––––––––– */ + th, + td { + padding: 12px 15px; + text-align: left; + border-bottom: 1px solid #E1E1E1; } + th:first-child, + td:first-child { + padding-left: 0; } + th:last-child, + td:last-child { + padding-right: 0; } + + + /* Spacing + –––––––––––––––––––––––––––––––––––––––––––––––––– */ + button, + .button { + margin-bottom: 0rem; } + input, + textarea, + select, + fieldset { + margin-bottom: 0rem; } + pre, + dl, + figure, + table, + form { + margin-bottom: 0rem; } + p, + ul, + ol { + margin-bottom: 0.75rem; } + + /* Utilities + –––––––––––––––––––––––––––––––––––––––––––––––––– */ + .u-full-width { + width: 100%; + box-sizing: border-box; } + .u-max-full-width { + max-width: 100%; + box-sizing: border-box; } + .u-pull-right { + float: right; } + .u-pull-left { + float: left; } + + + /* Misc + –––––––––––––––––––––––––––––––––––––––––––––––––– */ + hr { + margin-top: 3rem; + margin-bottom: 3.5rem; + border-width: 0; + border-top: 1px solid #E1E1E1; } + + + /* Clearing + –––––––––––––––––––––––––––––––––––––––––––––––––– */ + + /* Self Clearing Goodness */ + .container:after, + .row:after, + .u-cf { + content: ""; + display: table; + clear: both; } + + + /* Media Queries + –––––––––––––––––––––––––––––––––––––––––––––––––– */ + /* + Note: The best way to structure the use of media queries is to create the queries + near the relevant code. For example, if you wanted to change the styles for buttons + on small devices, paste the mobile query code up in the buttons section and style it + there. + */ + + + /* Larger than mobile */ + @media (min-width: 400px) {} + + /* Larger than phablet (also point when grid becomes active) */ + @media (min-width: 550px) {} + + /* Larger than tablet */ + @media (min-width: 750px) {} + + /* Larger than desktop */ + @media (min-width: 1000px) {} + + /* Larger than Desktop HD */ + @media (min-width: 1200px) {} \ No newline at end of file diff --git a/requirements.txt b/requirements.txt index 4a53510..c5bc20a 100644 Binary files a/requirements.txt and b/requirements.txt differ