Merge pull request #81 from YNUFes-tech/shion/imp-events

企画一覧表示の修正
ynufes-tech · Nov 1, 2023 · 93c0beb · 93c0beb
2 parents beca3f3 + 48d0151
commit 93c0beb
Show file tree

Hide file tree

Showing 7 changed files with 699 additions and 28 deletions.
diff --git a/assets/data/events.json b/assets/data/events.json
@@ -2,65 +2,65 @@
   {
     "id": 900,
     "e_name": "イベント名",
-    "e_genre": "Genre1",
+    "e_genre": 1,
     "o_name": "企画団体名",
-    "area": "Area1",
+    "area": 2,
     "p_name": "203"
   },
   {
     "id": 901,
     "e_name": "イベント名",
-    "e_genre": "Genre2",
+    "e_genre": 2,
     "o_name": "企画団体名",
-    "area": "Area1",
+    "area": 3,
     "p_name": "103"
   },
   {
     "id": 901,
     "e_name": "イベント名",
-    "e_genre": "Genre2",
+    "e_genre": 2,
     "o_name": "企画団体名",
-    "area": "Area1",
+    "area": 4,
     "p_name": "103"
   },
   {
     "id": 901,
     "e_name": "イベント名",
-    "e_genre": "Genre2",
+    "e_genre": 1,
     "o_name": "企画団体名",
-    "area": "Area1",
+    "area": 1,
     "p_name": "103"
   },
   {
     "id": 901,
     "e_name": "イベント名",
-    "e_genre": "Genre2",
+    "e_genre": 2,
     "o_name": "企画団体名",
-    "area": "Area1",
+    "area": 2,
     "p_name": "103"
   },
   {
     "id": 901,
     "e_name": "イベント名",
-    "e_genre": "Genre2",
+    "e_genre": 2,
     "o_name": "企画団体名",
-    "area": "Area1",
+    "area": 3,
     "p_name": "103"
   },
   {
     "id": 901,
     "e_name": "イベント名",
-    "e_genre": "Genre2",
+    "e_genre": 2,
     "o_name": "企画団体名",
-    "area": "Area1",
+    "area": 2,
     "p_name": "103"
   },
   {
     "id": 901,
     "e_name": "イベント名",
-    "e_genre": "Genre2",
+    "e_genre": 2,
     "o_name": "企画団体名",
-    "area": "Area1",
+    "area": 2,
     "p_name": "103"
   }
 ]
diff --git a/components/ProjectCard.vue b/components/ProjectCard.vue
@@ -1,10 +1,16 @@
 <script lang="ts" setup>
-import { genreToString } from "~/model/genre";
-import { placeToString } from "~/model/area";
-import { EventSummary } from "~/model/event";
+import { Genre, genreToString } from "~/model/genre";
+import { Area, placeToString } from "~/model/area";
 
 const props = defineProps<{
-  eventData: EventSummary;
+  eventData: {
+    id: number;
+    e_name: string;
+    e_genre: Genre;
+    o_name: string;
+    area: Area;
+    p_name: string;
+  };
 }>();
 const showNoImage = function (e: any) {
   e.target.src =
@@ -43,7 +49,7 @@ const iconURL = `https://storage.googleapis.com/tokiwa23-assets/icons/${props.ev
         </p>
       </div>
       <div class="card-button">
-        <p class="button-messeage">MORE</p>
+        <p class="message">MORE</p>
         <img alt="arrow" class="arrow" src="/images/arrow.webp" />
       </div>
     </div>
@@ -164,7 +170,7 @@ const iconURL = `https://storage.googleapis.com/tokiwa23-assets/icons/${props.ev
   display: flex;
   align-items: center;
 
-  .button-messeage {
+  .message {
     margin: 0 0;
     color: var(--thin-font-color);
   }

diff --git a/components/ProjectCardCompact.vue b/components/ProjectCardCompact.vue
@@ -0,0 +1,185 @@
+<script lang="ts" setup>
+import { Genre, genreToString, getTagColor } from "~/model/genre";
+import { Area, placeToString } from "~/model/area";
+
+const props = defineProps<{
+  eventData: {
+    id: number;
+    e_name: string;
+    e_genre: Genre;
+    o_name: string;
+    area: Area;
+    p_name: string;
+  };
+}>();
+const showNoImage = function (e: any) {
+  e.target.src =
+    "https://storage.googleapis.com/tokiwa23-assets/icons/no-image";
+  e.target.onerror = null;
+};
+const iconURL = `https://storage.googleapis.com/tokiwa23-assets/icons/${props.eventData.id}`;
+
+const eventTagStyle = (genre: Genre) => {
+  return {
+    background: getTagColor(genre),
+  };
+};
+</script>
+
+<template>
+  <div class="project-card">
+    <div class="incline-card">
+      <img
+        :src="iconURL"
+        alt="project-icon"
+        class="project-icon"
+        @error="showNoImage"
+      />
+      <div class="card-photo">
+        <img alt="anchor" class="anchor-icon" src="/images/card-icon.webp" />
+      </div>
+      <div class="card-script">
+        <p class="event-name">{{ props.eventData.e_name }}</p>
+        <hr class="line" />
+        <p class="org-name">{{ props.eventData.o_name }}</p>
+        <p class="genre" :style="eventTagStyle(props.eventData.e_genre)">
+          {{ genreToString(props.eventData.e_genre) }}
+        </p>
+        <p class="place">
+          {{ placeToString(props.eventData.area) + props.eventData.p_name }}
+        </p>
+      </div>
+      <div class="more-bottom">
+        <p class="message">MORE</p>
+        <img alt="arrow" class="arrow" src="/images/arrow.webp" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@use "assets/scss/_breakpoint.scss" as *;
+
+.project-card {
+  position: relative;
+  z-index: 1;
+  width: 300px;
+  height: 90px;
+
+  &:hover {
+    transform: translate(1px, 1px);
+    transition: 0.2s;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    width: 300px;
+    height: 90px;
+    transform: translate(10px, 10px);
+    background-color: var(--main-background-color);
+    border-radius: 10px;
+    border: 2px var(--thick-font-color) solid;
+  }
+
+  &:hover::after {
+    transform: translate(9px, 9px);
+    transition: 0.2s;
+  }
+
+  .incline-card {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    background-color: var(--main-background-color);
+    border-radius: 10px;
+    border: 2px var(--thick-font-color) solid;
+  }
+}
+
+.card-photo {
+  z-index: 10;
+}
+
+.anchor-icon {
+  width: 30px;
+  aspect-ratio: 1;
+  position: absolute;
+  z-index: 4;
+  top: 5px;
+  right: 5px;
+}
+
+.project-icon {
+  margin: 5px;
+  width: 80px;
+  aspect-ratio: 1;
+  object-fit: cover;
+  border-radius: 10px;
+}
+
+.card-script {
+  text-align: center;
+  width: 180px;
+  color: var(--thin-font-color);
+  font-weight: bold;
+  font-size: 14px;
+
+  .event-name {
+    margin: 5px 0 0 0;
+    height: 16px;
+    font-size: 16px;
+  }
+
+  .org-name {
+    margin: 5px;
+    line-height: 1;
+  }
+
+  .genre {
+    width: fit-content;
+    color: white;
+    margin: 4px auto;
+    font-size: 0.7em;
+    padding: 0.4em;
+    background: red;
+    border-radius: 10px;
+  }
+
+  .place {
+    height: 16px;
+  }
+
+  .line {
+    width: 90%;
+    background-color: var(--thin-font-color);
+    height: 1px;
+    margin: 4px;
+    border: none;
+  }
+}
+
+.more-bottom {
+  position: absolute;
+  z-index: 4;
+  bottom: 5px;
+  right: 15px;
+  display: flex;
+  align-items: center;
+
+  .message {
+    font-size: 12px;
+    margin: 0 0;
+    color: var(--thin-font-color);
+  }
+
+  .arrow {
+    width: 16px;
+    height: 12px;
+  }
+}
+</style>
diff --git a/model/event.ts b/model/event.ts
@@ -1,5 +1,5 @@
-import { Genre } from "~/model/genre";
-import { Area } from "~/model/area";
+import { Genre } from "@/model/genre";
+import { Area } from "@/model/area";
 
 export interface Event {
   id: number;

diff --git a/model/genre.ts b/model/genre.ts
@@ -17,3 +17,15 @@ export function genreToString(genre: Genre): string {
       return "食事";
   }
 }
+
+export function getTagColor(type: Genre): string {
+  switch (type) {
+    case Genre.FOOD:
+      return "#FFC107";
+    case Genre.EXHIBITION:
+      return "#FF5722";
+    case Genre.PERFORMANCE:
+      return "#4CAF50";
+  }
+  return "#000000";
+}
diff --git a/pages/event/[id].vue b/pages/event/[id].vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { Swiper, SwiperSlide } from "swiper/vue"; // 以下swiperの設定
-import { Event } from "~/model/event";
+import type { Event } from "~/model/event";
 // Import Swiper styles
 import "swiper/css";