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> <template>
<div <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 }" :class="{ 'uk-card-secondary': $store.state.darkMode }"
> >
<a href="#" class="uk-link-text" @click="$emit('click')"> <div class="uk-card-body">
<h3 class="uk-card-header">{{ name }}</h3> <div class="uk-grid-small uk-flex-middle" uk-grid>
<div class="uk-card-body"> <div class="uk-width-auto">
<div class="uk-align-center">
<img <img
v-if="iconURL" v-if="iconURL"
class="uk-width-1-1" style="height:50px"
:data-src="iconURL" :data-src="iconURL"
:alt="name + ' icon'" :alt="name + ' icon'"
uk-img 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 }} {{ iconName }}
</i> </i>
</div> </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> </div>
</a> <slot></slot>
</div>
</div> </div>
</template> </template>

View file

@ -8,13 +8,13 @@
max="100" max="100"
></progress> ></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 <imjoy-plugin-card
name="New" name="Load From URL"
icon-u-r-l="https://imjoy.io/static/img/imjoy-icon.svg" icon-u-r-l="https://imjoy.io/static/img/imjoy-icon.svg"
@click="loadPluginDialog()" @click="loadPluginDialog()"
> >
Load plugin from URL <template v-slot:buttonText>Open</template>
</imjoy-plugin-card> </imjoy-plugin-card>
<imjoy-plugin-card <imjoy-plugin-card
name="ImageJ.JS" name="ImageJ.JS"