Fixed some button positioning

frontend/src/components/BaseLayout.vue

@@ -84,53 +84,56 @@
 </template>
 
 <script>
-  import { mapGetters, mapState } from 'vuex'
-  import {uiMut} from '@/store/modules/ui'
-  import { mapStateToComputedGetterSetter } from '@/util/helpers'
-  export default {
-    name: 'base-layout',
-    computed: {
-      ...mapGetters([
-        'gradySpeak'
-      ]),
-      ...mapState({
-        username: state => state.authentication.username,
-        userRole: state => state.authentication.userRole
-      }),
-      ...mapStateToComputedGetterSetter({
-        pathPrefix: 'ui',
-        items: [
-          {
-            name: 'darkMode',
-            mutation: uiMut.SET_DARK_MODE
-          },
-          {
-            name: 'darkModeUnlocked',
-            mutation: uiMut.SET_DARK_MODE_UNLOCKED
-          },
-          {
-            name: 'mini',
-            path: 'sideBarCollapsed',
-            mutation: uiMut.SET_SIDEBAR_COLLAPSED
-          }
-        ]
-      }),
-      production () {
-        return process.env.NODE_ENV === 'production'
-      },
-      productionBrandUrl () {
-        return `https://${window.location.host}/static/img/brand.png`
-      }
+import { mapGetters, mapState } from 'vuex'
+import {uiMut} from '@/store/modules/ui'
+import { mapStateToComputedGetterSetter } from '@/util/helpers'
+import UserOptions from '@/components/UserOptions'
+
+export default {
+  name: 'base-layout',
+  components: {UserOptions},
+  computed: {
+    ...mapGetters([
+      'gradySpeak'
+    ]),
+    ...mapState({
+      username: state => state.authentication.user.username,
+      userRole: state => state.authentication.user.role
+    }),
+    ...mapStateToComputedGetterSetter({
+      pathPrefix: 'ui',
+      items: [
+        {
+          name: 'darkMode',
+          mutation: uiMut.SET_DARK_MODE
+        },
+        {
+          name: 'darkModeUnlocked',
+          mutation: uiMut.SET_DARK_MODE_UNLOCKED
+        },
+        {
+          name: 'mini',
+          path: 'sideBarCollapsed',
+          mutation: uiMut.SET_SIDEBAR_COLLAPSED
+        }
+      ]
+    }),
+    production () {
+      return process.env.NODE_ENV === 'production'
+    },
+    productionBrandUrl () {
+      return `https://${window.location.host}/static/img/brand.png`
+    }
+  },
+  methods: {
+    logout () {
+      this.$store.dispatch('logout')
     },
-    methods: {
-      logout () {
-        this.$store.dispatch('logout')
-      },
-      logFeedbackClick () {
-        this.darkModeUnlocked = true
-      }
+    logFeedbackClick () {
+      this.darkModeUnlocked = true
     }
   }
+}
 </script>
 
 <style scoped>

frontend/src/components/WelcomeJumbotron.vue

 <template>
     <v-jumbotron :gradient="gradient" dark class="elevation-10" v-if="showJumbotron">
-      <v-btn @click="hide" icon class="hide-btn">
+      <v-btn @click="hide" icon class="hide-btn" absolute>
         <v-icon>
           close
         </v-icon>
@@ -31,28 +31,28 @@
 </template>
 
 <script>
-  import { createComputedGetterSetter } from '@/util/helpers'
-  import { uiMut } from '@/store/modules/ui'
+import { createComputedGetterSetter } from '@/util/helpers'
+import { uiMut } from '@/store/modules/ui'
 
-  export default {
-    name: 'welcome-jumbotron',
-    data () {
-      return {
-        gradient: 'to bottom, #1A237E, #5753DD'
-      }
-    },
-    computed: {
-      showJumbotron: createComputedGetterSetter({
-        path: 'ui.showJumbotron',
-        mutation: uiMut.SET_SHOW_JUMBOTRON
-      })
-    },
-    methods: {
-      hide () {
-        this.showJumbotron = false
-      }
+export default {
+  name: 'welcome-jumbotron',
+  data () {
+    return {
+      gradient: 'to bottom, #1A237E, #5753DD'
+    }
+  },
+  computed: {
+    showJumbotron: createComputedGetterSetter({
+      path: 'ui.showJumbotron',
+      mutation: uiMut.SET_SHOW_JUMBOTRON
+    })
+  },
+  methods: {
+    hide () {
+      this.showJumbotron = false
     }
   }
+}
 </script>
 
 <style scoped>
@@ -61,7 +61,6 @@
     text-decoration: none;
   }
   .hide-btn {
-    position: absolute;
-    right: 0px;
+    right: 0;
   }
 </style>

frontend/src/components/submission_notes/base/FeedbackComment.vue

@@ -21,7 +21,7 @@
       </div>
       <div class="message">{{text}}</div>
       <v-btn
-        flat icon
+        flat icon absolute
         class="delete-button"
         v-if="deletable"
         @click.stop="toggleDeleteComment"
@@ -144,9 +144,8 @@ export default {
     white-space: pre-wrap;
   }
   .delete-button {
-    position: absolute;
-    bottom: -20px;
-    left: -50px;
+    bottom: -15px;
+    left: -42px;
   }
   .comment-created {
     position: absolute;

frontend/src/components/subscriptions/SubscriptionList.vue

@@ -28,65 +28,65 @@
 </template>
 
 <script>
-  import {mapGetters, mapActions, mapState} from 'vuex'
-  import SubscriptionCreation from '@/components/subscriptions/SubscriptionCreation'
-  import SubscriptionForList from '@/components/subscriptions/SubscriptionForList'
-  import SubscriptionsForStage from '@/components/subscriptions/SubscriptionsForStage'
+import {mapGetters, mapActions, mapState} from 'vuex'
+import SubscriptionCreation from '@/components/subscriptions/SubscriptionCreation'
+import SubscriptionForList from '@/components/subscriptions/SubscriptionForList'
+import SubscriptionsForStage from '@/components/subscriptions/SubscriptionsForStage'
 
-  export default {
-    components: {
-      SubscriptionsForStage,
-      SubscriptionForList,
-      SubscriptionCreation},
-    name: 'subscription-list',
-    props: {
-      sidebar: {
-        type: Boolean,
-        default: false
-      }
-    },
-    data () {
-      return {
-        selectedStage: null,
-        updating: false
-      }
-    },
-    computed: {
-      ...mapState({
-        sideBarCollapsed: state => state.ui.sideBarCollapsed
-      }),
-      ...mapGetters({
-        subscriptions: 'getSubscriptionsGroupedByType',
-        stages: 'availableStages',
-        stagesReadable: 'availableStagesReadable'
-      }),
-      showDetail () {
-        return !this.sidebar || (this.sidebar && !this.sideBarCollapsed)
-      }
-    },
-    methods: {
-      ...mapActions([
-        'updateSubmissionTypes',
-        'getCurrentAssignment',
-        'getExamTypes',
-        'subscribeToAll',
-        'cleanAssignmentsFromSubscriptions'
-      ]),
-      async getSubscriptions () {
-        this.updating = true
-        const subscriptions = await this.$store.dispatch('getSubscriptions')
-        this.updating = false
-        return subscriptions
-      }
-    },
-    created () {
-      const typesAndSubscriptions = [this.updateSubmissionTypes(), this.getSubscriptions()]
-      Promise.all(typesAndSubscriptions).then(() => {
-        this.subscribeToAll()
-        this.cleanAssignmentsFromSubscriptions()
-      })
+export default {
+  components: {
+    SubscriptionsForStage,
+    SubscriptionForList,
+    SubscriptionCreation},
+  name: 'subscription-list',
+  props: {
+    sidebar: {
+      type: Boolean,
+      default: false
     }
+  },
+  data () {
+    return {
+      selectedStage: null,
+      updating: false
+    }
+  },
+  computed: {
+    ...mapState({
+      sideBarCollapsed: state => state.ui.sideBarCollapsed
+    }),
+    ...mapGetters({
+      subscriptions: 'getSubscriptionsGroupedByType',
+      stages: 'availableStages',
+      stagesReadable: 'availableStagesReadable'
+    }),
+    showDetail () {
+      return !this.sidebar || (this.sidebar && !this.sideBarCollapsed)
+    }
+  },
+  methods: {
+    ...mapActions([
+      'updateSubmissionTypes',
+      'getCurrentAssignment',
+      'getExamTypes',
+      'subscribeToAll',
+      'cleanAssignmentsFromSubscriptions'
+    ]),
+    async getSubscriptions () {
+      this.updating = true
+      const subscriptions = await this.$store.dispatch('getSubscriptions')
+      this.updating = false
+      return subscriptions
+    }
+  },
+  created () {
+    const typesAndSubscriptions = [this.updateSubmissionTypes(), this.getSubscriptions()]
+    Promise.all(typesAndSubscriptions).then(() => {
+      this.subscribeToAll()
+      this.cleanAssignmentsFromSubscriptions()
+    })
   }
+}
 </script>
 
 <style scoped>