Correct nesting of grid columns, add navbar

This commit is contained in:
Björn Fromme
2018-11-02 22:06:48 +01:00
parent ce0e98fb92
commit 42ecd2530c
3 changed files with 50 additions and 31 deletions
@@ -1,8 +1,8 @@
<template>
<div class="form-wrapper form--border" id="myep-main" v-show="!loading">
<h1>Adressdaten</h1>
<div class="row">
<form @submit.prevent="saveAddress()">
<form @submit.prevent="saveAddress()">
<div class="row">
<div class="col-xs-12 col-md-6">
<div class="form-group">
<label for="gender" class="control-label">
@@ -92,8 +92,8 @@
</button>
</div>
</div>
</form>
</div>
</div>
</form>
</div>
</template>
@@ -1,11 +1,26 @@
<template>
<div id="app">
<ul class="nav nav-tabs" :class="{ 'nav-disabled': loading }" v-if="isLoggedIn">
<router-link :to="{ name: 'address' }" tag="li" active-class="active"><a>Adressdaten</a></router-link>
<router-link :to="{ name: 'events' }" tag="li" active-class="active"><a>Reise-Historie</a></router-link>
<router-link :to="{ name: 'teamer' }" tag="li" active-class="active" v-if="isTeamer"><a>Teamer</a></router-link>
<li role="presentation"><a href="#" @click.prevent="logout()" class="button">Logout</a></li>
</ul>
<nav class="navbar navbar-default" v-if="isLoggedIn">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myep-navbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">My E&amp;P</a>
</div>
<div class="collapse navbar-collapse" id="myep-navbar">
<ul class="nav navbar-nav">
<router-link :to="{ name: 'address' }" tag="li" active-class="active" :class="{ disabled: loading }"><a>Adressdaten</a></router-link>
<router-link :to="{ name: 'events' }" tag="li" active-class="active" :class="{ disabled: loading }"><a>Reise-Historie</a></router-link>
<router-link :to="{ name: 'teamer' }" tag="li" active-class="active" :class="{ disabled: loading }" v-if="isTeamer"><a>Teamer</a></router-link>
</ul>
<ul class="nav navbar-nav navbar-right">
<li :class="{ disabled: loading }"><a href="#" @click.prevent="logout()">Logout</a></li>
</ul>
</div>
</nav>
<div class="row" v-if="$store.state.message.text">
<div class="col-xs-12">
<div class="alert alert-dismissable" :class="$store.state.message.class">
@@ -1,27 +1,31 @@
<template>
<div class="form-wrapper form--border col-xs-12 col-md-6" id="myep-main">
<div class="form-wrapper form--border" id="myep-main">
<h1>Login MyE&amp;P</h1>
<form @submit.prevent="submit()">
<div class="form-group">
<label for="email" class="control-label">
E-Mail
</label>
<input id="email" type="text" v-model="email" class="form-control">
</div>
<div class="form-group" v-if="loginMode">
<label for="password" class="control-label">
Passwort
</label>
<input id="password" type="password" v-model="password" class="form-control">
</div>
<div class="form-group">
<div class="btn-group">
<button type="submit" class="button" :disabled="loading">
{{ loginMode ? 'Login' : 'Zurücksetzen' }}
</button>
<button class="button button--secondary" @click.prevent="toggleMode()">
{{ loginMode ? 'Passwort vergessen?' : 'Zum Login' }}
</button>
<div class="row">
<div class="col-xs-12 col-md-6">
<div class="form-group">
<label for="email" class="control-label">
E-Mail
</label>
<input id="email" type="text" v-model="email" class="form-control">
</div>
<div class="form-group" v-if="loginMode">
<label for="password" class="control-label">
Passwort
</label>
<input id="password" type="password" v-model="password" class="form-control">
</div>
<div class="form-group">
<div class="btn-group">
<button type="submit" class="button" :disabled="loading">
{{ loginMode ? 'Login' : 'Zurücksetzen' }}
</button>
<button class="button button--secondary" @click.prevent="toggleMode()">
{{ loginMode ? 'Passwort vergessen?' : 'Zum Login' }}
</button>
</div>
</div>
</div>
</div>
</form>