Add page showing priority of two SMS providers

It’s not very useful to know the priority of one provider without
knowing the other. And these pages were never really designed, so they
weren’t super easy to understand anyway.

This commit adds a page that takes the first two text message providers
and shows their relative priority against each other.

It follows the design of the events page, as a pattern for showing a
log of historical events.

app/assets/stylesheets/views/history.scss

@@ -26,4 +26,61 @@ $item-top-padding: $gutter-half;
     color: $secondary-text-colour;
   }
 
+  &-percentage {
+
+    $axis-thickness: 2px;
+    border-bottom: $axis-thickness solid $black;
+    position: relative;
+    margin-bottom: 30px;
+    height: 35px;
+
+    &:before,
+    &:after {
+      content: "";
+      position: absolute;
+      bottom: -6px;
+      left: 0;
+      height: 10px;
+      width: $axis-thickness;
+      background: $black;
+    }
+
+    &:after {
+      left: auto;
+      right: 0;
+    }
+
+    &-marker {
+      $size: 20px;
+      $border-thickness: 7px;
+      $text-width: 100px;
+      display: block;
+      width: $size;
+      height: $size;
+      position: absolute;
+      top: 35px - ($size / 2) - ($border-thickness - ($axis-thickness / 2));
+      margin-left: 0 - ($size / 2) - $border-thickness;
+      background: $black;
+      border-radius: $size;
+      border: $border-thickness solid $white;
+    }
+
+    &-left-label,
+    &-right-label {
+      width: 100%;
+      position: absolute;
+      top: 0;
+    }
+
+    &-left-label {
+      left: 0;
+    }
+
+    &-right-label {
+      right: 0;
+      text-align: right;
+    }
+
+  }
+
 }