diff --git a/src/App.vue b/src/App.vue index 5dfb204c0e0fad55c49ad32de0566be7e47598fc..4ac04cbcf304afb5e7e35e1fd513c65e11763773 100644 --- a/src/App.vue +++ b/src/App.vue @@ -47,7 +47,7 @@ nav a:first-of-type { @media (min-width: 1024px) { header { display: flex; - qplace-items: center; + place-items: center; padding-right: calc(var(--section-gap) / 2); } diff --git a/src/assets/main.css b/src/assets/main.css index 3c0a06b26763dc5a9effbed2afbccab2d9ed0951..98ccd61eade8477507defae2610a6701fb39a19a 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -29,7 +29,7 @@ a, #app { display: grid; - grid-template-columns: 1fr 1fr; + /*grid-template-columns: 1fr 1fr;*/ padding: 0 2rem; } } diff --git a/src/components/images/w66XcIlw.jpeg b/src/components/images/w66XcIlw.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..f27be0d3372e38997dea9ea9913ad851e4f59048 Binary files /dev/null and b/src/components/images/w66XcIlw.jpeg differ diff --git a/src/views/ProfileSettings.vue b/src/views/ProfileSettings.vue index 13e8d11de7782446d00909e8b192f45ac61a8390..03eea5b091b22b5e1b84a30e3d964afa0df254da 100644 --- a/src/views/ProfileSettings.vue +++ b/src/views/ProfileSettings.vue @@ -1,10 +1,9 @@ <template> <main> - <h1><br><br>Profilinnstillinger <br></h1> <div v-if="hasProfileImage" id = "profilepicture-container"> - <img width="500px" src="{{profile.image}}" alt="profile picture"> + <img width="100" src="../components/images/w66XcIlw.jpeg" alt="profile picture"> </div> <div v-else id = "profilepicture-container"> <Icon icon="material-symbols:person" :color=iconColor :style="{ fontSize: '500px'}" /> @@ -28,7 +27,7 @@ <h3>Profilbilde</h3> <div id="changeUserImage"> <div v-if="hasProfileImage" id = "profilepicture-container"> - <img width="30px" src="{{profile.image}}" alt="profile picture"> + <img width="50" src="../components/images/w66XcIlw.jpeg" alt="profile picture"> </div> <div v-else id = "profilepicture-container"> <Icon icon="material-symbols:person" :color=iconColor :style="{ fontSize: '30px'}" /> @@ -74,7 +73,7 @@ <h1>Konto-innstillinger</h1> <form @submit.prevent="submit"> - <p class="infoText">OBS: Kontakt admin dersom du ønsker å oppdatere epost</p> + <p class="infoText">OBS: Kontakt admin dersom du ønsker å oppdatere epost</p><br> <p>Epost:</p> <p>{{user.username}}</p><br> @@ -105,11 +104,14 @@ import {Icon} from "@iconify/vue"; import {API} from "@/util/API"; +//import { mapState } from "pinia"; +//import { useAuthStore } from "@/stores/authStore"; export default { name: "ProfileSettings", components: {Icon}, computed: { + //...mapState(useAuthStore, ['user']), iconColor() { return "#000000" }, @@ -128,13 +130,17 @@ export default { profile: { name: "Petter", isRestricted: false, - image: "", + image: "../components/images/w66XcIlw.jpeg", }, foodPreferences: [], allergens: [], deletionConfirmation: false, } }, + beforeMount(){ + //TODO: Hent bruker + //todo hent profil + }, methods: { saveUserSettings(){ alert("(Denne knappen gjør ingen ting) brukerinnstillinger lagret!") @@ -144,7 +150,6 @@ export default { this.profile.isRestricted, this.profile.image, ); - }, saveAccountSettings(){ alert("(Denne knappen gjør ingen ting) konto oppdatert") @@ -174,9 +179,16 @@ export default { </script> <style scoped lang ="scss"> -#dangerZone { - color: white; - color: darkred; +main { + background-color: white; + color:black; + display:flex; + justify-content: center; + align-items: center; + flex-direction: column; + width: 100%; + text-align: left; + left:0; } #profilepicture-container { @@ -190,6 +202,10 @@ export default { border: 3px solid base.$grey; } +img { + border-radius: 50%; +} + #changeUserImage { display:flex; } @@ -205,20 +221,16 @@ export default { margin: .4em; } - form { background-color: base.$grey; color: black; align-content: end; - padding: 2em; - margin-top: 2em; margin-bottom: 2em; } input[type="text"], - input[type="password"]{ width: 100%; padding: .5em; @@ -236,10 +248,15 @@ button { margin: 1em; } -button:hover{ - background-color: #282828; + +#changeUserBtn { + padding:.9em; } +button:hover{ + background-color: #282828; + + } .saveBtn, .delBtn { background-color: base.$green; @@ -248,27 +265,11 @@ button:hover{ padding:.9em; border:none; } - .delBtn { background-color: darkred; } -#changeUserBtn { - padding:.9em; - -} - -main { - background-color: white; - color:black; - display:flex; - justify-content: center; - align-items: center; - flex-direction: column; - width: 100%; - text-align: left; - left:0; +#dangerZone { + color: darkred; } - - </style> \ No newline at end of file