improve design

weseek · Oct 13, 2023 · 80094ed · 80094ed
1 parent a16adec
commit 80094ed
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 32 deletions.
diff --git a/apps/mobliz-clone/package.json b/apps/mobliz-clone/package.json
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "axios": "^0.24.0",
+    "font-awesome": "^4.7.0",
     "html-react-parser": "^4.2.2",
     "next": "^13.3.0",
     "react": "^18.2.0",

diff --git a/apps/mobliz-clone/src/components/SideMenu.tsx b/apps/mobliz-clone/src/components/SideMenu.tsx
@@ -3,29 +3,27 @@ import React, { useState, useEffect } from 'react';
 import axios from '~/utils/axios';
 
 const SideMenu: React.FC = () => {
-  const [tag, setTag] = useState<any[]>();
   const [newPost, setNewPost] = useState<any[]>();
+  const [tag, setTag] = useState<any[]>();
   const [error, setError] = useState<string>();
 
   useEffect(() => {
-    axios.get(`${process.env.NEXT_PUBLIC_APP_SITE_URL}/_cms/tags`)
+    axios.get(`${process.env.NEXT_PUBLIC_APP_SITE_URL}/_cms/list.json`)
       .then((response) => {
-        setTag(response.data.data);
+        setNewPost(response.data);
       })
       .catch((error) => {
         setError(`データの取得に失敗しました。\n${JSON.stringify(error)}`);
       });
-  }, []);
-
-  useEffect(() => {
-    axios.get(`${process.env.NEXT_PUBLIC_APP_SITE_URL}/_cms/list.json`)
+    axios.get(`${process.env.NEXT_PUBLIC_APP_SITE_URL}/_cms/tags`)
       .then((response) => {
-        setNewPost(response.data);
+        setTag(response.data.data);
       })
       .catch((error) => {
         setError(`データの取得に失敗しました。\n${JSON.stringify(error)}`);
       });
   }, []);
+
   return (
     <>
       {error == null ? (
@@ -35,48 +33,41 @@ const SideMenu: React.FC = () => {
               <span className="visually-hidden">Loading...</span>
             </div>
           ) : (
-            <>
+            <div className="pe-5">
               <div>
+                <i className="fa-solid fa-house"></i>
                 <div>最新記事</div>
-                <ul className="p-2">
+                <ul className="list-caret">
                   {newPost.map((newPostData, index) => {
                     return (
-                      <li className="container">
-                        <div className="row">
-                          <div className={`col-10 ${newPost.length - 1 === index ? '' : ' border-bottom'}`}>
-                            <a href={`/${newPostData.page._id}`} className="new-post-list text-decoration-none">
-                              <p className="my-2 ml-5">{`${newPostData.title}`}</p>
-                            </a>
-                          </div>
-                        </div>
+                      <li className={`container pb-2${newPost.length - 1 === index ? '' : ' border-bottom'}`}>
+                        <a href={`/${newPostData.page._id}`} className="new-post-list text-decoration-none">
+                          <span className="ms-2">{newPostData.title}</span>
+                        </a>
                       </li>
                     );
                   })}
                 </ul>
               </div>
               <div>
                 <div>タグ</div>
-                <ul className="p-2">
+                <ul className="list-caret">
                   {tag.map((tagData, index) => {
                     return (
-                      <li className="container">
-                        <div className="row">
-                          <div className={`col-10 ${tag.length - 1 === index ? '' : ' border-bottom'}`}>
-                            <p className="my-2 ml-5">{`${tagData.name}`}</p>
-                          </div>
-                        </div>
+                      <li className={`container pb-2${tag.length - 1 === index ? '' : ' border-bottom'}`}>
+                        <a href="" className="new-post-list text-decoration-none">
+                          <span className="ms-2">{tagData.name}</span>
+                        </a>
                       </li>
                     );
                   })}
                 </ul>
               </div>
-            </>
+            </div>
           )}
         </>
       ) : (
-        <div>
-          <p>{error}</p>
-        </div>
+        { error }
       )}
     </>
   );

diff --git a/apps/mobliz-clone/src/pages/[pageId].tsx b/apps/mobliz-clone/src/pages/[pageId].tsx
@@ -38,8 +38,8 @@ const DetailPage: NextPage<Props> = (props: Props) => {
           ) : (
             <>
               <div className="list-inline d-flex mb-4">
-                <p className="me-4">{dateFnsFormat(new Date(resData.page.createdAt), 'yyyy.MM.dd')}</p>
-                <p>{dateFnsFormat(new Date(resData.page.updatedAt), 'yyyy.MM.dd')}</p>
+                <p className="me-4"><i className="fa fa-clock-o me-2" />{dateFnsFormat(new Date(resData.page.createdAt), 'yyyy.MM.dd')}</p>
+                <p><i className="fa fa-repeat me-2" />{dateFnsFormat(new Date(resData.page.updatedAt), 'yyyy.MM.dd')}</p>
               </div>
               <h2 className="pb-5 fw-bold">{resData.title}</h2>
               {parse(resData.htmlString)}

diff --git a/apps/mobliz-clone/src/pages/_app.tsx b/apps/mobliz-clone/src/pages/_app.tsx
@@ -8,7 +8,7 @@ import Layout from '~/components/Layout';
 const App = ({ Component, pageProps }: AppProps): JSX.Element => (
   <>
     <Head>
-      <title />
+      <title>WESEEK Blog</title>
       <meta name="viewport" content="width=device-width, initial-scale=1" />
     </Head>
     <Layout>

diff --git a/apps/mobliz-clone/src/styles/globals.scss b/apps/mobliz-clone/src/styles/globals.scss
@@ -1,3 +1,5 @@
+@import 'font-awesome';
+
 * {
   box-sizing: border-box;
 }
@@ -16,6 +18,14 @@ body {
   background-color: #f9f9f9;
 }
 
+h1, h2 {
+  margin-top: 16px;
+}
+
+h3 {
+  margin-top: 12px;
+}
+
 header {
   background-image: url('../../public/weseek-blog-header.jpg');
   background-position: center;
@@ -50,3 +60,28 @@ img {
     color: #2581c4;
   }
 }
+
+// コピペ https://stackoverflow.com/questions/43227241/caret-before-link
+.list-caret {
+  padding: 0;
+  margin: 0.75em 0;
+  list-style: none;
+}
+
+.list-caret li a {
+  display: inline-block;
+}
+
+.list-caret li a:before {
+  position: relative;
+  top: 1.1em;
+  left: -0.6em;
+  display: block;
+  width: 0;
+  height: 0;
+  color: #888;
+  content: ' ';
+  border-color: transparent #888;
+  border-style: solid;
+  border-width: 0.35em 0 0.35em 0.45em;
+}