metadata formatting

css/components/islandora_mods.css

@@ -7,7 +7,7 @@
   padding: 8px;
   border-radius: 4px;
   box-shadow: rgba(0, 0, 0, 0.39) 0px 5px 11px -2px;
-  line-height:1;
+  line-height: 1;
 }
 
 .grid-item .grid-item__image {
@@ -57,7 +57,7 @@
 .grid-item .views-label,
 .grid-item .views-field-member-of-title .field__label {
   font-size: 0.8em;
-  font-weight:bold;
+  font-weight: bold;
   font-family: var(--font-serif);
   color: var(--color--upei-red);
 }
@@ -90,7 +90,6 @@ div#block-olivesnews-content .view-header {
   font-weight: 600;
 }
 
-
 /* ============================================================
    SITE HEADER
    ============================================================ */
@@ -106,3 +105,37 @@ div#block-olivesnews-site-branding {
 .social-bar {
   background-image: url(../../images/natural_paper.png);
 }
+
+/* ============================================================
+   BROWSE PAGE
+   ============================================================ */
+.view-newspaper-directory img {
+  border: 1px solid #ccc;
+  padding: 2px;
+}
+.node--type-islandora-object .field {
+  display: flex;
+  border-bottom: 1px dotted #ccc;
+  margin:0;
+  padding-bottom: .5em;
+  margin-bottom: .5em;
+  .field__label {
+    flex: 0 0 150px;
+  }
+  .field__item {
+    flex: 1;
+    p {
+    margin: 0;}
+  }
+}
+/*.node--type-islandora-object .field--name-field-contributor-details {*/
+  /*display: flex;*/
+  /*gap: 12px; [> optional - space between label and text <]*/
+  /*[>align-items: center; [> optional - vertical alignment <]<]*/
+  /*.field__label {*/
+    /*flex: 0 0 150px;*/
+  /*}*/
+  /*.field__item {*/
+    /*flex: 1;*/
+  /*}*/
+/*}*/

templates/field/field--node--field-contributor-details--islandora-object.html.twig

@@ -0,0 +1,81 @@
+{#
+/**
+ * @file
+ * Theme override for a field.
+ *
+ * To override output, copy the "field.html.twig" from the templates directory
+ * to your theme's directory and customize it, just like customizing other
+ * Drupal templates such as page.html.twig or node.html.twig.
+ *
+ * Instead of overriding the theming for all fields, you can also just override
+ * theming for a subset of fields using
+ * @link themeable Theme hook suggestions. @endlink For example,
+ * here are some theme hook suggestions that can be used for a field_foo field
+ * on an article node type:
+ * - field--node--field-foo--article.html.twig
+ * - field--node--field-foo.html.twig
+ * - field--node--article.html.twig
+ * - field--field-foo.html.twig
+ * - field--text-with-summary.html.twig
+ * - field.html.twig
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the title.
+ * - label: The label for the field.
+ * - multiple: TRUE if a field can contain multiple items.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ *
+ * @see template_preprocess_field()
+ */
+#}
+{%
+  set classes = [
+    'field',
+    'field--name-' ~ field_name|clean_class,
+    'field--type-' ~ field_type|clean_class,
+    'field--label-' ~ label_display,
+    label_display == 'inline' ? 'clearfix',
+  ]
+%}
+{%
+  set title_classes = [
+    'field__label',
+    label_display == 'visually_hidden' ? 'visually-hidden',
+  ]
+%}
+
+{% if label_hidden %}
+  {% if multiple %}
+    <div{{ attributes.addClass(classes, 'field__items') }}>
+      {% for item in items %}
+        <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
+      {% endfor %}
+    </div>
+  {% else %}
+    {% for item in items %}
+      <div{{ attributes.addClass(classes, 'field__item') }}>{{ item.content }}</div>
+    {% endfor %}
+  {% endif %}
+{% else %}
+  <div{{ attributes.addClass(classes) }}>
+    <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
+    {% if multiple %}
+      <div class="field__items">
+    {% endif %}
+    {% for item in items %}
+      <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
+    {% endfor %}
+    {% if multiple %}
+      </div>
+    {% endif %}
+  </div>
+{% endif %}