Some partial fixes for #10

thetronjohnson · Jun 2, 2020 · 41c04fa · 41c04fa
1 parent 838a375
commit 41c04fa
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 100 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -20,7 +20,6 @@ export default {
   font-family: 'Roboto', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
   background-color:white;
 }
 
@@ -35,5 +34,18 @@ export default {
   margin-right: 25%;
   padding-top: 10px;
   padding-bottom: 10px;
+  text-align: center;
+}
+
+
+@media screen and (max-width: 960px) {
+  .main {
+    padding: 20px 2%
+  }
+}
+@media screen and (min-width: 1000px) {
+  .main.container {
+    max-width: 1000px
+  }
 }
 </style>
diff --git a/src/components/AddData.vue b/src/components/AddData.vue
@@ -1,8 +1,8 @@
 <template>
-  <section class="main">
+  <section class="main container">
     <h1 class="title">Add Today's Rain Measurement</h1>
-    <form class="volunteerform container" @submit="submitForm">
-      <b-field label="Guage" type="is-primary" class="info">
+    <form @submit="submitForm">
+      <b-field label="Gauge" type="is-primary" class="info">
         <b-select v-model="form.gid" expanded>
           <option
             v-for="gauge in gauges"
@@ -22,8 +22,8 @@
       <b-field label="Rain in mm" type="is-primary" class="info" v-if="rainToday === 'Yes'">
         <b-input v-model="form.measurement" placeholder="Enter rain data in mm"></b-input>
       </b-field>
-      <b-field v-model="form.notes" label="Notes" type="is-primary" class="info">
-        <b-input placeholder="Any notes"></b-input>
+      <b-field label="Notes" type="is-primary" class="info">
+        <b-input v-model="form.notes" placeholder="Any notes"></b-input>
       </b-field>
       <b-field>
         <button class="button is-primary">
@@ -45,22 +45,12 @@ export default {
       rainToday: 'No',
       form: {
         gid: '',
-        measurement: -1,
+        measurement: 0,
         notes: ''
       }
     }
   },
 
-  watch: {
-    rainToday (newValue) {
-      if (newValue == 'Yes') {
-        this.form.measurement = 0
-      } else {
-        this.form.measurement = -1
-      }
-    }
-  },
-
   methods: {
     init () {
       this.axios.get(this.$API.gauge.getMine).then((response) => {
@@ -89,23 +79,5 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-.volunteerform{
-  margin-left: 25vw;
-  margin-right: 25vw;
-}
-.info{
-  text-align: left;
-}
-.button{
-  float: left;
-  margin-top: 1vw;
-}
-.title{
-  background-color:hsl(217, 71%, 53%);
-  color: white;
-  margin-left: 25vw;
-  margin-right: 25vw;
-  padding-top: 10px;
-  padding-bottom: 10px;
-}
+
 </style>
diff --git a/src/components/Dashboard.vue b/src/components/Dashboard.vue
@@ -1,46 +1,44 @@
 <template>
-  <div>
-    <section class="main">
-      <div class="columns">
-        <div class="column is-half">
-          <div>
-            <router-link to="/add-data" class="button add-data is-primary">Add Today's Measurement</router-link>
-          </div><br/>
-          <div class="content">
-            <h1 id="profile">{{ name }}'s Contributions</h1>
-            <div class="container table">
-              <b-table :data="data" :columns="columns"></b-table>
-            </div>
+  <section class="main container">
+    <div class="columns">
+      <div class="column is-four-fifths">
+        <div>
+          <router-link to="/add-data" class="button add-data is-primary">Add Today's Measurement</router-link>
+        </div><br/>
+        <div class="content">
+          <h1 id="profile">{{ name }}'s Contributions</h1>
+          <div class="container table">
+            <b-table :data="data" :columns="columns"></b-table>
           </div>
         </div>
-        <div class="column tiles">
-          <div class="buttons">
-            <router-link to="/add-gauge" class="button is-primary ">Add Gauge</router-link>
-          </div>
-          <div class="" v-if="gauges.length === 0">
-            You don't have any gauges.
-            <router-link to="/add-gauge" class="button is-primary ">Add A Gauge</router-link>
-          </div>
-          <div class="card" v-for="(gauge, index) in gauges" :key="index">
-            <header class="card-header">
-              <p class="card-header-title">{{ gauge.name }}</p>
-              <a href="#" class="card-header-icon" aria-label="more options">
-              </a>
-            </header>
-            <div class="card-content">
-              <div class="content">
-                <p>{{ gauge.place }}</p>
-                <p>{{ gauge.lastreading }}</p>
-              </div>
+      </div>
+      <div class="column tiles">
+        <div class="buttons">
+          <router-link to="/add-gauge" class="button is-primary ">Add Gauge</router-link>
+        </div>
+        <div class="" v-if="gauges.length === 0">
+          You don't have any gauges.
+          <router-link to="/add-gauge" class="button is-primary ">Add A Gauge</router-link>
+        </div>
+        <div class="card" v-for="(gauge, index) in gauges" :key="index">
+          <header class="card-header">
+            <p class="card-header-title">{{ gauge.name }}</p>
+            <a href="#" class="card-header-icon" aria-label="more options">
+            </a>
+          </header>
+          <div class="card-content">
+            <div class="content">
+              <p>{{ gauge.place }}</p>
+              <p>{{ gauge.lastreading }}</p>
             </div>
-            <footer class="card-footer">
-              <a href="#" class="card-footer-item">Update</a>
-            </footer>
           </div>
+          <footer class="card-footer">
+            <a href="#" class="card-footer-item">Update</a>
+          </footer>
         </div>
       </div>
-    </section>
-  </div>
+    </div>
+  </section>
 </template>
 
 <script>
@@ -99,11 +97,6 @@ export default {
   margin-left: 5vw;
   margin-right: 5vw;
 }
-.tiles {
-  margin-top:3vw ;
-  margin-left: 12vw;
-  margin-right: 12vw;
-}
 p {
   font-size: 14px;
   text-align: justify;

diff --git a/src/components/Profile.vue b/src/components/Profile.vue
@@ -1,7 +1,7 @@
 <template>
-  <section class="main">
+  <section class="main container">
     <h1 class="title" id="profile"> {{ name }}'s Profile</h1>
-    <div class="loginform container">
+    <div>
       <b-field label="Name" type="is-primary" class="info" expanded>
         <b-input type="text" placeholder="Enter your name"></b-input>
       </b-field>
@@ -25,9 +25,7 @@
       </b-field>
 
       <b-field>
-        <button class="button is-primary">
-          Update
-        </button>
+        <button class="button is-pulled-left is-primary">Update</button>
       </b-field>
     </div>
   </section>
@@ -46,23 +44,7 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-.loginform{
-  margin-left: 25vw;
-  margin-right: 25vw;
+.info {
+  //text-align: left;
 }
-.info{
-  text-align: left;
-}
-.button{
-  float: left;
-  margin-top: 1vw;
-}
-.title{
-  background-color:hsl(217, 71%, 53%);
-  color: white;
-  margin-left: 25vw;
-  margin-right: 25vw;
-  padding-top: 10px;
-  padding-bottom: 10px;
- }
 </style>