Merge branch 'master' into multiple-time-periods

src/components/extras/contact.vue

@@ -6,10 +6,15 @@
  <div class="center">
  <div class="contact-div">
  <p class="body">
- Please email us at
- <a href="mailto:sustainability@oregonstate.edu">sustainability@oregonstate.edu</a>
- for feedback or questions, or check our
- <a href="/#/getstarted">FAQ</a>
+ <el-row :gutter="20">
+ <el-col :xs="16" :sm="16" :md="16" :lg="16" :xl="16">
+ <a href="https://fa.oregonstate.edu/contact">Contact us here</a>
+ with your comments and questions. Be sure to select "Sustainability Office" from the Category drop-down
+ menu. You can also check out our
+ <a href="/#/getstarted">FAQ</a>
+ <el-image class="demo-visual" :src="contactDemo"></el-image>
+ </el-col>
+ </el-row>
  </p>
  </div>
  </div>
@@ -20,7 +25,11 @@
 export default {
  name: 'contact',
  props: [],
- data () {},
+ data () {
+ return {
+ contactDemo: 'https://energy-dashboard.s3-us-west-2.amazonaws.com/images/contactImage.png'
+ }
+ },
  watch: {},
  mounted () {},
  methods: {}
@@ -29,7 +38,6 @@ export default {
 <style lang="scss" scoped>
 .cont {
  text-align: center;
- padding-top: 10%;
 }
 .title {
  font-size: 80px;
@@ -40,14 +48,25 @@ export default {
  font-size: 28px;
  color: black;
 }
-.contact-div {
- max-width: 800px;
-}
+
 .center {
  margin: auto;
- width: 50%;
- padding: 10px;
+ width: 75%;
+ padding: 20px;
+}
+.demo-visual {
+ height: 100%;
+ width: auto;
+ box-shadow: rgba(0, 0, 0, 0.19) 0px 6px 8px;
+}
+
+.el-row {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: left;
 }
+
 @media only screen and (max-width: 600px) {
  .center {
  width: 80%;

src/components/get_started/faq.vue

@@ -27,8 +27,8 @@
  </el-collapse-item>
  <el-collapse-item title="How can I submit questions or feedback?" name="7">
  <div>
- Please email us at
- <a href="mailto:sustainability@oregonstate.edu">sustainability@oregonstate.edu</a>.
+ Check out our
+ <a href="/#/contact">contact page.</a>
  </div>
  </el-collapse-item>
  </el-collapse>