From b479780bd483dc8784504b2a71165c3ad599e757 Mon Sep 17 00:00:00 2001
From: "robinwilliam.hundt" <robinwilliam.hundt@stud.uni-goettingen.de>
Date: Sun, 5 Aug 2018 12:33:32 +0200
Subject: [PATCH] Fixed some button positioning
---
frontend/src/components/BaseLayout.vue | 91 +++++++-------
frontend/src/components/WelcomeJumbotron.vue | 43 ++++---
.../submission_notes/base/FeedbackComment.vue | 7 +-
.../subscriptions/SubscriptionList.vue | 112 +++++++++---------
4 files changed, 127 insertions(+), 126 deletions(-)
diff --git a/frontend/src/components/BaseLayout.vue b/frontend/src/components/BaseLayout.vue
index 9ab1ba03..87a14851 100644
--- a/frontend/src/components/BaseLayout.vue
+++ b/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>
diff --git a/frontend/src/components/WelcomeJumbotron.vue b/frontend/src/components/WelcomeJumbotron.vue
index 4c140e5c..687274a6 100644
--- a/frontend/src/components/WelcomeJumbotron.vue
+++ b/frontend/src/components/WelcomeJumbotron.vue
@@ -1,6 +1,6 @@
<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>
diff --git a/frontend/src/components/submission_notes/base/FeedbackComment.vue b/frontend/src/components/submission_notes/base/FeedbackComment.vue
index 93591485..c45d38a9 100644
--- a/frontend/src/components/submission_notes/base/FeedbackComment.vue
+++ b/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;
diff --git a/frontend/src/components/subscriptions/SubscriptionList.vue b/frontend/src/components/subscriptions/SubscriptionList.vue
index cd63a0c0..2e8b7f72 100644
--- a/frontend/src/components/subscriptions/SubscriptionList.vue
+++ b/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>
--
GitLab