archive/pillar
0
0
Fork 0
Code Issues 42 Pull Requests Projects Releases Wiki Activity

Comments: Cleanup and convert more IDs to classes when possible

Browse Source 
No functional changes.
This commit is contained in:
Pablo Vazquez
2017-09-30 23:21:54 +02:00
parent e4c5743852
commit da7be50c61
7 changed files with 184 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

405
src/styles/_comments.sass
View File

@@ -9,32 +9,21 @@ $comments-width-max: 710px
padding: 15px 0 padding: 15px 0
display: block display: block
.comments-list-title
padding: 15px 0 10px 0
font-size: 1.3em
font-weight: 300
color: $color-text-dark-hint
#comments-list-items-loading
font-size: 2em
color: $color-background
text-align: center
position: relative
top: 25px
margin-bottom: 10px
+spin
#comments-list-items,
.comment-reply-container
position: relative
.nocomments
color: $color-text-dark-hint
text-align: center
cursor: default
padding: 8px 0
.comments-list .comments-list
&-loading
+spin
color: $color-background
font-size: 2em
margin-bottom: 10px
position: relative
text-align: center
top: 25px
&-title
padding: 15px 0 10px 0
font-size: 1.3em
font-weight: 300
color: $color-text-dark-hint
/* Each comment on the list*/ /* Each comment on the list*/
.comment-container, .comment-container,
@@ -84,7 +73,7 @@ $comments-width-max: 710px
display: inline-block display: inline-block
float: left float: left
font-weight: bold font-weight: bold
margin-right: 10px margin-right: 8px
white-space: nowrap white-space: nowrap
&.op &.op
@@ -147,6 +136,10 @@ $comments-width-max: 710px
font-weight: 500 font-weight: 500
color: $color-info color: $color-info
img.emoji
padding-top: inherit
padding-bottom: inherit
.editing .editing
background-color: $color-background-light background-color: $color-background-light
margin-bottom: 10px margin-bottom: 10px
@@ -163,46 +156,6 @@ $comments-width-max: 710px
padding-bottom: 0 padding-bottom: 0
width: 100% width: 100%
.comment-content-preview
display: none
+node-details-description
padding: 10px 0 0 10px
font:
size: 1em
weight: normal
position: relative
margin-top: 15px
&:empty
margin: 0
padding: 0
&:before, &:after
display: none
&:before
content: 'Live Preview'
position: absolute
top: -20px
left: 30px
font-size: .9em
color: $color-text-dark-hint
transition: color 150ms ease-in-out
+media-md
visibility: visible
+media-sm
visibility: hidden
&:after
content: 'Markdown Supported'
position: absolute
top: -20px
right: 20px
font-size: .9em
color: $color-text-dark-hint
transition: color 150ms ease-in-out
/* Rating, and actions such as reply */ /* Rating, and actions such as reply */
.comment-meta .comment-meta
+media-xs +media-xs
@@ -339,15 +292,15 @@ $comments-width-max: 710px
padding-left: 55px padding-left: 55px
.comment-badge .comment-badge
display: inline-block border-radius: 3px
border: 1px solid $color-text-dark-hint border: 1px solid $color-text-dark-hint
color: $color-text-dark-hint color: $color-text-dark-hint
padding: 1px 4px display: inline-block
margin: 0 5px 0 10px
border-radius: 3px
font: font:
size: .7em size: .7em
weight: 400 weight: 400
margin: 0 5px 0 10px
padding: 1px 4px
text-transform: uppercase text-transform: uppercase
&.badge-team &.badge-team
@@ -360,181 +313,179 @@ $comments-width-max: 710px
border-color: $color-success border-color: $color-success
color: $color-success color: $color-success
.comment-reply-container .comment-reply
background-color: $color-background &-container
background-color: $color-background
/* Little gravatar icon on the left */ /* Little gravatar icon on the left */
.comment-reply-avatar &-avatar
img img
border-radius: 50% border-radius: 50%
width: 25px width: 25px
height: 25px height: 25px
box-shadow: 0 0 0 3px $color-background-light box-shadow: 0 0 0 3px $color-background-light
/* textarea field, submit button and reply details */ /* textarea field, submit button and reply details */
.comment-reply-form &-form
padding: padding:
top: 0 top: 0
left: 10px left: 10px
width: 100% width: 100%
.comment-reply-field &-field
background-color: white background-color: white
border-radius: 3px border-radius: 3px
box-shadow: 1px 2px 2px rgba($color-background-dark, .5) box-shadow: 1px 2px 2px rgba($color-background-dark, .5)
display: flex display: flex
position: relative position: relative
transition: border-color 300ms ease-in-out transition: border-color 300ms ease-in-out
textarea textarea
+node-details-description +node-details-description
color: $color-text-dark border-bottom-right-radius: 0
border: none border-top-right-radius: 0
border-bottom-right-radius: 0 border: none
border-top-right-radius: 0 box-shadow: none
box-shadow: none color: $color-text-dark
flex: 1 flex: 1
font: font:
size: 1em size: 1em
weight: normal weight: normal
line-height: 1.5em line-height: 1.5em
margin: 0 margin: 0
min-height: 45px min-height: 45px
padding: 10px 0 10px 10px padding: 10px 0 10px 10px
resize: vertical resize: vertical
width: 100% transition: box-shadow 250ms ease-in-out
transition: box-shadow 250ms ease-in-out width: 100%
&:focus &:focus
box-shadow: inset 2px 0 0 0 $color-success, inset 0 2px 0 0 $color-success, inset 0 -2px 0 0 $color-success box-shadow: inset 2px 0 0 0 $color-success, inset 0 2px 0 0 $color-success, inset 0 -2px 0 0 $color-success
border: none border: none
color: $color-text-dark color: $color-text-dark
outline: none outline: none
&+.comment-reply-meta button.comment-action-submit &+.comment-reply-meta button.comment-action-submit
box-shadow: inset -2px 0 0 0 $color-success, inset 0 2px 0 0 $color-success, inset 0 -2px 0 0 $color-success box-shadow: inset -2px 0 0 0 $color-success, inset 0 2px 0 0 $color-success, inset 0 -2px 0 0 $color-success
&.error &.error
box-shadow: inset 2px 0 0 0 $color-danger, inset 0 2px 0 0 $color-danger, inset 0 -2px 0 0 $color-danger box-shadow: inset 2px 0 0 0 $color-danger, inset 0 2px 0 0 $color-danger, inset 0 -2px 0 0 $color-danger
&.filled &.filled
textarea:focus textarea:focus
border-bottom-left-radius: 0 border-bottom-left-radius: 0
&+.comment-reply-preview &+.comment-reply-preview
display: flex display: flex
.comment-reply-meta .comment-reply-meta
background-color: $color-success background-color: $color-success
.comment-action-submit .comment-action-submit
color: white color: white
border-bottom-right-radius: 0 border-bottom-right-radius: 0
span.hotkey span.hotkey
display: block
&.sign-in
display: block display: block
padding: 10px
color: $color-text-dark-primary
cursor: default
a &.sign-in
margin-right: 4px display: block
padding: 10px
color: $color-text-dark-primary
cursor: default
a
margin-right: 4px
&-preview
background-color: $color-background-light
border-bottom-left-radius: 3px
border-bottom-right-radius: 3px
box-shadow: 1px 2px 2px rgba($color-background-dark, .5)
color: $color-text-dark-primary
display: none // flex when comment-reply-field has .filled class
position: relative
transition: all 150ms ease-in-out
p
padding-left: 0
padding-right: 0
&-md
flex: 1
padding: 5px 10px
&:empty
color: transparent
margin: 0 auto
padding: 0 10px
border: none
&:before
content: ''
color: transparent
&-info
background-color: $color-background-dark
display: flex
flex-direction: column
font-size: .8em
padding-bottom: 10px
text-align: center
width: 100px
.comment-action-cancel
cursor: pointer
padding: 10px
text-decoration: underline
&:hover
color: $color-primary
&-meta
display: flex
align-items: center
border-bottom-right-radius: 3px
border-top-right-radius: 3px
transition: background-color 150ms ease-in-out, color 150ms ease-in-out
width: 100px
button.comment-action-submit
border: none
border-top-left-radius: 0
border-bottom-left-radius: 0
color: $color-success
flex-direction: column
height: 100%
position: relative
transition: all 200ms ease-in-out
white-space: nowrap
width: 100%
&:focus
background-color: white
.comment-reply-preview &.submitting
background-color: $color-background-light color: $color-info
border-bottom-left-radius: 3px
border-bottom-right-radius: 3px
box-shadow: 1px 2px 2px rgba($color-background-dark, .5)
color: $color-text-dark-primary
display: none // flex when comment-reply-field has .filled class
position: relative
transition: all 150ms ease-in-out
p &.error
padding-left: 0 background-color: $color-danger
padding-right: 0 color: white
&-md span.hotkey
flex: 1 color: white
padding: 5px 10px display: none
font-weight: normal
.comment-reply-preview:empty font-size: .9em
color: transparent
margin: 0 auto
padding: 0 10px
border: none
&:before
content: ''
color: transparent
.comment-reply-info
background-color: $color-background-dark
display: flex
flex-direction: column
font-size: .8em
padding-bottom: 10px
text-align: center
width: 100px
.comment-action-cancel
cursor: pointer
padding: 10px
text-decoration: underline
&:hover
color: $color-primary
.comment-reply-meta
display: flex
align-items: center
border-bottom-right-radius: 3px
border-top-right-radius: 3px
transition: background-color 150ms ease-in-out, color 150ms ease-in-out
width: 100px
button.comment-action-submit
border: none
border-top-left-radius: 0
border-bottom-left-radius: 0
color: $color-success
flex-direction: column
height: 100%
position: relative
transition: all 200ms ease-in-out
white-space: nowrap
width: 100%
&:focus
background-color: white
&.submitting /* Style the comment container when we're replying */
color: $color-info .comment-container + .comment-reply-container
margin-left: 30px
padding-top: 10px
&.error .comment-reply-form
background-color: $color-danger .comment-reply-meta
color: white button.comment-action-cancel
display: inline-block
span.hotkey
color: white
display: none
font-weight: normal
font-size: .9em
/* Style the comment container when we're replying */
.comment-container + .comment-reply-container
margin-left: 30px
padding-top: 10px
.comment-reply-form
.comment-reply-meta
button.comment-action-cancel
display: inline-block
// @import plugins/_ckeditor

2
src/templates/nodes/custom/asset/file/view_embed.pug
View File

@@ -24,7 +24,7 @@
include ../../_node_details include ../../_node_details
#comments-embed #comments-embed
#comments-list-items-loading .comments-list-loading
i.pi-spin i.pi-spin
include ../../_scripts include ../../_scripts

2
src/templates/nodes/custom/asset/image/view_embed.pug
View File

@@ -24,7 +24,7 @@
include ../../_node_details include ../../_node_details
#comments-embed #comments-embed
#comments-list-items-loading .comments-list-loading
i.pi-spin i.pi-spin
include ../../_scripts include ../../_scripts

2
src/templates/nodes/custom/asset/video/view_embed.pug
View File

@@ -46,7 +46,7 @@
include ../../_node_details include ../../_node_details
#comments-embed #comments-embed
#comments-list-items-loading .comments-list-loading
i.pi-spin i.pi-spin
script(type="text/javascript"). script(type="text/javascript").

2
src/templates/nodes/custom/asset/view_theatre_embed.pug
View File

@@ -41,7 +41,7 @@
| {% endif %} | {% endif %}
#comments-embed #comments-embed
#comments-list-items-loading .comments-list-loading
i.pi-spin i.pi-spin
include ../_scripts include ../_scripts

2
src/templates/nodes/custom/comment/list_embed.pug
View File

@@ -72,7 +72,7 @@
section.comments-list-header section.comments-list-header
.comments-list-title .comments-list-title
| {{ nr_of_comments }} comment{{ nr_of_comments|pluralize }} | {{ nr_of_comments }} comment{{ nr_of_comments|pluralize }}
#comments-list-items .comments-list-items
| {% for comment in comments['_items'] %} | {% for comment in comments['_items'] %}
| {{ macros.render_comment(comment, False) }} | {{ macros.render_comment(comment, False) }}
| {% endfor %} | {% endfor %}

2
src/templates/nodes/custom/post/view_embed.pug
View File

@@ -37,7 +37,7 @@
#comments-embed #comments-embed
#comments-list-items-loading .comments-list-loading
i.pi-spin i.pi-spin
include ../_scripts include ../_scripts