Completes theme/enhancement of comment view

10 years ago · e03773481e
2 changed files with 205 additions and 98 deletions
--- a/src/definitions/views/comment.less
+++ b/src/definitions/views/comment.less
@ -29,74 +29,117 @@
 ---------------*/

 .ui.comments {
+  margin: @margin;
+  max-width: @maxWidth;
+}

-
+.ui.comments:first-child {
+  margin-top: 0em;
 }
-.ui.comments a {
-  cursor: pointer;
+.ui.comments:last-child {
+  margin-bottom: 0em;
 }

-
 /*--------------
     Comment
 ---------------*/

 .ui.comments .comment {
  position: relative;
-  margin-top: 0.5em;
-  padding-top: 0.5em;
+  margin: @commentMargin;
+  padding: @commentPadding;
+  border: @commentBorder;
+  border-top: @commentDivider;
+  line-height: @commentLineHeight;
 }
 .ui.comments .comment:first-child {
-  margin-top: 0em;
-  padding-top: 0em;
+  margin-top: @firstCommentMargin;
+  padding-top: @firstCommentPadding;
 }


-
 /*--------------------
-   Avatar (Optional)
+    Nested Comments
 ---------------------*/

+.ui.comments .comment .comments {
+  margin: @nestedCommentsMargin;
+  padding: @nestedCommentsPadding;
+}
+.ui.comments .comment .comments:before{
+  position: absolute;
+  top: 0px;
+  left: 0px;
+}
+/* One Deep */
+.ui.comments > .comment  .comments {
+  margin-left: 1em;
+}
+
+/*--------------
+     Avatar
+---------------*/
+
 .ui.comments .comment .avatar {
-  display: block;
-  float: left;
-  width: 4em;
+  display: @avatarDisplay;
+  width: @avatarWidth;
+  height: @avatarHeight;
+  float: @avatarFloat;
+  margin: @avatarMargin;
 }
+.ui.comments .comment img.avatar,
 .ui.comments .comment .avatar img {
  display: block;
  margin: 0em auto;
-
-  width: 3em;
-  height: 3em;
-  border-radius: 500px;
+  width: 100%;
+  height: 100%;
+  border-radius: @avatarBorderRadius;
 }

 /*--------------
-     Content
+    Content
 ---------------*/

-.ui.comments .comment > .content,
-.ui.comments .comment > .avatar {
+.ui.comments .comment > .content {
  display: block;
 }
-.ui.comments .comment .avatar ~ .content {
-  padding: 0em 1em;
-}
-
 /* If there is an avatar move content over */
 .ui.comments .comment > .avatar ~ .content {
-  padding-top: 0.25em;
-  margin-left: 3.5em;
+  margin-left: @contentMargin;
 }

+/*--------------
+     Author
+---------------*/
+
+.ui.comments .comment .author {
+  font-size: @authorFontSize;
+  color: @authorColor;
+  font-weight: @authorFontWeight;
+}
+.ui.comments .comment a.author {
+  cursor: pointer;
+}
+.ui.comments .comment a.author:hover {
+  color: @authorHoverColor;
+}
+
+/*--------------
+     Metadata
+---------------*/
+
 .ui.comments .comment .metadata {
-  display: inline-block;
-  margin-left: 0.3em;
-  color: rgba(0, 0, 0, 0.4);
+  display: @metadataDisplay;
+  margin-left: @metadataSpacing;
+  color: @metadataColor;
+  font-size: @metadataFontSize;
 }
 .ui.comments .comment .metadata > * {
  display: inline-block;
-  margin: 0em 0.3em 0em 0em;
+  margin: 0em @metadataContentSpacing 0em 0em;
+}
+.ui.comments .comment .metadata > :last-child {
+  margin-right: 0em;
 }

 /*--------------------
@ -104,79 +147,58 @@
 ---------------------*/

 .ui.comments .comment .text {
-  margin: 0.25em 0em 0.5em;
-  word-wrap: break-word;
+  margin: @textMargin;
+  font-size: @textFontSize;
+  word-wrap: @textWordWrap;
+  color: @textColor;
+  line-height: @textLineHeight;
 }

+
 /*--------------------
     User Actions
 ---------------------*/

 .ui.comments .comment .actions {
-  font-size: 0.9em;
+  font-size: @actionFontSize;
 }
 .ui.comments .comment .actions a {
+  cursor: pointer;
  display: inline-block;
-  margin: 0em 0.3em 0em 0em;
-  color: rgba(0, 0, 0, 0.3);
+  margin: 0em @actionContentDistance 0em 0em;
+  color: @actionLinkColor;
+}
+.ui.comments .comment .actions a:last-child {
+  margin-right: 0em;
 }
 .ui.comments .comment .actions a.active,
 .ui.comments .comment .actions a:hover {
-  color: rgba(0, 0, 0, 0.6);
+  color: @actionLinkHoverColor;
 }

 /*--------------------
      Reply Form
 ---------------------*/

-.ui.comments .reply.form {
-  margin-top: 0.75em;
-  width: 100%;
-  max-width: 30em;
+.ui.comments > .reply.form {
+  margin-top: @replyDistance;
 }
 .ui.comments .comment .reply.form {
-  margin-left: 2em;
-}
-.ui.comments > .reply.form {
-  margin-top: 1.5em;
-  max-width: 40em;
+  width: 100%;
+  margin-top: @commentReplyDistance;
 }
 .ui.comments .reply.form textarea {
-  height: 12em;
+  font-size: @replyFontSize;
+  height: @replyHeight;
 }

+/*******************************
+            State
+*******************************/

-
-/*--------------------
-    Nested Comments
---------------------*/
-
-.ui.comments .comment .comments {
-  margin-top: 0.5em;
-  padding-top: 0.5em;
-  padding-bottom: 1em;
-}
-.ui.comments .comment .comments:before{
-  position: absolute;
-  top: 0px;
-  left: 0px;
-}
-/* One Deep */
-.ui.comments > .comment  .comments {
-  margin-left: 2em;
-
-}
-/* Two Deep */
-.ui.comments > .comment > .comments > .comment > .comments {
-  margin-left: 1.75em;
-}
-/* Three Deep */
-.ui.comments > .comment > .comments > .comment > .comments > .comment > .comments {
-  margin-left: 1.5em;
-}
-/* Four Deep or more */
-.ui.comments > .comment > .comments > .comment > .comments > .comment > .comments > .comment .comments {
-  margin-left: 0.5em;
+.ui.collapsed.comments,
+.ui.comments .collapsed.comments {
+  display: none;
 }


@ -189,12 +211,9 @@
 ---------------------*/

 .ui.threaded.comments .comment .comments {
-  margin-left: 2em !important;
-  padding-left: 2em !important;
-
-  -webkit-box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05);
-  -moz-box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05);
-  box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.05);
+  margin: @threadedCommentVerticalOffset 0em 0em @threadedCommentHorizontalOffset;
+  padding: @threadedCommentVerticalDistance 0em 0em @threadedCommentHorizontalDistance;
+  box-shadow: @threadedCommentBoxShadow;
 }

 /*--------------------
@ -203,18 +222,12 @@

 .ui.minimal.comments .comment .actions {
  opacity: 0;
-
-  -webkit-transition: opacity 0.1s ease-out;
-  -moz-transition: opacity 0.1s ease-out;
-  -o-transition: opacity 0.1s ease-out;
-  -ms-transition: opacity 0.1s ease-out;
-  transition: opacity 0.1s ease-out;
-
-  -webkit-transition-delay: 0.1s;
-  -moz-transition-delay: 0.1s;
-  -o-transition-delay: 0.1s;
-  -ms-transition-delay: 0.1s;
-  transition-delay: 0.1s;
+  position: @minimalActionPosition;
+  top: @minimalActionTop;
+  right: @minimalActionRight;
+  left: @minimalActionLeft;
+  transition: @minimalTransition;
+  transition-delay: @minimalTransitionDelay;
 }
 .ui.minimal.comments .comment > .content:hover > .actions {
  opacity: 1;
@ -225,5 +238,14 @@
 ---------------------*/

 .ui.small.comments {
-  font-size: 0.875em;
+  font-size: @small;
+}
+.ui.comments {
+  font-size: @medium;
+}
+.ui.large.comments {
+  font-size: @large;
+}
+.ui.huge.comments {
+  font-size: @huge;
 }
--- a/src/themes/packages/default/views/comment.variables
+++ b/src/themes/packages/default/views/comment.variables
@ -4,15 +4,100 @@


 /*-------------------
-         View
+       View
 --------------------*/

+@maxWidth: 650px;
+@margin: 1.5em 0em;
+
 /*-------------------
      Elements
 --------------------*/

+/* Comment */
+@commentMargin: 0.75em 0em 0em;
+@commentPadding: 0.75em 0em 0em;
+@commentDivider: none;
+@commentBorder: none;
+@commentLineHeight: 1.2;
+@firstCommentMargin: 0em;
+@firstCommentPadding: 0em;
+
+/* Nested Comment */
+@nestedCommentsMargin: 0em 0em 0.5em 0em;
+@nestedCommentsPadding: 1em 0em 0em 1em;
+
+/* Avatar */
+@avatarDisplay: block;
+@avatarFloat: left;
+@avatarWidth: 2.5em;
+@avatarHeight: auto;
+@avatarSpacing: 1em;
+@avatarMargin: (@commentLineHeight - 1em) 0em 0em;
+@avatarBorderRadius: 0.25rem;
+
+/* Content */
+@contentMargin: @avatarWidth + @avatarSpacing;
+
+/* Author */
+@authorFontSize: 1em;
+@authorColor: @textColor;
+@authorHoverColor: @linkHoverColor;
+@authorFontWeight: bold;
+
+/* Metadata */
+@metadataDisplay: inline-block;
+@metadataFontSize: 0.9em;
+@metadataSpacing: 0.5em;
+@metadataContentSpacing: 0.5em;
+@metadataColor: @lightTextColor;
+
+/* Text */
+@textFontSize: 1em;
+@textMargin: 0.25em 0em 0.5em;
+@textWordWrap: break-word;
+@textLineHeight: 1.3;
+
+/* Actions */
+@actionFontSize: 0.9em;
+@actionContentDistance: 0.3em;
+@actionLinkColor: @unselectedTextColor;
+@actionLinkHoverColor: @selectedTextColor;

+/* Reply */
+@replyDistance: 2em;
+@replyHeight: 12em;
+@replyFontSize: 1em;
+@replyMaxWidth: 40em;
+
+@commentReplyDistance: @replyDistance;
+@commentReplyMaxWidth: 30em;

 /*-------------------
      Variations
--------------------*/
+--------------------*/
+
+/* Threaded */
+@threadedCommentVerticalOffset: -1.5em;
+@threadedCommentHorizontalOffset: (@avatarWidth / 2);
+@threadedCommentBoxShadow: -1px 0px 0px rgba(0, 0, 0, 0.05);
+
+@threadedCommentVerticalDistance: 2em;
+@threadedCommentHorizontalDistance: 2em;
+
+/* Minimal */
+@minimalActionPosition: absolute;
+@minimalActionTop: 0px;
+@minimalActionRight: 0px;
+@minimalActionLeft: auto;
+
+@minimalTransitionDelay: 0.1s;
+@minimalEasing: @defaultEasing;
+@minimalDuration: 0.2s;
+@minimalTransition: opacity @minimalDuration @minimalEasing;
+
+/* Sizes */
+@small: 0.9em;
+@medium: 1em;
+@large: 1.1em;
+@huge: 1.2em;