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> <template>
<div class="form-wrapper form--border" id="myep-main" v-show="!loading"> <div class="form-wrapper form--border" id="myep-main" v-show="!loading">
<h1>Adressdaten</h1> <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="col-xs-12 col-md-6">
<div class="form-group"> <div class="form-group">
<label for="gender" class="control-label"> <label for="gender" class="control-label">
@@ -92,8 +92,8 @@
</button> </button>
</div> </div>
</div> </div>
</form> </div>
</div> </form>
</div> </div>
</template> </template>
@@ -1,11 +1,26 @@
<template> <template>
<div id="app"> <div id="app">
<ul class="nav nav-tabs" :class="{ 'nav-disabled': loading }" v-if="isLoggedIn"> <nav class="navbar navbar-default" v-if="isLoggedIn">
<router-link :to="{ name: 'address' }" tag="li" active-class="active"><a>Adressdaten</a></router-link> <div class="navbar-header">
<router-link :to="{ name: 'events' }" tag="li" active-class="active"><a>Reise-Historie</a></router-link> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myep-navbar" aria-expanded="false">
<router-link :to="{ name: 'teamer' }" tag="li" active-class="active" v-if="isTeamer"><a>Teamer</a></router-link> <span class="sr-only">Toggle navigation</span>
<li role="presentation"><a href="#" @click.prevent="logout()" class="button">Logout</a></li> <span class="icon-bar"></span>
</ul> <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="row" v-if="$store.state.message.text">
<div class="col-xs-12"> <div class="col-xs-12">
<div class="alert alert-dismissable" :class="$store.state.message.class"> <div class="alert alert-dismissable" :class="$store.state.message.class">
@@ -1,27 +1,31 @@
<template> <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> <h1>Login MyE&amp;P</h1>
<form @submit.prevent="submit()"> <form @submit.prevent="submit()">
<div class="form-group"> <div class="row">
<label for="email" class="control-label"> <div class="col-xs-12 col-md-6">
E-Mail <div class="form-group">
</label> <label for="email" class="control-label">
<input id="email" type="text" v-model="email" class="form-control"> E-Mail
</div> </label>
<div class="form-group" v-if="loginMode"> <input id="email" type="text" v-model="email" class="form-control">
<label for="password" class="control-label"> </div>
Passwort <div class="form-group" v-if="loginMode">
</label> <label for="password" class="control-label">
<input id="password" type="password" v-model="password" class="form-control"> Passwort
</div> </label>
<div class="form-group"> <input id="password" type="password" v-model="password" class="form-control">
<div class="btn-group"> </div>
<button type="submit" class="button" :disabled="loading"> <div class="form-group">
{{ loginMode ? 'Login' : 'Zurücksetzen' }} <div class="btn-group">
</button> <button type="submit" class="button" :disabled="loading">
<button class="button button--secondary" @click.prevent="toggleMode()"> {{ loginMode ? 'Login' : 'Zurücksetzen' }}
{{ loginMode ? 'Passwort vergessen?' : 'Zum Login' }} </button>
</button> <button class="button button--secondary" @click.prevent="toggleMode()">
{{ loginMode ? 'Passwort vergessen?' : 'Zum Login' }}
</button>
</div>
</div>
</div> </div>
</div> </div>
</form> </form>