feat(Roles): Accordions in About page for roles. Closes #182

antoinezanardi · Mar 30, 2021 · f3b58ca · f3b58ca
1 parent dd48bf3
commit f3b58ca
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@
 ### 🌟 Enhancements
 
 * [#180](https://github.com/antoinezanardi/werewolves-assistant-web/issues/180) - Role types.
+* [#182](https://github.com/antoinezanardi/werewolves-assistant-web/issues/182) - Accordions in About page for roles.
 
 ### 📦 Packages
 

diff --git a/src/assets/scss/_accordions.scss b/src/assets/scss/_accordions.scss
@@ -0,0 +1,11 @@
+.accordion {
+    .card {
+        background-color: #3a3a3a;
+        border: 1px solid #6e6e6e;
+        transition: all 0.25s ease;
+
+        &:hover {
+            background-color: #303030;
+        }
+    }
+}
diff --git a/src/assets/scss/styles.scss b/src/assets/scss/styles.scss
@@ -4,6 +4,7 @@
 @import "~vue-tour/dist/vue-tour.css";
 
 @import "colors";
+@import "accordions";
 @import "all";
 @import "animations";
 @import "cursor";

diff --git a/src/components/About/About.vue b/src/components/About/About.vue
@@ -75,19 +75,8 @@
         <div class="row section-content">
             <div class="col-12">
                 <p v-html="$tc('About.thereAreCountAvailableRoles', roles.length, { count: roles.length })"/>
-                <div v-for="(role, index) in roles" :key="role.name" class="row justify-content-center align-items-center">
-                    <div class="col-md-2 col-4 d-flex flex-column align-items-center">
-                        <RoleImage :role="role.name"/>
-                        <RoleTypeBadge :role="role" class="mt-2"/>
-                    </div>
-                    <RoleText :role="role.name" prefix="the" class="col-md-2 col-4 text-center font-weight-bold cursor-text"/>
-                    <div class="col-md-8 mt-md-0 col-12 mt-3">
-                        <p v-for="paragraph of $t(`Role.description.${role.name}`)"
-                           :key="paragraph" v-html="paragraph"/>
-                    </div>
-                    <div v-if="index + 1 !== roles.length" class="col-12">
-                        <hr class="bg-dark"/>
-                    </div>
+                <div id="roles-accordion" class="accordion">
+                    <AboutRole v-for="role in roles" :key="role.name" :role="role"/>
                 </div>
             </div>
         </div>
@@ -174,13 +163,12 @@
 <script>
 import { mapGetters } from "vuex";
 import RoleImage from "@/components/shared/Game/Role/RoleImage";
-import RoleText from "@/components/shared/Game/Role/RoleText";
+import AboutRole from "@/components/About/AboutRole";
 import { i18n } from "@/plugins";
-import RoleTypeBadge from "@/components/shared/Game/Role/RoleTypeBadge";
 
 export default {
     name: "About",
-    components: { RoleTypeBadge, RoleText, RoleImage },
+    components: { AboutRole, RoleImage },
     computed: { ...mapGetters("role", { roles: "roles" }) },
     created() {
         localStorage.setItem("aboutPageVisited", "true");
@@ -231,7 +219,7 @@ export default {
     }
 
     .section-content {
-        @include font-size(1.35rem);
+        @include font-size(1.15rem);
         text-align: justify;
     }
 </style>
diff --git a/src/components/About/AboutRole.vue b/src/components/About/AboutRole.vue
@@ -0,0 +1,76 @@
+<template>
+    <div class="about-role card" @click.prevent="toggleCollapse">
+        <div :id="`role-heading-${role.name}`" class="role-heading card-header">
+            <button class="btn w-100 h-100 text-left text-white d-flex align-items-center" type="button" data-toggle="collapse"
+                    :data-target="`#role-collapse-${role.name}`"
+                    aria-expanded="true" :aria-controls="`role-collapse-${role.name}`">
+                <span class="d-flex flex-grow-1 align-items-center">
+                    <RoleImage :role="role.name"/>
+                    <RoleText :role="role.name" prefix="the" class="font-weight-bold ml-2"/>
+                </span>
+                <i class="fa fa-chevron-down about-role-chevron" :class="{ 'fa-rotate-180': isCollapsed }"/>
+            </button>
+        </div>
+        <div :id="`role-collapse-${role.name}`" class="collapse" :aria-labelledby="`role-heading-${role.name}`">
+            <div class="card-body">
+                <div class="row d-flex align-items-center">
+                    <div class="col-md-2 col-4 d-flex flex-column align-items-center">
+                        <RoleImage :role="role.name"/>
+                        <RoleTypeBadge :role="role" class="mt-2"/>
+                    </div>
+                    <RoleText :role="role.name" prefix="the" class="col-md-2 col-8 text-center font-weight-bold cursor-text"/>
+                    <div class="col-md-8 mt-md-0 col-12 mt-3">
+                        <p v-for="paragraph of $t(`Role.description.${role.name}`)"
+                           :key="paragraph" v-html="paragraph"/>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import Role from "@/classes/Role";
+import RoleImage from "@/components/shared/Game/Role/RoleImage";
+import RoleTypeBadge from "@/components/shared/Game/Role/RoleTypeBadge";
+import RoleText from "@/components/shared/Game/Role/RoleText";
+
+export default {
+    name: "AboutRole",
+    components: { RoleText, RoleTypeBadge, RoleImage },
+    props: {
+        role: {
+            type: Role,
+            required: true,
+        },
+    },
+    data() {
+        return { isCollapsed: false };
+    },
+    methods: {
+        toggleCollapse() {
+            this.isCollapsed = !this.isCollapsed;
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+    @import "../../../node_modules/bootstrap/scss/bootstrap";
+    @import "../../assets/scss/variables";
+
+    .role-heading {
+        padding: 0;
+        button {
+            @include font-size(1.25rem);
+
+            .about-role-chevron {
+                transition: all ease 0.25s;
+            }
+        }
+        img {
+            width: 40px;
+            height: 40px;
+        }
+    }
+</style>