From 2a58a7b52325fb223dbbf837e827721b1064efb5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D9=83=D8=A7=D8=B1=D9=84=20=D9=85=D8=A8=D8=A7=D8=B1=D9=83?=
 <bonjour@mouabrak.eu>
Date: Wed, 7 Jul 2021 18:56:26 +0200
Subject: [PATCH] some styling, topics/chapters are collapsed by default

---
 front/src/App.vue                        |  9 +----
 front/src/components/Content/Chapter.vue | 50 ++++++++++++++++++++++++
 front/src/components/Content/index.vue   | 31 ++++++---------
 front/src/components/Rules/index.vue     |  2 +-
 front/src/components/Streams/Stream.vue  |  8 +++-
 front/src/components/Streams/index.vue   |  3 +-
 6 files changed, 72 insertions(+), 31 deletions(-)
 create mode 100644 front/src/components/Content/Chapter.vue

diff --git a/front/src/App.vue b/front/src/App.vue
index 081c3b7..bd50c6c 100644
--- a/front/src/App.vue
+++ b/front/src/App.vue
@@ -209,14 +209,7 @@ section p {
   margin-bottom: 0;
   margin-top: 0;
 }
-section .title {
-  display: none;
-  font-weight: bold;
-  position: sticky;
-  top: 1em;
-}
-
 @media print {
-  .title { display: none; } 
+  /* .title { display: none; }  */
 }
 </style>
diff --git a/front/src/components/Content/Chapter.vue b/front/src/components/Content/Chapter.vue
new file mode 100644
index 0000000..99d3906
--- /dev/null
+++ b/front/src/components/Content/Chapter.vue
@@ -0,0 +1,50 @@
+<template>
+  <div :class="[ 'body', topic.title ]">    
+    <h3
+      @click="desiresContent = !desiresContent"
+      class="header"
+    >
+      <span class="expandToggle">{{ desiresContent ? '▼ ' : '► '}}</span>
+      <span>{{ topic.title }}</span>
+    </h3> 
+    <div v-if="desiresContent">
+      <span
+        v-for="message in topic.messages"
+        :key="message.id"
+      >
+      <Message
+        :message="message"
+      />
+      <span>&nbsp;</span>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import Message from './Message'
+
+export default {
+  name: 'Chapter',
+  components: { 
+    Message,
+  },
+  data() {
+    return {
+      desiresContent: false,
+    }
+  },
+  props: [
+    'topic',
+  ],
+}
+</script>
+
+<style scoped>
+.header {
+  cursor: pointer;
+}
+@media print {
+  .title { display: none; } 
+}
+</style>
\ No newline at end of file
diff --git a/front/src/components/Content/index.vue b/front/src/components/Content/index.vue
index 6a01929..cfce587 100644
--- a/front/src/components/Content/index.vue
+++ b/front/src/components/Content/index.vue
@@ -1,36 +1,30 @@
 <template>
   <section :class="[ 'content', currentStream ]">
-    <div 
+    <h1 class="title">{{ currentStream }}</h1>
+    <Chapter 
       v-for="topic in sortedTopics"
       :key="topic.title"
-      :class="[ 'body', topic.title ]"
-    >
-      <h1>{{ topic.title }}</h1>
-      <span
-        v-for="message in topic.messages"
-        :key="message.id"
-      >
-      <Message
-        :message="message"
-      />
-      <span>&nbsp;</span>
-      </span>
-    </div>
+      :topic="topic"
+    />    
   </section>   
 </template>
 
 <script>
 import { mapGetters, mapState } from 'vuex'
-import Message from './Message'
+import Chapter from './Chapter.vue'
 
 export default {
   name: 'Content',
   components: { 
-    Message,
+    Chapter,
+  },
+  data() {
+    return {
+      desiresContent: false,
+    }
   },
   computed: {
     ...mapState([
-      'rules',
       'currentStream'
     ]),
     ...mapGetters([
@@ -47,7 +41,4 @@ export default {
   max-width: 700px;
   background: unset;
 }
-@media print {
-  .title { display: none; } 
-}
 </style>
\ No newline at end of file
diff --git a/front/src/components/Rules/index.vue b/front/src/components/Rules/index.vue
index e059ef0..1a5ef73 100644
--- a/front/src/components/Rules/index.vue
+++ b/front/src/components/Rules/index.vue
@@ -1,6 +1,6 @@
 <template>
   <section class="rules">
-    <p class="title">{{ $.type.name }}</p>
+    <!-- <p class="title">{{ $.type.name }}</p> -->
     <Rule
       v-for="rule in rules"
       :key="rule.id"
diff --git a/front/src/components/Streams/Stream.vue b/front/src/components/Streams/Stream.vue
index 31b5e37..1f21d96 100644
--- a/front/src/components/Streams/Stream.vue
+++ b/front/src/components/Streams/Stream.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div :class="{ selected: selected }">
     <p class="name">
       <router-link :to="stream.name">
         {{ stream.name }}
@@ -16,15 +16,21 @@ export default {
     'stream'
   ],
   computed: {
+    selected() { return this.$store.state.currentStream == this.stream.name }
   },
 }
 </script>
 
 <style scoped>
 div {
+  padding: 0.5em;
+}
+div .selected {
+  background: rgb(247, 146, 247);
 }
 div p {
   margin: 0;
 }
 
+
 </style>
\ No newline at end of file
diff --git a/front/src/components/Streams/index.vue b/front/src/components/Streams/index.vue
index 2a806a5..e74b438 100644
--- a/front/src/components/Streams/index.vue
+++ b/front/src/components/Streams/index.vue
@@ -1,6 +1,6 @@
 <template>
   <section class="streams">
-    <p class="title">{{ $.type.name }}</p>
+    <!-- <p class="title">{{ $.type.name }}</p> -->
     <Stream
       v-for="stream in streams"
       :key="stream.id"
@@ -29,6 +29,7 @@ export default {
 <style scoped>
 .streams {
   min-width: 10em;
+  padding: 0;
 }
 @media print {
   .streams { display: none; }