Merge pull request progedu#5 from ryo-a/patch-1

[教材メンテナンス]Bootstrapのマイグレーション
yuma1182 · Mar 12, 2018 · ed2fcfd · ed2fcfd
2 parents c21c004 + 057ebaa
commit ed2fcfd
Showing 1 changed file with 29 additions and 35 deletions.
diff --git a/views/posts.pug b/views/posts.pug
@@ -3,48 +3,42 @@ html(lang="jp")
   head
     meta(charset="UTF-8")
     link(rel="stylesheet",
-    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css",
-    integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7",
-    crossorigin="anonymous")
-    link(rel="stylesheet",
-    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css",
-    integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r",
+    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css",
+    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm",
     crossorigin="anonymous")
     title 秘密の匿名掲示板
   body.container
-    div.page-header
-      a(href="/logout").btn.btn-info.pull-right ログアウト
+    div.my-3
+      a(href="/logout").btn.btn-info.float-right ログアウト
       h1 秘密の匿名掲示板
     h2 新規投稿
     form(method="post", action="/posts")
       div.form-group
-        textarea(name="content", rows="4").form-control
+        textarea(name="content",  rows="4").form-control
       div.form-group
-        button(type="submit").btn.btn-info.pull-right 投稿
-      div.row
+        button(type="submit").btn.btn-primary 投稿
     h2 投稿一覧
     each post in posts
-      div.panel.panel-default
-        div.panel-heading
-          - var isPostedByAdmin = (post.postedBy === 'admin')
-          if isPostedByAdmin
-            span #{post.id} : 管理人 ★
-          else
-            span #{post.id} : ID:#{post.trackingCookie}
-        div.panel-body
-          p(style="white-space:pre;") #{post.content}
-        div.panel-footer
-          div 投稿日時: #{post.formattedCreatedAt}
-          - var isAdmin = (user === 'admin')
-          if isAdmin
-            div 投稿者: #{post.postedBy}
-          - var isDeletable = (user === post.postedBy || isAdmin)
-          if isDeletable
-            form(method="post", action="/posts?delete=1")
-              input(type="hidden", name="id", value=post.id)
-              button(type="submit").btn.btn-danger.pull-right 削除
-              div.row
-    script(src="https://code.jquery.com/jquery-2.2.0.min.js")
-    script(src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js",
-    integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS",
-    crossorigin="anonymous")
+      div.card.my-3
+        div.card-header
+            - var isPostedByAdmin = (post.postedBy === 'admin')
+            if isPostedByAdmin
+             span #{post.id} : 管理人 ★
+            else
+              span #{post.id} : ID:#{post.trackingCookie}      
+        div.card-body
+          p(style="white-space:pre; overflow:auto;") #{post.content}
+        div.card-footer
+            div 投稿日時: #{post.formattedCreatedAt}
+            - var isAdmin = (user === 'admin')
+            if isAdmin
+              div 投稿者: #{post.postedBy}
+            - var isDeletable = (user === post.postedBy || isAdmin)
+            if isDeletable
+              form(method="post", action="/posts?delete=1")
+                input(type="hidden", name="id", value="#{post.id}")
+                button(type="submit").btn.btn-danger.float-right 削除
+    script(src="https://code.jquery.com/jquery-3.2.1.slim.min.js")
+    script(src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js",
+    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl",
+    crossorigin="anonymous")