mirror of
https://github.com/louislam/dockge.git
synced 2024-11-30 14:24:02 +00:00
Create new component to gruop agents
This commit is contained in:
parent
109222f024
commit
f08ba9b889
2 changed files with 48 additions and 0 deletions
1
frontend/components.d.ts
vendored
1
frontend/components.d.ts
vendored
|
@ -8,6 +8,7 @@ export {}
|
|||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
About: typeof import('./src/components/settings/About.vue')['default']
|
||||
AgentStackList: typeof import('./src/components/AgentStackList.vue')['default']
|
||||
Appearance: typeof import('./src/components/settings/Appearance.vue')['default']
|
||||
ArrayInput: typeof import('./src/components/ArrayInput.vue')['default']
|
||||
ArraySelect: typeof import('./src/components/ArraySelect.vue')['default']
|
||||
|
|
47
frontend/src/components/AgentStackList.vue
Normal file
47
frontend/src/components/AgentStackList.vue
Normal file
|
@ -0,0 +1,47 @@
|
|||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="group-header">
|
||||
{{ agentName ?? this.$t("currentEndpoint") }}
|
||||
</div>
|
||||
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface AgentStackListProps {
|
||||
agentName?: string;
|
||||
}
|
||||
|
||||
defineProps<AgentStackListProps>();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../styles/vars.scss";
|
||||
|
||||
|
||||
.group-header {
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 500;
|
||||
padding: 10px;
|
||||
|
||||
.dark & {
|
||||
background-color: darken($color: $dark-header-bg, $amount: 1.90);
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 770px) {
|
||||
.group-header {
|
||||
margin: -20px;
|
||||
margin-bottom: 10px;
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
Loading…
Reference in a new issue