From a1313ae1c5f6511339b4c269b61a5954ae0d1f14 Mon Sep 17 00:00:00 2001
From: Richard <richard.bowman@cantab.net>
Date: Mon, 31 May 2021 12:43:21 +0100
Subject: [PATCH] Fix CSS for plugin list

---
 .../imjoyComponents/imjoyPluginCard.vue       | 24 ++++++++++++-------
 .../tabContentComponents/imjoyContent.vue     |  6 ++---
 2 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/imjoyComponents/imjoyPluginCard.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/imjoyComponents/imjoyPluginCard.vue
index 4c4ae99a..9e7892af 100644
--- a/openflexure_microscope/api/static/src/components/tabContentComponents/imjoyComponents/imjoyPluginCard.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/imjoyComponents/imjoyPluginCard.vue
@@ -1,26 +1,32 @@
 <template>
   <div
-    class="uk-card uk-card-hover uk-card-default uk-width-medium"
+    class="uk-card uk-card-hover uk-card-small uk-card-default uk-margin"
     :class="{ 'uk-card-secondary': $store.state.darkMode }"
   >
-    <a href="#" class="uk-link-text" @click="$emit('click')">
-      <h3 class="uk-card-header">{{ name }}</h3>
-      <div class="uk-card-body">
-        <div class="uk-align-center">
+    <div class="uk-card-body">
+      <div class="uk-grid-small uk-flex-middle" uk-grid>
+        <div class="uk-width-auto">
           <img
             v-if="iconURL"
-            class="uk-width-1-1"
+            style="height:50px"
             :data-src="iconURL"
             :alt="name + ' icon'"
             uk-img
           />
-          <i v-if="!iconURL" class="material-icons" style="font-size:96px">
+          <i v-if="!iconURL" class="material-icons" style="font-size:50px">
             {{ iconName }}
           </i>
         </div>
-        <slot></slot>
+        <div class="uk-width-expand">
+            <h3 class="uk-card-title uk-margin-remove-bottom">{{name}}</h3>
+            <p class="uk-text-meta uk-margin-remove-top"><time datetime="2016-04-01T19:00">April 01, 2016</time></p>
+        </div>
+        <div class="uk-width-auto">
+          <button class="uk-button" @click="$emit('click')"><slot name="buttonText">Launch</slot></button>
+        </div>
       </div>
-    </a>
+      <slot></slot>
+    </div>
   </div>
 </template>
 
diff --git a/openflexure_microscope/api/static/src/components/tabContentComponents/imjoyContent.vue b/openflexure_microscope/api/static/src/components/tabContentComponents/imjoyContent.vue
index 3c79c8d2..4e99ed88 100644
--- a/openflexure_microscope/api/static/src/components/tabContentComponents/imjoyContent.vue
+++ b/openflexure_microscope/api/static/src/components/tabContentComponents/imjoyContent.vue
@@ -8,13 +8,13 @@
       max="100"
     ></progress>
 
-    <div class="uk-child-width-1-3@m uk-grid-match" uk-grid>
+    <div class="uk-flex uk-flex-column uk-margin uk-margin-left uk-margin-right">
       <imjoy-plugin-card
-        name="New"
+        name="Load From URL"
         icon-u-r-l="https://imjoy.io/static/img/imjoy-icon.svg"
         @click="loadPluginDialog()"
       >
-        Load plugin from URL
+        <template v-slot:buttonText>Open</template>
       </imjoy-plugin-card>
       <imjoy-plugin-card
         name="ImageJ.JS"