css cleanups

leafo · Jan 18, 2024 · c8c169e · c8c169e
1 parent 909872c
commit c8c169e
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 33 deletions.
diff --git a/static/scss/main/community_post_list.scss b/static/scss/main/community_post_list.scss
@@ -65,7 +65,6 @@ $post_spacing: 30px;
 
  .post_author a {
  color: body_color_light();
- font-size: 18px;
 
  @include slighly_narrow {
  font-size: inherit;

diff --git a/static/scss/main/submission_comment_list.scss b/static/scss/main/submission_comment_list.scss
@@ -1,11 +1,10 @@
 .submission_comment_list {
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+
  .submission_comment, .comment_spacer {
  position: relative;
- margin: 0 0 40px 0;
-
- &:last-child {
- margin-bottom: 30px;
- }
  }
 
  .comment_spacer {
@@ -14,8 +13,6 @@
  margin-bottom: 0;
 
  &.animated {
- margin-bottom: 40px;
-
  .submission_comment {
  left: 0;
  @include opacity(2);
@@ -31,7 +28,8 @@
  }
 
  .submission_comment {
- @include clearfix;
+ display: flex;
+ gap: 10px;
 
  &.loading {
  position: relative;
@@ -57,39 +55,47 @@
  }
 
  .comment_avatar {
- float: left;
- margin-left: 20px;
- margin-top: 5px;
+ flex: none;
 
+ > a {
+ display: block;
+ }
  img {
- display: inline-block;
+ display: block;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  }
  }
 
- .comment_tools {
- float: right;
+ .comment_head {
+ display: flex;
+ gap: 10px;
+ }
+
+ .comment_author {
+ color: body_color_light();
+ }
 
+ .comment_tools {
+ margin-left: auto;
  a {
  color: body_color_lighter();
  }
  }
 
  .comment_content {
- margin-left: 80px;
- margin-right: 20px;
+ flex: 1;
+ min-width: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
  }
 
  .comment_time {
  color: body_color_lighter();
  }
 
- .comment_head {
- margin-bottom: 20px;
- }
-
  .comment_body.user_formatted {
  padding: 0;
  }

diff --git a/static/scss/main/submission_commenter.scss b/static/scss/main/submission_commenter.scss
@@ -30,7 +30,7 @@
  }
 
  .submission_comment_list {
- padding-top: 30px;
+ padding: 30px 20px;
  border-top: 1px solid border_color();
 
  &:empty {

diff --git a/static/scss/main/submission_list.scss b/static/scss/main/submission_list.scss
@@ -455,13 +455,12 @@
 
  .submission_footer {
  border-top: 1px solid border_color();
- position: relative;
- overflow: hidden;
+ display: flex;
+ gap: 5px;
 
  .footer_inside {
  padding: 10px 20px;
  position: relative;
- float: left;
  }
 
  a {
@@ -474,6 +473,7 @@
  .submission_tags {
  padding: 10px 20px;
  text-align: right;
+ margin-left: auto;
 
  .submission_tag {
  @include transition(all 0.2s ease);
@@ -483,6 +483,10 @@
  text-decoration: none;
  color: body_color_light();
 
+ &:first-child {
+ margin-left: 0;
+ }
+
  &:hover {
  color: link_color();
  }

diff --git a/widgets/submission_comment_list.moon b/widgets/submission_comment_list.moon
@@ -29,6 +29,13 @@ class SubmissionCommentList extends require "widgets.base"
 
  div class: "comment_content", ->
  div class: "comment_head", ->
+ if suspended
+ em "Suspended account"
+ else
+ a class: "comment_author", href: user_url, comment.user\name_for_display!
+
+ span class: "comment_time", title: comment.created_at, time_ago_in_words comment.created_at
+
  if @current_user
  can_edit = comment\allowed_to_edit @current_user
  can_delete = @current_user.id == @submission.user_id
@@ -49,14 +56,6 @@ class SubmissionCommentList extends require "widgets.base"
  raw " &middot; "
  a href: "#", class: "delete_btn", "Delete"
 
- if suspended
- em "Suspended account"
- else
- a href: user_url, comment.user\name_for_display!
-
- raw " &middot; "
- span class: "comment_time", title: comment.created_at, time_ago_in_words comment.created_at
-
  div class: "comment_body user_formatted", ->
  if suspended
  p class: "suspended_message", ->