reordered img

web/src/components/ModelEntry.vue

@@ -1,69 +1,71 @@
 <template>
   <div class="flex items-center p-4 hover:bg-primary-light rounded-lg mb-2 shadow-lg border-2 cursor-pointer"
     @click.stop="toggleSelected" :class="selected ? ' border-primary-light' : 'border-transparent'">
-    <div class="flex-shrink-0">
-      <img :src="getImgUrl()" @error="defaultImg($event)" class="w-10 h-10 rounded-lg object-fill text-red-700">
-      <!-- <i :class="`fas ${icon} text-xl`"></i> -->
-    </div>
-    <div v-if="model.isCustomModel">
-      <h3 class="font-bold font-large text-lg">
-        {{ title }}
-      </h3>
 
+
+    <div class="flex-1" v-if="model.isCustomModel">
+      <div class="flex gap-3 items-center">
+        <img :src="getImgUrl()" @error="defaultImg($event)" class="w-10 h-10 rounded-lg object-fill">
+        <h3 class="font-bold font-large text-lg">
+          {{ title }}
+        </h3>
+      </div>
     </div>
     <div class="flex-1" v-if="!model.isCustomModel">
-      <h3 class="font-bold font-large text-lg">
+      <div class="flex gap-3 items-center">
-        {{ title }}
+        <img :src="getImgUrl()" @error="defaultImg($event)" class="w-10 h-10 rounded-lg object-fill">
-      </h3>
+        <h3 class="font-bold font-large text-lg">
-
+          {{ title }}
-        <div class="flex flex-shrink-0">
+        </h3>
-          <b>Manual download:&nbsp;</b>
-          <a :href="path" @click.stop class="flex hover:text-secondary duration-75 active:scale-90"
-            title="Download this manually (faster) and put it in the models/<your backend> folder then refresh">
-            <i data-feather="link" class="w-5 p-1"></i>
-            {{ title }}
-          </a>
-        </div>
-        <div class="flex flex-shrink-0">
-          <b>License:&nbsp;</b>
-          {{ license }}
-        </div>
-        <div class="flex flex-shrink-0">
-          <b>Owner:&nbsp;</b>
-          <a :href="owner_link" target="_blank" @click.stop class="flex hover:text-secondary duration-75 active:scale-90"
-            title="Owner's profile">
-            <i data-feather="link" class="w-5 p-1"></i>
-            {{ owner }}
-          </a>
-        </div>
-        <b>Description:&nbsp;</b><br>
-        <p class="opacity-80">{{ description }}</p>
       </div>
-      <div class="flex-shrink-0" v-if="!model.isCustomModel">
+      <div class="flex flex-shrink-0">
-        <button class="px-4 py-2 rounded-md text-white font-bold transition-colors duration-300"
+        <b>Manual download:&nbsp;</b>
-          :class="[isInstalled ? 'bg-red-500 hover:bg-red-600' : 'bg-green-500 hover:bg-green-600']"
+        <a :href="path" @click.stop class="flex hover:text-secondary duration-75 active:scale-90"
-          :disabled="installing || uninstalling" @click.stop="toggleInstall">
+          title="Download this manually (faster) and put it in the models/<your backend> folder then refresh">
-          <template v-if="installing">
+          <i data-feather="link" class="w-5 p-1"></i>
-            <div class="flex items-center space-x-2">
+          {{ title }}
-              <div class="h-2 w-20 bg-gray-300 rounded">
+        </a>
-                <div :style="{ width: progress + '%' }" class="h-full bg-red-500 rounded"></div>
-              </div>
-              <span>Installing...{{ Math.floor(progress) }}%</span>
-            </div>
-          </template>
-          <template v-else-if="uninstalling">
-            <div class="flex items-center space-x-2">
-              <div class="h-2 w-20 bg-gray-300 rounded">
-                <div :style="{ width: progress + '%' }" class="h-full bg-green-500"></div>
-              </div>
-              <span>Uninstalling...</span>
-            </div>
-          </template>
-          <template v-else>
-            {{ isInstalled ? 'Uninstall' : 'Install' }}
-          </template>
-        </button>
       </div>
+      <div class="flex flex-shrink-0">
+        <b>License:&nbsp;</b>
+        {{ license }}
+      </div>
+      <div class="flex flex-shrink-0">
+        <b>Owner:&nbsp;</b>
+        <a :href="owner_link" target="_blank" @click.stop class="flex hover:text-secondary duration-75 active:scale-90"
+          title="Owner's profile">
+          <i data-feather="link" class="w-5 p-1"></i>
+          {{ owner }}
+        </a>
+      </div>
+      <b>Description:&nbsp;</b><br>
+      <p class="opacity-80">{{ description }}</p>
+    </div>
+    <div class="flex-shrink-0" v-if="!model.isCustomModel">
+      <button class="px-4 py-2 rounded-md text-white font-bold transition-colors duration-300"
+        :class="[isInstalled ? 'bg-red-500 hover:bg-red-600' : 'bg-green-500 hover:bg-green-600']"
+        :disabled="installing || uninstalling" @click.stop="toggleInstall">
+        <template v-if="installing">
+          <div class="flex items-center space-x-2">
+            <div class="h-2 w-20 bg-gray-300 rounded">
+              <div :style="{ width: progress + '%' }" class="h-full bg-red-500 rounded"></div>
+            </div>
+            <span>Installing...{{ Math.floor(progress) }}%</span>
+          </div>
+        </template>
+        <template v-else-if="uninstalling">
+          <div class="flex items-center space-x-2">
+            <div class="h-2 w-20 bg-gray-300 rounded">
+              <div :style="{ width: progress + '%' }" class="h-full bg-green-500"></div>
+            </div>
+            <span>Uninstalling...</span>
+          </div>
+        </template>
+        <template v-else>
+          {{ isInstalled ? 'Uninstall' : 'Install' }}
+        </template>
+      </button>
+    </div>
 
   </div>
 </template>
@@ -94,7 +96,7 @@ export default {
       progress: 0,
       installing: false,
       uninstalling: false,
-      failedToLoad:false
+      failedToLoad: false
     };
   },
   mounted() {
@@ -107,7 +109,7 @@ export default {
   methods: {
     getImgUrl() {
 
-      if (this.icon === '/images/default_model.png'){
+      if (this.icon === '/images/default_model.png') {
         return defaultImgPlaceholder
       }