Merge pull request #302 from 18F/ab/activity-log-ux

UX fixes for activity log

docs/src/components/components/status-pill/README.md

@@ -6,11 +6,24 @@ The **status pill** component is a way to communicate status of various applicat
 ## Use
 
 To use the **status pill** component, use the @extend `.status-pill` within the SCSS.
-```
-.activity_log-item-error,
-.activity_log-item-success,
-.activity_log-item-warning {
 
+```scss
+.stat-error,
+.stat-warning {
   &::before {
     @extend .status-pill;
-  }```
+  }
+}
+
+.stat-error {
+  &::before {
+    border-color: $color-error;
+  }
+}
+
+.stat-warning {
+  &::before {
+    border-color: $color-warning;
+  }
+}
+```

docs/src/components/components/status-pill/status-pill.config.yml

@@ -7,14 +7,11 @@ variants:
     context:
       text: "success"
       modifier: success
-      patternbreak: "<br/>"
   - name: warning
     context:
       text: "warning"
       modifier: warning
-      patternbreak: "<br/>"
   - name: error
     context:
       text: "error"
       modifier: error
-      patternbreak: "<br/>"

docs/src/components/components/status-pill/status-pill.html

@@ -1,4 +1,5 @@
-
-<span class="stat stat-{{ modifier }}">usage {{ text }}</span>{{ patternbreak }}
-
-<div class="activity_log-item activity_log-item-{{ modifier }}">activity log {{ text }}</div>{{ patternbreak }}
+<div class="stat stat-{{ modifier }}">
+  <h2 class="stat-header">Instance memory used</h2>
+  <span class="stat-primary">10 MB</span>
+  <span class="stat-info"><span>460 KB available</span></span>
+</div>

docs/src/components/features/activity-log/README.md

@@ -0,0 +1,5 @@
+# Activity Log
+
+The activity log shows recent logs and events for a particular entity.
+
+The log lines can be expandable to show more detail.

docs/src/components/features/activity-log/activity-log.config.yml

@@ -0,0 +1,2 @@
+title: Activity Log
+status: beta

docs/src/components/features/activity-log/activity-log.html

@@ -0,0 +1,40 @@
+<ul class="activity_log">
+  <li class="activity_log-item activity_log-item-warning">
+    <div class="activity_log-item_line">
+      <div class="elastic_line">
+	<div class="elastic_line-item elastic_line-item-start">
+	  <span class="activity_log-item_text"><span>user.ian updated the app.</span></span>
+	</div>
+	<div class="elastic_line-item elastic_line-item-end">
+	  <span class="activity_log-item_timestamp">Feb 10 2017 12:58:43 PST</span>
+	</div>
+      </div>
+    </div>
+  </li>
+  <li class="activity_log-item activity_log-item-error">
+    <div class="activity_log-item_line">
+      <div class="elastic_line">
+	<div class="elastic_line-item elastic_line-item-start">
+	  <span class="activity_log-item_text"><span>The app has crased because it failed to start.</span></span>
+	</div>
+	<div class="elastic_line-item elastic_line-item-end">
+	  <span class="activity_log-item_timestamp">Feb 10 2017 12:58:43 PST</span>
+	</div>
+      </div>
+    </div>
+  </li>
+  <li class="activity_log-item">
+    <div class="activity_log-item_line">
+      <div class="elastic_line">
+        <div class="elastic_line-item elastic_line-item-start">
+          <span class="activity_log-item_text">
+            <span>user.ian mapped <a href="//node-app.apps.cloud.gov">node-app.apps.cloud.gov</a> to the app.</span>
+          </span>
+        </div>
+        <div class="elastic_line-item elastic_line-item-end">
+          <span class="activity_log-item_timestamp">Jan 30 2017 13:56:44 PST</span>
+        </div>
+      </div>
+    </div>
+  </li>
+</ul>

src/css/components/activity_log.scss

@@ -11,34 +11,30 @@
   width: 100%;
 }
 
+.activity_log-item_line {
+  cursor: pointer;
+  font-family: $font-mono;
+  font-size: $sans-s3;
+  padding: $grid-1 0 $grid-1 $grid-2;
+  position: relative; // For status-pill anchoring
+}
+
 .activity_log-item_text {
-  position: relative;
   word-wrap: break-word;
 }
 
 .activity_log-item_timestamp {
-  cursor: pointer;
   text-align: right;
-}
 
-.activity_log-item_text,
-.activity_log-item_timestamp {
-  flex-grow: 1;
-  font-family: $font-mono;
-  font-size: $sans-s3;
-  max-width: initial;
+  // Override specificity of .panel span
+  .activity_log-item_line & {
+    font-family: $font-mono;
+  }
 }
 
 .activity_log-item {
-  align-items: center;
   border-bottom: 1px solid $color-lightgray;
-  cursor: pointer;
-  display: flex;
-  flex-wrap: wrap;
   margin: 0;
-  padding: $grid-1 0;
-  position: relative;
-  width: 100%;
 
   &:first-child {
     border-top: 1px solid $color-lightgray;
@@ -48,50 +44,36 @@
 .activity_log-item-error,
 .activity_log-item-success,
 .activity_log-item-warning {
-
-  padding-left: $grid-2;
-
-  &::before {
-    @extend .status-pill !optional;
-    height: 75%;
-  }
-
-  .activity_log-item_text {
-    font-family: $font-sans;
-    font-weight: 600;
+  // Override specificity of .panel span
+  .activity_log-item_line {
+    .activity_log-item_text {
+      font-family: $font-sans;
+      font-weight: 600;
+    }
   }
 }
 
 .activity_log-item-error {
-  .activity_log-item_timestamp {
-    color: $color-error;
+  .activity_log-item_line {
+    // Space above/below the status-pill
+    // Keeping height based on offset keeps the pill vertically aligned
+    $offset: 5px;
+
+    &::before {
+      @extend .status-pill !optional;
+      border-color: $color-error; // #e31c3d;
+      height: calc(100% - #{2 * $offset});
+      top: $offset;
+    }
   }
-
-  &::before {
-    border-color: $color-error; // #e31c3d;
-  }
-}
-
-.activity_log-item-warning {
-  &::before {
-    border-color: $color-gold;
-  }
-}
-
-.activity_log-item-success {
-  &::before {
-    border-color: $color-ok; //#2e8540;
-  }
-
 }
 
 .activity_log-item_raw {
-  flex-grow: 2;
+  margin-bottom: $grid-2;
   max-width: 60rem;
   min-width: 50rem;
 
   pre {
-    background-color: $color-gray-lightest;
     padding: .8rem;
   }
 }