Index and Detail field presentation

package.json

@@ -17,8 +17,8 @@
     },
     "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^1.2.5",
-        "@fortawesome/free-solid-svg-icons": "^5.4.0",
         "@fortawesome/free-regular-svg-icons": "^5.4.0",
+        "@fortawesome/free-solid-svg-icons": "^5.4.0",
         "@fortawesome/pro-light-svg-icons": "^5.4.0",
         "@fortawesome/pro-regular-svg-icons": "^5.4.0",
         "@fortawesome/pro-solid-svg-icons": "^5.4.0",
@@ -27,6 +27,7 @@
         "npm": "^6.4.1",
         "tiptap": "^0.17.0",
         "tiptap-extensions": "^0.19.0",
-        "vue": "^2.5.0"
+        "vue": "^2.5.0",
+        "vue-truncate-collapsed": "^2.1.0"
     }
 }

resources/js/components/DetailField.vue

@@ -1,9 +1,41 @@
 <template>
-    <panel-item :field="field" />
+    <div class="tiptap-detail-field py-4">
+        <truncate
+            clamp="Show More"
+            :length="200"
+            less="Show Less"
+            type="html"
+            :text="field.value"
+        >
+
+        </truncate>
+    </div>
 </template>
 
 <script>
+import truncate from 'vue-truncate-collapsed'
+
 export default {
     props: ['resource', 'resourceName', 'resourceId', 'field'],
+
+    components: {
+        truncate,
+    },
 }
 </script>
+
+<style>
+.tiptap-detail-field h1, .tiptap-detail-field h2, .tiptap-detail-field h3, .tiptap-detail-field h4, .tiptap-detail-field h5, .tiptap-detail-field h6 {
+    font-size: 1em;
+    margin-bottom: 0.35em;
+}
+
+.tiptap-detail-field a {
+    color: var(--primary);
+}
+
+.tiptap-detail-field p, ul, ol, blockquote, pre {
+    margin-bottom: 0.7em;
+}
+</style>
+

resources/js/components/IndexField.vue

@@ -1,9 +1,43 @@
 <template>
-    <span>{{ field.value }}</span>
+    <div class="tiptap-index-field py-4">
+        <truncate
+            clamp="Show More"
+            :length="200"
+            less="Show Less"
+            type="html"
+            :text="field.value"
+        >
+
+        </truncate>
+    </div>
 </template>
 
+
+
 <script>
+import truncate from 'vue-truncate-collapsed'
+
 export default {
     props: ['resourceName', 'field'],
+
+    components: {
+        truncate,
+    },
 }
 </script>
+
+<style>
+.tiptap-index-field h1, .tiptap-index-field h2, .tiptap-index-field h3, .tiptap-index-field h4, .tiptap-index-field h5, .tiptap-index-field h6 {
+    font-size: 1em;
+    margin-bottom: 0.35em;
+}
+
+.tiptap-index-field a {
+    color: var(--primary);
+}
+
+.tiptap-index-field p, ul, ol, blockquote, pre {
+    margin-bottom: 0.7em;
+}
+</style>
+

yarn.lock

@@ -4276,6 +4276,11 @@ html-minifier@^3.0.1:
     relateurl "0.2.x"
     uglify-js "3.4.x"
 
+html-truncate@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/html-truncate/-/html-truncate-1.2.2.tgz#db2e331dcf1cba0bd432a507d16e988609f2575f"
+  integrity sha1-2y4zHc8cugvUMqUH0W6YhgnyV18=
+
 http-cache-semantics@^3.8.1:
   version "3.8.1"
   resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz#39b0e16add9b605bf0a9ef3d9daaf4843b4cacd2"
@@ -9780,6 +9785,13 @@ vue-template-es2015-compiler@^1.6.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz#dc42697133302ce3017524356a6c61b7b69b4a18"
   integrity sha512-x3LV3wdmmERhVCYy3quqA57NJW7F3i6faas++pJQWtknWT+n7k30F4TVdHvCLn48peTJFRvCpxs3UuFPqgeELg==
 
+vue-truncate-collapsed@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/vue-truncate-collapsed/-/vue-truncate-collapsed-2.1.0.tgz#19404ea332647542a7e81f4773d09749af4056bc"
+  integrity sha512-dEI682h9YAfVYkfsTCQYmNjwzJZqvaMNB0WqtqX0EL3cApZv7pjRuQKG2IvaKTI59NSco8NreMRsviL46RDRrQ==
+  dependencies:
+    html-truncate "^1.2.2"
+
 vue@^2.5.0:
   version "2.5.17"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.17.tgz#0f8789ad718be68ca1872629832ed533589c6ada"