Improve BrainOrdure editorial UI

4日前 · c560c73cd3
--- a/app/views/Posts/show.asp
+++ b/app/views/Posts/show.asp
@@ -1,138 +1,160 @@
 <article class="card shadow-sm mb-4">
  <div class="card-body">
    <div class="mb-3">
      <a href="<%= PostsUrl() %>" class="small text-decoration-none">&larr; Back to posts</a>
    </div>

    <div class="magazine-label mb-3">Feature story</div>
    <h1 class="display-6 mb-2"><%= H(post.Title) %></h1>
 <%
 Dim postHeroBackground, postHeroClass, publishedText, readTimeText
 postHeroBackground = ExtractFirstImageSrc(post.Body)
 postHeroClass = "masthead masthead-post"
 If Len(postHeroBackground) > 0 Then
    postHeroClass = postHeroClass & " masthead-has-image"
 End If

    <%
    Dim publishedText
    publishedText = ""
    If IsDate(post.PublishedDate) Then
        If CDate(post.PublishedDate) > #1/1/1970# Then
            publishedText = FormatDateTime(post.PublishedDate, vbLongDate)
        End If
 publishedText = ""
 If IsDate(post.PublishedDate) Then
    If CDate(post.PublishedDate) > #1/1/1970# Then
        publishedText = FormatDateTime(post.PublishedDate, vbLongDate)
    End If
 End If
 readTimeText = EstimateReadTime(post.Body)
 %>

    If Len(publishedText) > 0 Then
    %>
      <p class="article-meta"><%= H(publishedText) %></p>
    <%
    End If
 <header class="<%= postHeroClass %>"<% If Len(postHeroBackground) > 0 Then %> style="background-image: url('<%= H(postHeroBackground) %>')"<% End If %>>
  <div class="overlay"></div>
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-md-10 mx-auto">
        <div class="post-heading text-center">
          <div class="post-heading-kicker">Feature story</div>
          <h1><%= H(post.Title) %></h1>
          <% If Len(publishedText) > 0 Or Len(readTimeText) > 0 Then %>
            <div class="post-meta-inline justify-content-center">
              <span>By BrainOrdure</span>
              <% If Len(publishedText) > 0 Then %><span class="meta-sep">•</span><span><%= H(publishedText) %></span><% End If %>
              <% If Len(readTimeText) > 0 Then %><span class="meta-sep">•</span><span><%= H(readTimeText) %></span><% End If %>
            </div>
          <% End If %>
        </div>
      </div>
    </div>
  </div>
 </header>

    Dim postBody
    postBody = RenderPostBody(post.Body)
    %>
 <div class="row">
  <div class="col-lg-7 col-md-9 mx-auto">
    <div class="mb-4">
      <a href="<%= PostsUrl() %>" class="small text-decoration-none">&larr; Back to posts</a>
    </div>

    <div class="prose fs-5 lh-lg feature-dropcap"><%= postBody %></div>
  </div>
 </article>
    <article class="post-preview post-body-preview">
      <div class="post-preview-content prose fs-5 lh-lg feature-dropcap"><%= RenderPostBody(post.Body) %></div>
    </article>

 <!-- Comments -->
 <section class="mt-2">
  <%
  Dim commentsCount, commentsLoadFailed
  commentsCount = 0
  commentsLoadFailed = False
    <div class="mb-5">
      <a href="<%= PostsUrl() %>" class="btn btn-outline-primary">Back to posts</a>
    </div>

  On Error Resume Next
  If IsObject(comments) Then commentsCount = comments.Count
  If Err.Number <> 0 Then
      commentsLoadFailed = True
    <!-- Comments -->
    <section class="mt-5">
      <%
      Dim commentsCount, commentsLoadFailed
      commentsCount = 0
      Err.Clear
  End If
  On Error GoTo 0
  %>
  <h2 class="page-title h4 mb-3">Comments (<%= commentsCount %>)</h2>
      commentsLoadFailed = False

  <% If commentsLoadFailed Then %>
    <div class="alert alert-warning mb-4">Comments are temporarily unavailable.</div>
  <% ElseIf commentsCount = 0 Then %>
    <p class="text-muted mb-4">No comments yet. Be the first to leave one below.</p>
  <% Else %>
    <%
    Dim commentIter, commentItem
    Dim commentsIterFailed
    commentsIterFailed = False
      On Error Resume Next
      If IsObject(comments) Then commentsCount = comments.Count
      If Err.Number <> 0 Then
          commentsLoadFailed = True
          commentsCount = 0
          Err.Clear
      End If
      On Error GoTo 0
      %>
      <h2 class="post-title h4 mb-3">Comments (<%= commentsCount %>)</h2>

    On Error Resume Next
    Set commentIter = comments.Iterator()
    If Err.Number <> 0 Then
        commentsIterFailed = True
        Err.Clear
    End If
      <% If commentsLoadFailed Then %>
        <div class="alert alert-warning mb-4">Comments are temporarily unavailable.</div>
      <% ElseIf commentsCount = 0 Then %>
        <p class="text-muted mb-4">No comments yet. Be the first to leave one below.</p>
      <% Else %>
        <%
        Dim commentIter, commentItem
        Dim commentsIterFailed
        commentsIterFailed = False

    Do While Not commentsIterFailed And commentIter.HasNext
        Set commentItem = commentIter.GetNext()
        On Error Resume Next
        Set commentIter = comments.Iterator()
        If Err.Number <> 0 Then
            commentsIterFailed = True
            Err.Clear
            Exit Do
        End If

        Dim commentDateText
        commentDateText = ""
        If IsDate(commentItem.CreatedDate) Then
            commentDateText = FormatDateTime(commentItem.CreatedDate, vbLongDate)
        End If
    %>
    <div class="card shadow-sm mb-3 comment-card">
      <div class="card-body">
        <div class="d-flex justify-content-between mb-2">
          <strong class="small"><%= H(commentItem.AuthorName) %></strong>
          <span class="small text-muted"><%= H(commentDateText) %></span>
        Do While Not commentsIterFailed And commentIter.HasNext
            Set commentItem = commentIter.GetNext()
            If Err.Number <> 0 Then
                commentsIterFailed = True
                Err.Clear
                Exit Do
            End If

            Dim commentDateText
            commentDateText = ""
            If IsDate(commentItem.CreatedDate) Then
                commentDateText = FormatDateTime(commentItem.CreatedDate, vbLongDate)
            End If
        %>
        <div class="comment-card mb-3">
          <div class="comment-card-body">
            <div class="d-flex justify-content-between mb-2">
              <strong class="small"><%= H(commentItem.AuthorName) %></strong>
              <span class="small text-muted"><%= H(commentDateText) %></span>
            </div>
            <%
            Dim commentBody
            commentBody = H(commentItem.Body)
            commentBody = Replace(commentBody, vbCrLf, "<br>")
            commentBody = Replace(commentBody, vbCr, "<br>")
            commentBody = Replace(commentBody, vbLf, "<br>")
            %>
            <p class="mb-0"><%= commentBody %></p>
          </div>
        </div>
        <%
        Dim commentBody
        commentBody = H(commentItem.Body)
        commentBody = Replace(commentBody, vbCrLf, "<br>")
        commentBody = Replace(commentBody, vbCr, "<br>")
        commentBody = Replace(commentBody, vbLf, "<br>")
        %>
        <p class="mb-0"><%= commentBody %></p>
      </div>
    </div>
    <%
    Loop
    If Err.Number <> 0 Then
        commentsIterFailed = True
        Err.Clear
    End If
    On Error GoTo 0
        Loop
        If Err.Number <> 0 Then
            commentsIterFailed = True
            Err.Clear
        End If
        On Error GoTo 0

    If commentsIterFailed Then
    %>
      <div class="alert alert-warning mb-4">Some comments could not be displayed.</div>
    <%
    End If
    %>
  <% End If %>
        If commentsIterFailed Then
        %>
          <div class="alert alert-warning mb-4">Some comments could not be displayed.</div>
        <%
        End If
        %>
      <% End If %>

  <!-- Comment form -->
  <div class="card shadow-sm mt-4">
    <div class="card-body">
      <h3 class="h5 mb-3">Leave a Comment</h3>
      <form method="post" action="<%= CommentsUrl() %>">
        <input type="hidden" name="PostID" value="<%= H(post.PostID) %>">
        <input type="hidden" name="PostSlug" value="<%= H(post.Slug) %>">
        <div class="mb-3">
          <label class="form-label" for="AuthorName">Name <span class="text-danger">*</span></label>
          <input class="form-control" type="text" id="AuthorName" name="AuthorName" required>
      <!-- Comment form -->
      <div class="comment-form-shell mt-4">
        <div class="comment-form-inner">
          <h3 class="h5 mb-3">Leave a Comment</h3>
          <form method="post" action="<%= CommentsUrl() %>">
            <input type="hidden" name="PostID" value="<%= H(post.PostID) %>">
            <input type="hidden" name="PostSlug" value="<%= H(post.Slug) %>">
            <div class="mb-3">
              <label class="form-label" for="AuthorName">Name <span class="text-danger">*</span></label>
              <input class="form-control" type="text" id="AuthorName" name="AuthorName" required>
            </div>
            <div class="mb-3">
              <label class="form-label" for="AuthorEmail">Email <span class="text-muted small">(optional, not displayed)</span></label>
              <input class="form-control" type="email" id="AuthorEmail" name="AuthorEmail">
            </div>
            <div class="mb-3">
              <label class="form-label" for="Body">Comment <span class="text-danger">*</span></label>
              <textarea class="form-control" id="Body" name="Body" rows="4" required></textarea>
            </div>
            <button class="btn btn-primary" type="submit">Submit Comment</button>
            <p class="small text-muted mt-2 mb-0">Comments are reviewed before appearing.</p>
          </form>
        </div>
        <div class="mb-3">
          <label class="form-label" for="AuthorEmail">Email <span class="text-muted small">(optional, not displayed)</span></label>
          <input class="form-control" type="email" id="AuthorEmail" name="AuthorEmail">
        </div>
        <div class="mb-3">
          <label class="form-label" for="Body">Comment <span class="text-danger">*</span></label>
          <textarea class="form-control" id="Body" name="Body" rows="4" required></textarea>
        </div>
        <button class="btn btn-primary" type="submit">Submit Comment</button>
        <p class="small text-muted mt-2 mb-0">Comments are reviewed before appearing.</p>
      </form>
    </div>
      </div>
    </section>
  </div>
 </section>
 </div>