Skip to content
This repository has been archived by the owner on Dec 6, 2024. It is now read-only.

Commit

Permalink
Styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@timmytiefkuehl
timmytiefkuehl committed Jul 28, 2023
1 parent 9c4d2d3 commit 52a15e4
Show file tree
Hide file tree
Showing 12 changed files with 344 additions and 132 deletions.
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta name="robots" content="noindex,nofollow">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="/icon-scriptor.ico" />
<link rel="icon" href="/favicon.ico" />

<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
Expand Down
Binary file added public/favicon.ico
View file
Binary file not shown.
Binary file removed public/icon-scriptor.ico
View file
Binary file not shown.
Binary file removed src/assets/logo.png
View file
Binary file not shown.
57 changes: 57 additions & 0 deletions src/assets/logo.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
200 changes: 130 additions & 70 deletions src/components/Api.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,26 +4,26 @@
<h1 class="headline coloured-headline">
{{ moduleConfig.name }} Modul
</h1>
<p class="paragraph">
<p class="paragraph" v-if="moduleConfig.descr">
{{ moduleConfig.descr }}
</p>

<br>
<h2 class="headline coloured-headline underline-headline">Funktionen</h2>

<h2 class="headline coloured-headline underline-headline" v-if="moduleConfig['functions']">Funktionen</h2>
<div class="box" v-for="(item, key) in moduleConfig['functions']" :key="key">

<div style="display: flex; align-items: center;">
<sl-badge variant="danger" pill style="margin-bottom: 17px;" pulse>async</sl-badge>
<h3 class="headline" style="margin-left: 10px;">{{ item.name }}</h3>
</div>
<div style="display: flex; align-items: center;">
<sl-badge variant="danger" pill style="margin-bottom: 17px;" pulse>async</sl-badge>
<h3 class="headline" style="margin-left: 10px;">{{ item.name }}</h3>
</div>

<p class="paragraph">
{{ item.docs }}

</p>
<br>

<sl-details summary="Values">
<div class="value-wrap">
<div class="value" v-for="(arg, key) in item['args']">
Expand All @@ -43,13 +43,11 @@
</div>
</sl-details>
</div>

<h2 class="headline coloured-headline underline-headline">Datenbankfelder</h2>

<h2 class="headline coloured-headline underline-headline" v-if="structure.value">Datenbankfelder</h2>


<div class="data" v-if="isObject" v-for="(key, name) in structure.value">

<div class="data-name">{{name}}</div>
<div class="data-type">Typ: {{key.type}}</div>
<div class="data-type">Description: {{key.descr}}</div>
Expand All @@ -63,12 +61,18 @@

<template v-else>
<template v-if="structure.type === 'normal'" >
<div v-for="(key, v) in structure.value">
<div class="data-wrap" v-for="(key, v) in structure.value">
<div class="data">
<div class="data-name">{{key[0]}}</div>
<h3 class="data-name">{{key[0]}}</h3>

<div class="data-type">Typ: {{key[1].type}}</div>
<div class="data-type">Description: {{key[1].descr}}</div>
<div class="data-type">
<span>Typ:</span>
{{key[1].type}}
</div>
<div class="data-type">
<span>Description:</span>
{{key[1].descr}}
</div>
<code class="data-code">
<vue-json-pretty :data="key[1]" :deep="1" :showDoubleQuotes="false" :showIcon="true" :showLine="false" :collapsedOnClickBrackets="true" />

Expand All @@ -78,31 +82,38 @@
</template>
<template v-else>
<div v-for="(key2, v2) in structure.value">

<h3 class="headline coloured-headline underline-headline">{{ v2 }}</h3>

<div v-for="(key, v) in key2">
<div class="data">

<div class="data-name">{{key[0]}}</div>
<sl-details prefix="puzzle" :summary="v2" open>
<div class="data-wrap" v-for="(key, v) in key2">
<div class="data">

<div class="data-type">Typ: {{key[1].type}}</div>
<div class="data-type">Description: {{key[1].descr}}</div>
<code class="data-code">
<vue-json-pretty :data="key[1]" :deep="1" :showDoubleQuotes="false" :showIcon="true" :showLine="false" :collapsedOnClickBrackets="true" />
<h3 class="data-name">{{key[0]}}</h3>

<div class="data-type">
<span>Typ:</span>
{{key[1].type}}
</div>
<div class="data-type">
<span>Description:</span>
{{key[1].descr}}
</div>
<code class="data-code">
<vue-json-pretty :data="key[1]" :deep="1" :showDoubleQuotes="false" :showIcon="true" :showLine="false" :collapsedOnClickBrackets="true" />

</code>
</div>
</div>
</sl-details>

</code>
</div>
</div>
</div>
</template>

</template>

</div>
</div>
</template>

<script setup lang="ts">
import { Request } from "@viur/viur-vue-utils";
import {defineComponent, onMounted, ref, computed, onBeforeMount} from "vue";
Expand All @@ -114,7 +125,7 @@ const props = defineProps({
moduleName: String,
})
const globalStore = useGlobalStore();
const structure = ref({});
const structure = ref({});
const moduleConfig = computed(function(){
return globalStore.modules.value[props.moduleName];
});
Expand All @@ -141,7 +152,7 @@ onBeforeMount(async function(){
structure.value["value"] = {};
structure.value["type"] = "tree";
let answ = await Request.get(url);
if (answ.ok) {
structure.value["value"]["leaf"] = (await answ.json())["structure"];
Expand All @@ -157,73 +168,84 @@ onBeforeMount(async function(){
});
</script>
<style scoped lang="less">

<style scoped lang="less">
.scroll{
flex: 1;
overflow-y: auto;
padding: 20px 0;
}
.bind{
width: 100%;
max-width: 1200px;
padding: 0 20px;
}
.headline{
margin-top: 0;
}
.coloured-headline{
color: @mainColor;
}
.coloured-headline.underline-headline{
border-bottom: 1px solid @mainColor;
}
.underline-headline{
padding-bottom: var(--sl-spacing-medium);
border-bottom: 1px solid @mainColor;
border-bottom: 1px solid var(--sl-color-neutral-900);
}
.box{
box-shadow: 0 0 8px 0 rgba(0, 0, 0, .2);
padding: 20px;
margin-bottom: 40px;
border-radius: var(--sl-border-radius-medium);
}
sl-details{
&::part(header){
padding: var(--sl-spacing-small) var(--sl-spacing-medium);
}
&::part(content){
padding: var(--sl-spacing-small) var(--sl-spacing-medium);
}
&::part(prefix){
display: none;
}
}
.value-wrap{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-gap: 20px;
}
.value{
display: flex;
flex-direction: column;
font-size: .9em;
}
.value-info{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
padding-bottom: 8px;
margin-bottom: 8px;
border-bottom: 1px solid #ddd;
&:first-child{
border-top: 1px solid #ddd;
padding-top: 8px;
}
}
.name{
font-weight: bold;
width: 120px;
Expand All @@ -250,25 +272,63 @@ onBeforeMount(async function(){
padding: 0;
}
}
.data{
display: flex;
flex-direction: column;
padding: 15px;
}
.data-name{
color: @mainColor;
font-weight: bold;
margin-bottom: 5px;
}
.data-type{
margin-bottom: 10px;
font-size: .9em;
}
.data-code{
background-color: #f4f4f4;
padding: 5px;
}
</style>
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-gap: 10px;
margin-bottom: 30px;
}
.data-name{
margin: 0;
font-weight: 700;
margin-bottom: 10px;
}
.data-type{
font-size: .9em;
background-color: var(--sl-color-neutral-100);
padding: 6px 6px;
span{
display: inline-block;
font-weight: 700;
width: 150px;
}
}
.data-code{
background-color: var(--sl-color-neutral-100);
padding: 5px;
}
.data-wrap:not(:last-child){
border-bottom: 1px solid var(--sl-color-neutral-400);
margin-bottom: 20px;
}
sl-details{
margin-bottom: 15px;
&::part(base){
border: 1px solid var(--sl-color-neutral-700);
}
&::part(header){
border-radius: 0;
}
&::part(summary){
font-weight: 700;
font-size: 1.2em;
}
&[open]{
&::part(header) {
border-bottom: 1px solid var(--sl-color-neutral-500);
}
}
}
</style>
Loading

0 comments on commit 52a15e4

Please sign in to comment.