condense device details ui

This commit is contained in:
liamcottle
2024-09-02 12:18:29 +12:00
parent ff9c5c8b16
commit f274caf050

View File

@ -667,71 +667,36 @@
<div class="bg-gray-200 p-2 font-semibold">Details</div> <div class="bg-gray-200 p-2 font-semibold">Details</div>
<ul role="list" class="flex-1 divide-y divide-gray-200"> <ul role="list" class="flex-1 divide-y divide-gray-200">
<li> <!-- long name -->
<div class="relative flex items-center"> <li class="flex p-3">
<div class="block flex-1 px-4 py-2"> <div class="text-sm font-medium text-gray-900">Long Name</div>
<div class="relative flex min-w-0 flex-1 items-center"> <div class="ml-auto text-sm text-gray-700">{{ selectedNode.long_name }}</div>
<div class="truncate">
<p class="truncate text-sm font-medium text-gray-900">Long Name</p>
<p class="truncate text-sm text-gray-700">{{ selectedNode.long_name }}</p>
</div>
</div>
</div>
</div>
</li> </li>
<li> <!-- short name -->
<div class="relative flex items-center"> <li class="flex p-3">
<div class="block flex-1 px-4 py-2"> <div class="text-sm font-medium text-gray-900">Short Name</div>
<div class="relative flex min-w-0 flex-1 items-center"> <div class="ml-auto text-sm text-gray-700">{{ selectedNode.short_name }}</div>
<div class="truncate">
<p class="truncate text-sm font-medium text-gray-900">Short Name</p>
<p class="truncate text-sm text-gray-700">{{ selectedNode.short_name }}</p>
</div>
</div>
</div>
</div>
</li> </li>
<li> <!-- role -->
<div class="relative flex items-center"> <li class="flex p-3">
<div class="block flex-1 px-4 py-2"> <div class="text-sm font-medium text-gray-900">Role</div>
<div class="relative flex min-w-0 flex-1 items-center"> <div class="ml-auto text-sm text-gray-700">{{ selectedNode.role_name }}</div>
<div class="truncate">
<p class="truncate text-sm font-medium text-gray-900">Role</p>
<p class="truncate text-sm text-gray-700">{{ selectedNode.role_name }}</p>
</div>
</div>
</div>
</div>
</li> </li>
<li> <!-- hardware -->
<div class="relative flex items-center"> <li class="flex p-3">
<div class="block flex-1 px-4 py-2"> <div class="text-sm font-medium text-gray-900">Hardware</div>
<div class="relative flex min-w-0 flex-1 items-center"> <div class="ml-auto text-sm text-gray-700">{{ selectedNode.hardware_model_name }}</div>
<div class="truncate">
<p class="truncate text-sm font-medium text-gray-900">Hardware</p>
<p class="truncate text-sm text-gray-700">{{ selectedNode.hardware_model_name }}</p>
</div>
</div>
</div>
</div>
</li> </li>
<li> <!-- firmware version -->
<div class="relative flex items-center"> <li class="flex p-3">
<div class="block flex-1 px-4 py-2"> <div class="text-sm font-medium text-gray-900">Firmware</div>
<div class="relative flex min-w-0 flex-1 items-center"> <div class="ml-auto text-sm text-gray-700">
<div class="truncate">
<p class="truncate text-sm font-medium text-gray-900">Firmware</p>
<p class="truncate text-sm text-gray-700">
<span v-if="selectedNode.firmware_version">{{ selectedNode.firmware_version }}</span> <span v-if="selectedNode.firmware_version">{{ selectedNode.firmware_version }}</span>
<span v-else class="text-gray-500">???</span> <span v-else>???</span>
</p>
</div>
</div>
</div>
</div> </div>
</li> </li>