Merge pull request #12 from takejohn/feature/apply-style

CSS完全に理解した
TeamSekai · Apr 6, 2024 · c50ec1b · c50ec1b
2 parents 161f910 + e2ec216
commit c50ec1b
Show file tree

Hide file tree

Showing 11 changed files with 367 additions and 34 deletions.
diff --git a/packages/astro/astro.config.mjs b/packages/astro/astro.config.mjs
@@ -12,5 +12,6 @@ export default defineConfig({
     ssr: {
       noExternal: ['path-to-regexp']
     }
-  }
-});
+  },
+  prefetch: false
+});
diff --git a/packages/astro/public/static/directory.svg b/packages/astro/public/static/directory.svg
diff --git a/packages/astro/public/static/file.svg b/packages/astro/public/static/file.svg
diff --git a/packages/astro/public/static/parent.svg b/packages/astro/public/static/parent.svg
diff --git a/packages/astro/public/static/upload.svg b/packages/astro/public/static/upload.svg
diff --git a/packages/astro/src/components/Entry.astro b/packages/astro/src/components/Entry.astro
@@ -1,16 +1,104 @@
 ---
+type EntryType = 'file' | 'directory' | 'parent';
+
 interface Props {
     name: string;
     href: string;
     size?: string;
+    type: EntryType;
+}
+
+const { name, href, size, type } = Astro.props;
+
+function getIconSrc() {
+    switch (type) {
+        default:
+        case 'file':
+            return '/static/file.svg';
+        case 'directory':
+            return '/static/directory.svg';
+        case 'parent':
+            return '/static/parent.svg';
+    }
 }
 
-const { name, href, size } = Astro.props;
 ---
 
-<li class="entry-item">
-    <a href={href}>
-        {name}
+<li class="item">
+    <a href={href} class="link">
+        <div class="box">
+            <div class="icon-box">
+                <img class="icon" src={getIconSrc()} alt="ファイル">
+            </div>
+            <div class="data-box">
+                <div class="column-box name-box">
+                    <span class="name">{name}</span>
+                </div>
+                <div class="column-box size-box">
+                    {(size != null) && <span>{size}</span>}
+                </div>
+            </div>
+        </div>
     </a>
-    {(size != null) && <span>({size})</span>}
 </li>
+
+<style>
+    .item {
+        list-style: none;
+        border-bottom: 2px solid silver;
+        margin: 0;
+    }
+
+    .item:last-child {
+        border-bottom-width: 0;
+    }
+
+    .link {
+        color: black;
+        text-decoration: none;
+    }
+
+    .box {
+        padding: 0.5em;
+        margin: 0;
+    }
+
+    .icon {
+        height: 1.25em;
+        width: auto;
+        vertical-align: middle;
+    }
+
+    .name {
+        font-family: monospace;
+    }
+
+    .box:hover {
+        background-color: silver;
+    }
+
+    .box {
+        display: flex;
+    }
+
+    .icon-box {
+        width: 1.5em;
+    }
+
+    .data-box {
+        display: flex;
+        width: 100%;
+    }
+
+    .column-box {
+        padding: 0 1em 0;
+    }
+
+    .name-box {
+        flex: 2;
+    }
+
+    .size-box {
+        flex: 1;
+    }
+</style>
diff --git a/packages/astro/src/components/Header.astro b/packages/astro/src/components/Header.astro
@@ -0,0 +1,28 @@
+---
+import UploadButton from "../components/UploadButton.astro";
+
+interface Props {
+    found: boolean;
+}
+
+const { found } = Astro.props;
+---
+
+<div class="header">
+    <div class="title-box">
+        <h1>CDN File list</h1>
+    </div>
+    {(!found) && <p>404 Not Found</p>}
+    <UploadButton />
+</div>
+
+<style>
+    .header {
+        text-align: center;
+    }
+
+    .title-box {
+        border-bottom: 2px solid silver;
+        margin-bottom: 8px;
+    }
+</style>
diff --git a/packages/astro/src/components/List.astro b/packages/astro/src/components/List.astro
@@ -0,0 +1,11 @@
+<ul class="list">
+    <slot />
+</ul>
+
+<style>
+    .list {
+        padding: 0;
+        border: 2px solid silver;
+        border-radius: 0.5em;
+    }
+</style>
diff --git a/packages/astro/src/components/UploadButton.astro b/packages/astro/src/components/UploadButton.astro
@@ -1,12 +1,30 @@
 <button id="upload-button">
-    <slot />
+    <img src="/static/upload.svg" class="icon">
+    <span>アップロード(ログインが必要です)</span>
 </button>
 <input id="file-input" type="file">
 
 <style>
     #file-input {
         display: none;
     }
+
+    #upload-button {
+        background-color: transparent;
+        padding: 0.5em;
+        border: 2px solid silver;
+        border-radius: 0.5em;
+    }
+
+    #upload-button:hover {
+        background-color: silver;
+    }
+
+    .icon {
+        height: 2em;
+        width: auto;
+        vertical-align: middle;
+    }
 </style>
 
 <script>

diff --git a/packages/astro/src/layouts/Layout.astro b/packages/astro/src/layouts/Layout.astro
@@ -0,0 +1,19 @@
+---
+import { ViewTransitions } from "astro:transitions";
+---
+
+<!DOCTYPE html>
+<html lang=ja">
+
+    <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SimpleCDN</title>
+    <ViewTransitions />
+    </head>
+
+    <body>
+        <slot />
+    </body>
+
+</html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,5 +12,6 @@ export default defineConfig({ @@
         ssr: {
           noExternal: ['path-to-regexp']
         }
-      }
-    });
+      },
+      prefetch: false
+    });