Skip to content
Snippets Groups Projects
Commit 90e7baa2 authored by VIktorGrev's avatar VIktorGrev
Browse files

style: Transelating most of the components

parent a9dda675
No related branches found
No related tags found
1 merge request!64style: Transelating most of the components
Pipeline #281952 failed
Stage: install
Stage: build
Stage: test
Stage: lint
Hide whitespace changes
Inline Side-by-side
Showing
with 52 additions and 48 deletions
src/components/BaseComponents/Menu.vue
+ 15
− 14
View file @ 90e7baa2
......@@ -7,7 +7,7 @@
</router-link>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
aria-label="Bytt navigasjon">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
......@@ -15,7 +15,7 @@
<li class="nav-item">
<router-link data-cy="savingGoals" class="nav-link text-white"
:to="toSavingGoals()"><img
src="@/assets/icons/saving.svg">Saving goals</router-link>
src="@/assets/icons/saving.svg">Sparemål</router-link>
</li>
<li class="nav-item">
<router-link data-cy="leaderboard" class="nav-link text-white"
......@@ -24,11 +24,11 @@
</li>
<li class="nav-item">
<router-link data-cy="news" class="nav-link text-white" :to="toNews()"><img
src="@/assets/icons/newsletter.svg">News</router-link>
src="@/assets/icons/newsletter.svg">Nyheter</router-link>
</li>
<li class="nav-item">
<router-link data-cy="store" class="nav-link text-white" :to="toStore()"><img
src="@/assets/icons/storefront.svg">Store</router-link>
src="@/assets/icons/storefront.svg">Butikk</router-link>
</li>
<li class="nav-item dropdown">
<a data-mdb-dropdown-init class=" nav-link me-3 dropdown-toggle hidden-arrow notification" href="#" id="navbarDropdownMenuLink"
......@@ -40,13 +40,13 @@
<li v-for="(array,key) in notifMap" :key="key" >
<div class="d-flex align-items-center">
<div v-if="array[1][0] === '1'" class="flex-shrink-0">
<img src="/src/assets/icons/medal.png" alt="Notification Icon" class="notification-icon" style="height: 20px; width: 20px">
<img src="/src/assets/icons/medal.png" alt="Varslingsikon" class="notification-icon" style="height: 20px; width: 20px">
</div>
<div v-if="array[1][0] === '2'" class="flex-shrink-0">
<img src="/src/assets/userprofile.png" alt="Notification Icon" class="notification-icon" style="height: 20px; width: 20px">
<img src="/src/assets/userprofile.png" alt="Varslingsikon" class="notification-icon" style="height: 20px; width: 20px">
</div>
<div v-if="array[1][0] === '3'" class="flex-shrink-0">
<img src="/src/assets/icons/piggybank.svg" alt="Notification Icon" class="notification-icon" style="height: 20px; width: 20px">
<img src="/src/assets/icons/piggybank.svg" alt="Varslingsikon" class="notification-icon" style="height: 20px; width: 20px">
</div>
<div class="flex-grow-1 ms-3">
<router-link class="not-item dropdown-item text-white" :to="getPath(array[1][0])">{{array[1][1]}}</router-link>
......@@ -69,33 +69,34 @@
<ul class="dropdown-menu dropdown-username-content">
<li><router-link data-cy="profile"
class="dropdown-item text-white dropdown-username-link" :to="toUserProfile()"><img
src="@/assets/icons/person.svg">User Profile</router-link></li>
src="@/assets/icons/person.svg">Brukerprofil</router-link></li>
<li v-if="useUserInfoStore().isPremium"><router-link data-cy="budget"
class="dropdown-item text-white dropdown-username-link" :to="toBudget()"><img>Budget</router-link></li>
class="dropdown-item text-white dropdown-username-link" :to="toBudget()"><img>Budjsett</router-link></li>
<li><router-link data-cy="friends"
class="dropdown-item text-white dropdown-username-link" :to="toFriends()"><img
src="@/assets/icons/friends.svg">Friends</router-link></li>
src="@/assets/icons/friends.svg">Venner</router-link></li>
<li><router-link data-cy="settings"
class="dropdown-item text-white dropdown-username-link" :to="toSetting()"><img
src="@/assets/icons/settings.svg">Settings</router-link></li>
src="@/assets/icons/settings.svg">Innstillinger</router-link></li>
<li><router-link data-cy="feedback"
class="dropdown-item text-white dropdown-username-link" :to="toFeedback()"><img
src="@/assets/icons/feedback.svg">Feedback</router-link></li>
src="@/assets/icons/feedback.svg">Tilbakemelding</router-link></li>
<li><router-link data-cy="admin"
class="dropdown-item text-white dropdown-username-link" :to="toSetting()"><img
src="@/assets/icons/admin.svg">Admin</router-link></li>
<li><a data-testid="logout" class="dropdown-item text-white dropdown-username-link" ref="#" @click="toLogout()"><img
src="@/assets/icons/logout.svg">Log out</a></li>
src="@/assets/icons/logout.svg">Logg ut</a></li>
</ul>
</li>
<li v-else class="nav-item">
<a class="nav-link text-white" href="#" @click="toLogout">Login</a>
<a class="nav-link text-white" href="#" @click="toLogout">Logg inn</a>
</li>
</ul>
</div>
</div>
</nav>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
import { useUserInfoStore } from '@/stores/UserStore';
......
src/components/Budget/BudgetBox.vue
+ 2
− 2
View file @ 90e7baa2
......@@ -91,7 +91,7 @@ const onBudgetDeleted = () => {
</i>
<div class="expenses-container">
<h5>{{expenses}} kr</h5>
<p>Expenses</p>
<p>Utgifter</p>
</div>
</div>
......@@ -101,7 +101,7 @@ const onBudgetDeleted = () => {
</i>
<div class="balance-container">
<h5>{{balance}} kr</h5>
<p>Balance</p>
<p>Saldo</p>
</div>
</div>
</div>
......
src/components/Budget/ExpenseBox.vue
+ 5
− 5
View file @ 90e7baa2
......@@ -50,11 +50,11 @@ const emitEditEvent = () => {
<p>{{amount}} kr</p>
<button class="btn btn-success" data-bs-toggle="collapse" :data-bs-target="'#' + index" aria-expanded="false" aria-controls="editBudgetCollapse">
<img src="../../assets/icons/edit-button.svg" alt="Edit" height="18" width="18">
Edit
Endre
</button>
<button class="btn btn-danger" @click="emitDeleteEvent">
<img src="../../assets/icons/trash-can.svg" alt="Edit" height="18" width="18">
Delete
Slett
</button>
</div>
......@@ -62,10 +62,10 @@ const emitEditEvent = () => {
<div class="container collapse-container">
<form @submit.prevent="emitEditEvent">
<div class="input-group">
<span class="input-group-text">Edit expense {{ index+1 }} </span>
<input type="text" class="form-control" placeholder="Expense description" required v-model="editDescription">
<span class="input-group-text">Endre utgift {{ index+1 }} </span>
<input type="text" class="form-control" placeholder="Utgift beskrivelse" required v-model="editDescription">
<input type="number" min="0" class="form-control" placeholder="Amount (kr)" required v-model="editAmount">
<button type="submit" class="btn btn-primary" data-bs-toggle="collapse" :data-bs-target="'#' + index">Confirm</button>
<button type="submit" class="btn btn-primary" data-bs-toggle="collapse" :data-bs-target="'#' + index">Bekreft</button>
</div>
</form>
</div>
......
src/components/Budget/Modal/ConfirmDeleteModal.vue
+ 3
− 3
View file @ 90e7baa2
......@@ -36,12 +36,12 @@ const deleteBudget = async () => {
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h3>Are you sure you want to delete this budget <i>{{ budgetTitle }}?</i></h3>
<h3>Er du sikker på at du vil slette dette budgettet <i>{{ budgetTitle }}?</i></h3>
<button class="btn btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<button class="btn btn-primary" data-bs-dismiss="modal" @click="deleteBudget">Yes</button>
<button class="btn btn-primary" data-bs-dismiss="modal">No</button>
<button class="btn btn-primary" data-bs-dismiss="modal" @click="deleteBudget">Ja</button>
<button class="btn btn-primary" data-bs-dismiss="modal">Nei</button>
</div>
</div>
</div>
......
src/components/Budget/Modal/ImportBudgetModal.vue
+ 1
− 1
View file @ 90e7baa2
......@@ -30,7 +30,7 @@ const emitImportBudgetEvent = (budgetId: number) => {
<div class="modal-dialog modal-dialog-centered modal-lg">
<div class="modal-content">
<div class="modal-header">
<h3>Choose a budget you would like to import</h3>
<h3>Velg et budget du vil importere</h3>
<button class="btn btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
......
src/components/Configuration/ConfigurationSteps/Commitment.vue
+ 6
− 5
View file @ 90e7baa2
......@@ -43,27 +43,28 @@ const onClick = () => {
<template>
<div class="container">
<h3 id="commitmentText" class="align-items-center justify-content-center">
In which degree are you willing to make changes?
I hvilken grad er du villig til å gjøre endringer?
</h3>
<form class="btn-group-vertical" ref="formRef" @submit.prevent="onClick">
<input ref="lowRef" type="radio" class="btn-check" name="commitment" id="btn-check-outlined" autocomplete="off" required>
<label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check-outlined">Low</label>
<label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check-outlined">Lav</label>
<input ref="mediumRef" type="radio" class="btn-check" name="commitment" id="btn-check2-outlined" autocomplete="off" required>
<label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check2-outlined">Medium</label>
<label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check2-outlined">Middels</label>
<input ref="highRef" type="radio" class="btn-check" name="commitment" id="btn-check3-outlined" autocomplete="off" required>
<label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check3-outlined">High</label>
<label class="btn btn-outline-primary d-flex align-items-center justify-content-center" for="btn-check3-outlined">Høy</label>
</form>
<p class="text-danger">{{ errorMsg }}</p>
<div class="confirm-button-container">
<button1 id="confirmButton" @click="onClick" button-text="Continue"></button1>
<button1 id="confirmButton" @click="onClick" button-text="Fortsett"></button1>
</div>
</div>
</template>
<style scoped>
div.container {
display: flex;
......
src/components/NewsComponents/NewsComponent.vue
+ 1
− 1
View file @ 90e7baa2
......@@ -49,7 +49,7 @@ export default {
<div class="content">
<h3>{{ article.title }}</h3>
<p>{{ article.description }}</p>
<a :href="article.url" target="_blank">Read more</a>
<a :href="article.url" target="_blank">Les mer</a>
</div>
<div class="image">
<img :src="article.urlToImage" alt="Article Image"/>
......
src/components/UserProfile/UserProfileForeignLayout.vue
+ 10
− 9
View file @ 90e7baa2
......@@ -78,15 +78,15 @@ function toUpdateUserSettings(){
<div class="card">
<div class="rounded-top text-white d-flex flex-row bg-primary" style="height:200px;">
<div class="ms-4 mt-5 d-flex flex-column" style="width: 150px;">
<img :src="imageUrl" alt="Generic placeholder image"
<img :src="imageUrl" alt="Generisk plassholderbilde"
class="img-fluid img-thumbnail mt-4 mb-2" style="width: 150px; z-index: 1">
<button v-if="!friend" type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-primary"
data-mdb-ripple-color="dark" style="z-index: 1;" @click="addFriend">
Add Friend
Legg til venn
</button>
<button v-if="friend" type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-danger"
data-mdb-ripple-color="dark" style="z-index: 1;" @click="removeFriend">
Remove Friend
Fjern venn
</button>
</div>
<div class="ms-3" style="margin-top: 130px;">
......@@ -97,7 +97,7 @@ function toUpdateUserSettings(){
<div class="d-flex justify-content-end text-center py-1">
<div>
<p class="mb-1 h2">253 <img src="@/assets/items/pigcoin.png" style="width: 4rem"></p>
<p class="small text-muted mb-0">Points</p>
<p class="small text-muted mb-0">Poeng</p>
</div>
<div class="px-3">
<p class="mb-1 h2">1026 <img src="@/assets/icons/fire.png" style="width: 4rem"></p>
......@@ -109,7 +109,7 @@ function toUpdateUserSettings(){
<div class="row">
<div class="col">
<div class="container-fluid">
<h1 class="mt-5 text-start badges-text">Badges</h1>
<h1 class="mt-5 text-start badges-text">Merker</h1>
<div class="scrolling-wrapper-badges row flex-row flex-nowrap mt-4 pb-4 pt-2">
<div class="col-5">
......@@ -148,9 +148,9 @@ function toUpdateUserSettings(){
</div>
<div class="row">
<div class="col">
<!-- Here is the history of saving target -->
<!-- Her er historikken over lagrede mål -->
<div class="container-fluid mb-5">
<h1 class="mt-5 text-start history-text">History</h1>
<h1 class="mt-5 text-start history-text">Historie</h1>
<div class="row scrolling-wrapper-history">
<div v-for="index in numberOfHistory" :key="index"
class="col-md-4 col-sm-4 col-lg-4 col-xs-4 col-xl-4 control-label">
......@@ -164,8 +164,8 @@ function toUpdateUserSettings(){
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">{{ cardTitles[index - 1] }}</h5>
<p class="card-text">Money saved: 200 <br />You are one challenge: 21</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
<p class="card-text">Penger spart: 200 <br />Du har fullført en utfordring: 21</p>
<p class="card-text"><small class="text-muted">Sist oppdatert for 3 minutter siden</small></p>
<a href="#" class="btn stretched-link" @click="toRoadmap"></a>
</div>
</div>
......@@ -185,6 +185,7 @@ function toUpdateUserSettings(){
</div>
</template>
<style scoped>
.scrolling-wrapper-badges {
overflow-x: auto;
......
src/components/UserProfile/UserProfileLayout.vue
+ 9
− 8
View file @ 90e7baa2
......@@ -48,11 +48,11 @@ const toUpdateUserSettings = () => {
<div class="card">
<div class="rounded-top text-white d-flex flex-row bg-primary" style="height:200px;">
<div class="ms-4 mt-5 d-flex flex-column" style="width: 150px;">
<img :src="imageUrl" alt="Generic placeholder image"
<img :src="imageUrl" alt="Generisk plassholderbilde"
class="img-fluid img-thumbnail mt-4 mb-2" style="width: 150px; z-index: 1">
<button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-primary"
data-mdb-ripple-color="dark" style="z-index: 1;" id="toUpdate" @click="toUpdateUserSettings">
Edit profile
Rediger profil
</button>
</div>
<div class="ms-3" style="margin-top: 130px;">
......@@ -63,7 +63,7 @@ const toUpdateUserSettings = () => {
<div class="d-flex justify-content-end text-center py-1">
<div>
<p class="mb-1 h2">253 <img src="@/assets/items/pigcoin.png" style="width: 4rem"></p>
<p class="small text-muted mb-0">Points</p>
<p class="small text-muted mb-0">Poeng</p>
</div>
<div class="px-3">
<p class="mb-1 h2">1026 <img src="@/assets/icons/fire.png" style="width: 4rem"></p>
......@@ -75,7 +75,7 @@ const toUpdateUserSettings = () => {
<div class="row">
<div class="col">
<div class="container-fluid">
<h1 class="mt-5 text-start badges-text">Badges</h1>
<h1 class="mt-5 text-start badges-text">Merker</h1>
<div class="scrolling-wrapper-badges row flex-row flex-nowrap mt-4 pb-4 pt-2">
<div class="col-5">
......@@ -114,9 +114,9 @@ const toUpdateUserSettings = () => {
</div>
<div class="row">
<div class="col">
<!-- Here is the history of saving target -->
<!-- Her er historikken over lagrede mål -->
<div class="container-fluid mb-5">
<h1 class="mt-5 text-start history-text">History</h1>
<h1 class="mt-5 text-start history-text">Historie</h1>
<div class="row scrolling-wrapper-history">
<div v-for="index in numberOfHistory" :key="index"
class="col-md-4 col-sm-4 col-lg-4 col-xs-4 col-xl-4 control-label">
......@@ -130,8 +130,8 @@ const toUpdateUserSettings = () => {
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">{{ cardTitles[index - 1] }}</h5>
<p class="card-text">Money saved: 200 <br />You are one challenge: 21</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
<p class="card-text">Penger spart: 200 <br />Du har fullført en utfordring: 21</p>
<p class="card-text"><small class="text-muted">Sist oppdatert for 3 minutter siden</small></p>
<a href="#" class="btn stretched-link" @click="toRoadmap"></a>
</div>
</div>
......@@ -151,6 +151,7 @@ const toUpdateUserSettings = () => {
</div>
</template>
<style scoped>
.scrolling-wrapper-badges {
overflow-x: auto;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment