KevinMidboe/seasoned
1
0
Fork 0
Code Issues 12 Pull Requests 1 Packages Projects Releases 1 Wiki Activity

Changed settings buttons from being manually setup to use the seasonedButton compnent. Scoped styling

Browse Source
This commit is contained in:
Kevin
2019-06-04 20:12:25 +02:00
parent a306664bd7
commit fd405250a5
1 changed files with 21 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/Profile.vue
View File

@@ -4,20 +4,20 @@
<header class="profile__header"> <header class="profile__header">
<h2 class="profile__title">{{ emoji }} Welcome {{ userName }}</h2> <h2 class="profile__title">{{ emoji }} Welcome {{ userName }}</h2>
<div> <div class="button--group">
<router-link class="" :to="{name: 'settings'}"> <seasoned-button @click="showSettings = !showSettings">{{ showSettings ? 'hide settings' : 'show settings' }}</seasoned-button>
</router-link>
<button v-if="showSettings" class="button__active" @click="toggleSettings" style="margin-right: 2em;">Hide settings</button> <seasoned-button @click="logOut">Log out</seasoned-button>
<button v-else class="button" @click="toggleSettings" style="margin-right: 2em;">Show settings</button>
<button class="button" @click="logOut">Log Out</button>
</div> </div>
</header> </header>
<settings v-if="showSettings"></settings> <settings v-if="showSettings"></settings>
<movies-list v-for="item in listTypes" v-if="!showSettings && item.isProfileContent" :type="'component'" :mode="item.type" :category="item.query" :shortList="true"></movies-list> <!-- <movies-list v-for="item in listTypes" v-if="!showSettings && item.isProfileContent" :type="'component'" :mode="item.type" :category="item.query" :shortList="true"></movies-list> -->
<!-- <movies-list v-for="item in listTypes" v-if="item.isCategory" :type="'component'" :mode="item.type" :shortList="true"></movies-list> --> <!-- <movies-list v-for="item in listTypes" v-if="item.isCategory" :type="'component'" :mode="item.type" :shortList="true"></movies-list> -->
<!-- <created-lists></created-lists> --> <!-- <created-lists></created-lists> -->
</div> </div>
<section class="not-found" v-if="!userLoggedIn"> <section class="not-found" v-if="!userLoggedIn">
<div class="not-found__content"> <div class="not-found__content">
<h2 class="not-found__title">Authentication Request Failed</h2> <h2 class="not-found__title">Authentication Request Failed</h2>
@@ -39,7 +39,7 @@ import { getEmoji } from '@/seasonedAPI.js'
// import CreatedLists from './CreatedLists.vue' // import CreatedLists from './CreatedLists.vue'
export default { export default {
components: { MoviesList, Settings }, components: { MoviesList, Settings, SeasonedButton },
data(){ data(){
return{ return{
userLoggedIn: '', userLoggedIn: '',
@@ -91,9 +91,11 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
@import "./src/scss/variables"; @import "./src/scss/variables";
@import "./src/scss/media-queries"; @import "./src/scss/media-queries";
// DUPLICATE CODE
.profile{ .profile{
&__header{ &__header{
display: flex; display: flex;
@@ -111,16 +113,16 @@ export default {
padding: 29px 60px; padding: 29px 60px;
} }
} }
&__title{ &__title{
margin: 0; margin: 0;
font-size: 16px; font-size: 16px;
line-height: 16px; line-height: 16px;
color: $c-dark; color: $c-dark;
font-weight: 300; font-weight: 300;
@include tablet-min{ @include tablet-min{
font-size: 18px; font-size: 18px;
line-height: 18px; line-height: 18px;
}
} }
}
} }
</style> </style>