start of masthead changes

assets/styles/base/_typography.scss

@@ -11,7 +11,8 @@ H1, H2, H3, H4, H5, H6 {
 }
 
 H1 {
-  font-size: 40px;
+  font-size: 24px;
+  font-weight: 400;
 }
 
 H2 {

assets/translations/en-us.yaml

@@ -101,7 +101,7 @@ infoBoxCluster:
 
 resourceDetail:
   header:
-    view: '<a href="{typeLink}">{type}</a>: {name}'
+    view: '{name}'
     create: 'Create <a href="{typeLink}">{type}</a>'
     edit: 'Edit <a href="{typeLink}">{type}</a>: {name}'
     clone: 'Clone from <a href="{typeLink}">{type}</a>: {name}'

components/DetailTop.vue

@@ -12,7 +12,7 @@ export default {
 <template>
   <div class="detail-top">
     <div v-for="col in columns" :key="col.title">
-      <span>{{ col.title }}</span>
+      <span>{{ col.title }}: </span>
       <slot :name="col.name">
         <span>{{ col.content || col.content===0 ? col.content : col.fallback || 'n/a' }}</span>
       </slot>
@@ -24,28 +24,14 @@ export default {
 .detail-top {
     display: flex;
     flex-wrap: wrap;
-    background: var(--box-bg);
+    border-top: solid thin var(--border);
-    border: solid thin var(--border);
+    border-bottom: solid thin var(--border);
-    border-radius: var(--border-radius);
+    padding: 15px 0;
-    justify-content: space-between;
 
     & > * {
         padding: 0 10px;
-        margin: 15px 0;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items:center;
-        flex-grow:1;
-
         & >:first-child {
-            padding-bottom: 5px;
             color: var(--input-placeholder);
-
-        }
-
-        &:not(:last-child) {
-            border-right: 1px solid var(--border);
         }
 
         &:last-child {

components/form/LabeledSelect.stories.js

@@ -0,0 +1,174 @@
+<script>
+import LabeledFormElement from '@/mixins/labeled-form-element';
+import { findBy } from '@/utils/array';
+import { get } from '@/utils/object';
+
+export default {
+  mixins: [LabeledFormElement],
+
+  props: {
+    options: {
+      type:    Array,
+      default: null,
+    },
+    grouped: {
+      type:    Boolean,
+      default: false,
+    },
+    disabled: {
+      type:    Boolean,
+      default: false
+    },
+    multiple: {
+      type:    Boolean,
+      default: false
+    },
+    optionLabel: {
+      type:    String,
+      default: 'label'
+    }
+  },
+  data() {
+    return { selectedDisplay: 'block' };
+  },
+  computed: {
+    currentLabel() {
+      let entry;
+
+      if ( this.grouped ) {
+        for ( let i = 0 ; i < this.options.length && !entry ; i++ ) {
+          entry = findBy(this.options[i].items || [], 'value', this.value);
+        }
+      } else {
+        entry = findBy(this.options || [], 'value', this.value);
+      }
+
+      if ( entry ) {
+        return entry.label;
+      }
+
+      return this.getOptionLabel(this.value);
+    },
+    shownValue() {
+      return this.value ? this.value : ' ';
+    }
+  },
+
+  methods: {
+    onFocus() {
+      this.onFocusLabeled();
+      if ( this.$refs.input ) {
+        this.$refs.input.placeholder = this.placeholder;
+      }
+    },
+
+    onBlur() {
+      this.onBlurLabeled();
+      if ( this.$refs.input ) {
+        this.$refs.input.placeholder = '';
+      }
+    },
+
+    searchFocus() {
+      this.selectedDisplay = 'none';
+    },
+
+    searchBlur() {
+      this.selectedDisplay = 'block';
+    },
+
+    getOptionLabel(option) {
+      if (get(option, this.optionLabel)) {
+        return get(option, this.optionLabel);
+      } else {
+        return option;
+      }
+    },
+    get
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div v-if="isView">
+      <div :class="{'labeled-input': true, raised, focused, empty, [mode]: true}">
+        <label>
+          {{ label }}
+          <span v-if="required && !value" class="required">*</span>
+        </label>
+        <label class="corner">
+          <slot name="corner" />
+        </label>
+        <div class="selected" :class="{'no-label':!label}" :style="{display:selectedDisplay}">
+          {{ currentLabel }}
+        </div>
+      </div>
+    </div>
+    <v-select
+      v-else
+      ref="input"
+      class="inline"
+      v-bind="$attrs"
+      :disabled="isView || disabled"
+      :value="shownValue"
+      :options="options"
+      :multiple="multiple"
+      :get-option-label="opt=>getOptionLabel(opt)"
+      :get-option-key="opt=>optionKey ? get(opt, optionKey) : getOptionLabel(opt)"
+      :label="optionLabel"
+      @input="e=>e.value ? $emit('input', e.value) : $emit('input', e) "
+      @search:focus="searchFocus"
+      @search:blur="searchBlur"
+      @focus="onFocus"
+      @blur="onBlur"
+    >
+      <template v-slot:selected-option-container>
+        <div :class="{'labeled-input': true, raised, focused, empty, [mode]: true}" :style="{border:'none'}">
+          <label>
+            {{ label }}
+            <span v-if="required && !value" class="required">*</span>
+          </label>
+          <label class="corner">
+            <slot name="corner" />
+          </label>
+          <div v-if="isView">
+            {{ currentLabel }}
+          </div>
+          <div v-else class="selected" :class="{'no-label':!label}" :style="{display:selectedDisplay}">
+            {{ currentLabel }}&nbsp;
+          </div>
+        </div>
+      </template>
+    </v-select>
+  </div>
+</template>
+
+<style lang='scss'>
+.v-select.inline {
+
+  & .labeled-input {
+    background-color: rgba(0,0,0,0);
+    padding-right:0;
+    display: flex;
+    flex-direction: column;
+
+     & *{
+      background-color: rgba(0,0,0,0);
+    }
+  }
+
+  & .vs__search {
+    background-color: none;
+    padding: 3px 10px 0px 10px;
+  }
+
+  &  .selected{
+    position:relative;
+    top: 1.4em;
+    &.no-label{
+      top:7px;
+    }
+  }
+}
+</style>

layouts/default.vue

@@ -270,7 +270,6 @@ export default {
       .actions {
         grid-area: actions;
         text-align: right;
-        padding-top: 10px;
       }
     }