Merge branch 'main' into add/stampimages

traP-jp · Sep 4, 2024 · b10ce88 · b10ce88
2 parents c6902ef + 7d72392
commit b10ce88
Show file tree

Hide file tree

Showing 15 changed files with 306 additions and 187 deletions.
diff --git a/index.html b/index.html
@@ -6,6 +6,7 @@
       <link rel="preconnect" href="https://fonts.googleapis.com">
       <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
       <link href="https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@100;300;400;500;700;800;900&display=swap" rel="stylesheet">
+      <link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap" rel="stylesheet">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + Vue</title>
   </head>

diff --git a/src/App.vue b/src/App.vue
@@ -24,7 +24,7 @@ onMounted(async() =>{
 </script>
 
 <template>
-  <div :class="$style.page">
+  <div :class="$style.page" id="page">
     <Header :user-traq-id="userTraqId" />
     <router-view :class="$style.contents" />
   </div>
@@ -33,6 +33,7 @@ onMounted(async() =>{
 .page {
   height: 100%;
   overflow-x: hidden;
+  scroll-behavior: smooth;
 }
 .contents {
   height: fit-content;

diff --git a/src/components/MarkDownEditor.vue b/src/components/MarkDownEditor.vue
@@ -11,27 +11,8 @@ import {useToast} from 'vue-toast-notification';
 import 'vue-toast-notification/dist/theme-sugar.css';
 import { useUserStore } from '../store/user'
 import { log } from 'console'
-
-type Memo = {
-    id: number,
-    title: string,
-    ownerTraqId: string,
-    content: string,
-    createdAt: string,
-    updatedAt: string,
-    tags: string[]
-}
-
-type Wiki = {
-    id: number,
-    type: string,
-    title: string,
-    Abstract: string,
-    createdAt: string,
-    updatedAt: string,
-    ownerTraqId: string,
-    tags: string[]
-}
+import Wiki from "../types/wiki";
+import Memo from "../types/memo";
 
 const props = defineProps({
     editorType: Number,

diff --git a/src/components/WikiCard.vue b/src/components/WikiCard.vue
@@ -3,28 +3,21 @@ import { onMounted, ref } from "vue";
 import router from "../router";
 import { useUserStore } from '../store/user.js';
 import { useToast } from "vue-toast-notification";
+import Wiki from "../types/wiki";
 
-type Wiki = {
-  id: number;
-  type: string;
-  title: string;
-  Abstract: string;
-  createdAt: string;
-  updatedAt: string;
-  ownerTraqId: string;
-  tags: string[];
-};
-const props = defineProps({
-  wiki: Object,
+
+const props = defineProps<{
+  wiki: Wiki,
   isMyPage: Boolean
-});
+}>();
 const wiki = ref(props.wiki);
 const isMyPage = ref(props.isMyPage)
 const canDelete = ref<boolean>(false)
 const favorites = ref<Wiki[]>([])
 const hide = ref<boolean>(false)
 const userStore = useUserStore();
 const $toast = useToast();
+const iconUrl = ref<string>("")
 
 
 const SelectWiki = (wiki: Wiki) => {
@@ -52,6 +45,8 @@ onMounted(async() =>{
     }
   });
   canDelete.value = wiki.value.type == "memo" && isMyPage.value
+  iconUrl.value = "https://q.trap.jp/api/v3/public/icon/" + wiki.value.ownerTraqId
+  //iconUrl.value = "https://q.trap.jp/api/v3/public/icon/kavos"
 })
 const StartLiking = async (wiki: Wiki) => {
   if (isLiking.value) {
@@ -65,6 +60,7 @@ const StartLiking = async (wiki: Wiki) => {
         wikiId: wiki.id.toString()
       })
     });
+    wiki.favorites -= 1;
   }else {
     isLiking.value = true;
     await fetch("/api/wiki/user/favorite", {
@@ -76,6 +72,7 @@ const StartLiking = async (wiki: Wiki) => {
         wikiId: wiki.id.toString()
       })
     });
+    wiki.favorites += 1;
   }
 }
 const DeleteMemo = async(wiki: Wiki) =>{
@@ -104,52 +101,63 @@ const DeleteMemo = async(wiki: Wiki) =>{
 </script>
 
 <template>
-  <tr v-if="!hide" class="card" @click="SelectWiki(wiki)">
-    <li class="title">{{ wiki.title }}</li>
-    <li class="content">{{ wiki.Abstract }}</li>
-    <div class="button-container">
-    <div
-      v-for="tag in wiki.tags"
-      :key="tag"
-    >
-      <button
-        class="tag-content"
-        type="button"
-        @click.stop="TagClick(tag)"
-        v-if="tag != ''"
-      >
-        {{ tag }}
-      </button>
+  <div v-if="!hide" :class="$style.card" @click="SelectWiki(wiki)">
+    <img :src="iconUrl" :class="$style.icon" />
+    <header :class="$style.header">
+      <p :class="$style.owner_traq_id">@{{wiki.ownerTraqId}}</p>
+      <p :class="$style.created_at">{{wiki.createdAt}}</p>
+    </header>
+    <div :class="$style.content">
+      <div :class="$style.title">{{ wiki.title }}</div>
+      <div :class="$style.abstract">{{ wiki.Abstract }}</div>
+      <div :class="$style.button_container">
+        <div
+            v-for="tag in wiki.tags"
+            :key="tag"
+        >
+          <button
+              :class="$style.tag_content"
+              type="button"
+              @click.stop="TagClick(tag)"
+              v-if="tag != ''"
+          >
+            {{ tag }}
+          </button>
+        </div>
+      </div>
+      <div :class="$style.button_container">
+        <button v-if="isLiking" :class="$style.iine" @click.stop="StartLiking(wiki)">
+          <font-awesome-icon :icon="['fas', 'heart']" />
+          <span>いいね！</span>
+          <span :class="$style.favorite_count">{{ wiki.favorites }}</span>
+        </button>
+        <button v-else :class="$style.iine" @click.stop="StartLiking(wiki)">
+          <font-awesome-icon :icon="['far', 'heart']" />
+          <span>いいね！</span>
+          <span :class="$style.favorite_count">{{ wiki.favorites }}</span>
+        </button>
+        <button v-if="canDelete" :class="$style.iine" @click.stop="DeleteMemo(wiki)">
+          <font-awesome-icon :icon="['fas', 'trash-can']" transform="shrink-2" />削除
+        </button>
       </div>
     </div>
-    <div class="button-container">
-      <button v-if="isLiking" class="iine" @click.stop="StartLiking(wiki)">
-        <font-awesome-icon :icon="['fas', 'heart']" /> いいね！
-      </button>
-      <button v-else class="iine" @click.stop="StartLiking(wiki)">
-        <font-awesome-icon :icon="['far', 'heart']" /> いいね！
-      </button>
-      <button v-if="canDelete" class="iine" @click.stop="DeleteMemo(wiki)">
-        <font-awesome-icon :icon="['fas', 'trash-can']" transform="shrink-2" />削除
-      </button>
-    </div>
-  </tr>
+  </div>
 </template>
 
-<style scoped>
-.button-container {
+<style module>
+.button_container {
   display: flex;
   flex-wrap: wrap;
   justify-content: left;
-  margin-left: 80px;
+  align-items: center;
 }
 
-.tag-content {
+.tag_content {
   margin: 5px;
   background-color: rgb(244, 244, 244);
 }
 
-.tag-content:hover {
+.tag_content:hover {
   background-color: rgb(211, 211, 211);
 }
 
@@ -162,17 +170,18 @@ const DeleteMemo = async(wiki: Wiki) =>{
   font-size: 20px;
 }
 
-.content {
-  font-size: 15px;
+.abstract {
+  font-size: 25px;
   text-align: left;
-  margin-left: 80px;
   list-style: none;
 }
 
 .card {
   width: 100%;
   height: 100%;
-  display: flex;
+  display: grid;
+  grid-template-columns: 40px 1fr;
+  grid-template-rows: 20px 20px 1fr;
   flex-direction: column;
   padding: 16px;
   background-color: #fff;
@@ -186,12 +195,6 @@ const DeleteMemo = async(wiki: Wiki) =>{
 .title {
   font-size: 35px;
   text-align: left;
-  margin-left: 80px;
-  list-style: none;
-}
-
-.content {
-  font-size: 25px;
   list-style: none;
 }
 
@@ -200,8 +203,47 @@ const DeleteMemo = async(wiki: Wiki) =>{
 }
 
 .iine {
-  padding: 8px;
   font-size: 18px;
-  width: 120px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 5px;
+}
+
+.icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  grid-column: 1;
+  grid-row: 1 / 3;
+}
+
+.header {
+  grid-column: 2;
+  grid-row: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  padding-left: 10px;
+}
+
+.content {
+  grid-column: 2;
+  grid-row: 2 / 4;
+  padding-left: 10px;
+}
+
+.owner_traq_id {
+  font-weight: bold;
+  font-size: 1.1em;
+}
+
+.created_at {
+  font-size: 0.8em;
+  color: #777777;
+  margin-left: 8px;
+}
+
+.favorite_count {
 }
 </style>
diff --git a/src/components/WikiSideBar.vue b/src/components/WikiSideBar.vue
@@ -24,10 +24,10 @@ watch(() => props.isMyPage,
           <li class="sidebar_link_content">自分のWiki</li>
         </router-link>
         <a href="#memo" v-if="mypage">
-          <li class="headerLink">備忘録一覧</li>
+          <li class="headerLink sidebar_link_content">備忘録一覧</li>
         </a>
         <a href="#sodan" v-if="mypage">
-          <li class="headerLink">相談一覧</li>
+          <li class="headerLink sidebar_link_content">相談一覧</li>
         </a>
         <router-link to="/wiki/favoritewiki">
           <li class="sidebar_link_content">お気に入りのWiki</li>

diff --git a/src/pages/IndividualMemo.vue b/src/pages/IndividualMemo.vue
@@ -9,16 +9,8 @@ import customHeadingId from "marked-custom-heading-id";
 import { markedHighlight } from 'marked-highlight'
 import 'highlight.js/styles/github-dark.css'
 import { useUserStore } from '../store/user'
+import Memo from '../types/memo'
 
-type Memo = {
-    id: number,
-    title: string,
-    ownerTraqId: string,
-    content: string,
-    createdAt: string,
-    updatedAt: string,
-    tags: string[]
-}
 const myid = ref<string>("")
 const title = ref<string>("");
 const content = ref<string>("");

diff --git a/src/pages/Lectures.vue b/src/pages/Lectures.vue
@@ -47,7 +47,7 @@ onBeforeRouteUpdate(async (to, from) => {
 <template>
   <div :class="$style.container">
     <lecture-side-bar />
-    <main>
+    <main :class="$style.mainWrapper">
       <div :class="$style.main">
         <div :class="$style.mainHeader">
           <p v-if="isUrl('sougou')">総合/融合</p>
@@ -60,14 +60,14 @@ onBeforeRouteUpdate(async (to, from) => {
           <p v-if="isUrl('graphics')">グラフィック</p>
           <p v-if="isUrl('others')">その他講習会</p>
         </div>
-        <table>
-          <tr v-for="lecture in lectures" :key="lecture.id" :class="$style.card">
+        <div>
+          <div v-for="lecture in lectures" :key="lecture.id" :class="$style.card">
             <ul>
               <li :class="$style.title">{{ lecture.title }}</li>
               <li :class="$style.content">講義資料URL : <a href="{{ lecture.content }}" :class="$style.link">{{ lecture.content }}</a></li>
             </ul>
-          </tr>
-        </table>
+          </div>
+        </div>
       </div>
     </main>
   </div>
@@ -85,6 +85,7 @@ onBeforeRouteUpdate(async (to, from) => {
   display: flex;
   gap: 10px;
   height: fit-content;
+  min-height: 100vh;
 }
 
 .main {
@@ -120,4 +121,8 @@ onBeforeRouteUpdate(async (to, from) => {
 .link:hover {
   text-decoration: underline;
 }
+
+.mainWrapper {
+  flex-grow: 1;
+}
 </style>