プルリクエスト #42 のマージ

サイト Ver. 1.2

app.yaml

@@ -1,15 +1,9 @@
 runtime: nodejs16
 env: standard
 handlers:
-  - url: /
-    static_files: dist/preparing.html
-    upload: dist/preparing.html
   - url: /preview(\/event-detail|\/event-list|/|)
     static_files: dist/index.html
     upload: dist/index.html
   - url: /preview/(.*)
-    static_files: dist/\1
-    upload: dist/(.*)
-  - url: /(.*)
     static_files: dist/\1
     upload: dist/(.*)

src/assets/eventdata.json

@@ -7,7 +7,7 @@
     "event_place_text": "都市901",
     "event_place_id": "toshi",
     "event_genre_id": 1,
-    "icon_filename": "sample_icon_1.png",
+    "icon_filename": "./icon/sample_icon_1.png",
     "org_name": "企画テスト団体",
     "org_description": "植物を種や苗から育てたり、植林活動を行ったりしています。活動は土日がメインです。",
     "sns_twitter": "ynu_fes",
@@ -23,7 +23,7 @@
     "event_place_text": "経済902",
     "event_place_id": "keizai",
     "event_genre_id": 2,
-    "icon_filename": "sample_icon_2.png",
+    "icon_filename": "./icon/sample_icon_2.png",
     "org_name": "企画テスト団体",
     "org_description": "植物を種や苗から育てたり、植林活動を行ったりしています。活動は土日がメインです。",
     "sns_twitter": "ynu_fes",
@@ -39,7 +39,7 @@
     "event_place_text": "経営903",
     "event_place_id": "keiei",
     "event_genre_id": 3,
-    "icon_filename": "sample_icon_3.png",
+    "icon_filename": "./icon/sample_icon_3.png",
     "org_name": "企画テスト団体",
     "org_description": "植物を種や苗から育てたり、植林活動を行ったりしています。活動は土日がメインです。",
     "sns_twitter": "ynu_fes",
@@ -55,7 +55,7 @@
     "event_place_text": "都市904",
     "event_place_id": "toshi",
     "event_genre_id": 4,
-    "icon_filename": "sample_icon_4.png",
+    "icon_filename": "./icon/sample_icon_4.png",
     "org_name": "企画テスト団体",
     "org_description": "植物を種や苗から育てたり、植林活動を行ったりしています。活動は土日がメインです。",
     "sns_twitter": "ynu_fes",
@@ -71,7 +71,7 @@
     "event_place_text": "経済905",
     "event_place_id": "keizai",
     "event_genre_id": 5,
-    "icon_filename": "sample_icon_5.png",
+    "icon_filename": "./icon/sample_icon_5.png",
     "org_name": "企画テスト団体",
     "org_description": "植物を種や苗から育てたり、植林活動を行ったりしています。活動は土日がメインです。",
     "sns_twitter": "ynu_fes",
@@ -87,7 +87,7 @@
     "event_place_text": "経営906",
     "event_place_id": "keiei",
     "event_genre_id": 6,
-    "icon_filename": "sample_icon_1.png",
+    "icon_filename": "./icon/sample_icon_1.png",
     "org_name": "企画テスト団体",
     "org_description": "植物を種や苗から育てたり、植林活動を行ったりしています。活動は土日がメインです。",
     "sns_twitter": "ynu_fes",

src/components/EventWidget.vue

@@ -22,7 +22,7 @@ const eventGenre = {
 
 <template>
   <div class="event_widget">
-    <img :src="`/icon/${props.eventData.icon_filename}`"/>
+    <img :src="props.eventData.icon_filename"/>
     <div class="tag_area">
       <div v-bind:class="`event_genre_${props.eventData.event_genre_id}`">
         {{ eventGenre[props.eventData.event_genre_id] }}
@@ -47,98 +47,98 @@ const eventGenre = {
   position: relative;
   text-overflow: ellipsis;
 
-> img {
-  border-top-right-radius: 0.5rem;
-  border-top-left-radius: 0.5rem;
-  width: 100%;
-}
-
-> .tag_area {
-  position: relative;
-  margin: 0.3rem;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: 0.2rem;
-
-> div {
-  font-size: unquote("max(0.6rem, 0.9em)");
-  color: white;
-  padding: 0.05rem 0.1rem;
-  border-radius: 0.4rem;
-  border: 0.08rem solid;
-  border-color: #ffffff99;
-}
-
-> .event_place_text_toshi {
-  background-color: #00adb5;
-}
-
-> .event_place_text_keizai {
-  background-color: #ff5722;
-}
-
-> .event_place_text_keiei {
-  background-color: #eeeeee;
-  color: black;
-}
-
-> .event_genre_1 {
-  background-color: #004b79;
-}
-
-> .event_genre_2 {
-  background-color: #7f181b;
-}
-
-> .event_genre_3 {
-  background-color: #56a0d3;
-}
-
-> .event_genre_4 {
-  background-color: #537b35;
-}
-
-> .event_genre_5 {
-  background-color: #ecb731;
-}
-
-> .event_genre_6 {
-  background-color: #b4a996;
-  color: black;
-}
-
-> .event_genre_7 {
-  background-color: #d7d7d8;
-}
-
-> .event_genre_8 {
-  background-color: #6d6e70;
-}
-}
+  > img {
+    border-top-right-radius: 0.5rem;
+    border-top-left-radius: 0.5rem;
+    width: 100%;
+  }
 
-> .meta_area {
-  color: white;
-  margin: 0.7em;
+  > .tag_area {
+    position: relative;
+    margin: 0.3rem;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 0.2rem;
+
+    > div {
+      font-size: unquote("max(0.6rem, 0.9em)");
+      color: white;
+      padding: 0.05rem 0.1rem;
+      border-radius: 0.4rem;
+      border: 0.08rem solid;
+      border-color: #ffffff99;
+    }
+
+    > .event_place_text_toshi {
+      background-color: #00adb5;
+    }
+
+    > .event_place_text_keizai {
+      background-color: #ff5722;
+    }
+
+    > .event_place_text_keiei {
+      background-color: #eeeeee;
+      color: black;
+    }
+
+    > .event_genre_1 {
+      background-color: #004b79;
+    }
+
+    > .event_genre_2 {
+      background-color: #7f181b;
+    }
+
+    > .event_genre_3 {
+      background-color: #56a0d3;
+    }
+
+    > .event_genre_4 {
+      background-color: #537b35;
+    }
+
+    > .event_genre_5 {
+      background-color: #ecb731;
+    }
+
+    > .event_genre_6 {
+      background-color: #b4a996;
+      color: black;
+    }
+
+    > .event_genre_7 {
+      background-color: #d7d7d8;
+    }
+
+    > .event_genre_8 {
+      background-color: #6d6e70;
+    }
+  }
 
-h2 {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  max-height: 2.8rem;
-  overflow: hidden;
-  -webkit-box-orient: vertical;
-  text-overflow: ellipsis;
-  font-size: 1.2em;
-  line-height: 1.4rem;
-  padding: 0;
-  margin: 0;
-}
-}
+  > .meta_area {
+    color: white;
+    margin: 0.7em;
+
+    h2 {
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      max-height: 2.8rem;
+      overflow: hidden;
+      -webkit-box-orient: vertical;
+      text-overflow: ellipsis;
+      font-size: 1.2em;
+      line-height: 1.4rem;
+      padding: 0;
+      margin: 0;
+    }
+  }
 
-> hr {
-  margin: 0;
-  padding: 0;
-}
+  > hr {
+    margin: 0;
+    padding: 0;
+  }
 
 }
 </style>

src/views/EventDetailView.vue

@@ -16,7 +16,7 @@
       </div>
       <div class="event-detail-description">
         <div class="event-icon">
-          <img :src="$store.state.imgData.src?$store.state.imgData.src:'/icon/noimage.png'">
+          <img :src="$store.state.imgData.src?$store.state.imgData.src:'./icon/noimage.png'">
         </div>
         <div class="event-description">
           <p class="allow-wrap" v-text="this.$store.state.eventData.event_description"/>
@@ -28,19 +28,34 @@
         <p class="allow-wrap" v-text="this.$store.state.eventData.org_description">
         </p>
       </div>
+      <div class="SNS">
+        <!--        画像のダウンロード元のサイト（https://icon-rainbow.com/tag/sns/）-->
+        <a :href="`https://facebook.com/` + $store.state.eventData.sns_facebook" class="SNS-icon c-btn" target="_blank"
+           rel="noopener noreferrer">
+          <img src="@/assets/facebook_icon.png">
+        </a>
+        <a :href="`https://twitter.com/` + $store.state.eventData.sns_twitter" class="SNS-icon c-btn" target="_blank"
+           rel="noopener noreferrer">
+          <img src="@/assets/twitter_icon.png">
+        </a>
+        <a :href="`https://instagram.com/` + $store.state.eventData.sns_instagram" class="SNS-icon c-btn"
+           target="_blank" rel="noopener noreferrer">
+          <img src="@/assets/instagram_icon.png">
+        </a>
+      </div>
     </div>
   </div>
 </template>
 
 <style scoped lang="scss">
-.allow-wrap{
+.allow-wrap {
   white-space: pre-wrap;
 }
 
 .root-wrapper {
   display: flex;
   flex-direction: column;
-  background-image: url("/public/resources/background.webp");
+  background-image: url("/src/assets/background.webp");
   background-size: cover;
   background-attachment: fixed;
   overflow: hidden;
@@ -137,6 +152,27 @@ p {
   padding: 1rem;
 }
 
+.SNS {
+  display: flex;
+  justify-content: center;
+  padding-top: 5rem;
+}
+
+.SNS-icon img {
+  max-width: 100px;
+  width: 40%;
+  margin: 1rem;
+}
+
+.c-btn {
+  transition: transform 0.2s;
+}
+
+.c-btn:hover {
+  transform: scale(1.5, 1.5);
+
+}
+
 
 .fade-up {
   animation-name: fadeUpAnime;