[0300-js-dom-todo] some fix

version1-workspace · Apr 23, 2024 · 007ca15 · 007ca15
1 parent fe39311
commit 007ca15
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 25 deletions.
diff --git a/0300-js-dom-todo/index.html b/0300-js-dom-todo/index.html
@@ -18,13 +18,15 @@ <h1 class="main__header-title">Todo</h1>
         </div>
         <div class="main__body">
           <form class="form js-form">
-            <div class="form__input">
-              <label class="form__input-label">タスク</label>
-              <input name="name" type="text" class="form__input-field" placeholder="タスク名を入力">
-            </div>
-            <div class="form__input">
-              <label class="form__input-label">期限日</label>
-              <input name="deadline" type="date" class="form__input-field" placeholder="期限日を入力">
+            <div class="form__input-group">
+              <div class="form__input form__input--name">
+                <label class="form__input-label">タスク</label>
+                <input name="name" type="text" class="form__input-field" placeholder="タスク名を入力">
+              </div>
+              <div class="form__input">
+                <label class="form__input-label">期限日</label>
+                <input name="deadline" type="date" class="form__input-field" placeholder="期限日を入力">
+              </div>
             </div>
             <div class="form__input-footer">
               <button class="button button--primary">追加</button>

diff --git a/0300-js-dom-todo/stylesheets/sass/blocks/button.sass b/0300-js-dom-todo/stylesheets/sass/blocks/button.sass
@@ -5,9 +5,9 @@
   cursor: pointer
   border-radius: 8px
   background: white
-  padding: 8px 16px
-  min-width: 200px
-
+  padding: 8px 32px
+  font-size: 14px
+  letter-spacing: 0.1rem
   &--primary
     background: v.$primary-color
     color: v.$font-color-light

diff --git a/0300-js-dom-todo/stylesheets/sass/blocks/form.sass b/0300-js-dom-todo/stylesheets/sass/blocks/form.sass
@@ -1,12 +1,20 @@
 @use '../shared/_variable.sass' as v
 
 .form
-  padding: 16px
+  padding: 8px 16px
+  margin-bottom: 32px
   border: 1px solid v.$border-color
   border-radius: 8px
 
   &__input
-    padding: 16px
+    flex: 1
+    padding: 8px 16px
+
+  &__input--name
+    flex: 4
+
+  &__input-group
+    display: flex
 
   &__input-field
     box-sizing: border-box
@@ -31,6 +39,6 @@
   &__input-label
     display: block
     font-size: 12px
-    margin-bottom: 8px
+    margin-bottom: 4px
 
 
diff --git a/0300-js-dom-todo/stylesheets/sass/blocks/list.sass b/0300-js-dom-todo/stylesheets/sass/blocks/list.sass
@@ -8,17 +8,19 @@
 
   &__setting
     padding: 16px
+    margin-bottom: 32px
     display: flex
     justify-content: flex-end
 
   &__header
     display: flex
     align-items: center
     border-bottom: 1px solid v.$border-color
+    font-size: 12px
 
   &__header-item
     flex: 1
-    padding: 16px
+    padding: 8px 16px
     border-right: 1px solid v.$border-color
     font-size: 12px
     &:last-child

diff --git a/0300-js-dom-todo/stylesheets/sass/blocks/main.sass b/0300-js-dom-todo/stylesheets/sass/blocks/main.sass
@@ -10,5 +10,5 @@
     margin: 0
 
   &__body
-    max-width: 1200px
-    margin: 32px auto
+    max-width: 986px
+    margin: 64px auto
diff --git a/0300-js-dom-todo/stylesheets/style.css b/0300-js-dom-todo/stylesheets/style.css
diff --git a/public/0300-js-dom-todo/index.html b/public/0300-js-dom-todo/index.html
@@ -18,13 +18,15 @@ <h1 class="main__header-title">Todo</h1>
         </div>
         <div class="main__body">
           <form class="form js-form">
-            <div class="form__input">
-              <label class="form__input-label">タスク</label>
-              <input name="name" type="text" class="form__input-field" placeholder="タスク名を入力">
-            </div>
-            <div class="form__input">
-              <label class="form__input-label">期限日</label>
-              <input name="deadline" type="date" class="form__input-field" placeholder="期限日を入力">
+            <div class="form__input-group">
+              <div class="form__input form__input--name">
+                <label class="form__input-label">タスク</label>
+                <input name="name" type="text" class="form__input-field" placeholder="タスク名を入力">
+              </div>
+              <div class="form__input">
+                <label class="form__input-label">期限日</label>
+                <input name="deadline" type="date" class="form__input-field" placeholder="期限日を入力">
+              </div>
             </div>
             <div class="form__input-footer">
               <button class="button button--primary">追加</button>

diff --git a/public/0300-js-dom-todo/stylesheets/style.css b/public/0300-js-dom-todo/stylesheets/style.css