From 42ecd2530cf4c836fbeb146eff0a9055bdfb60c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <mail@bjo3rn.com>
Date: Fri, 2 Nov 2018 22:06:48 +0100
Subject: [PATCH] Correct nesting of grid columns, add navbar

---
 .../Assets/js/myep/components/Address.vue     |  8 ++--
 .../Private/Assets/js/myep/components/App.vue | 27 ++++++++---
 .../Assets/js/myep/components/Login.vue       | 46 ++++++++++---------
 3 files changed, 50 insertions(+), 31 deletions(-)

diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Address.vue b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Address.vue
index a693186d..473145b6 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Address.vue
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Address.vue
@@ -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>
 
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/App.vue b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/App.vue
index 190c8693..6613cf19 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/App.vue
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/App.vue
@@ -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">
diff --git a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Login.vue b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Login.vue
index 5a4a4991..6d4e2c97 100644
--- a/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Login.vue
+++ b/web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/components/Login.vue
@@ -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>