Merge pull request #4 from akanoren/fix-styles

style.cssの内容をそれぞれのコンポーネントに移し、flexboxを適用しました
akanoren · Mar 5, 2023 · 32afaa7 · 32afaa7
2 parents 957d6c7 + 57ad432
commit 32afaa7
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 54 deletions.
diff --git a/src/lib/components/post.svelte b/src/lib/components/post.svelte
@@ -18,7 +18,7 @@
 
 <style>
   .post {
-    margin-top: 1em;
+    width: 100%;
     border-top-style: solid;
     border-color: gray;
     border-top-width: 1px;

diff --git a/src/lib/components/post_form.svelte b/src/lib/components/post_form.svelte
@@ -4,15 +4,46 @@
 
 <style>
   form {
+    margin-top: 20px;
     margin-bottom: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
   }
-  form > textarea[name=text] {
-    width: 95%;
+
+  textarea[name=text] {
+    width: 100%;
     height: 100px;
+    font-size:17px;
+    margin: 0px 0px 20px 0px;
+    padding:17px 15px 17px 15px;
+    border-radius: 20px;
+  }
+
+  .to-right {
+    width: 100%;
+    display: flex;
+    justify-content: end;
+  }
+
+  input[type="submit" i]{
+    width: 10em;
+    border-color: #00acee;
+    background-color: #00acee;
+    border-radius: 20px;
+    padding:5px 15px 5px 15px;
+    color: #FFFFFF;
+  }
+
+  input[type="submit" i]:hover{
+    background-color: #0095d6;
+    border-color: #0095d6;
   }
 </style>
 
 <form name="post" method="POST" on:submit|preventDefault={post}>
-  <textarea name="text" style="" />
-  <input type="submit" value="Post" />
+  <textarea name="text" />
+  <div class="to-right">
+    <input type="submit" value="Post" />
+  </div>
 </form>
diff --git a/src/lib/components/signin_form.svelte b/src/lib/components/signin_form.svelte
@@ -2,8 +2,29 @@
   import { signin } from "$lib/client";
 </script>
 
+<style>
+  form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 0.5em;
+  }
+  form > input, label {
+    width: 30em;
+  }
+  form > input[type="submit" i]{
+    border-color: #00acee;
+    background-color: #00acee;
+    border-radius: 20px;
+    padding:5px 15px 5px 15px;
+    color: #FFFFFF;
+  }
+</style>
+
 <form name="signin" method="POST" on:submit|preventDefault={signin}>
-  <input name="identifier" type="email" />
-  <input name="password" type="password" />
+  <label for="signin-identifier">Email Address</label>
+  <input id="signin-identifier" name="identifier" type="email" />
+  <label for="signin-password">Password</label>
+  <input id="signin-password" name="password" type="password" />
   <input type="submit" value="Sign In" />
 </form>
diff --git a/src/lib/components/timeline.svelte b/src/lib/components/timeline.svelte
@@ -4,13 +4,42 @@
   import Post from "$lib/components/post.svelte";
 </script>
 
-<button on:click={refresh}>Refresh</button>
+<style>
+  .refresh-button {
+    width: 8em;
+    border-color: #6A5ACD;
+    background-color: #6A5ACD;
+    border-radius: 20px;
+    padding:5px 15px 5px 15px;
+    color: #FFFFFF;
+  }
+
+  .to-right {
+    width: 100%;
+    display: flex;
+    justify-content: end;
+  }
+
+  .timeline {
+    margin-top: 1.5em;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 0.5em;
+  }
+</style>
+
+<div class="to-right">
+  <button class="refresh-button" on:click={refresh}>Refresh</button>
+</div>
 {#await refresh()}
   <div>loading...</div>
 {:then}
-  {#if $timeline}
-    {#each $timeline.feed as post}
-      <Post post={post} />
-    {/each}
-  {/if}
+  <div class="timeline">
+    {#if $timeline}
+      {#each $timeline.feed as post}
+        <Post post={post} />
+      {/each}
+    {/if}
+  </div>
 {/await}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -7,16 +7,31 @@
 </script>
 
 <style>
-
+  .container {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .container > .center {
+    flex: 700px;
+  }
+  .container > .left, .right {
+    flex: 0px;
+  }
 </style>
 
-{#await resumeSession()}
-  <div>loading...</div>
-{:then}
-  {#if !$session}
-    <SignInForm />
-  {:else}
-    <PostForm />
-    <Timeline />
-  {/if}
-{/await}
+<div class="container">
+  <div class="left"></div>
+  <div class="center">
+  {#await resumeSession()}
+    <div>loading...</div>
+  {:then}
+    {#if !$session}
+      <SignInForm />
+    {:else}
+      <PostForm />
+      <Timeline />
+    {/if}
+  {/await}
+  </div>
+  <div class="right"></div>
+</div>
diff --git a/static/css/style.css b/static/css/style.css
@@ -1,30 +0,0 @@
-/* Post Button Design */
-input[type="submit" i]{
-border-color: #00acee;
-background-color: #00acee;
-border-radius: 20px;
-padding:5px 15px 5px 15px;
-color: #FFFFFF;
-}
-
-input[type="submit" i]:hover{
-background-color: #0095d6;
-border-color: #0095d6;
-}
-
-/* Refresh Button Design */
-button{
-border-color: #6A5ACD;
-background-color: #6A5ACD;
-border-radius: 20px;
-padding:5px 15px 5px 15px;
-color: #FFFFFF;
-}
-
-/* Textarea Design */
-textarea{
-font-size:17px;
-margin: 0px 0px 20px 0px;
-padding:17px 15px 17px 15px;
-border-radius: 20px;
-}