Change forum layout the same as issue history #19

farend · May 12, 2020 · ad3521a · ad3521a
1 parent 7329e64
commit ad3521a
Show file tree

Hide file tree

Showing 3 changed files with 203 additions and 0 deletions.
diff --git a/src/styles/_components.scss b/src/styles/_components.scss
@@ -10,5 +10,6 @@
 @import 'components/flash';
 @import 'components/modal';
 @import 'components/issues';
+@import 'components/boards';
 @import 'components/activity';
 @import 'components/gantts';
diff --git a/src/styles/components/_boards.scss b/src/styles/components/_boards.scss
@@ -0,0 +1,118 @@
+// forum(board)
+
+.controller-messages.action-show #content > div.message {
+  border-radius: 3px;
+  background-color: $color-history-bg;
+  border: 1px solid $color-history-border;
+  padding: $histry-padding;
+}
+
+#replies {
+  background-color: $color-history-bg;
+  border-radius: 0px 0px 3px 3px;
+  border: 1px solid $color-history-border;
+  padding-top: $histry-padding;
+  padding-left: 10px;
+
+  .message.reply {
+    padding: 8px 3px 3px 3px !important;
+    background-color: $color-history-bg;
+    position: relative;
+    overflow: visible;
+
+    &:before {
+      content: "";
+      width: $timeline-point-size;
+      height: $timeline-point-size;
+      background-color: $color-history-bg;
+      position: absolute;
+      left: 6px;
+      top: 16px;
+      border-radius: 50%;
+      box-shadow: 0 0 0 3px $color-timeline;
+      z-index: 1;
+    }
+
+    &:after {
+      content: "";
+      height: 100%;
+      width: 2px;
+      background-color: $color-timeline;
+      position: absolute;
+      left: 9px;
+      top: 0px;
+    }
+
+    &:first-of-type:after {
+      top: 15px;
+    }
+
+    &:last-of-type:after {
+      height: 18px;
+    }
+
+    &:first-of-type:last-of-type:after {
+      content: none;
+    }
+
+    .contextual {
+      padding-right: 10px;
+      padding-top: 5px;
+
+      a {
+        position: relative;
+        z-index: 5;
+      }
+    }
+
+    .wiki {
+      padding-left: 32px;
+    }
+
+    .contextual + h4 {
+      left: 20px;
+      position: relative;
+      margin: $note-title-margin;
+      border: none;
+      font-weight: bold;
+      background-color: $color-note-title-bg;
+      padding: $note-title-padding;
+      font-size: 0.9em;
+      border-radius: 4px;
+
+      a[href*="activity"][data-absolute-date*=":"] {
+        box-shadow: none;
+        padding: 0;
+      }
+
+      &:before {
+        content: '';
+        position: absolute;
+        left: -6px;
+        top: 8px;
+        width: 0;
+        height: 0;
+        border-top: 5px solid transparent;
+        border-bottom: 5px solid transparent;
+        border-right: 6px solid $color-note-title-bg;
+      }
+
+      .gravatar {
+        position: absolute;
+        left: -35px;
+        top: 4px;
+        z-index: 5;
+        margin-left: 0;
+      }
+    }
+
+    // #change-n               #note-n
+    &:target .contextual + h4, div:target .contextual + h4 {
+      background: $color-target-bg;
+
+      &:before {
+        border-right: 6px solid $color-target-bg;
+      }
+    }
+  }
+}
diff --git a/stylesheets/application.css b/stylesheets/application.css
@@ -593,6 +593,90 @@ fieldset#filters td.values input {
 .jstBlock .wiki-preview {
   border: 1px solid #dfe8f1; }
 
+.controller-messages.action-show #content > div.message {
+  border-radius: 3px;
+  background-color: #ffffff;
+  border: 1px solid #dfe8f1;
+  padding: 15px; }
+
+#replies {
+  background-color: #ffffff;
+  border-radius: 0px 0px 3px 3px;
+  border: 1px solid #dfe8f1;
+  padding-top: 15px;
+  padding-left: 10px; }
+  #replies .message.reply {
+    padding: 8px 3px 3px 3px !important;
+    background-color: #ffffff;
+    position: relative;
+    overflow: visible; }
+    #replies .message.reply:before {
+      content: "";
+      width: 8px;
+      height: 8px;
+      background-color: #ffffff;
+      position: absolute;
+      left: 6px;
+      top: 16px;
+      border-radius: 50%;
+      box-shadow: 0 0 0 3px #e5e5e5;
+      z-index: 1; }
+    #replies .message.reply:after {
+      content: "";
+      height: 100%;
+      width: 2px;
+      background-color: #e5e5e5;
+      position: absolute;
+      left: 9px;
+      top: 0px; }
+    #replies .message.reply:first-of-type:after {
+      top: 15px; }
+    #replies .message.reply:last-of-type:after {
+      height: 18px; }
+    #replies .message.reply:first-of-type:last-of-type:after {
+      content: none; }
+    #replies .message.reply .contextual {
+      padding-right: 10px;
+      padding-top: 5px; }
+      #replies .message.reply .contextual a {
+        position: relative;
+        z-index: 5; }
+    #replies .message.reply .wiki {
+      padding-left: 32px; }
+    #replies .message.reply .contextual + h4 {
+      left: 20px;
+      position: relative;
+      margin: 0 19px 0 10px;
+      border: none;
+      font-weight: bold;
+      background-color: #e9eaf1;
+      padding: 6px 9px;
+      font-size: 0.9em;
+      border-radius: 4px; }
+      #replies .message.reply .contextual + h4 a[href*="activity"][data-absolute-date*=":"] {
+        box-shadow: none;
+        padding: 0; }
+      #replies .message.reply .contextual + h4:before {
+        content: '';
+        position: absolute;
+        left: -6px;
+        top: 8px;
+        width: 0;
+        height: 0;
+        border-top: 5px solid transparent;
+        border-bottom: 5px solid transparent;
+        border-right: 6px solid #e9eaf1; }
+      #replies .message.reply .contextual + h4 .gravatar {
+        position: absolute;
+        left: -35px;
+        top: 4px;
+        z-index: 5;
+        margin-left: 0; }
+    #replies .message.reply:target .contextual + h4, #replies .message.reply div:target .contextual + h4 {
+      background: #DDEEFF; }
+      #replies .message.reply:target .contextual + h4:before, #replies .message.reply div:target .contextual + h4:before {
+        border-right: 6px solid #DDEEFF; }
+
 div#activity dt .time {
   color: #444; }