forked from FoundKeyGang/FoundKey
client: restyle app token view
This commit is contained in:
parent
3bf7deb233
commit
639fa74d43
2 changed files with 30 additions and 24 deletions
|
@ -11,19 +11,25 @@
|
||||||
<div v-for="token in items" :key="token.id" class="_panel bfomjevm">
|
<div v-for="token in items" :key="token.id" class="_panel bfomjevm">
|
||||||
<img v-if="token.iconUrl" class="icon" :src="token.iconUrl" alt=""/>
|
<img v-if="token.iconUrl" class="icon" :src="token.iconUrl" alt=""/>
|
||||||
<div class="body">
|
<div class="body">
|
||||||
<div class="name">{{ token.name }}</div>
|
<button class="_button" @click="revoke(token)"><i class="fas fa-trash-alt"></i></button>
|
||||||
<div class="description">{{ token.description }}</div>
|
<table>
|
||||||
<div class="_keyValue">
|
<tr>
|
||||||
<div>{{ i18n.ts.installedDate }}:</div>
|
<th>{{ i18n.ts.name }}:</th>
|
||||||
<div><MkTime :time="token.createdAt"/></div>
|
<td>{{ token.name }}</td>
|
||||||
</div>
|
</tr>
|
||||||
<div class="_keyValue">
|
<tr>
|
||||||
<div>{{ i18n.ts.lastUsedDate }}:</div>
|
<th>{{ i18n.ts.description }}:</th>
|
||||||
<div><MkTime :time="token.lastUsedAt"/></div>
|
<td>{{ token.description }}</td>
|
||||||
</div>
|
</tr>
|
||||||
<div class="actions">
|
<tr>
|
||||||
<button class="_button" @click="revoke(token)"><i class="fas fa-trash-alt"></i></button>
|
<th>{{ i18n.ts.installedDate }}:</th>
|
||||||
</div>
|
<td><MkTime :time="token.createdAt"/></td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th>{{ i18n.ts.lastUsedDate }}:</th>
|
||||||
|
<td><MkTime :time="token.lastUsedAt"/></td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
<details>
|
<details>
|
||||||
<summary>{{ i18n.ts.details }}</summary>
|
<summary>{{ i18n.ts.details }}</summary>
|
||||||
<ul>
|
<ul>
|
||||||
|
@ -82,11 +88,19 @@ definePageMetadata({
|
||||||
}
|
}
|
||||||
|
|
||||||
> .body {
|
> .body {
|
||||||
width: calc(100% - 62px);
|
width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
> .name {
|
button {
|
||||||
font-weight: bold;
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
th {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
td {
|
||||||
|
text-align: left;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -390,14 +390,6 @@ hr {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
._keyValue {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
> * {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
._link {
|
._link {
|
||||||
color: var(--link);
|
color: var(--link);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue