Fix CSS for plugin list

This commit is contained in:
Richard 2021-05-31 12:43:21 +01:00
parent 9b75e8ec05
commit a1313ae1c5
2 changed files with 18 additions and 12 deletions

View file

@ -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>

View file

@ -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"