g.spar
/
wdb-web2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Design-Anpassung und Funktionstest

versuch1
Georg Spar 1 year ago
parent
d6925b1130
commit
9a9dffed2c
5 changed files with 69 additions and 55 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      components/Header.vue
  2. 7
      components/Login.vue
  3. 50
      components/Typ.vue
  4. 8
      layouts/default.vue
  5. 1
      pages/typ.vue

2
components/Header.vue
Unescape View File

@ -6,7 +6,7 @@
<!-- Navbar --> <!-- Navbar -->
<nav style="z-index: 1;" class="navbar navbar-expand-lg navbar-light bg-light"> <nav style="z-index: 1;" class="navbar navbar-expand-lg navbar-light bg-light">
<!-- Container wrapper --> <!-- Container wrapper -->
<div class="container"> <div class="container-xl">
<!-- Toggle button --> <!-- Toggle button -->
<button class="navbar-toggler" type="button" data-mdb-toggle="collapse" <button class="navbar-toggler" type="button" data-mdb-toggle="collapse"
data-mdb-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" data-mdb-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"

7
components/Login.vue
Unescape View File

@ -1,8 +1,4 @@
<template> <template>
<div class="bg-image vh-100" style="height:500px; margin-top: -58.59px; background-image: url('/images/background_wardrobe.jpg');">
<!-- Mask -->
<div class="mask" style="background-color: hsla(0, 0%, 0%, 0.6)">
<div class="container d-flex justify-content-center align-items-center h-100">
<div > <div >
<ClientOnly> <ClientOnly>
<MDBCard> <MDBCard>
@ -82,9 +78,6 @@
</MDBCard> </MDBCard>
</ClientOnly> </ClientOnly>
</div> </div>
</div>
</div>
</div>

50
components/Typ.vue
Unescape View File

@ -1,28 +1,38 @@
<template> <template>
<div>
<div style="margin-bottom: 20px;"> <MDBContainer class="bg-white vh-100 rounded-4" style="margin-top: 70px;">
<h3 class="text-secondary mb-4 pt-3" style="border-bottom: 3px solid black;">Type</h3>
<ClientOnly> <ClientOnly>
<MDBRow tag="form" class="g-3 needs-validation" novalidate @submit.prevent="checkForm"> <MDBRow tag="form" class="g-3 mb-20 needs-validation" novalidate @submit.prevent="checkForm">
<MDBCol md="4">
<p>Image Galery</p>
</MDBCol>
<MDBCol md="8">
<MDBRow style="margin-bottom:20px;">
<MDBCol md="12"> <MDBCol md="12">
<MDBInput <MDBInput
label="Description" label="Description *"
v-model="bezeichnung" v-model="bezeichnung"
invalidFeedback="Please provide a description of the clothing-type" invalidFeedback="Please provide a description of the clothing-type"
validFeedback="Looks good!" validFeedback="Looks good!"
required required
/> />
</MDBCol> </MDBCol>
<MDBBtn variant="primary" @click="onSubmit()">Neu eintragen</MDBBtn>
<b-button variant="secondary" @click="onUpdate()">Aktualisieren</b-button>
<b-button variant="danger" @click="onDelete()">Löschen</b-button>
<b-button type="reset" variant="danger">Reset</b-button>
</MDBRow> </MDBRow>
</ClientOnly> <MDBRow style="margin-bottom:40px;">
</div> <MDBCol md="12">
<div> <MDBBtn class="" color="primary" @click="onSubmit()">NEW</MDBBtn>
<ClientOnly> <MDBBtn color="secondary" @click="onUpdate()">UPDATE</MDBBtn>
<MDBTable striped hover bordered> <MDBBtn color="danger" @click="onDelete()">DELETE</MDBBtn>
<MDBBtn type="reset" color="dark">Reset</MDBBtn>
</MDBCol>
</MDBRow>
</MDBCol>
</MDBRow>
<!--<MDBContainer class="bg-white rounded-4">-->
<MDBRow style="margin-bottom:40px;">
<MDBCol md="12">
<MDBTable striped hover bordered sm class="rounded-4">
<thead> <thead>
<tr> <tr>
<th scope="col">#</th> <th scope="col">#</th>
@ -36,20 +46,24 @@
</tr> </tr>
</tbody> </tbody>
</MDBTable> </MDBTable>
</MDBCol>
</MDBRow>
<!--</MDBContainer>-->
<template #fallback> <template #fallback>
<!-- this will be rendered on server side --> <!-- this will be rendered on server side -->
<p>Loading comments...</p> <p>Loading comments...</p>
</template> </template>
</ClientOnly> </ClientOnly>
</div> </MDBContainer>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { MDBCard, MDBCardBody, MDBCardTitle, MDBCardText, MDBBtn, MDBCol, MDBCheckbox, MDBInput, MDBRow, MDBTable } from "mdb-vue-ui-kit"; import { MDBCard, MDBCardBody, MDBCardTitle, MDBCardText, MDBBtn, MDBCol, MDBCheckbox, MDBInput, MDBRow, MDBTable, MDBContainer } from "mdb-vue-ui-kit";
import { ref } from "vue"; import { ref } from "vue";
const bezeichnung = ref("e.g. Shirt"); const bezeichnung = ref("");
const checkForm = (event: Event) => { const checkForm = (event: Event) => {

8
layouts/default.vue
Unescape View File

@ -1,6 +1,14 @@
<template> <template>
<div> <div>
<Header /> <Header />
<div class="bg-image vh-100" style="height:500px; margin-top: -58.59px; background-image: url('/images/background_wardrobe.jpg');">
<!-- Mask -->
<div class="mask" style="background-color: hsla(0, 0%, 0%, 0.6)">
<div class="container justify-content-center align-items-center h-100">
<slot /> <slot />
</div> </div>
</div>
</div>
</div>
</template> </template>

1
pages/typ.vue
Unescape View File

@ -1,6 +1,5 @@
<template> <template>
<div> <div>
<h1>Typ</h1>
<Typ /> <Typ />
</div> </div>
</template> </template>

Write Preview
Loading…
Cancel
Save