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