moved ontology widget to top of page for better UX

Author: tdn

packages/prez-ui/app/components/ItemPage.vue

@@ -99,6 +99,39 @@ function toggleOpen(value:string) {
                     <div class="mt-4 mb-12 overflow-auto">
                         <slot name="item-section" :data="data" :is-concept-scheme="isConceptScheme" :top-concepts-url="topConceptsUrl" :is-ontology="isOntology">
                             <slot name="item-top" :data="data" :is-concept-scheme="isConceptScheme" :top-concepts-url="topConceptsUrl" :is-ontology="isOntology"></slot>
+
+                            <div class="ontology-widget" v-if="isOntology">
+                              <slot name="item-ontology-classes" :data="data" :is-concept-scheme="isConceptScheme" :is-ontology="isOntology">
+                                  <div class="mt-6" v-if="isOntology && (data.data as PrezOntologyNode).ontologyClasses.length > 0">
+                                      <div class="pz-concept-node h-9">
+                                        <b>Classes</b>
+                                        <Button variant="ghost" size="icon" @click="toggleOpen('classes')">
+                                            <ChevronRight v-if="!open.includes('classes')" class="size-4" />
+                                            <ChevronDown v-else class="size-4" />
+                                        </Button>
+                                      </div>
+                                      <div v-if="open.includes('classes')" class="mt-4 flex flex-col gap-2 pz-concept-children">
+                                          <Node v-for="ontologyClass in (data.data as PrezOntologyNode).ontologyClasses" :term="ontologyClass" />
+                                      </div>
+                                  </div>
+                              </slot>
+
+                              <slot name="item-ontology-properties" :data="data" :is-concept-scheme="isConceptScheme" :is-ontology="isOntology">
+                                  <div class="mt-6" v-if="isOntology && (data.data as PrezOntologyNode).ontologyProperties.length > 0">
+                                      <div class="pz-concept-node h-9">
+                                        <b>Properties</b>
+                                        <Button variant="ghost" size="icon" @click="toggleOpen('properties')">
+                                            <ChevronRight v-if="!open.includes('properties')" class="size-4" />
+                                            <ChevronDown v-else class="size-4" />
+                                        </Button>
+                                      </div>
+                                      <div v-if="open.includes('properties')" class="mt-4 flex flex-col gap-2 pz-concept-children">
+                                          <Node v-for="ontologyProperty in (data.data as PrezOntologyNode).ontologyProperties" :term="ontologyProperty" />
+                                      </div>
+                                  </div>
+                              </slot>
+                            </div>
+
                             <slot name="item-table" :data="data" :is-concept-scheme="isConceptScheme" :top-concepts-url="topConceptsUrl" :is-ontology="isOntology">
 
                                 <ItemTable
@@ -141,36 +174,6 @@ function toggleOpen(value:string) {
                                 </div>
                             </slot>
 
-                            <slot name="item-ontology-classes" :data="data" :is-concept-scheme="isConceptScheme" :is-ontology="isOntology">
-                                <div class="mt-6" v-if="isOntology && (data.data as PrezOntologyNode).ontologyClasses.length > 0">
-                                    <div class="pz-concept-node h-9">
-                                      <b>Classes</b>
-                                      <Button variant="ghost" size="icon" @click="toggleOpen('classes')">
-                                          <ChevronRight v-if="!open.includes('classes')" class="size-4" />
-                                          <ChevronDown v-else class="size-4" />
-                                      </Button>
-                                    </div>
-                                    <div v-if="open.includes('classes')" class="mt-4 flex flex-col gap-2 pz-concept-children">
-                                        <Node v-for="ontologyClass in (data.data as PrezOntologyNode).ontologyClasses" :term="ontologyClass" />
-                                    </div>
-                                </div>
-                            </slot>
-
-                            <slot name="item-ontology-properties" :data="data" :is-concept-scheme="isConceptScheme" :is-ontology="isOntology">
-                                <div class="mt-6" v-if="isOntology && (data.data as PrezOntologyNode).ontologyProperties.length > 0">
-                                    <div class="pz-concept-node h-9">
-                                      <b>Properties</b>
-                                      <Button variant="ghost" size="icon" @click="toggleOpen('properties')">
-                                          <ChevronRight v-if="!open.includes('properties')" class="size-4" />
-                                          <ChevronDown v-else class="size-4" />
-                                      </Button>
-                                    </div>
-                                    <div v-if="open.includes('properties')" class="mt-4 flex flex-col gap-2 pz-concept-children">
-                                        <Node v-for="ontologyProperty in (data.data as PrezOntologyNode).ontologyProperties" :term="ontologyProperty" />
-                                    </div>
-                                </div>
-                            </slot>
-
                             <slot name="item-bottom" :data="data" :is-concept-scheme="isConceptScheme" :top-concepts-url="topConceptsUrl" :is-ontology="isOntology"></slot>
                         </slot>
                     </div>
@@ -200,4 +203,7 @@ function toggleOpen(value:string) {
 .pz-concept .pz-concept {
     padding-left:20px;
 }
+.ontology-widget {
+  margin-bottom: 1em;
+}
 </style>