From 94eba9fe96797908ea81cba473b5b1566cdbd74a Mon Sep 17 00:00:00 2001
From: "Papadakis, Charalampos" <charalampos.papadakis@sybit.de>
Date: Mon, 30 Oct 2023 11:22:50 +0100
Subject: [PATCH 1/3] issue: Landing Page text into localization/translation
---
frontend/src/locales/de.json | 6 ++
frontend/src/locales/en.json | 5 ++
frontend/src/views/LandingPage.vue | 127 ++++++++++++-----------------
3 files changed, 63 insertions(+), 75 deletions(-)
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index 4cbeb201f..05331bf31 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -144,7 +144,13 @@
}
},
"hostLeft": "Warte, bis der Organisator die Sitzung wieder betritt..."
+ },
+ "instruction": {
+ "setUpSession": "Erstellen Sie eine Planungssitzung und wählen Sie Ihr bevorzugtes Abstimmungsset aus. <br> <br> Sie können Ihre User Stories importieren oder JIRA verbinden, um Story Points zu synchronisieren. <br> <br> <span style='color: grey;'>Verbindung zum Issue-Tracker</span> <br> <br> DIVENI kann sich mit Issue-Trackern wie Azure DevOps, JIRA Server und Cloud verbinden, um User Stories anzuzeigen und die abgestimmten Ergebnisse Ihres Planning Pokers zu aktualisieren.",
+ "inviteYourTeam": "Laden Sie Ihr Team mit QR-Code, Einladungslink oder Code ein. <br> <br> Jeder Benutzer wird zufällig einem Tier zugewiesen und ist bereit zur Schätzung. <br> <br> Wenn alle in der Sitzung sind, können Sie mit der Schätzung beginnen. Wenn Sie ein Zeitlimit festgelegt haben, wird dieses als Limit für die Abstimmungszeit verwendet.",
+ "estimateUserStories": "Jedes Mitglied des Teams kann sein definiertes Set verwenden, um die ausgewählte User Story zu bewerten. <br> <br> Wenn alle abgestimmt haben, zeigt DIVENI die Ergebnisse und wählt zufällig zwei Wähler aus, die das Minimum / Maximum gewählt haben, um ihre Schätzung zu besprechen. <br> <br> Nach der Diskussion können Sie die Schätzung wiederholen."
}
+
},
"session": {
"prepare": {
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 3472ec3d6..3b916370a 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -144,6 +144,11 @@
}
},
"hostLeft": "Waiting for the host to come back..."
+ },
+ "instruction": {
+ "setUpSession": "Create a planning session and select your prefered voting set. <br> <br> You could import your user stories or connect JIRA to syncronize story points. <br> <br> <span style='color: grey;'>Connecting to Issue-Tracker </span> <br> <br> DIVENI could connect to issue trackers like Azure DevOps, JIRA Server and Cloud to show user stories and update the voted results of your planning poker.",
+ "inviteYourTeam": "Invite your team using QR-Code, invite link or code. <br> <br> Every user will be randomly assinged to a animal and is ready to estimate. <br> <br> If everybody is in the session, you could start estimation. Having defined a time limit this will be used as limit for voting time.",
+ "estimateUserStories": "Every member of the Team could use your defined set to vote the selected user story. <br> <br> If everybody has voted, DIVENI shows results and randomly selects two voters having voted minimum / maximum to discuss their estimation. <br> <br> After discussion you could repeat estimation."
}
},
"session": {
diff --git a/frontend/src/views/LandingPage.vue b/frontend/src/views/LandingPage.vue
index 0eda10f19..6505926ad 100644
--- a/frontend/src/views/LandingPage.vue
+++ b/frontend/src/views/LandingPage.vue
@@ -2,7 +2,7 @@
<div id="landing-page">
<b-container fluid class="teaser">
<b-container>
- <b-jumbotron header="DIVENI" lead="Instant free and easy remote Planning Poker" />
+ <b-jumbotron header="DIVENI" lead="Instant free and easy remote Planning Poker"/>
</b-container>
</b-container>
<b-container class="my-5">
@@ -35,74 +35,49 @@
</AnalyticsDataComponent>
<b-container class="py-5">
- <div class="parent py-5 px-5">
- <div class="background py-5"></div>
- <div class="text">
- <h1>Remote Planning Poker using DIVENI</h1>
- <b-card-group deck class="py-5">
- <b-card class="pictureCard">
- <b-card-text>
- <b-img
- :src="require(`@/assets/SetUpSession.png`)"
- class="landingPagePictures"
- />
- </b-card-text>
- </b-card>
- <b-card class="pictureCard">
- <b-card-text>
- <b-img
- :src="require(`@/assets/InviteYourTeam.png`)"
- class="landingPagePictures"
- />
- </b-card-text>
- </b-card>
- <b-card class="pictureCard">
- <b-card-text>
- <b-img
- :src="require(`@/assets/EstimateUserStories.png`)"
- class="landingPagePictures"
- />
- </b-card-text>
- </b-card>
- </b-card-group>
- <b-card-group deck>
- <b-card class="aboutDiveni" title="Set up Session">
- <b-card-text>
- Create a planning session and select your prefered voting set.
- </b-card-text>
- <b-card-text>
- You could import your user stories or connect JIRA to syncronize story points.
- </b-card-text>
-
- <b-card-sub-title> Connecting to Issue-Tracker </b-card-sub-title>
- <b-card-text>
- DIVENI could connect to issue trackers like Azure DevOps, JIRA Server and Cloud to show
- user stories and update the voted results of your planning poker.
- </b-card-text>
- </b-card>
- <b-card class="aboutDiveni" title="Invite your Team">
- <b-card-text> Invite your team using QR-Code, invite link or code. </b-card-text>
- <b-card-text>
- Every user will be randomly assinged to a animal and is ready to estimate.
- </b-card-text>
- <b-card-text>
- If everybody is in the session, you could start estimation. Having defined a time limit
- this will be used as limit for voting time.
- </b-card-text>
- </b-card>
- <b-card class="aboutDiveni" title="Estimate User Stories">
- <b-card-text>
- Every member of team could use your defined set to vote the selected user story.
- </b-card-text>
- <b-card-text>
- If everybody has voted, DIVENI shows results and randomly selects two voters having
- voted minimum / maximum to discuss their estimation.
- </b-card-text>
- <b-card-text> After discussion you could repeat estimation. </b-card-text>
- </b-card>
- </b-card-group>
- </div>
+ <div class="parent py-5 px-5">
+ <div class="background py-5"></div>
+ <div class="text">
+ <h1>Remote Planning Poker using DIVENI</h1>
+ <b-card-group deck class="py-5">
+ <b-card class="pictureCard">
+ <b-card-text>
+ <b-img
+ :src="require(`@/assets/SetUpSession.png`)"
+ class="landingPagePictures"
+ />
+ </b-card-text>
+ </b-card>
+ <b-card class="pictureCard">
+ <b-card-text>
+ <b-img
+ :src="require(`@/assets/InviteYourTeam.png`)"
+ class="landingPagePictures"
+ />
+ </b-card-text>
+ </b-card>
+ <b-card class="pictureCard">
+ <b-card-text>
+ <b-img
+ :src="require(`@/assets/EstimateUserStories.png`)"
+ class="landingPagePictures"
+ />
+ </b-card-text>
+ </b-card>
+ </b-card-group>
+ <b-card-group deck>
+ <b-card class="aboutDiveni" title="Set up Session">
+ <b-card-text v-html="$t('page.instruction.setUpSession')"></b-card-text>
+ </b-card>
+ <b-card class="aboutDiveni" title="Invite your Team">
+ <b-card-text v-html="$t('page.instruction.inviteYourTeam')"></b-card-text>
+ </b-card>
+ <b-card class="aboutDiveni" title="Estimate User Stories">
+ <b-card-text v-html="$t('page.instruction.estimateUserStories')"></b-card-text>
+ </b-card>
+ </b-card-group>
</div>
+ </div>
<h1 class="mt-5">About DIVENI</h1>
<p>DIVENI was initially developed by students of HTWG Constance and is open source now.</p>
<p>
@@ -119,12 +94,13 @@ import LandingPageCard from "../components/LandingPageCard.vue";
import Constants from "../constants";
import Session from "../model/Session";
import AnalyticsDataComponent from "../components/AnalyticsDataComponent.vue";
+
export default Vue.extend({
name: "LandingPage",
components: {
LandingPageCard,
AnalyticsDataComponent,
-},
+ },
data() {
return {
sessionWrapper: {} as { session: Session },
@@ -165,7 +141,7 @@ export default Vue.extend({
sessionState: string;
members: Array<string>;
};
- this.sessionWrapper = { session };
+ this.sessionWrapper = {session};
} catch (e) {
console.error(`got error: ${e}`);
window.localStorage.removeItem("adminCookie");
@@ -173,10 +149,10 @@ export default Vue.extend({
}
},
goToJoinPage() {
- this.$router.push({ name: "JoinPage" });
+ this.$router.push({name: "JoinPage"});
},
goToPrepareSessionPage() {
- this.$router.push({ name: "PrepareSessionPage" });
+ this.$router.push({name: "PrepareSessionPage"});
},
goToSessionPage() {
this.$store.commit("setUserStories", {
@@ -211,7 +187,7 @@ export default Vue.extend({
.teaser {
background: linear-gradient(var(--background-color-primary), var(--pictureGradientEnd)),
- url("~@/assets/img/diveni-background.png");
+ url("~@/assets/img/diveni-background.png");
background-size: cover;
background-repeat: no-repeat;
}
@@ -226,8 +202,9 @@ export default Vue.extend({
.card-sub-title {
color: red;
}
-.card-title{
- color:var(--text-primary-color)
+
+.card-title {
+ color: var(--text-primary-color)
}
.parent {
From fc42d9ede38b05e2f49a8a230f2c40b04724eea6 Mon Sep 17 00:00:00 2001
From: "Papadakis, Charalampos" <charalampos.papadakis@sybit.de>
Date: Mon, 30 Oct 2023 12:00:07 +0100
Subject: [PATCH 2/3] issue: german removed
---
frontend/src/locales/de.json | 6 ------
1 file changed, 6 deletions(-)
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index 05331bf31..4cbeb201f 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -144,13 +144,7 @@
}
},
"hostLeft": "Warte, bis der Organisator die Sitzung wieder betritt..."
- },
- "instruction": {
- "setUpSession": "Erstellen Sie eine Planungssitzung und wählen Sie Ihr bevorzugtes Abstimmungsset aus. <br> <br> Sie können Ihre User Stories importieren oder JIRA verbinden, um Story Points zu synchronisieren. <br> <br> <span style='color: grey;'>Verbindung zum Issue-Tracker</span> <br> <br> DIVENI kann sich mit Issue-Trackern wie Azure DevOps, JIRA Server und Cloud verbinden, um User Stories anzuzeigen und die abgestimmten Ergebnisse Ihres Planning Pokers zu aktualisieren.",
- "inviteYourTeam": "Laden Sie Ihr Team mit QR-Code, Einladungslink oder Code ein. <br> <br> Jeder Benutzer wird zufällig einem Tier zugewiesen und ist bereit zur Schätzung. <br> <br> Wenn alle in der Sitzung sind, können Sie mit der Schätzung beginnen. Wenn Sie ein Zeitlimit festgelegt haben, wird dieses als Limit für die Abstimmungszeit verwendet.",
- "estimateUserStories": "Jedes Mitglied des Teams kann sein definiertes Set verwenden, um die ausgewählte User Story zu bewerten. <br> <br> Wenn alle abgestimmt haben, zeigt DIVENI die Ergebnisse und wählt zufällig zwei Wähler aus, die das Minimum / Maximum gewählt haben, um ihre Schätzung zu besprechen. <br> <br> Nach der Diskussion können Sie die Schätzung wiederholen."
}
-
},
"session": {
"prepare": {
From 15465e1b4848cb1b78e8365382b50ee6f5a66f81 Mon Sep 17 00:00:00 2001
From: "Papadakis, Charalampos" <charalampos.papadakis@sybit.de>
Date: Mon, 30 Oct 2023 13:41:44 +0100
Subject: [PATCH 3/3] run lint:fix
---
frontend/src/App.vue | 115 ++++++++++++------
frontend/src/assets/variables.css | 31 +++--
.../src/components/AnalyticsDataComponent.vue | 88 +++++++-------
frontend/src/components/CardSetComponent.vue | 104 ++++++++--------
.../src/components/CopySessionIdPopup.vue | 28 ++++-
frontend/src/components/EstimateTimer.vue | 23 ++--
frontend/src/components/JiraComponent.vue | 30 ++---
frontend/src/components/JoinPageCard.vue | 27 ++--
frontend/src/components/LandingPageCard.vue | 10 +-
frontend/src/components/MarkdownEditor.vue | 41 +++----
frontend/src/components/MemberVoteCard.vue | 4 +-
.../components/ProjectSelectionComponent.vue | 4 +-
frontend/src/components/RoundedAvatar.vue | 5 +-
frontend/src/components/SessionMemberCard.vue | 2 +-
.../SignInWithAzureDevOpsButtonComponent.vue | 9 +-
.../SignInWithJiraButtonComponent.vue | 10 +-
.../SignInWithJiraCloudButtonComponent.vue | 13 +-
.../SignInWithJiraServerButtonComponent.vue | 8 +-
.../src/components/StoryPointsComponent.vue | 2 -
.../src/components/ThemeToggleComponent.vue | 30 ++---
frontend/src/components/UserStories.vue | 41 ++++---
.../src/components/UserStoryComponent.vue | 2 -
.../src/components/UserStoryDescriptions.vue | 21 ++--
.../components/actions/SessionCloseButton.vue | 35 +++---
.../components/actions/SessionLeaveButton.vue | 2 +-
.../components/actions/SessionStartButton.vue | 5 +-
.../components/navigation/LocaleDropdown.vue | 6 +-
.../navigation/TopNavigationBar.vue | 17 +--
frontend/src/services/api.service.ts | 7 +-
frontend/src/views/AboutPage.vue | 27 ++--
frontend/src/views/JoinPage.vue | 13 +-
frontend/src/views/LandingPage.vue | 32 ++---
frontend/src/views/MemberVotePage.vue | 3 +-
frontend/src/views/PrepareSessionPage.vue | 89 +++++++-------
frontend/src/views/ResultPage.vue | 23 ++--
frontend/src/views/SessionPage.vue | 61 ++++++----
36 files changed, 534 insertions(+), 434 deletions(-)
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 3d1b12c94..d6641acc8 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -32,26 +32,68 @@ export default Vue.extend({
main {
min-height: calc(100vh - 10rem);
background:
- /* Top */
- radial-gradient(
- farthest-corner at 500px 500px,
- var(--blurredColour1) 0.1%,
- rgba(255, 255, 255, 0) 26%
- ),
- radial-gradient(farthest-corner at 500px 500px, var(--blurredColour1) 0.1%, rgba(255, 255, 255, 0) 26%),
- radial-gradient(farthest-corner at 7% 7%, var(--blurredColour2) 0.1%, rgba(255, 255, 255, 0) 8%),
- radial-gradient(farthest-corner at 17% 40px, var(--blurredColour3) 1%, rgba(255, 255, 255, 0) 16%),
- radial-gradient(farthest-corner at 17% 40px, var(--blurredColour3) 1%, rgba(255, 255, 255, 0) 16%),
- radial-gradient(farthest-corner at 36% 7%, var(--blurredColour4) 0.1%, rgba(255, 255, 255, 0) 18%),
- radial-gradient(farthest-corner at 36% 7%, var(--blurredColour4) 0.1%, rgba(255, 255, 255, 0) 18%),
-
- /* Bottom */
- radial-gradient(farthest-corner at 95% 42%, var(--blurredColour5) 0.1%, rgba(255, 255, 255, 0) 26%),
- radial-gradient(farthest-corner at 0% 58%, var(--blurredColour5) 0.1%, rgba(255, 255, 255, 0) 22%),
- radial-gradient(circle farthest-corner at 65% 95%, var(--blurredColour3) 0.1%, rgba(255, 255, 255, 0) 13%),
- radial-gradient( farthest-corner at 100% 87%, var(--blurredColour3) 0.1%, rgba(255, 255, 255, 0) 13%),
- radial-gradient( farthest-corner at 84% 82%, var(--blurredColour4) 0.1%, rgba(255, 255, 255, 0) 13%),
- radial-gradient(circle farthest-corner at 84% 82%, var(--blurredColour6) 0.1%, rgba(255, 255, 255, 0) 13%);
+ /* Top */ radial-gradient(
+ farthest-corner at 500px 500px,
+ var(--blurredColour1) 0.1%,
+ rgba(255, 255, 255, 0) 26%
+ ),
+ radial-gradient(
+ farthest-corner at 500px 500px,
+ var(--blurredColour1) 0.1%,
+ rgba(255, 255, 255, 0) 26%
+ ),
+ radial-gradient(farthest-corner at 7% 7%, var(--blurredColour2) 0.1%, rgba(255, 255, 255, 0) 8%),
+ radial-gradient(
+ farthest-corner at 17% 40px,
+ var(--blurredColour3) 1%,
+ rgba(255, 255, 255, 0) 16%
+ ),
+ radial-gradient(
+ farthest-corner at 17% 40px,
+ var(--blurredColour3) 1%,
+ rgba(255, 255, 255, 0) 16%
+ ),
+ radial-gradient(
+ farthest-corner at 36% 7%,
+ var(--blurredColour4) 0.1%,
+ rgba(255, 255, 255, 0) 18%
+ ),
+ radial-gradient(
+ farthest-corner at 36% 7%,
+ var(--blurredColour4) 0.1%,
+ rgba(255, 255, 255, 0) 18%
+ ),
+ /* Bottom */
+ radial-gradient(
+ farthest-corner at 95% 42%,
+ var(--blurredColour5) 0.1%,
+ rgba(255, 255, 255, 0) 26%
+ ),
+ radial-gradient(
+ farthest-corner at 0% 58%,
+ var(--blurredColour5) 0.1%,
+ rgba(255, 255, 255, 0) 22%
+ ),
+ radial-gradient(
+ circle farthest-corner at 65% 95%,
+ var(--blurredColour3) 0.1%,
+ rgba(255, 255, 255, 0) 13%
+ ),
+ radial-gradient(
+ farthest-corner at 100% 87%,
+ var(--blurredColour3) 0.1%,
+ rgba(255, 255, 255, 0) 13%
+ ),
+ radial-gradient(
+ farthest-corner at 84% 82%,
+ var(--blurredColour4) 0.1%,
+ rgba(255, 255, 255, 0) 13%
+ ),
+ radial-gradient(
+ circle farthest-corner at 84% 82%,
+ var(--blurredColour6) 0.1%,
+ rgba(255, 255, 255, 0) 13%
+ );
background-color: var(--background-color-primary);
backdrop-filter: blur(5px);
color: var(--text-primary-color) !important;
@@ -69,18 +111,18 @@ h4 {
color: var(--text-primary-color);
}
/* Landing Page */
-.newSessionCard .landingPageCardButton{
+.newSessionCard .landingPageCardButton {
background-color: var(--startButton);
border-radius: var(--buttonShape);
color: var(--text-primary-color);
}
-.newSessionCard .landingPageCardButton:hover{
+.newSessionCard .landingPageCardButton:hover {
background-color: var(--startButtonHovered);
color: var(--text-primary-color);
}
-.newSessionCard .landingPageCardButton:focus{
+.newSessionCard .landingPageCardButton:focus {
background-color: var(--startButtonHovered) !important;
}
@@ -88,13 +130,13 @@ h4 {
background-color: #52173100; /* So the Footer does not overflow */
}
-.joinSessionCard .landingPageCardButton{
+.joinSessionCard .landingPageCardButton {
background-color: var(--joinButton);
border-radius: var(--buttonShape);
color: var(--text-primary-color);
}
-.joinSessionCard .landingPageCardButton:hover{
+.joinSessionCard .landingPageCardButton:hover {
background-color: var(--joinButtonHovered);
color: var(--text-primary-color);
}
@@ -122,7 +164,7 @@ h4 {
background-color: #52173100; /* So the Footer does not overflow */
}
/* Prepare Page */
-.selectedTab {
+.selectedTab {
background-color: var(--preparePageMainColor) !important;
}
@@ -189,27 +231,33 @@ a.btn.startButton:focus {
background-color: var(--startButtonHovered) !important;
}
-.btn.dropdown-toggle { /* User Estimation Button */
+.btn.dropdown-toggle {
+ /* User Estimation Button */
color: var(--text-primary-color);
background-color: var(--joinButton);
}
-.btn.dropdown-toggle:active { /* User Estimation Button hold */
+.btn.dropdown-toggle:active {
+ /* User Estimation Button hold */
background-color: var(--joinButtonHovered) !important;
color: var(--text-primary-color) !important;
}
-.btn.dropdown-toggle:hover { /* User Estimation Button Hover */
+.btn.dropdown-toggle:hover {
+ /* User Estimation Button Hover */
background-color: var(--joinButtonHovered);
color: var(--text-primary-color);
}
-.btn-secondary:not(:disabled):not(.disabled).active, .show > .btn-secondary.dropdown-toggle { /* User Estimation Button clicked */
+.btn-secondary:not(:disabled):not(.disabled).active,
+.show > .btn-secondary.dropdown-toggle {
+ /* User Estimation Button clicked */
background-color: var(--joinButton) !important;
color: var(--text-primary-color) !important;
}
-.btn-secondary:focus{ /* User Estimation Button after click & add User Story Button on click hold*/
+.btn-secondary:focus {
+ /* User Estimation Button after click & add User Story Button on click hold*/
background-color: var(--joinButtonHovered) !important;
color: var(--text-primary-color) !important;
}
@@ -227,7 +275,7 @@ a.btn.startButton:focus {
border-color: var(--text-primary-color) !important;
}
/*scrollbar - firefox*/
-:root{
+:root {
scrollbar-color: #888 rgba(0, 0, 0, 0) !important;
scrollbar-width: thin !important;
}
@@ -253,7 +301,6 @@ a.btn.startButton:focus {
}
::-webkit-scrollbar-corner {
- background: rgba(0,0,0,0);
+ background: rgba(0, 0, 0, 0);
}
-
</style>
diff --git a/frontend/src/assets/variables.css b/frontend/src/assets/variables.css
index 1a5f6edcc..cab7e4bb0 100644
--- a/frontend/src/assets/variables.css
+++ b/frontend/src/assets/variables.css
@@ -4,43 +4,42 @@
--blurredColour2: rgba(0, 0, 0, 0.219);
--blurredColour3: rgba(216, 125, 6, 0);
--blurredColour4: rgba(17, 9, 0, 0);
-
+
/* Bottom */
--blurredColour5: rgba(6, 1, 8, 0.24);
--blurredColour6: rgba(80, 80, 80, 0.219);
-
+
/*other basic stuff*/
--accent-color: #cacaca;
--text-primary-color: #222;
--element-size: 6rem;
--buttonShape: 1rem;
--linkColor: #254bb3;
-
+
/*Landing Page*/
--startButton: #946234e0;
--startButtonHovered: #9c5b1d;
- --joinButton: #658462;
+ --joinButton: #658462;
--joinButtonHovered: #4d8a47;
- --reconnectButton: #822E1C;
+ --reconnectButton: #822e1c;
--reconnectButtonHovered: #9e2e15;
--pictureGradientEnd: rgba(19, 44, 20, 0.5);
--landingPageCardsBackground: #e4e4e4;
--blurBackGroundColor: rgba(80, 80, 80, 0.219);
/*Prepare page*/
- --preparePageMainColor:#946234;
+ --preparePageMainColor: #946234;
--preparePageInActiveTab: #ffffff;
- --preparePageInActiveTabHover: #718A6F91;
+ --preparePageInActiveTabHover: #718a6f91;
--preparePageBorderTab: grey;
--preparePageImportUserStoriesButton: #30a858;
--preparePageActiveCardSet: black;
--preparePageInActiveCardSet: #e27712;
- --preparePageTimerBackground: #974F0D3D;
+ --preparePageTimerBackground: #974f0d3d;
/*Session Page*/
--textAreaColour: #c3c7bd;
--textAreaColourHovered: #c3c7bdb6;
-
/*other Stuff*/
--topNavigationBarColor: rgba(200, 200, 200, 0.75);
--popUpMenu: rgb(143, 143, 143);
@@ -65,9 +64,9 @@
--linkColor: #00ffdd;
/*Landing Page*/
- --startButton: #13276D;
+ --startButton: #13276d;
--startButtonHovered: #13266dc9;
- --joinButton: #42104B;
+ --joinButton: #42104b;
--joinButtonHovered: #42104bb4;
--reconnectButton: #033347;
--reconnectButtonHovered: #033347bd;
@@ -77,19 +76,19 @@
/*Prepare Page*/
- --preparePageMainColor:#13276D;
+ --preparePageMainColor: #13276d;
--preparePageInActiveTab: #666565;
- --preparePageInActiveTabHover: #42104B;
+ --preparePageInActiveTabHover: #42104b;
--preparePageBorderTab: white;
--preparePageImportUserStoriesButton: #7e5a0c;
--preparePageActiveCardSet: white;
--preparePageInActiveCardSet: #e27712;
- --preparePageTimerBackground: #7EBCC98A;
+ --preparePageTimerBackground: #7ebcc98a;
/*Session Page*/
- --textAreaColour: #A8E8F65C;
+ --textAreaColour: #a8e8f65c;
--textAreaColourHovered: #a8e8f6b9;
/*other Stuff*/
--topNavigationBarColor: rgba(34, 34, 34, 0.863);
--popUpMenu: rgb(201, 201, 201);
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/AnalyticsDataComponent.vue b/frontend/src/components/AnalyticsDataComponent.vue
index b88505d41..fccde5cef 100644
--- a/frontend/src/components/AnalyticsDataComponent.vue
+++ b/frontend/src/components/AnalyticsDataComponent.vue
@@ -4,69 +4,67 @@
<b-card-group deck>
<b-card class="statsCards">
<b-card-title style="text-align: center">
- {{$t('page.landing.meeting.analytics.allCreatedSessionsTitle')}}
+ {{ $t("page.landing.meeting.analytics.allCreatedSessionsTitle") }}
</b-card-title>
<b-card-text>
<h2 class="numbers">{{ tweenedOverAllSessions.toFixed(0) }}</h2>
- <div style="text-align: center;">
- {{allSessions}}
+ <div style="text-align: center">
+ {{ allSessions }}
</div>
- <br/>
+ <br />
<h2 class="numbers">{{ tweenedOverAllAttendees.toFixed(0) }}</h2>
- <div style="text-align: center;">
- {{allAttendees}}
+ <div style="text-align: center">
+ {{ allAttendees }}
</div>
</b-card-text>
</b-card>
<b-card class="statsCards">
<b-card-title style="text-align: center">
- {{$t('page.landing.meeting.analytics.lastMonthTitle')}}
+ {{ $t("page.landing.meeting.analytics.lastMonthTitle") }}
</b-card-title>
<b-card-text>
<h2 class="numbers">
{{ tweenedOverAllSessionsFromLastMonth.toFixed(0) }}
</h2>
- <div style="text-align: center;">
- {{allSessions}}
+ <div style="text-align: center">
+ {{ allSessions }}
</div>
- <br>
+ <br />
<h2 class="numbers">
{{ tweenedOverAllAttendeesFromLastMonth.toFixed(0) }}
</h2>
- <div style="text-align: center;">
- {{allAttendees}}
+ <div style="text-align: center">
+ {{ allAttendees }}
</div>
</b-card-text>
</b-card>
<b-card class="statsCards">
<b-card-title style="text-align: center">
- {{$t('page.landing.meeting.analytics.activeTitle')}}
+ {{ $t("page.landing.meeting.analytics.activeTitle") }}
</b-card-title>
<b-card-text>
<h2 class="numbers">
{{ tweenedCurrentSessions.toFixed(0) }}
</h2>
- <div style="text-align: center;">
- {{allSessions}}
+ <div style="text-align: center">
+ {{ allSessions }}
</div>
- <br/>
+ <br />
<h2 class="numbers">
{{ tweendCurrentAttendees.toFixed(0) }}
</h2>
- <div style="text-align: center;">
- {{allAttendees}}
+ <div style="text-align: center">
+ {{ allAttendees }}
</div>
</b-card-text>
</b-card>
</b-card-group>
- <br/>
+ <br />
</b-container>
-
-
</template>
<script lang="ts">
import Vue from "vue";
-import gsap from 'gsap'
+import gsap from "gsap";
import apiService from "@/services/api.service";
export default Vue.extend({
name: "AnalyticsDataComponent",
@@ -84,48 +82,51 @@ export default Vue.extend({
tweenedOverAllSessionsFromLastMonth: 0,
tweenedOverAllAttendeesFromLastMonth: 0,
tweenedCurrentSessions: 0,
- tweendCurrentAttendees: 0
+ tweendCurrentAttendees: 0,
};
},
+ computed: {
+ headerText() {
+ return this.$t("page.landing.meeting.analytics.title");
+ },
+ allSessions() {
+ return this.$t("page.landing.meeting.analytics.sessionText");
+ },
+ allAttendees() {
+ return this.$t("page.landing.meeting.analytics.attendeesText");
+ },
+ },
watch: {
overAllSessions(n) {
- gsap.to(this, { duration: 1.25, tweenedOverAllSessions: Number(n) || 0 })
+ gsap.to(this, { duration: 1.25, tweenedOverAllSessions: Number(n) || 0 });
},
overAllAttendees(n) {
- gsap.to(this, { duration: 1.25, tweenedOverAllAttendees: Number(n) || 0 })
+ gsap.to(this, { duration: 1.25, tweenedOverAllAttendees: Number(n) || 0 });
},
overAllSessionsFromLastMonth(n) {
- gsap.to(this, { duration: 1.25, tweenedOverAllSessionsFromLastMonth: Number(n) || 0 })
+ gsap.to(this, { duration: 1.25, tweenedOverAllSessionsFromLastMonth: Number(n) || 0 });
},
overAllAttendeesFromLastMonth(n) {
- gsap.to(this, { duration: 1.25, tweetweenedOverAllAttendeesFromLastMonthned: Number(n) || 0 })
+ gsap.to(this, {
+ duration: 1.25,
+ tweetweenedOverAllAttendeesFromLastMonthned: Number(n) || 0,
+ });
},
currentSessions(n) {
- gsap.to(this, { duration: 1.25, tweenedCurrentSessions: Number(n) || 0 })
+ gsap.to(this, { duration: 1.25, tweenedCurrentSessions: Number(n) || 0 });
},
currentAttendees(n) {
- gsap.to(this, { duration: 1.25, tweendCurrentAttendees: Number(n) || 0 })
- }
+ gsap.to(this, { duration: 1.25, tweendCurrentAttendees: Number(n) || 0 });
+ },
},
created() {
this.getAllDiveniData();
},
- computed: {
- headerText() {
- return this.$t('page.landing.meeting.analytics.title');
- },
- allSessions() {
- return this.$t('page.landing.meeting.analytics.sessionText');
- },
- allAttendees() {
- return this.$t('page.landing.meeting.analytics.attendeesText');
- },
- },
methods: {
async getAllDiveniData() {
this.loaded = false;
let response = apiService.getAllDiveniData();
- let allData = await response.then(function(result) {
+ let allData = await response.then(function (result) {
let returnArray: Array<number> = [];
returnArray.push(result.amountOfSessions);
returnArray.push(result.amountOfAttendees);
@@ -145,10 +146,8 @@ export default Vue.extend({
},
},
});
-
</script>
<style scoped>
-
.statsCards {
border-radius: 0.5rem;
background-color: rgba(200, 200, 200, 0.5);
@@ -157,5 +156,4 @@ export default Vue.extend({
text-align: center;
font-weight: bold;
}
-
</style>
diff --git a/frontend/src/components/CardSetComponent.vue b/frontend/src/components/CardSetComponent.vue
index 4a99e0672..a0abbde91 100644
--- a/frontend/src/components/CardSetComponent.vue
+++ b/frontend/src/components/CardSetComponent.vue
@@ -1,40 +1,40 @@
<template>
<div>
<b-row class="d-flex justify-content-around">
- <b-col
- cols="4"
- md="auto"
- v-for="item of userStoryMode === jiraTag ? allCardSetsWithJiraMode : allCardSets"
- :key="item.position"
- class="swipe-card my-5 mx-5"
- :class="getClasses(item)"
- @click="onCardSetSelected(item)"
- >
- <div id="text">
- {{ item.name }}
- </div>
- <div id="cardDescription">
- {{ item.description }}
- <div v-if="item.values.length === 0">
- <span id="createSetHint">
- <b-icon-info-circle class="mt-3 me-1" />{{
- $t("session.prepare.step.selection.cardSet.sets.ownSet.hint.label")
- }}</span
- >
- <b-popover target="createSetHint" triggers="hover" placement="top" id="popUp">
- <template #title>
- {{ $t("session.prepare.step.selection.cardSet.sets.ownSet.hint.label") }}
- </template>
- <p>
- {{ $t("session.prepare.step.selection.cardSet.sets.ownSet.hint.description") }}
- </p>
- <p>
- {{ $t("session.prepare.step.selection.cardSet.sets.ownSet.hint.example") }}
- </p>
- </b-popover>
- </div>
- </div>
- </b-col>
+ <b-col
+ v-for="item of userStoryMode === jiraTag ? allCardSetsWithJiraMode : allCardSets"
+ :key="item.position"
+ cols="4"
+ md="auto"
+ class="swipe-card my-5 mx-5"
+ :class="getClasses(item)"
+ @click="onCardSetSelected(item)"
+ >
+ <div id="text">
+ {{ item.name }}
+ </div>
+ <div id="cardDescription">
+ {{ item.description }}
+ <div v-if="item.values.length === 0">
+ <span id="createSetHint">
+ <b-icon-info-circle class="mt-3 me-1" />{{
+ $t("session.prepare.step.selection.cardSet.sets.ownSet.hint.label")
+ }}</span
+ >
+ <b-popover id="popUp" target="createSetHint" triggers="hover" placement="top">
+ <template #title>
+ {{ $t("session.prepare.step.selection.cardSet.sets.ownSet.hint.label") }}
+ </template>
+ <p>
+ {{ $t("session.prepare.step.selection.cardSet.sets.ownSet.hint.description") }}
+ </p>
+ <p>
+ {{ $t("session.prepare.step.selection.cardSet.sets.ownSet.hint.example") }}
+ </p>
+ </b-popover>
+ </div>
+ </div>
+ </b-col>
</b-row>
<b-row v-if="selectedCardSet.name !== ''">
<div v-if="selectedCardSet.values.length !== 0" class="text-center mt-3 pillPosition">
@@ -44,7 +44,10 @@
:class="isActiveCardSetNumber(item)"
pill
class="pills"
- @click="onCardSetNumberSelected(item); $event.target.blur();"
+ @click="
+ onCardSetNumberSelected(item);
+ $event.target.blur();
+ "
>
{{ item }}
</b-button>
@@ -82,7 +85,7 @@ export default Vue.extend({
},
data() {
return {
- theme: localStorage.getItem('user-theme'),
+ theme: localStorage.getItem("user-theme"),
jiraTag: "US_JIRA",
selectedCardSet: {
name: "",
@@ -168,14 +171,16 @@ export default Vue.extend({
},
},
mounted() {
- window.addEventListener('user-theme-localstorage-changed', (event) => {
- const customEvent = event as CustomEvent;
- this.theme = customEvent.detail.storage;
+ window.addEventListener("user-theme-localstorage-changed", (event) => {
+ const customEvent = event as CustomEvent;
+ this.theme = customEvent.detail.storage;
});
},
methods: {
isActiveCardSetNumber(num) {
- return this.selectedCardSet.activeValues.includes(num) ? "activePills m-1" : "outline-secondary inActivePills m-1";
+ return this.selectedCardSet.activeValues.includes(num)
+ ? "activePills m-1"
+ : "outline-secondary inActivePills m-1";
},
onCardSetSelected(set) {
this.selectedCardSet = set;
@@ -201,7 +206,7 @@ export default Vue.extend({
return `${this.getCardActiveClass(item)} ${this.getPictureClass(item)}`;
},
getCardActiveClass(item) {
- return this.selectedCardSet.name === item.name ? 'selectedCard' : 'inActiveCard';
+ return this.selectedCardSet.name === item.name ? "selectedCard" : "inActiveCard";
},
getPictureClass(item) {
if (this.userStoryMode !== this.jiraTag) {
@@ -217,14 +222,13 @@ export default Vue.extend({
default:
break;
}
- }
+ },
},
});
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
-
.swipe-card {
width: 226px;
height: 303px;
@@ -249,13 +253,13 @@ export default Vue.extend({
}
.light-theme1 {
- background-image: url("@/assets/preparePage/Fibonacci-LightMode.png") !important;
- background-size: cover !important;
- border-radius: var(--buttonShape) !important;
- box-shadow: 10px 10px 5px #ccc !important;
+ background-image: url("@/assets/preparePage/Fibonacci-LightMode.png") !important;
+ background-size: cover !important;
+ border-radius: var(--buttonShape) !important;
+ box-shadow: 10px 10px 5px #ccc !important;
}
-.light-theme2{
+.light-theme2 {
background-image: url("@/assets/preparePage/TShirt-LightMode.png");
background-size: cover;
border-radius: var(--buttonShape);
@@ -311,7 +315,7 @@ export default Vue.extend({
position: relative;
}
-.dark-theme2::after{
+.dark-theme2::after {
background-image: url("@/assets/preparePage/TShirt-DarkMode.png");
background-size: cover;
content: "";
@@ -394,7 +398,7 @@ export default Vue.extend({
padding-top: 16px;
}
-#cardDescription{
+#cardDescription {
padding: 16px;
text-align: center;
}
diff --git a/frontend/src/components/CopySessionIdPopup.vue b/frontend/src/components/CopySessionIdPopup.vue
index aab5ec63d..f2533e0cb 100644
--- a/frontend/src/components/CopySessionIdPopup.vue
+++ b/frontend/src/components/CopySessionIdPopup.vue
@@ -8,13 +8,34 @@
</strong>
{{ textAfterSessionID }}
<b-popover id="popover" target="popover-link" triggers="hover" placement="top">
- <b-button class="mx-1" id="sessionCode" @click="copyIdToClipboard(); $event.target.blur();">
+ <b-button
+ id="sessionCode"
+ class="mx-1"
+ @click="
+ copyIdToClipboard();
+ $event.target.blur();
+ "
+ >
{{ $t("page.session.before.copy.id") }}
</b-button>
- <b-button class="mx-1" id="link" @click="copyLinkToClipboard(); $event.target.blur();">
+ <b-button
+ id="link"
+ class="mx-1"
+ @click="
+ copyLinkToClipboard();
+ $event.target.blur();
+ "
+ >
{{ $t("page.session.before.copy.link") }}
</b-button>
- <b-button class="mx-1" id="qrCode" @click="$bvModal.show('qr-modal'); $event.target.blur();">
+ <b-button
+ id="qrCode"
+ class="mx-1"
+ @click="
+ $bvModal.show('qr-modal');
+ $event.target.blur();
+ "
+ >
{{ $t("page.session.before.copy.qr") }}
</b-button>
</b-popover>
@@ -102,7 +123,6 @@ export default Vue.extend({
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
-
.copy-session {
font-size: 1.75rem;
color: var(--text-primary-color);
diff --git a/frontend/src/components/EstimateTimer.vue b/frontend/src/components/EstimateTimer.vue
index 0743a1d6a..f90815be9 100644
--- a/frontend/src/components/EstimateTimer.vue
+++ b/frontend/src/components/EstimateTimer.vue
@@ -4,7 +4,6 @@
{{ formatTimer() }}
</b-card-text>
</div>
-
</template>
<script lang="ts">
@@ -95,13 +94,15 @@ export default Vue.extend({
}, 100);
},
async localClockTimer() {
- if (this.member !== '') {
- const response = (await this.axios.get(constants.backendURL + "/get-timer-value",{
- params: {
- memberID: this.member,
- },
- })).data;
- this.timerCount = Math.ceil(this.duration - (response / 1000));
+ if (this.member !== "") {
+ const response = (
+ await this.axios.get(constants.backendURL + "/get-timer-value", {
+ params: {
+ memberID: this.member,
+ },
+ })
+ ).data;
+ this.timerCount = Math.ceil(this.duration - response / 1000);
this.intervalHandler = setInterval(() => {
if (this.timerCount > 0) {
this.timerCount = this.timerCount - 1;
@@ -111,7 +112,7 @@ export default Vue.extend({
}
}, 1000);
}
- }
+ },
},
});
</script>
@@ -128,13 +129,13 @@ export default Vue.extend({
.card-text {
line-height: 485%;
- text-align: center;;
+ text-align: center;
}
.timer {
width: 100px;
height: 117px;
- background-image: url('@/assets/Timer.png');
+ background-image: url("@/assets/Timer.png");
background-size: contain;
user-select: none;
}
diff --git a/frontend/src/components/JiraComponent.vue b/frontend/src/components/JiraComponent.vue
index 733806008..e208d35a2 100644
--- a/frontend/src/components/JiraComponent.vue
+++ b/frontend/src/components/JiraComponent.vue
@@ -6,29 +6,31 @@
<ul>
<li>
- {{ $t("session.prepare.step.selection.mode.description.withIssueTracker.descriptionLine1") }}
- <sign-in-with-jira-cloud-button-component
- v-if="isJiraCloudEnabled"
- class="my-1" />
- <sign-in-with-jira-server-button-component
- v-if="isJiraServerEnabled"
- class="my-1" />
- <sign-in-with-azure-cloud-button-component
- v-if="isAzureDevOpsEnabled"
- class="my-1" />
+ {{
+ $t("session.prepare.step.selection.mode.description.withIssueTracker.descriptionLine1")
+ }}
+ <sign-in-with-jira-cloud-button-component v-if="isJiraCloudEnabled" class="my-1" />
+ <sign-in-with-jira-server-button-component v-if="isJiraServerEnabled" class="my-1" />
+ <sign-in-with-azure-cloud-button-component v-if="isAzureDevOpsEnabled" class="my-1" />
</li>
<li>
- {{ $t("session.prepare.step.selection.mode.description.withIssueTracker.descriptionLine2") }}
+ {{
+ $t("session.prepare.step.selection.mode.description.withIssueTracker.descriptionLine2")
+ }}
<project-selection-component
v-if="isLoggedInWithJira"
class="my-1"
></project-selection-component>
</li>
<li>
- {{ $t("session.prepare.step.selection.mode.description.withIssueTracker.descriptionLine3") }}
+ {{
+ $t("session.prepare.step.selection.mode.description.withIssueTracker.descriptionLine3")
+ }}
</li>
<li>
- {{ $t("session.prepare.step.selection.mode.description.withIssueTracker.descriptionLine4") }}
+ {{
+ $t("session.prepare.step.selection.mode.description.withIssueTracker.descriptionLine4")
+ }}
</li>
</ul>
</div>
@@ -89,9 +91,7 @@ export default Vue.extend({
});
</script>
<style scoped>
-
#textDescription {
color: var(--text-primary-color);
}
-
</style>
diff --git a/frontend/src/components/JoinPageCard.vue b/frontend/src/components/JoinPageCard.vue
index 4eba1b716..ad0fd2a29 100644
--- a/frontend/src/components/JoinPageCard.vue
+++ b/frontend/src/components/JoinPageCard.vue
@@ -29,19 +29,24 @@
</b-col>
</b-row>
<b-row>
- <b-col class="mt-2 mt-md-0 inputText" cols="12" md="9" >
+ <b-col class="mt-2 mt-md-0 inputText" cols="12" md="9">
<h6>{{ $t("page.join.input.password") }}</h6>
- <b-form-input v-model="password" class="mt-3 inputFields" type="password" placeholder="(optional)" />
+ <b-form-input
+ v-model="password"
+ class="mt-3 inputFields"
+ type="password"
+ placeholder="(optional)"
+ />
</b-col>
- <b-col cols="12" md="3" id="startButtonCol">
+ <b-col id="startButtonCol" cols="12" md="3">
<b-button
- class="rounded-circle startingButton "
- type="submit"
- :disabled="name.length < 1 || sessionID.length < 1"
- @click="onClickButton"
- >
- {{ buttonText }}
- </b-button>
+ class="rounded-circle startingButton"
+ type="submit"
+ :disabled="name.length < 1 || sessionID.length < 1"
+ @click="onClickButton"
+ >
+ {{ buttonText }}
+ </b-button>
</b-col>
</b-row>
</div>
@@ -146,7 +151,7 @@ h6 {
border-radius: var(--buttonShape);
}
-#startButtonCol{
+#startButtonCol {
text-align: center;
}
</style>
diff --git a/frontend/src/components/LandingPageCard.vue b/frontend/src/components/LandingPageCard.vue
index 12fe45efb..afbdba109 100644
--- a/frontend/src/components/LandingPageCard.vue
+++ b/frontend/src/components/LandingPageCard.vue
@@ -25,14 +25,12 @@ export default Vue.extend({
});
</script>
<style scoped>
-
-.landing-page-card{
+.landing-page-card {
border-radius: 2rem;
background-color: var(--landingPageCardsBackground);
}
-.card-title{
- color:var(--text-primary-color);
+.card-title {
+ color: var(--text-primary-color);
}
-
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/components/MarkdownEditor.vue b/frontend/src/components/MarkdownEditor.vue
index c8678c425..7df2d9258 100644
--- a/frontend/src/components/MarkdownEditor.vue
+++ b/frontend/src/components/MarkdownEditor.vue
@@ -76,50 +76,49 @@ export default Vue.extend({
],
plugins: [codeSyntaxHighlight],
},
- theme: localStorage.getItem('user-theme'),
+ theme: localStorage.getItem("user-theme"),
};
},
mounted() {
- window.addEventListener('user-theme-localstorage-changed', (event) => {
- const customEvent = event as CustomEvent;
- this.theme = customEvent.detail.storage;
+ window.addEventListener("user-theme-localstorage-changed", (event) => {
+ const customEvent = event as CustomEvent;
+ this.theme = customEvent.detail.storage;
});
},
methods: {
getTextValueFromEditor() {
if (this.$refs.toastuiEditor) {
const editor = this.$refs.toastuiEditor as Editor;
- const editorText = editor.invoke('getMarkdown');
- this.$emit("textValueChanged", { markdown: editorText});
+ const editorText = editor.invoke("getMarkdown");
+ this.$emit("textValueChanged", { markdown: editorText });
}
- }
- }
+ },
+ },
});
</script>
<style>
-
.toastui-editor-popup {
background-color: var(--topNavigationBarColor);
}
.toastui-editor-defaultUI-toolbar {
- background-color: #7A777773;
+ background-color: #7a777773;
}
.toastui-editor-defaultUI-toolbar button {
- border:none;
+ border: none;
color: var(--text-primary-color);
}
-.toastui-editor-defaultUI .ProseMirror{
+.toastui-editor-defaultUI .ProseMirror {
background-color: #405c6c;
}
.toastui-editor-md-container .toastui-editor-md-preview {
- overflow: auto;
- padding: 0 25px;
- height: 100%;
- background-color: #405c6c;
+ overflow: auto;
+ padding: 0 25px;
+ height: 100%;
+ background-color: #405c6c;
}
.toastui-editor-mode-switch {
@@ -130,15 +129,15 @@ export default Vue.extend({
color: var(--text-primary-color) !important;
}
-.lightMode .toastui-editor-defaultUI .ProseMirror{
+.lightMode .toastui-editor-defaultUI .ProseMirror {
background-color: var(--textAreaColour);
}
.lightMode .toastui-editor-md-container .toastui-editor-md-preview {
- overflow: auto;
- padding: 0 25px;
- height: 100%;
- background-color: var(--textAreaColour);
+ overflow: auto;
+ padding: 0 25px;
+ height: 100%;
+ background-color: var(--textAreaColour);
}
.lightMode .toastui-editor-mode-switch {
diff --git a/frontend/src/components/MemberVoteCard.vue b/frontend/src/components/MemberVoteCard.vue
index 883debc27..6a0f9c0be 100644
--- a/frontend/src/components/MemberVoteCard.vue
+++ b/frontend/src/components/MemberVoteCard.vue
@@ -24,7 +24,7 @@
:style="swipeableCardBackgroundColor"
@click="onCardClicked()"
>
- <div class="text" >
+ <div class="text">
{{ dragged ? "💪" : voteOption }}
</div>
</div>
@@ -97,6 +97,6 @@ export default Vue.extend({
.text {
font-size: 5rem;
font-weight: 500;
- color:black
+ color: black;
}
</style>
diff --git a/frontend/src/components/ProjectSelectionComponent.vue b/frontend/src/components/ProjectSelectionComponent.vue
index 0f290783c..bfb69a3f6 100644
--- a/frontend/src/components/ProjectSelectionComponent.vue
+++ b/frontend/src/components/ProjectSelectionComponent.vue
@@ -4,7 +4,9 @@
v-model="selected"
:items="getProjectNames"
:placeholder="
- $t('session.prepare.step.selection.mode.description.withIssueTracker.placeholder.searchProjects')
+ $t(
+ 'session.prepare.step.selection.mode.description.withIssueTracker.placeholder.searchProjects'
+ )
"
@input="getUserStories"
/>
diff --git a/frontend/src/components/RoundedAvatar.vue b/frontend/src/components/RoundedAvatar.vue
index 2e62ad613..d26ba3426 100644
--- a/frontend/src/components/RoundedAvatar.vue
+++ b/frontend/src/components/RoundedAvatar.vue
@@ -24,14 +24,13 @@ export default Vue.extend({
props: {
member: { type: Object, required: true },
showName: { type: Boolean, default: true },
- admin: { type: Boolean, default: true},
+ admin: { type: Boolean, default: true },
},
});
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
-
.rounded-avatar {
padding: 8px;
display: flex;
@@ -40,7 +39,7 @@ export default Vue.extend({
overflow: hidden;
}
-.smallAvatars{
+.smallAvatars {
width: 100px;
height: 100px;
}
diff --git a/frontend/src/components/SessionMemberCard.vue b/frontend/src/components/SessionMemberCard.vue
index d2eedf80d..c792c8df3 100644
--- a/frontend/src/components/SessionMemberCard.vue
+++ b/frontend/src/components/SessionMemberCard.vue
@@ -11,7 +11,7 @@
member.currentEstimation
}}</strong>
</h1>
- <rounded-avatar :member="member" :admin="false"/>
+ <rounded-avatar :member="member" :admin="false" />
</div>
</template>
diff --git a/frontend/src/components/SignInWithAzureDevOpsButtonComponent.vue b/frontend/src/components/SignInWithAzureDevOpsButtonComponent.vue
index cdc38302e..a5e363d24 100644
--- a/frontend/src/components/SignInWithAzureDevOpsButtonComponent.vue
+++ b/frontend/src/components/SignInWithAzureDevOpsButtonComponent.vue
@@ -1,6 +1,13 @@
<template>
<div>
- <b-button id="button" :disabled="disabled" @click="signIn(); $event.target.blur();">
+ <b-button
+ id="button"
+ :disabled="disabled"
+ @click="
+ signIn();
+ $event.target.blur();
+ "
+ >
{{
$t(
"session.prepare.step.selection.mode.description.withIssueTracker.buttons.signInWithAzureDevOps.label"
diff --git a/frontend/src/components/SignInWithJiraButtonComponent.vue b/frontend/src/components/SignInWithJiraButtonComponent.vue
index f82bd726d..bb99c4d50 100644
--- a/frontend/src/components/SignInWithJiraButtonComponent.vue
+++ b/frontend/src/components/SignInWithJiraButtonComponent.vue
@@ -8,7 +8,9 @@
"
>
{{
- $t("session.prepare.step.selection.mode.description.withIssueTracker.buttons.signInWithJira.label")
+ $t(
+ "session.prepare.step.selection.mode.description.withIssueTracker.buttons.signInWithJira.label"
+ )
}}
</b-button>
<b-modal
@@ -19,7 +21,11 @@
@hidden="resetModal"
@ok="handleOk"
>
- <p>{{ $t("session.prepare.step.selection.mode.description.withIssueTracker.dialog.description") }}</p>
+ <p>
+ {{
+ $t("session.prepare.step.selection.mode.description.withIssueTracker.dialog.description")
+ }}
+ </p>
<form ref="form" @submit.stop.prevent="handleSubmit">
<b-form-group
label="Verification code"
diff --git a/frontend/src/components/SignInWithJiraCloudButtonComponent.vue b/frontend/src/components/SignInWithJiraCloudButtonComponent.vue
index 3a8929adb..3a20669c7 100644
--- a/frontend/src/components/SignInWithJiraCloudButtonComponent.vue
+++ b/frontend/src/components/SignInWithJiraCloudButtonComponent.vue
@@ -1,6 +1,13 @@
<template>
<div>
- <b-button id="button" :disabled="disabled" @click="redirectToJira(); $event.target.blur();">
+ <b-button
+ id="button"
+ :disabled="disabled"
+ @click="
+ redirectToJira();
+ $event.target.blur();
+ "
+ >
{{
$t(
"session.prepare.step.selection.mode.description.withIssueTracker.buttons.signInWithJiraCloud.label"
@@ -12,7 +19,7 @@
<script lang="ts">
import Vue from "vue";
-import {v4 as uuidv4} from "uuid";
+import { v4 as uuidv4 } from "uuid";
import apiService from "@/services/api.service";
export default Vue.extend({
@@ -37,7 +44,6 @@ export default Vue.extend({
</script>
<style scoped>
-
#button {
background-color: var(--preparePageMainColor);
color: var(--text-primary-color);
@@ -47,5 +53,4 @@ export default Vue.extend({
background-color: var(--startButtonHovered);
color: var(--text-primary-color);
}
-
</style>
diff --git a/frontend/src/components/SignInWithJiraServerButtonComponent.vue b/frontend/src/components/SignInWithJiraServerButtonComponent.vue
index e99d09be0..c061ae3ee 100644
--- a/frontend/src/components/SignInWithJiraServerButtonComponent.vue
+++ b/frontend/src/components/SignInWithJiraServerButtonComponent.vue
@@ -23,7 +23,11 @@
@hidden="resetModal"
@ok="handleOk"
>
- <p id="description">{{ $t("session.prepare.step.selection.mode.description.withIssueTracker.dialog.description") }}</p>
+ <p id="description">
+ {{
+ $t("session.prepare.step.selection.mode.description.withIssueTracker.dialog.description")
+ }}
+ </p>
<form ref="form" @submit.stop.prevent="handleSubmit">
<b-form-group
label="Verification code"
@@ -125,7 +129,6 @@ export default Vue.extend({
</script>
<style scoped>
-
#description {
color: black;
}
@@ -139,5 +142,4 @@ export default Vue.extend({
background-color: var(--startButtonHovered);
color: var(--text-primary-color);
}
-
</style>
diff --git a/frontend/src/components/StoryPointsComponent.vue b/frontend/src/components/StoryPointsComponent.vue
index 3021b1cb1..c2d911505 100644
--- a/frontend/src/components/StoryPointsComponent.vue
+++ b/frontend/src/components/StoryPointsComponent.vue
@@ -23,9 +23,7 @@ export default Vue.extend({
</script>
<style scoped>
-
#textDescription {
color: var(--text-primary-color);
}
-
</style>
diff --git a/frontend/src/components/ThemeToggleComponent.vue b/frontend/src/components/ThemeToggleComponent.vue
index ea992caa2..63c1b9eea 100644
--- a/frontend/src/components/ThemeToggleComponent.vue
+++ b/frontend/src/components/ThemeToggleComponent.vue
@@ -1,18 +1,10 @@
<template>
<div>
- <input
- @change="toggleTheme"
- id="checkbox"
- type="checkbox"
- class="switch-checkbox"
- />
+ <input id="checkbox" type="checkbox" class="switch-checkbox" @change="toggleTheme" />
<label for="checkbox" class="switch-label">
<span>🌙</span>
<span>☀️</span>
- <div
- class="switch-toggle"
- :class="{ 'switch-toggle-checked': userTheme === 'dark-theme' }"
- />
+ <div class="switch-toggle" :class="{ 'switch-toggle-checked': userTheme === 'dark-theme' }" />
</label>
</div>
</template>
@@ -23,8 +15,8 @@ export default Vue.extend({
name: "ThemeToggleComponent",
data() {
return {
- userTheme: "light-theme"
- }
+ userTheme: "light-theme",
+ };
},
created() {
if (localStorage.getItem("user-theme")) {
@@ -44,13 +36,15 @@ export default Vue.extend({
localStorage.setItem("user-theme", theme);
this.userTheme = theme;
document.documentElement.className = theme;
- window.dispatchEvent(new CustomEvent('user-theme-localstorage-changed', {
- detail: {
- storage: localStorage.getItem('user-theme')
- }
- }));
+ window.dispatchEvent(
+ new CustomEvent("user-theme-localstorage-changed", {
+ detail: {
+ storage: localStorage.getItem("user-theme"),
+ },
+ })
+ );
},
- }
+ },
});
</script>
diff --git a/frontend/src/components/UserStories.vue b/frontend/src/components/UserStories.vue
index ccf026010..f6a0fbcdd 100644
--- a/frontend/src/components/UserStories.vue
+++ b/frontend/src/components/UserStories.vue
@@ -6,24 +6,21 @@
<BIconSearch id="searchIcon"></BIconSearch>
</b-input-group-prepend>
<b-input
- v-model="input"
id="search"
+ v-model="input"
type="text"
:placeholder="$t('page.session.before.userStories.placeholder.searchUserStories')"
@input="swapPriority"
/>
</b-input-group>
</div>
- <b-card-group
- class="my-3"
- id="userStoryBlock"
- >
+ <b-card-group id="userStoryBlock" class="my-3">
<b-list-group-item
v-for="(story, index) of userStories"
+ id="userStoryRow"
:key="index"
:active="index === selectedStoryIndex"
class="w-100 p-1 d-flex justify-content-left"
- id="userStoryRow"
:style="index === selectedStoryIndex ? 'border-width: 3px;' : ''"
@mouseover="hover = index"
@mouseleave="hover = null"
@@ -33,9 +30,12 @@
v-if="showEditButtons"
:class="story.isActive ? 'selectedStory' : 'outlineColorStory'"
size="sm"
- @click="markUserStory(index); $event.target.blur();"
+ @click="
+ markUserStory(index);
+ $event.target.blur();
+ "
>
- <b-img :src="require('@/assets/ActiveUserStory.png')" id="userStoryPicture"/>
+ <b-img id="userStoryPicture" :src="require('@/assets/ActiveUserStory.png')" />
</b-button>
<b-button
@@ -48,19 +48,16 @@
</b-button>
<b-form-input
+ id="userStoryTitles"
v-model="story.title"
class="mx-1 w-100 shadow-none"
- id="userStoryTitles"
readonly
size="sm"
:placeholder="$t('page.session.before.userStories.placeholder.userStoryTitle')"
@blur="publishChanges"
/>
- <b-badge
- id="badge"
- class="p-2"
- >
+ <b-badge id="badge" class="p-2">
{{ story.estimation == null ? "?" : story.estimation }}
</b-badge>
<b-button
@@ -78,7 +75,10 @@
<b-button
v-if="userStories.length < 1 && showEditButtons && !filterActive"
class="w-100 mb-3 addButton"
- @click="addUserStory(); $event.target.blur();"
+ @click="
+ addUserStory();
+ $event.target.blur();
+ "
>
<b-icon-plus />
{{ $t("page.session.before.userStories.button.addFirstUserStory") }}
@@ -95,7 +95,10 @@
<b-button
v-if="userStories.length > 0 && showEditButtons && !filterActive"
class="w-100 mb-3 addButton"
- @click="addUserStory(); $event.target.blur();"
+ @click="
+ addUserStory();
+ $event.target.blur();
+ "
>
<b-icon-plus />
{{ $t("page.session.before.userStories.button.addUserStory") }}
@@ -204,8 +207,6 @@ export default Vue.extend({
</script>
<style scoped>
-
-
#search {
border-radius: var(--element-size);
padding-left: 45px;
@@ -285,7 +286,7 @@ export default Vue.extend({
color: var(--text-primary-color);
}
-#userStoryRow{
+#userStoryRow {
background-color: var(--textAreaColour);
color: var(--text-primary-color);
}
@@ -301,14 +302,14 @@ export default Vue.extend({
background-color: transparent;
color: var(--text-primary-color);
font-size: large;
- border: none
+ border: none;
}
#userStoryPicture {
height: 30px;
width: 30px;
}
-#badge{
+#badge {
background-color: var(--joinButton);
color: var(--text-primary-color);
font-size: large;
diff --git a/frontend/src/components/UserStoryComponent.vue b/frontend/src/components/UserStoryComponent.vue
index 9d07e10d3..7386b58b7 100644
--- a/frontend/src/components/UserStoryComponent.vue
+++ b/frontend/src/components/UserStoryComponent.vue
@@ -21,9 +21,7 @@ export default Vue.extend({
});
</script>
<style scoped>
-
.textDescription {
color: var(--text-primary-color) !important;
}
-
</style>
diff --git a/frontend/src/components/UserStoryDescriptions.vue b/frontend/src/components/UserStoryDescriptions.vue
index ccd8538ff..09d012ee7 100644
--- a/frontend/src/components/UserStoryDescriptions.vue
+++ b/frontend/src/components/UserStoryDescriptions.vue
@@ -48,14 +48,14 @@
@textValueChanged="(event) => valueChanged(idx, event)"
/>
</div>
- <div v-if="!editDescription">
+ <div v-if="!editDescription">
<b-form-textarea
- id="textarea-auto-height-plaintext"
- class="py-2"
- plaintext
- :value=userStories[idx].description
- rows="15"
- size="m"
+ id="textarea-auto-height-plaintext"
+ class="py-2"
+ plaintext
+ :value="userStories[idx].description"
+ rows="15"
+ size="m"
/>
</div>
</b-list-group-item>
@@ -122,7 +122,7 @@ export default Vue.extend({
}>;
},
methods: {
- valueChanged(idx, {markdown}) {
+ valueChanged(idx, { markdown }) {
this.userStories[idx].description = markdown;
this.publishChanges(idx);
},
@@ -158,7 +158,6 @@ export default Vue.extend({
</script>
<style scoped>
-
.description-box {
background: transparent;
padding: 0;
@@ -168,13 +167,13 @@ export default Vue.extend({
.form-control {
background-color: var(--textAreaColour);
color: var(--text-primary-color);
- border:none;
+ border: none;
}
.form-control:disabled {
background-color: var(--textAreaColour);
color: var(--text-primary-color);
- border:none;
+ border: none;
}
.form-control:focus {
diff --git a/frontend/src/components/actions/SessionCloseButton.vue b/frontend/src/components/actions/SessionCloseButton.vue
index b34ddd153..29044e71f 100644
--- a/frontend/src/components/actions/SessionCloseButton.vue
+++ b/frontend/src/components/actions/SessionCloseButton.vue
@@ -1,13 +1,9 @@
<template>
<div v-if="isPlanningStart" class="img-holderClose">
<div id="picture-holderClose">
- <b-img :src="require('@/assets/LeaveButton.png')" id="pandaPictureClose"/>
+ <b-img id="pandaPictureClose" :src="require('@/assets/LeaveButton.png')" />
</div>
- <b-button
- v-b-modal.close-session-modal
- variant="danger"
- class="button"
- >
+ <b-button v-b-modal.close-session-modal variant="danger" class="button">
<b-icon-x />
{{ $t("page.session.during.estimation.buttons.finish") }}
</b-button>
@@ -63,7 +59,6 @@ export default Vue.extend({
});
</script>
<style>
-
.description {
color: black;
}
@@ -87,13 +82,13 @@ export default Vue.extend({
}
.img-holderClose .button {
- position: absolute !important;
- text-align: left;
- left: 13.5%;
- bottom: 28%;
- white-space: nowrap;
- border-radius:var(--buttonShape);
- max-height: 40px;
+ position: absolute !important;
+ text-align: left;
+ left: 13.5%;
+ bottom: 28%;
+ white-space: nowrap;
+ border-radius: var(--buttonShape);
+ max-height: 40px;
}
#picture-holderLeave {
@@ -113,11 +108,11 @@ export default Vue.extend({
}
.img-holderLeave .button {
- position: absolute !important;
- text-align: left;
- max-height: 40px;
- border-radius: var(--buttonShape);
- bottom: 0px;
- white-space: nowrap;
+ position: absolute !important;
+ text-align: left;
+ max-height: 40px;
+ border-radius: var(--buttonShape);
+ bottom: 0px;
+ white-space: nowrap;
}
</style>
diff --git a/frontend/src/components/actions/SessionLeaveButton.vue b/frontend/src/components/actions/SessionLeaveButton.vue
index 2783fb8c2..0ea50b953 100644
--- a/frontend/src/components/actions/SessionLeaveButton.vue
+++ b/frontend/src/components/actions/SessionLeaveButton.vue
@@ -1,7 +1,7 @@
<template>
<div class="img-holderLeave mt-5">
<div id="picture-holderLeave">
- <b-img :src="require('@/assets/LeaveButton.png')" id="pandaPictureLeave"/>
+ <b-img id="pandaPictureLeave" :src="require('@/assets/LeaveButton.png')" />
</div>
<b-button
v-b-modal.close-session-modal
diff --git a/frontend/src/components/actions/SessionStartButton.vue b/frontend/src/components/actions/SessionStartButton.vue
index 7408dc1ec..9faa17942 100644
--- a/frontend/src/components/actions/SessionStartButton.vue
+++ b/frontend/src/components/actions/SessionStartButton.vue
@@ -31,8 +31,7 @@ export default Vue.extend({
</script>
<style>
-
-#startButtonSessionPage{
+#startButtonSessionPage {
background-color: var(--startButton);
border-radius: 1rem;
color: var(--text-primary-color);
@@ -45,7 +44,6 @@ export default Vue.extend({
color: var(--text-primary-color);
}
-
#startButtonSessionPage:disabled {
background-color: var(--preparePageInActiveTab);
border-radius: 1rem;
@@ -57,5 +55,4 @@ export default Vue.extend({
border-radius: 1rem;
color: var(--text-primary-color);
}
-
</style>
diff --git a/frontend/src/components/navigation/LocaleDropdown.vue b/frontend/src/components/navigation/LocaleDropdown.vue
index 2f8e0f2d1..074aa41a4 100644
--- a/frontend/src/components/navigation/LocaleDropdown.vue
+++ b/frontend/src/components/navigation/LocaleDropdown.vue
@@ -12,8 +12,10 @@
@click="setLocale(key)"
>{{ locale }}</b-dropdown-item
>
- <hr id="breakingLine"/>
- <b-dropdown-item href="https://crowdin.com/project/diveni">{{ $t("general.licenses.translations")}}</b-dropdown-item>
+ <hr id="breakingLine" />
+ <b-dropdown-item href="https://crowdin.com/project/diveni">{{
+ $t("general.licenses.translations")
+ }}</b-dropdown-item>
</b-nav-item-dropdown>
</template>
diff --git a/frontend/src/components/navigation/TopNavigationBar.vue b/frontend/src/components/navigation/TopNavigationBar.vue
index 6e46a66c0..2d0e0fe12 100644
--- a/frontend/src/components/navigation/TopNavigationBar.vue
+++ b/frontend/src/components/navigation/TopNavigationBar.vue
@@ -1,25 +1,27 @@
<template>
<b-navbar toggleable="md" class="top-navigation" fixed="top" sticky>
<b-navbar-brand class="top-navigation__title" to="/">
- <b-img src="/img/icons/logo.svg" class="top-navigation__nav-logo"/>
+ <b-img src="/img/icons/logo.svg" class="top-navigation__nav-logo" />
{{ $t("page.landing.productTitle") }}
</b-navbar-brand>
- <theme-toggle-component/>
+ <theme-toggle-component />
<b-navbar-nav class="ml-auto">
<b-form>
- <b-button :to="{ name: 'PrepareSessionPage' }" class="startButton px-2 mr-2">New Session</b-button>
+ <b-button :to="{ name: 'PrepareSessionPage' }" class="startButton px-2 mr-2"
+ >New Session</b-button
+ >
</b-form>
<b-form>
<b-button :to="{ name: 'JoinPage' }" class="joinButton px-2 mr-2">
{{ $t("page.landing.meeting.join.buttons.start.label") }}</b-button
- >
+ >
</b-form>
<b-form class="px-2 mr-2">
- <a href="https://github.com/Sybit-Education/Diveni" id="gitHubLink" target="_blank">
+ <a id="gitHubLink" href="https://github.com/Sybit-Education/Diveni" target="_blank">
<BIconGithub id="gitHubLogo"></BIconGithub>
</a>
</b-form>
- <locale-dropdown/>
+ <locale-dropdown />
</b-navbar-nav>
</b-navbar>
</template>
@@ -32,12 +34,11 @@ import ThemeToggleComponent from "@/components/ThemeToggleComponent.vue";
export default Vue.extend({
name: "TopNavigationBar",
- components: { LocaleDropdown, BIconGithub, ThemeToggleComponent }
+ components: { LocaleDropdown, BIconGithub, ThemeToggleComponent },
});
</script>
<style>
-
/* TOP Navigation Bar */
.top-navigation {
diff --git a/frontend/src/services/api.service.ts b/frontend/src/services/api.service.ts
index 98e692285..d95efbd0c 100644
--- a/frontend/src/services/api.service.ts
+++ b/frontend/src/services/api.service.ts
@@ -61,7 +61,9 @@ class ApiService {
}
public async getUserStoriesFromProject(project): Promise<unknown> {
- const response = await axios.get(`${constants.backendURL}/issue-tracker/projects/${project}/issues`);
+ const response = await axios.get(
+ `${constants.backendURL}/issue-tracker/projects/${project}/issues`
+ );
return response.data;
}
@@ -97,7 +99,8 @@ class ApiService {
}
public async getAllDiveniData() {
- const response = (await axios.get(constants.backendURL + constants.getDiveniAnalytics)).data as {
+ const response = (await axios.get(constants.backendURL + constants.getDiveniAnalytics))
+ .data as {
amountOfAttendees: number;
amountOfSessions: number;
amountofAttendeesLastMonth: number;
diff --git a/frontend/src/views/AboutPage.vue b/frontend/src/views/AboutPage.vue
index 6257c4040..8787d3715 100644
--- a/frontend/src/views/AboutPage.vue
+++ b/frontend/src/views/AboutPage.vue
@@ -9,7 +9,10 @@
<h2 class="header">Open Source & Contribution</h2>
<p>
Diveni is open source and published under
- <a href="https://github.com/Sybit-Education/Diveni/blob/main/LICENSE" target="_blank" class="links"
+ <a
+ href="https://github.com/Sybit-Education/Diveni/blob/main/LICENSE"
+ target="_blank"
+ class="links"
>GNU Affero General Public License v3.0</a
>.
</p>
@@ -18,10 +21,19 @@
<a href="https://github.com/Sybit-Education/Diveni" target="_blank" class="links">GitHub</a>:
</p>
<ul>
- <li><a href="https://github.com/Sybit-Education/Diveni/" target="_blank" class="links">Code</a></li>
- <li><a href="https://github.com/Sybit-Education/Diveni/issues" target="_blank" class="links">Issues</a></li>
<li>
- <a href="https://github.com/Sybit-Education/Diveni/discussions" target="_blank" class="links"
+ <a href="https://github.com/Sybit-Education/Diveni/" target="_blank" class="links">Code</a>
+ </li>
+ <li>
+ <a href="https://github.com/Sybit-Education/Diveni/issues" target="_blank" class="links"
+ >Issues</a
+ >
+ </li>
+ <li>
+ <a
+ href="https://github.com/Sybit-Education/Diveni/discussions"
+ target="_blank"
+ class="links"
>Discussions</a
>
</li>
@@ -41,7 +53,10 @@
<h2 class="header">License</h2>
<p>
Diveni is licensed under
- <a href="https://github.com/Sybit-Education/Diveni/blob/main/LICENSE" target="_blank" class="links"
+ <a
+ href="https://github.com/Sybit-Education/Diveni/blob/main/LICENSE"
+ target="_blank"
+ class="links"
>AGPL-3.0 license</a
>.
</p>
@@ -74,7 +89,6 @@ export default Vue.extend({
</script>
<style scoped>
-
.links {
color: var(--linkColor);
}
@@ -82,5 +96,4 @@ export default Vue.extend({
.header {
color: var(--text-primary-color);
}
-
</style>
diff --git a/frontend/src/views/JoinPage.vue b/frontend/src/views/JoinPage.vue
index 94df1b46a..08af9b3c0 100644
--- a/frontend/src/views/JoinPage.vue
+++ b/frontend/src/views/JoinPage.vue
@@ -3,7 +3,7 @@
<h1 id="heading">
{{ $t("page.join.title") }}
<!-- <b-img :src="require('@/assets/ControllerJoinPage.png')" id="controller"/> -->
- <BIconController id="controller"/>
+ <BIconController id="controller" />
</h1>
<join-page-card
:color="hexColor"
@@ -27,8 +27,8 @@ export default Vue.extend({
name: "JoinPage",
components: {
JoinPageCard,
- BIconController
-},
+ BIconController,
+ },
data() {
return {
hexColor: Constants.getRandomPastelColor(),
@@ -88,7 +88,7 @@ export default Vue.extend({
const sessionConfig = result.data as {
set: Array<string>;
timerSeconds: number;
- userStories: Array<{ title: string; description: string; estimation: string | null;}>;
+ userStories: Array<{ title: string; description: string; estimation: string | null }>;
userStoryMode: string;
};
this.voteSet = JSON.stringify(sessionConfig.set);
@@ -171,7 +171,6 @@ export default Vue.extend({
height: 49px;
width: 78px;
transform: rotate(315deg);
- margin-left: 1%
+ margin-left: 1%;
}
-
-</style>
+</style>
diff --git a/frontend/src/views/LandingPage.vue b/frontend/src/views/LandingPage.vue
index 6505926ad..ff99213e2 100644
--- a/frontend/src/views/LandingPage.vue
+++ b/frontend/src/views/LandingPage.vue
@@ -2,7 +2,7 @@
<div id="landing-page">
<b-container fluid class="teaser">
<b-container>
- <b-jumbotron header="DIVENI" lead="Instant free and easy remote Planning Poker"/>
+ <b-jumbotron header="DIVENI" lead="Instant free and easy remote Planning Poker" />
</b-container>
</b-container>
<b-container class="my-5">
@@ -31,9 +31,7 @@
/>
</b-card-group>
</b-container>
- <AnalyticsDataComponent ref="dataComponent">
-
- </AnalyticsDataComponent>
+ <AnalyticsDataComponent ref="dataComponent"> </AnalyticsDataComponent>
<b-container class="py-5">
<div class="parent py-5 px-5">
<div class="background py-5"></div>
@@ -42,18 +40,12 @@
<b-card-group deck class="py-5">
<b-card class="pictureCard">
<b-card-text>
- <b-img
- :src="require(`@/assets/SetUpSession.png`)"
- class="landingPagePictures"
- />
+ <b-img :src="require(`@/assets/SetUpSession.png`)" class="landingPagePictures" />
</b-card-text>
</b-card>
<b-card class="pictureCard">
<b-card-text>
- <b-img
- :src="require(`@/assets/InviteYourTeam.png`)"
- class="landingPagePictures"
- />
+ <b-img :src="require(`@/assets/InviteYourTeam.png`)" class="landingPagePictures" />
</b-card-text>
</b-card>
<b-card class="pictureCard">
@@ -70,7 +62,7 @@
<b-card-text v-html="$t('page.instruction.setUpSession')"></b-card-text>
</b-card>
<b-card class="aboutDiveni" title="Invite your Team">
- <b-card-text v-html="$t('page.instruction.inviteYourTeam')"></b-card-text>
+ <b-card-text v-html="$t('page.instruction.inviteYourTeam')"></b-card-text>
</b-card>
<b-card class="aboutDiveni" title="Estimate User Stories">
<b-card-text v-html="$t('page.instruction.estimateUserStories')"></b-card-text>
@@ -82,7 +74,7 @@
<p>DIVENI was initially developed by students of HTWG Constance and is open source now.</p>
<p>
More information could be found in the
- <a href="https://docs.diveni.io/" id="link">documentation</a>.
+ <a id="link" href="https://docs.diveni.io/">documentation</a>.
</p>
</b-container>
</div>
@@ -141,7 +133,7 @@ export default Vue.extend({
sessionState: string;
members: Array<string>;
};
- this.sessionWrapper = {session};
+ this.sessionWrapper = { session };
} catch (e) {
console.error(`got error: ${e}`);
window.localStorage.removeItem("adminCookie");
@@ -149,10 +141,10 @@ export default Vue.extend({
}
},
goToJoinPage() {
- this.$router.push({name: "JoinPage"});
+ this.$router.push({ name: "JoinPage" });
},
goToPrepareSessionPage() {
- this.$router.push({name: "PrepareSessionPage"});
+ this.$router.push({ name: "PrepareSessionPage" });
},
goToSessionPage() {
this.$store.commit("setUserStories", {
@@ -176,7 +168,6 @@ export default Vue.extend({
</script>
<style scoped>
-
#link {
color: var(--linkColor);
}
@@ -187,7 +178,7 @@ export default Vue.extend({
.teaser {
background: linear-gradient(var(--background-color-primary), var(--pictureGradientEnd)),
- url("~@/assets/img/diveni-background.png");
+ url("~@/assets/img/diveni-background.png");
background-size: cover;
background-repeat: no-repeat;
}
@@ -204,7 +195,7 @@ export default Vue.extend({
}
.card-title {
- color: var(--text-primary-color)
+ color: var(--text-primary-color);
}
.parent {
@@ -213,7 +204,6 @@ export default Vue.extend({
width: 100%;
}
-
.background {
position: absolute;
top: 0;
diff --git a/frontend/src/views/MemberVotePage.vue b/frontend/src/views/MemberVotePage.vue
index e4c05e9fa..991933f4d 100644
--- a/frontend/src/views/MemberVotePage.vue
+++ b/frontend/src/views/MemberVotePage.vue
@@ -22,7 +22,7 @@
:pause-timer="estimateFinished || pauseSession"
:duration="timerCountdownNumber"
:member="memberID"
- :votingStarted="isStartVoting"
+ :voting-started="isStartVoting"
/>
</b-col>
</b-row>
@@ -329,7 +329,6 @@ export default Vue.extend({
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
-
#header {
color: var(--text-primary-color);
}
diff --git a/frontend/src/views/PrepareSessionPage.vue b/frontend/src/views/PrepareSessionPage.vue
index 38315d3c3..a1cf82298 100644
--- a/frontend/src/views/PrepareSessionPage.vue
+++ b/frontend/src/views/PrepareSessionPage.vue
@@ -4,18 +4,14 @@
{{ $t("session.prepare.title") }}
</h1>
- <h4 class="mt-3">
- <b-img
+ <h4 class="mt-3">
+ <b-img
v-if="theme === 'light-theme'"
:src="require('@/assets/preparePage/P1.png')"
class="numberPictures"
- />
- <b-img
- v-else
- :src="require('@/assets/preparePage/P1D.png')"
- class="numberPictures"
- />
- {{ $t("session.prepare.step.selection.mode.title") }}
+ />
+ <b-img v-else :src="require('@/assets/preparePage/P1D.png')" class="numberPictures" />
+ {{ $t("session.prepare.step.selection.mode.title") }}
</h4>
<b-tabs v-model="tabIndex" content-class="mt-3" fill>
<b-tab
@@ -37,7 +33,15 @@
accept="text/csv"
@change="importStory($event.target.files)"
/>
- <b-button block elevation="2" class="importUserStoryButton" @click="openFileUploader(); $event.target.blur();">
+ <b-button
+ block
+ elevation="2"
+ class="importUserStoryButton"
+ @click="
+ openFileUploader();
+ $event.target.blur();
+ "
+ >
{{ $t("session.prepare.step.selection.mode.description.withUS.importButton") }}
</b-button>
</b-tab>
@@ -54,12 +58,8 @@
v-if="theme === 'light-theme'"
:src="require('@/assets/preparePage/P2.png')"
class="numberPictures"
- />
- <b-img
- v-else
- :src="require('@/assets/preparePage/P2D.png')"
- class="numberPictures"
- />
+ />
+ <b-img v-else :src="require('@/assets/preparePage/P2D.png')" class="numberPictures" />
{{ $t("session.prepare.step.selection.cardSet.title") }}
</h4>
<card-set-component
@@ -72,25 +72,37 @@
v-if="theme === 'light-theme'"
:src="require('@/assets/preparePage/P3.png')"
class="numberPictures"
- />
- <b-img
- v-else
- :src="require('@/assets/preparePage/P3D.png')"
- class="numberPictures"
- />
+ />
+ <b-img v-else :src="require('@/assets/preparePage/P3D.png')" class="numberPictures" />
{{ $t("session.prepare.step.selection.time.title") }}
</h4>
<b-row class="mt-3 text-center">
<b-col>
- <b-button class="optionButtons" @click="setTimerDown(); $event.target.blur();"> - </b-button>
+ <b-button
+ class="optionButtons"
+ @click="
+ setTimerDown();
+ $event.target.blur();
+ "
+ >
+ -
+ </b-button>
</b-col>
- <b-col class="text-center" id="timerCol" cols="auto">
+ <b-col id="timerCol" class="text-center" cols="auto">
<h4 id="timerBackground">
{{ timer == 0 ? "∞" : formatTimer }}
</h4>
</b-col>
<b-col>
- <b-button class="optionButtons" @click="setTimerUp(); $event.target.blur();"> +</b-button>
+ <b-button
+ class="optionButtons"
+ @click="
+ setTimerUp();
+ $event.target.blur();
+ "
+ >
+ +</b-button
+ >
</b-col>
</b-row>
<h4 class="mt-3">
@@ -98,12 +110,8 @@
v-if="theme === 'light-theme'"
:src="require('@/assets/preparePage/P4.png')"
class="numberPictures"
- />
- <b-img
- v-else
- :src="require('@/assets/preparePage/P4D.png')"
- class="numberPictures"
- />
+ />
+ <b-img v-else :src="require('@/assets/preparePage/P4D.png')" class="numberPictures" />
{{ $t("session.prepare.step.selection.password.title") }}
</h4>
<b-row class="mt-3">
@@ -157,7 +165,7 @@ export default Vue.extend({
warningWhenUnderZero: "",
tabIndex: 0,
isIssueTrackerEnabled: false,
- theme: localStorage.getItem('user-theme'),
+ theme: localStorage.getItem("user-theme"),
};
},
computed: {
@@ -188,9 +196,9 @@ export default Vue.extend({
this.tabIndex = isNaN(parsedTabIndex) ? 0 : parsedTabIndex;
},
mounted() {
- window.addEventListener('user-theme-localstorage-changed', (event) => {
- const customEvent = event as CustomEvent;
- this.theme = customEvent.detail.storage;
+ window.addEventListener("user-theme-localstorage-changed", (event) => {
+ const customEvent = event as CustomEvent;
+ this.theme = customEvent.detail.storage;
});
apiService.getIssueTrackerConfig().then((result) => {
this.isIssueTrackerEnabled =
@@ -334,7 +342,6 @@ export default Vue.extend({
</script>
<style scoped>
-
#timerBackground {
background-color: var(--preparePageTimerBackground);
}
@@ -358,13 +365,13 @@ export default Vue.extend({
color: var(--text-primary-color);
}
-.importUserStoryButton:focus{
+.importUserStoryButton:focus {
background-color: var(--startButtonHovered) !important;
color: var(--text-primary-color) !important;
}
.optionButtons {
- color:var(--text-primary-color);
+ color: var(--text-primary-color);
border-color: var(--text-primary-color);
background-color: transparent;
font-size: xx-large;
@@ -372,12 +379,12 @@ export default Vue.extend({
}
.optionButtons:hover {
- color:var(--text-primary-color) !important;
+ color: var(--text-primary-color) !important;
border-color: var(--text-primary-color);
background-color: var(--preparePageInActiveTabHover);
}
.optionButtons:focus {
- color:var(--text-primary-color);
+ color: var(--text-primary-color);
border-color: var(--text-primary-color);
background-color: transparent !important;
outline: none;
@@ -409,7 +416,7 @@ export default Vue.extend({
color: var(--text-primary-color);
}
-.numberPictures{
+.numberPictures {
height: 45px;
width: 45px;
}
diff --git a/frontend/src/views/ResultPage.vue b/frontend/src/views/ResultPage.vue
index a46b5e702..587c4fe52 100644
--- a/frontend/src/views/ResultPage.vue
+++ b/frontend/src/views/ResultPage.vue
@@ -7,14 +7,18 @@
{{ $t("page.results.noUserStories") }}
</div>
<b-list-group v-else id="results">
- <b-list-group-item v-for="(story, index) of userStories" :key="index" class="text-center stories">
+ <b-list-group-item
+ v-for="(story, index) of userStories"
+ :key="index"
+ class="text-center stories"
+ >
{{ story.title ? story.title : "No title ..." }}
- <b-button class="mx-2 estimationButtons" pill >
+ <b-button class="mx-2 estimationButtons" pill>
{{ story.estimation ? story.estimation : "?" }}
</b-button>
</b-list-group-item>
</b-list-group>
- <b-row class=" text-center centerItems">
+ <b-row class="text-center centerItems">
<b-col>
<b-button
id="downloadButton"
@@ -23,11 +27,7 @@
>
{{ $t("page.results.button.download") }}
</b-button>
- <b-button
- id="goBackHomeButton"
- class="mx-2"
- @click="goHome()"
- >
+ <b-button id="goBackHomeButton" class="mx-2" @click="goHome()">
{{ $t("page.results.button.home") }}
</b-button>
</b-col>
@@ -73,7 +73,6 @@ export default Vue.extend({
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
-
.centerItems {
display: flex;
justify-content: center;
@@ -82,7 +81,7 @@ export default Vue.extend({
min-height: 10vh;
}
-.estimationButtons {
+.estimationButtons {
background-color: var(--startButton);
color: var(--text-primary-color);
}
@@ -92,11 +91,11 @@ export default Vue.extend({
color: var(--text-primary-color);
}
-.estimationButtons:focus{
+.estimationButtons:focus {
background-color: var(--startButtonHovered) !important;
color: var(--text-primary-color);
}
-.estimationButtons:active{
+.estimationButtons:active {
background-color: var(--startButtonHovered) !important;
}
diff --git a/frontend/src/views/SessionPage.vue b/frontend/src/views/SessionPage.vue
index 978412480..ce7f5f08d 100644
--- a/frontend/src/views/SessionPage.vue
+++ b/frontend/src/views/SessionPage.vue
@@ -10,14 +10,14 @@
}}
</h1>
</b-col>
- <b-col cols="auto" >
+ <b-col cols="auto">
<copy-session-id-popup
v-if="planningStart"
class="float-end"
:session-id="session_sessionID"
/>
</b-col>
- <b-col cols="auto" id="sessionCloseCol">
+ <b-col id="sessionCloseCol" cols="auto">
<session-close-button
:is-planning-start="planningStart"
:user-story-mode="session_userStoryMode"
@@ -27,7 +27,7 @@
<div v-if="!planningStart">
<div id="catGifDiv">
- <b-img :src="require('@/assets/LoadingCat.gif')" class="catGif"/>
+ <b-img :src="require('@/assets/LoadingCat.gif')" class="catGif" />
</div>
<copy-session-id-popup
:text-before-session-i-d="$t('page.session.before.text.beforeID')"
@@ -36,7 +36,6 @@
class="copy-popup"
/>
-
<b-row class="d-flex justify-content-center overflow-auto kick-user">
<kick-user-wrapper
v-for="member of members"
@@ -59,14 +58,21 @@
<b-button
class="mr-3 optionButton"
variant="outline-dark"
- @click="sendRestartMessage(); $event.target.blur();"
+ @click="
+ sendRestartMessage();
+ $event.target.blur();
+ "
>
<BIconArrowClockwise class="bIcons"></BIconArrowClockwise>
{{ $t("page.session.during.estimation.buttons.new") }}
</b-button>
- <b-button class="mr-3 optionButton"
+ <b-button
+ class="mr-3 optionButton"
variant="outline-dark"
- @click="sendVotingFinishedMessage(); $event.target.blur();"
+ @click="
+ sendVotingFinishedMessage();
+ $event.target.blur();
+ "
>
<BIconBarChartFill class="bIcons"></BIconBarChartFill>
{{ $t("page.session.during.estimation.buttons.result") }}
@@ -77,7 +83,7 @@
:start-timestamp="timerTimestamp"
:pause-timer="estimateFinished"
:duration="timerCountdownNumber"
- :votingStarted="planningStart"
+ :voting-started="planningStart"
@timerFinished="sendVotingFinishedMessage"
/>
</b-col>
@@ -103,9 +109,7 @@
{{ membersEstimated.length }} /
{{ membersPending.length + membersEstimated.length }}
</h4>
- <b-row
- class="my-1 d-flex justify-content-center flex-wrap overflow-auto kick-user"
- >
+ <b-row class="my-1 d-flex justify-content-center flex-wrap overflow-auto kick-user">
<kick-user-wrapper
v-for="member of estimateFinished ? members : membersEstimated"
:key="member.memberID"
@@ -121,7 +125,7 @@
</div>
<b-row v-if="session_userStoryMode !== 'NO_US'" class="mt-4">
<b-col>
- <user-story-sum-component/>
+ <user-story-sum-component />
</b-col>
</b-row>
<b-row v-if="session_userStoryMode !== 'NO_US'">
@@ -129,7 +133,10 @@
<div v-if="session_userStoryMode === 'US_JIRA'" class="refreshUserstories">
<b-button
class="w-100 mb-3 refreshButton"
- @click="refreshUserStories(); $event.target.blur();"
+ @click="
+ refreshUserStories();
+ $event.target.blur();
+ "
>
{{ $t("page.session.before.refreshStories") }}
</b-button>
@@ -148,7 +155,10 @@
<div v-if="session_userStoryMode === 'US_JIRA'" class="refreshUserstories">
<b-button
class="w-100 mb-3 refreshButton"
- @click="refreshUserStories(); $event.target.blur();"
+ @click="
+ refreshUserStories();
+ $event.target.blur();
+ "
>
{{ $t("page.session.before.refreshStories") }}
</b-button>
@@ -219,8 +229,8 @@ export default Vue.extend({
UserStoryDescriptions,
NotifyHostComponent,
BIconArrowClockwise,
- BIconBarChartFill
-},
+ BIconBarChartFill,
+ },
props: {
adminID: { type: String, required: false },
sessionID: { type: String, required: false },
@@ -320,7 +330,7 @@ export default Vue.extend({
}
},
membersEstimated() {
- if (this.membersPending.length === 0 && this.membersEstimated.length > 0) {
+ if (this.membersPending.length === 0 && this.membersEstimated.length > 0) {
this.estimateFinished = true;
}
},
@@ -467,7 +477,9 @@ export default Vue.extend({
}
}
if (response.status === 200) {
- this.$toast.success(this.$t("session.notification.messages.issueTrackerSynchronizeSuccess"));
+ this.$toast.success(
+ this.$t("session.notification.messages.issueTrackerSynchronizeSuccess")
+ );
} else {
this.$toast.error(this.$t("session.notification.messages.issueTrackerSynchronizeFailed"));
}
@@ -519,7 +531,9 @@ export default Vue.extend({
}
}
if (response.status === 200) {
- this.$toast.success(this.$t("session.notification.messages.issueTrackerSynchronizeSuccess"));
+ this.$toast.success(
+ this.$t("session.notification.messages.issueTrackerSynchronizeSuccess")
+ );
} else {
this.$toast.error(this.$t("session.notification.messages.issueTrackerSynchronizeFailed"));
}
@@ -581,7 +595,6 @@ export default Vue.extend({
</script>
<style scoped>
-
.optionButtonCol {
margin-top: auto;
margin-bottom: auto;
@@ -614,7 +627,7 @@ export default Vue.extend({
width: 40px;
}
-.optionButton{
+.optionButton {
background-color: var(--textAreaColour);
color: var(--text-primary-color);
border-color: black;
@@ -623,14 +636,14 @@ export default Vue.extend({
align-items: center;
}
-.optionButton:hover{
+.optionButton:hover {
background-color: var(--textAreaColourHovered);
color: var(--text-primary-color);
}
-.optionButton:focus{
+.optionButton:focus {
background-color: var(--textAreaColourHovered) !important;
- color: var(--text-primary-color) !important;
+ color: var(--text-primary-color) !important;
}
.refreshButton {