Rework focused comment styling (#13434)
Had to tweak a few borders to make it work properly in all cases, also added .comment-body class to specifically target that body.
This commit is contained in:
silverwind
GitHub
parent
5b636bdec7
commit
eba0ac5bf6
5 changed files with 87 additions and 41 deletions
|
|
@ -50,7 +50,7 @@
|
|||
{{template "repo/issue/view_content/context_menu" Dict "ctx" $.root "item" . "delete" true "diff" true "IsCommentPoster" (and $.root.IsSigned (eq $.root.SignedUserID .PosterID))}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui attached segment">
|
||||
<div class="ui attached segment comment-body">
|
||||
<div class="render-content markdown">
|
||||
{{if .RenderedContent}}
|
||||
{{.RenderedContent|Str2html}}
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@
|
|||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui attached segment">
|
||||
<div class="ui attached segment comment-body">
|
||||
<div class="render-content markdown">
|
||||
{{if .Issue.RenderedContent}}
|
||||
{{.Issue.RenderedContent|Str2html}}
|
||||
|
|
|
|||
|
|
@ -22,9 +22,23 @@
|
|||
<div class="ui top attached header comment-header df ac sb">
|
||||
<div class="comment-header-left df ac">
|
||||
{{if .OriginalAuthor }}
|
||||
<span class="text black"><i class="fa {{MigrationIcon $.Repository.GetOriginalURLHostname}}" aria-hidden="true"></i> {{ .OriginalAuthor }}</span><span class="text grey"> {{$.i18n.Tr "repo.issues.commented_at" .Issue.HashTag $createdStr | Safe}} {{if $.Repository.OriginalURL}}</span><span class="text migrate">({{$.i18n.Tr "repo.migrated_from" $.Repository.OriginalURL $.Repository.GetOriginalURLHostname | Safe }}){{end}}</span>
|
||||
<span class="text black mr-2">
|
||||
<i class="fa {{MigrationIcon $.Repository.GetOriginalURLHostname}}" aria-hidden="true"></i>
|
||||
{{ .OriginalAuthor }}
|
||||
</span>
|
||||
<span class="text grey">
|
||||
{{$.i18n.Tr "repo.issues.commented_at" .Issue.HashTag $createdStr | Safe}} {{if $.Repository.OriginalURL}}
|
||||
</span>
|
||||
<span class="text migrate">
|
||||
({{$.i18n.Tr "repo.migrated_from" $.Repository.OriginalURL $.Repository.GetOriginalURLHostname | Safe }}){{end}}
|
||||
</span>
|
||||
{{else}}
|
||||
<span class="text grey"><a class="author"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>{{.Poster.GetDisplayName}}</a> {{$.i18n.Tr "repo.issues.commented_at" .HashTag $createdStr | Safe}}</span>
|
||||
<span class="text grey">
|
||||
<a class="author"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>
|
||||
{{.Poster.GetDisplayName}}
|
||||
</a>
|
||||
{{$.i18n.Tr "repo.issues.commented_at" .HashTag $createdStr | Safe}}
|
||||
</span>
|
||||
{{end}}
|
||||
</div>
|
||||
<div class="comment-header-right actions df ac">
|
||||
|
|
@ -48,7 +62,7 @@
|
|||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui attached segment">
|
||||
<div class="ui attached segment comment-body">
|
||||
<div class="render-content markdown">
|
||||
{{if .RenderedContent}}
|
||||
{{.RenderedContent|Str2html}}
|
||||
|
|
@ -425,7 +439,7 @@
|
|||
{{$.i18n.Tr "repo.issues.review.left_comment" | Safe}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="ui attached segment">
|
||||
<div class="ui attached segment comment-body">
|
||||
<div class="render-content markdown">
|
||||
{{if .RenderedContent}}
|
||||
{{.RenderedContent|Str2html}}
|
||||
|
|
@ -492,32 +506,30 @@
|
|||
<div class="ui comments">
|
||||
{{range $comms}}
|
||||
{{ $createdSubStr:= TimeSinceUnix .CreatedUnix $.Lang }}
|
||||
<div class="comment" id="{{.HashTag}}">
|
||||
<div class="comment code-comment" id="{{.HashTag}}">
|
||||
{{if not .OriginalAuthor }}
|
||||
<a class="avatar">
|
||||
<img src="{{.Poster.RelAvatarLink}}">
|
||||
</a>
|
||||
{{end}}
|
||||
<div class="content">
|
||||
<div class="code-comment-content">
|
||||
<span class="text grey">
|
||||
{{if .OriginalAuthor }}
|
||||
<span class="text black"><i class="fa {{MigrationIcon $.Repository.GetOriginalURLHostname}}" aria-hidden="true"></i> {{ .OriginalAuthor }}</span><span class="text grey"> {{if $.Repository.OriginalURL}}</span><span class="text migrate">({{$.i18n.Tr "repo.migrated_from" $.Repository.OriginalURL $.Repository.GetOriginalURLHostname | Safe }}){{end}}</span>
|
||||
{{else}}
|
||||
<a class="author"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>{{.Poster.GetDisplayName}}</a>
|
||||
{{end}}
|
||||
{{$.i18n.Tr "repo.issues.commented_at" .HashTag $createdSubStr | Safe}}
|
||||
</span>
|
||||
<div class="text">
|
||||
<div class="render-content markdown">
|
||||
{{if .RenderedContent}}
|
||||
{{.RenderedContent|Str2html}}
|
||||
{{else}}
|
||||
<span class="no-content">{{$.i18n.Tr "repo.issues.no_content"}}</span>
|
||||
{{end}}
|
||||
</div>
|
||||
<div class="raw-content hide">{{.Content}}</div>
|
||||
<span class="text grey">
|
||||
{{if .OriginalAuthor }}
|
||||
<span class="text black"><i class="fa {{MigrationIcon $.Repository.GetOriginalURLHostname}}" aria-hidden="true"></i> {{ .OriginalAuthor }}</span><span class="text grey"> {{if $.Repository.OriginalURL}}</span><span class="text migrate">({{$.i18n.Tr "repo.migrated_from" $.Repository.OriginalURL $.Repository.GetOriginalURLHostname | Safe }}){{end}}</span>
|
||||
{{else}}
|
||||
<a class="author"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>{{.Poster.GetDisplayName}}</a>
|
||||
{{end}}
|
||||
{{$.i18n.Tr "repo.issues.commented_at" .HashTag $createdSubStr | Safe}}
|
||||
</span>
|
||||
<div class="text comment-content">
|
||||
<div class="render-content markdown">
|
||||
{{if .RenderedContent}}
|
||||
{{.RenderedContent|Str2html}}
|
||||
{{else}}
|
||||
<span class="no-content">{{$.i18n.Tr "repo.issues.no_content"}}</span>
|
||||
{{end}}
|
||||
</div>
|
||||
<div class="raw-content hide">{{.Content}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -998,6 +998,9 @@
|
|||
}
|
||||
|
||||
.content {
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
> .merge-section {
|
||||
background-color: #f7f7f7;
|
||||
|
||||
|
|
@ -1089,18 +1092,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
&:target > .content {
|
||||
box-shadow: 0 0 10px #8c8c8c;
|
||||
}
|
||||
|
||||
&:target > .content > .code-comment-content {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
&:target > .content > .code-comment-content > .text {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.ui.form {
|
||||
.field {
|
||||
&:first-child {
|
||||
|
|
@ -1127,6 +1118,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
.code-comment {
|
||||
border: 1px solid transparent;
|
||||
padding: 6px 6px 3px;
|
||||
|
||||
.content {
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.event {
|
||||
padding-left: 15px;
|
||||
|
||||
|
|
@ -2395,6 +2395,11 @@
|
|||
.segment.reactions {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
border: none !important;
|
||||
border-top: 1px solid var(--color-secondary) !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
margin: 0 !important;
|
||||
|
||||
.ui.label {
|
||||
max-height: 40px;
|
||||
|
|
@ -2407,7 +2412,7 @@
|
|||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
border-color: inherit !important;
|
||||
border-color: var(--color-secondary) !important;
|
||||
|
||||
&.disabled {
|
||||
cursor: default;
|
||||
|
|
@ -2421,7 +2426,7 @@
|
|||
|
||||
.ui.label.basic.blue {
|
||||
background-color: var(--color-primary-alpha-20) !important;
|
||||
border-color: inherit !important;
|
||||
border-color: var(--color-secondary) !important;
|
||||
}
|
||||
|
||||
.reaction-count {
|
||||
|
|
@ -2786,8 +2791,30 @@
|
|||
}
|
||||
}
|
||||
|
||||
.comment:target .content {
|
||||
border-color: var(--color-primary) !important;
|
||||
box-shadow: 0 0 0 3px var(--color-primary-alpha-30) !important;
|
||||
}
|
||||
|
||||
.comment:target .header:before {
|
||||
border-right-color: var(--color-primary) !important;
|
||||
filter: drop-shadow(-3px 0 0 var(--color-primary-alpha-30)) !important;
|
||||
}
|
||||
|
||||
.code-comment:target {
|
||||
border-color: var(--color-primary) !important;
|
||||
border-radius: var(--border-radius) !important;
|
||||
box-shadow: 0 0 0 3px var(--color-primary-alpha-30) !important;
|
||||
}
|
||||
|
||||
.code-comment:target .content {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.comment-header {
|
||||
#avatar-arrow;
|
||||
border: none !important;
|
||||
border-bottom: 1px solid var(--color-secondary) !important;
|
||||
font-weight: normal !important;
|
||||
padding: .5rem 1rem !important;
|
||||
margin: 0 !important;
|
||||
|
|
@ -2833,6 +2860,13 @@
|
|||
margin-left: .25rem;
|
||||
}
|
||||
|
||||
.comment-body {
|
||||
border: none !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.edit-label.modal,
|
||||
.new-label.segment {
|
||||
.form {
|
||||
|
|
|
|||
|
|
@ -537,7 +537,7 @@ body {
|
|||
|
||||
.ui.attached.header {
|
||||
background: var(--color-secondary);
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-color: var(--color-secondary);
|
||||
color: #dbdbdb;
|
||||
}
|
||||
|
||||
|
|
@ -1039,7 +1039,7 @@ a.ui.basic.green.label:hover {
|
|||
.ui.segment,
|
||||
.ui.segments,
|
||||
.ui.attached.segment {
|
||||
border: 1px solid var(--color-secondary);
|
||||
border-color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.ui.list > .item > .content {
|
||||
|
|
|
|||
Loading…
Reference in a new issue