浏览代码

게시물상세페이지 css 수정

Gayeon Park 3 年之前
父节点
当前提交
4e6b87b6e9

+ 11 - 9
realworld/src/main/webapp/WEB-INF/jsp/article/articleDetails.jsp

@@ -23,7 +23,7 @@
     function follow() {
         const followBtn = document.querySelectorAll('.follow-btn');
         if("${ssIsLogin}" === "true"){
-            followBtn.forEach(value =>
+            followBtn.forEach(value => 
                 value.classList.toggle('active')
             )
         } else {
@@ -48,8 +48,6 @@
             value.textContent = new Date(date).toLocaleString()
         )
     }
-
-    fet
 </script>
 </head>
 <body>
@@ -87,11 +85,13 @@
                             </c:when>
                             <c:otherwise>
                                 <div class="buttons">
-                                    <button class="follow-btn btn-sm" onclick="follow()">
+                                    <button class="follow-btn btn-sm btn-meta" onclick="follow()">
                                         <i class="fas fa-plus"></i>&nbsp;Follow Gerome
                                     </button>
-                                    <button class="favorite-btn btn-sm" onclick="favorite()">
-                                        <i class="fas fa-heart"></i>&nbsp;Favorite Article (564)
+                                    <button class="favorite-btn btn-sm btn-meta" onclick="favorite()">
+                                        <i class="fas fa-heart"></i>
+                                        <span> Favorite Article </span> 
+                                        <span class="count">(564)</span>
                                     </button>
                                 </div>
                             </c:otherwise>
@@ -139,11 +139,13 @@
                             </c:when>
                             <c:otherwise>
                                 <div class="buttons">
-                                    <button class="follow-btn btn-sm" onclick="follow()">
+                                    <button class="follow-btn btn-sm btn-meta" onclick="follow()">
                                         <i class="fas fa-plus"></i>&nbsp;Follow Gerome
                                     </button>
-                                    <button class="favorite-btn btn-sm" onclick="favorite()">
-                                        <i class="fas fa-heart"></i>&nbsp;Favorite Article (564)
+                                    <button class="favorite-btn btn-sm btn-meta" onclick="favorite()">
+                                        <i class="fas fa-heart"></i>
+                                        <span> Favorite Article </span> 
+                                        <span class="count">(564)</span>
                                     </button>
                                 </div>
                             </c:otherwise>

+ 7 - 0
realworld/src/main/webapp/resources/css/style.css

@@ -537,12 +537,17 @@ textarea {
     filter: none;
 }
 
+.article-page .btn-meta {
+     
+}
+
 .article-page .edit-article,
 .article-page .follow-btn {
     color: var(--light-grey-color);
     border: 1px solid var(--light-grey-color);
     margin-right: 3px;
     font-weight: 400;
+    font-size: 0.9rem;
 }
 
 .article-page .edit-article:hover,
@@ -560,10 +565,12 @@ textarea {
     color: var(--red-color);
     border-color: var(--red-color);
     font-weight: 400;
+    font-size: 0.9rem;
 }
 
 .article-page .favorite-btn {
     font-weight: 400;
+    font-size: 0.9rem;
 }
 
 .article-page .delete-article:hover {