Update stacked inlines

jet/static/jet/css/_changeform.scss

@@ -407,19 +407,52 @@ body.popup .submit-row {
 
   h3 {
     margin: 0;
-    color: #666;
-    padding: 5px;
-    font-size: 13px;
-    background: #f8f8f8;
-    border-top: 1px solid #eee;
-    border-bottom: 1px solid #eee;
-
-    span.delete {
+    background: linear-gradient(to top, $content-background-color 0%, $content-contrast-background-color 100%);
+    font-weight: bold;
+    color: $text-color;
+    padding: 20px 30px 0 30px;
+
+    .inline_label {
+      margin-left: 10px;
+      background: $content-contrast2-background-color;
+      color: $content-contrast2-text-color;
+      padding: 4px 8px;
+      border-radius: 5px;
+      font-size: 10px;
+      font-weight: normal;
+
+      ~ .inlinechangelink, ~ .inlineviewlink {
+        font-size: 18px;
+        margin-left: 10px;
+        vertical-align: middle;
+
+        &:before {
+          margin: 0;
+        }
+      }
+    }
+
+    span.delete, .inline-deletelink {
       float: right;
+      margin-left: 10px;
+      display: inline-block;
+      background: $danger-button-background-color;
+      color: $danger-button-text-color;
+      padding: 4px 8px;
+      border-radius: 5px;
+      font-size: 10px;
+      font-weight: normal;
+      vertical-align: middle;
 
       label {
-        margin-left: 2px;
-        font-size: 11px;
+        font-size: 10px;
+        vertical-align: middle;
+
+        &:before {
+          font-size: 10px;
+          color: $danger-button-text-color;
+          vertical-align: middle;
+        }
       }
     }
   }
@@ -431,7 +464,7 @@ body.popup .submit-row {
 
     &.module {
       background-color: inherit;
-      padding: 0;
+      box-sizing: border-box;
 
       h3 {
         margin: 0;
@@ -446,8 +479,12 @@ body.popup .submit-row {
   }
 }
 
-.inline-related.tabular fieldset.module table {
-  width: 100%;
+.inline-related.tabular fieldset.module {
+  padding: 0;
+
+  table {
+    width: 100%;
+  }
 }
 
 .inline-group {

jet/static/jet/js/src/layout-updaters/stacked-inline.js

@@ -0,0 +1,36 @@
+var $ = require('jquery');
+
+var StackedInlineUpdater = function($inline) {
+    this.$inline = $inline;
+};
+
+StackedInlineUpdater.prototype = {
+    updateObjectLinks: function() {
+        var $label = this.$inline.find('.inline_label');
+        var $changelink = $label.find('> .inlinechangelink');
+
+        $label
+            .find('+ a')
+            .addClass('inlineviewlink')
+            .text('');
+        $changelink
+            .text('')
+            .remove()
+            .insertAfter($label);
+    },
+    run: function() {
+        try {
+            this.updateObjectLinks();
+        } catch (e) {
+            console.error(e);
+        }
+
+        this.$inline.addClass('initialized');
+    }
+};
+
+$(document).ready(function() {
+    $('.inline-related:not(.tabular)').each(function() {
+        new StackedInlineUpdater($(this)).run();
+    });
+});

jet/static/jet/js/src/main.js

@@ -5,6 +5,7 @@ require('./layout-updaters/toolbar');
 require('./layout-updaters/user-tools');
 require('./layout-updaters/changeform-tabs');
 require('./layout-updaters/tabular-inline');
+require('./layout-updaters/stacked-inline');
 require('./features/side-menu');
 require('./features/filters');
 require('./features/changeform-tabs');