良い感じにデザインを変更

jphacks · Oct 28, 2021 · cd8412f · cd8412f
1 parent 9c062e6
commit cd8412f
Show file tree

Hide file tree

Showing 7 changed files with 118 additions and 136 deletions.
diff --git a/static/css/comment.css b/static/css/comment.css
@@ -1,29 +1,9 @@
-body {
-  color: #000C;
-}
-
 main .section-message {
   padding: 0 1rem;
   color: #000A;
   font-weight: bold;
 }
 
-main .comment {
-  display: block;
-  position: relative;
-  padding: 0.75rem 0;
-}
-
-main .comment .title {
-  margin-left: 2rem;
-  margin-right: 0.5rem;
-}
-
-main .comment .body {
-  margin-left: 2rem;
-  margin-right: 0.5rem;
-}
-
 main .comment .thread {
   position: absolute;
   top: 2.5rem;
@@ -73,19 +53,6 @@ main .comment.neutral::before {
   content: "✋";
 }
 
-main .comment h2 {
-  font-weight: bold;
-  line-height: 1.5rem;
-}
-
-main .comment h2 a:hover {
-  text-decoration: underline;
-}
-
-main .comment p {
-  line-height: 2rem;
-}
-
 main .position-buttons {
   margin-top: 1rem;
   padding: 0 2rem;
@@ -114,64 +81,10 @@ main .position-buttons button.neutral:hover {
   border-color: #607d8b;
 }
 
-main form.new-comment-form input[type="text"] {
-  display: block;
-  width: calc(100% - 2.5rem);
-  line-height: 1.5rem;
-  font-weight: bold;
-}
-main form.new-comment-form textarea {
-  display: block;
-  width: calc(100% - 2.5rem);
-  resize: vertical;
-  line-height: 2rem;
-}
-
-main form.new-comment-form .position {
-  margin-top: 0.5rem;
-  padding: 0 2rem;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
 main form.new-comment-form input[type="radio"].new-comment-form-position {
   display: none;
 }
 
-.new-comment-form-position-label {
-  display: block;
-  padding: 0.5rem 1rem;
-  line-height: 1rem;
-  border: 2px solid #000C;
-  border-radius: 1rem;
-  cursor: pointer;
-}
-
-#position-form-agree:checked + label {
-  background: #e3f2fd;
-  border-color: #2196f3;
-}
-#position-form-disagree:checked + label {
-  background: #ffebee;
-  border-color: #f44336;
-}
-#position-form-neutral:checked + label {
-  background: #eceff1;
-  border-color: #607d8b;
-}
-
-main form.new-comment-form button.new-comment-form-submit-button {
-  margin: 1rem 2rem 0 2rem;
-  width: calc(100% - 4rem);
-  display: block;
-  padding: 0.5rem 1rem;
-  line-height: 1rem;
-  border: 2px solid #000C;
-  border-radius: 1rem;
-  cursor: pointer;
-}
-
 main .replies .comment {
   border-top: 1px solid #0001;
 }
diff --git a/static/css/common.css b/static/css/common.css
@@ -0,0 +1,76 @@
+body {
+  color: #000C;
+}
+
+main .comment {
+  display: block;
+  position: relative;
+  padding: 0.75rem 0;
+}
+
+main .comment .title {
+  margin-left: 2rem;
+  margin-right: 0.5rem;
+  font-weight: bold;
+  line-height: 1.5rem;
+}
+
+main .comment .body {
+  margin-left: 2rem;
+  margin-right: 0.5rem;
+  line-height: 2rem;
+}
+
+main form.new-comment-form input[type="text"] {
+  display: block;
+  width: calc(100% - 2.5rem);
+  line-height: 1.5rem;
+  font-weight: bold;
+}
+
+main form.new-comment-form textarea {
+  display: block;
+  width: calc(100% - 2.5rem);
+  resize: vertical;
+  line-height: 2rem;
+}
+main form.new-comment-form .position {
+  margin-top: 0.5rem;
+  padding: 0 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.new-comment-form-position-label {
+  display: block;
+  padding: 0.5rem 1rem;
+  line-height: 1rem;
+  border: 2px solid #000C;
+  border-radius: 1rem;
+  cursor: pointer;
+}
+
+#position-form-agree:checked + label {
+  background: #e3f2fd;
+  border-color: #2196f3;
+}
+#position-form-disagree:checked + label {
+  background: #ffebee;
+  border-color: #f44336;
+}
+#position-form-neutral:checked + label {
+  background: #eceff1;
+  border-color: #607d8b;
+}
+
+main form.new-comment-form button.new-comment-form-submit-button {
+  margin: 1rem 2rem 0 2rem;
+  width: calc(100% - 4rem);
+  display: block;
+  padding: 0.5rem 1rem;
+  line-height: 1rem;
+  border: 2px solid #000C;
+  border-radius: 1rem;
+  cursor: pointer;
+}
diff --git a/static/css/index.css b/static/css/index.css
@@ -1,29 +1,17 @@
-div.new-topic-form {
-  padding: 0 0.5rem;
+main .comment::before {
+  position: absolute;
+  height: 1.5rem;
+  width: 1rem;
+  padding: 0.25rem 0;
+  left: 0.5rem;
 }
 
-form.new-topic-form input[type="text"] {
-  margin: 0.5rem 0 0;
-  padding: 0.5rem;
-  width: 100%;
-  border: 1px solid #000;
+main .comment.agree::before {
+  content: "👍";
 }
-
-form.new-topic-form .position {
-  padding: 0.5rem 0 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-}
-
-form.new-topic-form input[type="radio"].new-topic-form-position {
-  appearance: auto;
+main .comment.disagree::before {
+  content: "👎";
 }
-
-form.new-topic-form button.new-topic-form-submit-button {
-  margin: 0.5rem 0 0;
-  padding: 0.5rem;
-  width: 100%;
-  border: 1px solid #0004;
-  cursor: pointer;
+main .comment.neutral::before {
+  content: "✋";
 }
diff --git a/static/js/comment.js b/static/js/comment.js
@@ -15,16 +15,8 @@ newCommentForm.addEventListener("change", () => {
   replyComment.classList.remove("agree");
   replyComment.classList.remove("neutral");
   replyComment.classList.remove("disagree");
-  switch (formData.get("position")) {
-    case "agree":
-      replyComment.classList.add("agree");
-      break;
-    case "disagree":
-      replyComment.classList.add("disagree");
-      break;
-    case "neutral":
-      replyComment.classList.add("neutral");
-  }
+
+  replyComment.classList.add(formData.get("position"));
 });
 
 newCommentFormSubmitButton.addEventListener("click", () => {

diff --git a/static/js/index.js b/static/js/index.js
@@ -1,8 +1,19 @@
-const newTopicFormSubmitButton = document.querySelector("button.new-topic-form-submit-button");
+const replyComment = document.querySelector(".comment.post");
+const newCommentForm = document.querySelector("form.new-comment-form");
+const newCommentFormSubmitButton = document.querySelector("button.new-comment-form-submit-button");
 
-newTopicFormSubmitButton.addEventListener("click", () => {
-  const newTopicForm = document.querySelector("form.new-topic-form");
-  let formData = new FormData(newTopicForm);
+newCommentForm.addEventListener("change", () => {
+  const formData = new FormData(newCommentForm);
+
+  replyComment.classList.remove("agree");
+  replyComment.classList.remove("neutral");
+  replyComment.classList.remove("disagree");
+
+  replyComment.classList.add(formData.get("position"));
+});
+
+newCommentFormSubmitButton.addEventListener("click", () => {
+  let formData = new FormData(newCommentForm);
   let requestData = {};
   requestData.parent_comment_id = 0;
   requestData.title = formData.get("title");

diff --git a/templates/comment.html b/templates/comment.html
@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>{{title}}</title>
   <link rel="stylesheet" href="https://kakudo415.github.io/null.css/2.4.css">
+  <link rel="stylesheet" href="/static/css/common.css">
   <link rel="stylesheet" href="/static/css/comment.css">
   <script src="/static/js/comment.js" defer></script>
 </head>

diff --git a/templates/index.html b/templates/index.html
@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="https://kakudo415.github.io/null.css/2.4.css">
+  <link rel="stylesheet" href="/static/css/common.css">
   <link rel="stylesheet" href="/static/css/index.css">
   <script src="/static/js/index.js" defer></script>
 </head>
@@ -13,25 +14,25 @@
 
   </header>
   <main>
-    <div class="new-topic-form">
-      <form class="new-topic-form">
-        <input type="text" name="title" placeholder="議題">
-        <input type="text" name="body" placeholder="あなたの考えを共有してみてください！">
+    <div class="comment post neutral">
+      <form class="new-comment-form">
+        <input class="title" type="text" name="title" placeholder="タイトル">
+        <textarea class="body" name="body" placeholder="あなたの考えを共有してみてください！"></textarea>
         <div class="position">
           <div>
-            <input type="radio" name="position" id="position-form-agree" class="new-topic-form-position" value="agree">
-            <label for="position-form-agree">賛成</label>
+            <input type="radio" name="position" id="position-form-agree" class="new-comment-form-position" value="agree">
+            <label for="position-form-agree" class="new-comment-form-position-label">賛成</label>
           </div>
           <div>
-            <input type="radio" name="position" id="position-form-neutral" class="new-topic-form-position" value="neutral">
-            <label for="position-form-neutral">中立</label>
+            <input type="radio" name="position" id="position-form-disagree" class="new-comment-form-position" value="disagree">
+            <label for="position-form-disagree" class="new-comment-form-position-label">反対</label>
           </div>
           <div>
-            <input type="radio" name="position" id="position-form-disagree" class="new-topic-form-position" value="disagree">
-            <label for="position-form-disagree">反対</label>
+            <input type="radio" name="position" id="position-form-neutral" class="new-comment-form-position" value="neutral" checked>
+            <label for="position-form-neutral" class="new-comment-form-position-label">中立</label>
           </div>
         </div>
-        <button type="button" class="new-topic-form-submit-button">送信</button>
+        <button type="button" class="new-comment-form-submit-button">送信</button>
       </form>
     </div>
     <div class="new-topics">