Skip to content

Commit

Permalink
update comment box design
Browse files Browse the repository at this point in the history
  • Loading branch information
@EdiWang
EdiWang committed Sep 19, 2023
1 parent aa7868d commit 1b8e209
Show file tree
Hide file tree
Showing 2 changed files with 75 additions and 70 deletions.
140 changes: 70 additions & 70 deletions src/Moonglade.Web/Pages/Post.cshtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,25 +33,25 @@
<meta name="author" content="@(string.IsNullOrWhiteSpace(Model.Post.Author) ? BlogConfig.GeneralSettings.OwnerName : Model.Post.Author) " />
@if (BlogConfig.GeneralSettings.UseDublinCoreMetaData)
{
<meta name="DC.Title" content="@Model.Post.Title" />
<meta name="DC.Publisher" content="@(string.IsNullOrWhiteSpace(Model.Post.Author) ? BlogConfig.GeneralSettings.OwnerName : Model.Post.Author)" />
<meta name="DC.Language" content="@Model.Post.ContentLanguageCode" />
<meta name="DC.Creator" content="@(string.IsNullOrWhiteSpace(Model.Post.Author) ? BlogConfig.GeneralSettings.OwnerName : Model.Post.Author)" />
<meta name="DC.Type" content="Text" />
<meta name="DC.Format" content="text/html" />
<meta name="DC.Format.MIME" content="text/html" />
<meta name="DC.Format.SysReq" content="Internet browser" />
@if (Model.Post.OriginLink != null)
{
<meta name="DC.Source" content="@Model.Post.OriginLink">
}
<meta name="DC.Subject" content="@string.Join(", ", Model.Post.Categories.Select(t => t.DisplayName))" />
<meta name="DC.Subject.Keyword" content="@string.Join(", ", Model.Post.Tags.Select(t => t.NormalizedName))" />
@if (BlogConfig.GeneralSettings.DcLicenseUrl != null)
{
<meta name="DCTERMS.license" scheme="DCTERMS.URI" content="@BlogConfig.GeneralSettings.DcLicenseUrl" />
<meta name="DCTERMS.rightsHolder" content="@(string.IsNullOrWhiteSpace(Model.Post.Author) ? BlogConfig.GeneralSettings.OwnerName : Model.Post.Author) "/>
}
<meta name="DC.Title" content="@Model.Post.Title" />
<meta name="DC.Publisher" content="@(string.IsNullOrWhiteSpace(Model.Post.Author) ? BlogConfig.GeneralSettings.OwnerName : Model.Post.Author)" />
<meta name="DC.Language" content="@Model.Post.ContentLanguageCode" />
<meta name="DC.Creator" content="@(string.IsNullOrWhiteSpace(Model.Post.Author) ? BlogConfig.GeneralSettings.OwnerName : Model.Post.Author)" />
<meta name="DC.Type" content="Text" />
<meta name="DC.Format" content="text/html" />
<meta name="DC.Format.MIME" content="text/html" />
<meta name="DC.Format.SysReq" content="Internet browser" />
@if (Model.Post.OriginLink != null)
{
<meta name="DC.Source" content="@Model.Post.OriginLink">
}
<meta name="DC.Subject" content="@string.Join(", ", Model.Post.Categories.Select(t => t.DisplayName))" />
<meta name="DC.Subject.Keyword" content="@string.Join(", ", Model.Post.Tags.Select(t => t.NormalizedName))" />
@if (BlogConfig.GeneralSettings.DcLicenseUrl != null)
{
<meta name="DCTERMS.license" scheme="DCTERMS.URI" content="@BlogConfig.GeneralSettings.DcLicenseUrl" />
<meta name="DCTERMS.rightsHolder" content="@(string.IsNullOrWhiteSpace(Model.Post.Author) ? BlogConfig.GeneralSettings.OwnerName : Model.Post.Author) " />
}
}
<link href="~/css/post-slug.css" rel="stylesheet" asp-append-version="true" />
<link href="~/css/highlighter-custom.css" rel="stylesheet" asp-append-version="true" />
Expand Down Expand Up @@ -110,7 +110,7 @@
</text>
}
var pid = document.querySelector('article').dataset.postid;
var pid = document.querySelector('article').dataset.postid;
window.fitImageToDevicePixelRatio = @BlogConfig.ImageSettings.FitImageToDevicePixelRatio.ToString().ToLower();
Expand Down Expand Up @@ -160,7 +160,7 @@

<hr class="d-none d-md-block" />
</header>

@if (Model.Post.IsOutdated)
{
<partial name="_PostOutdatedMessage" />
Expand Down Expand Up @@ -210,63 +210,63 @@
<div class="d-print-none">
@if (Model.Post.CommentEnabled)
{
<div class="card bg-light comment-form-containter mb-4">
<div class="card-header">
<i class="bi-chat-left-text"></i>
@SharedLocalizer["Comments"]
</div>
<form id="comment-form">
<div class="card-body">
<div class="row g-1 mb-2">
<div class="col-md-4">
<input type="text"
class="form-control"
placeholder="Your name"
id="input-comment-name"
required/>
</div>
<div class="col-md-8">
<input type="email"
class="form-control"
placeholder="Email (Optional)"
id="input-comment-email"
data-bs-toggle="tooltip"
data-placement="top"
title="@SharedLocalizer["Providing your email address can enable blog admin to send notifications for replying your comment. Your email address will also be used to show Gravatar if it has one."]"/>
</div>
<div class="comment-form-containter p-3 rounded-3 shadow-sm border bg-white mb-4">
<h6 class="card-subtitle mb-3 text-muted">
<i class="bi-chat-left-text"></i>
@SharedLocalizer["Comments"]
</h6>
<form id="comment-form">
<div>
<div class="row g-1 mb-2">
<div class="col-md-4">
<input type="text"
class="form-control"
placeholder="Your name"
id="input-comment-name"
required />
</div>
<div class="comment-md-content mb-2">
<textarea id="input-comment-content"
<div class="col-md-8">
<input type="email"
class="form-control"
placeholder="Email (Optional)"
id="input-comment-email"
data-bs-toggle="tooltip"
data-placement="top"
title="@SharedLocalizer["Providing your email address can enable blog admin to send notifications for replying your comment. Your email address will also be used to show Gravatar if it has one."]" />
</div>
</div>
<div class="comment-md-content mb-2">
<textarea id="input-comment-content"
class="form-control"
cols="60"
rows="4"
placeholder="@SharedLocalizer["Your comments (Markdown supported)"]"
maxlength="1024"
required></textarea>
</div>
<div class="row">
<div class="col-9">
<div class="input-group">
<img id="img-captcha" onclick="viewpost.resetCaptchaImage()" src="~/captcha-image" data-bs-toggle="tooltip" data-placement="top" title="@SharedLocalizer["Can't read? Click to change another image."]" alt="Captcha image"/>
<input type="text"
id="input-comment-captcha"
class="form-control input-captcha"
placeholder="Captcha Code"
autocomplete="off"
minlength="4"
maxlength="4"
required/>
</div>
</div>
<div class="col-3">
<button id="btn-submit-comment" type="submit" class="btn btn-success float-end">
<span id="loadingIndicator" class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="display: none;"></span>
@SharedLocalizer["Submit"]
</button>
</div>
<div class="row">
<div class="col-9">
<div class="input-group">
<img id="img-captcha" onclick="viewpost.resetCaptchaImage()" src="~/captcha-image" data-bs-toggle="tooltip" data-placement="top" title="@SharedLocalizer["Can't read? Click to change another image."]" alt="Captcha image" />
<input type="text"
id="input-comment-captcha"
class="form-control input-captcha"
placeholder="Captcha Code"
autocomplete="off"
minlength="4"
maxlength="4"
required />
</div>
</div>
<div class="col-3">
<button id="btn-submit-comment" type="submit" class="btn btn-accent float-end">
<span id="loadingIndicator" class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="display: none;"></span>
@SharedLocalizer["Submit"]
</button>
</div>
</div>
</form>
</div>
</form>
</div>
}
else
Expand All @@ -275,12 +275,12 @@
}

<div id="thx-for-comment" class="alert alert-warning" style="display: none;">
@SharedLocalizer["Thanks, your comment is pending approval now."] <br/>
@SharedLocalizer["Thanks, your comment is pending approval now."] <br />
@SharedLocalizer["It will show up once blog administrator approved your comment."]
</div>

<div id="thx-for-comment-non-review" class="alert alert-success" style="display: none;">
@SharedLocalizer["Thanks for your comment."] <br/>
@SharedLocalizer["Thanks for your comment."] <br />
@SharedLocalizer["Refresh the page to see your comment."]
</div>

Expand Down
5 changes: 5 additions & 0 deletions src/Moonglade.Web/wwwroot/css/darkmode.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,11 @@
background-color: transparent !important;
}

.darkmode .comment-form-containter {
background-color: transparent !important;
border-color: var(--gray-5) !important;
}

.darkmode .post-content blockquote,
.darkmode .post-content .blockquote {
border-left: 5px solid var(--gray-6);
Expand Down

0 comments on commit 1b8e209

Please sign in to comment.