Merge pull request #162 from ProgrammingLab/kp/header

ヘッダの整備

Author: Fukusan64

src/App.vue

@@ -1,23 +1,45 @@
 <template>
   <div id="app">
+    <header>
+      <router-link :to="{ name: 'home' }">
+        <img class="logo" src="@/assets/logo.svg" alt="ProLab">
+      </router-link>
+      <loading-indicator/>
+    </header>
+
     <error-page v-if="isError"/>
-    <loading-indicator class="loading"/>
+
     <router-view v-show="!isError"/>
+
+    <footer>
+      <div v-if="loggedIn">
+        <router-link to="/editprofile">プロフィール編集</router-link>
+        <router-link :to="{ name: 'editAchievements' }" exact>実績編集</router-link>
+        <Logout/>
+      </div>
+      <div v-else>
+        <router-link to="/login">ログイン</router-link>
+      </div>
+      <small>&copy; Programming Laboratory, 2019</small>
+    </footer>
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex';
 import ErrorPage from './components/ErrorPage.vue';
 import LoadingIndicator from './components/LoadingIndicator.vue';
+import Logout from '@/components/Logout.vue';
 
 export default {
   components: {
     ErrorPage,
     LoadingIndicator,
+    Logout,
   },
   computed: {
     ...mapGetters('criticalError', ['isError']),
+    ...mapGetters('session', ['loggedIn']),
   },
   metaInfo: {
     title: 'Untitled',
@@ -27,22 +49,51 @@ export default {
 </script>
 
 <style>
-html {
-  height: 100%;
-}
-
 body {
   font-family: 'Noto Sans JP', sans-serif;
-  height: 100%;
 }
 
-#app {
-  height: 100%;
-}
-
-.loading {
-  position: fixed;
+header {
+  position: sticky;
   top: 0;
   z-index: 127;
+  width: 100%;
+  padding-top: 10px;
+  max-width: 1500px;
+  margin: 0 auto;
+  border-bottom: 4px #333 solid;
+  background: rgba(255, 255, 255, 0.8);
+}
+
+header img {
+  max-width: 250px;
+  width: 40%;
+  margin: 20px 40px;
+}
+
+footer div {
+  text-align: center;
+}
+
+footer a {
+  display: inline-block;
+  padding: 12px;
+  border-bottom: 2px #333 solid;
+  color: black;
+  margin: 0 4px 24px;
+}
+
+footer small {
+  display: block;
+}
+
+small {
+  text-align: center;
+}
+
+@media screen and (max-width: 480px) {
+  header img {
+    margin-left: 30px;
+  }
 }
 </style>

src/components/ErrorPage.vue

@@ -3,9 +3,6 @@
     <div id="error">
         <h1 id="title">{{ number }}</h1>
         <p id="message">{{ message }}</p>
-        <router-link :to="{ name: 'home' }">
-            Go to home page
-        </router-link>
     </div>
   </div>
 </template>
@@ -18,6 +15,7 @@
   align-items: center;
   width: 100%;
   height: 100%;
+  margin: 200px 0;
 }
 #error {
   margin: auto;

src/components/LoadingIndicator.vue

@@ -28,7 +28,7 @@ export default {
 
 .loading-indicator-active {
   height: 100%;
-  background-color: cornflowerblue;
+  background-color: rgb(147, 176, 255);
   animation: loading 1.5s linear infinite;
 }
 

src/views/EditProfile.vue

@@ -152,7 +152,6 @@
         <p class="has-text-danger" v-if="hasValidationError">入力値に誤りがあります</p>
         <p v-if="isSuccess">保存しました</p>
       </form>
-      <router-link :to="{ name: 'home' }" exact>トップページに戻る</router-link>
     </section>
   </div>
 </template>

src/views/Home.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="home">
-    <h1><img class="logo" src="@/assets/logo.svg" alt="ProLab"></h1>
     <section>
       <h2>部員募集中!</h2>
       <p>
@@ -22,25 +21,11 @@
         <publicMemberList includeLeftUser/>
       </div>
     </section>
-
-    <footer>
-      <div v-if="loggedIn">
-        <router-link to="/editprofile">プロフィール編集</router-link>
-        <router-link :to="{ name: 'editAchievements' }" exact>実績編集</router-link>
-        <Logout/>
-      </div>
-      <div v-else>
-        <router-link to="/login">ログイン</router-link>
-      </div>
-      <small>&copy; Programming Laboratory, 2019</small>
-    </footer>
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
 import AchievementsList from '@/components/AchievementsList.vue';
-import Logout from '@/components/Logout.vue';
 import publicMemberList from '@/components/PublicMemberList.vue';
 
 export default {
@@ -51,12 +36,8 @@ export default {
   },
   components: {
     AchievementsList,
-    Logout,
     publicMemberList,
   },
-  computed: {
-    ...mapGetters('session', ['loggedIn']),
-  },
 };
 </script>
 
@@ -70,22 +51,6 @@ export default {
   }
 }
 
-footer div {
-  text-align: center;
-}
-
-footer a {
-  display: inline-block;
-  padding: 12px;
-  border-bottom: 2px #333 solid;
-  color: black;
-  margin: 0 4px 24px;
-}
-
-footer small {
-  display: block;
-}
-
 .home {
   max-width: 1500px;
   margin: 40px auto;
@@ -96,15 +61,6 @@ footer small {
   margin-right: 30px;
 }
 
-h1 {
-  margin-left: 5px;
-}
-
-h1 img {
-  max-width: 400px;
-  width: 80%;
-}
-
 section {
   margin: 40px 0;
 }
@@ -137,14 +93,7 @@ p {
   margin-right: 20px;
 }
 
-small {
-  text-align: center;
-}
-
 @media screen and (max-width: 480px) {
-  h1 {
-    margin-left: 30px;
-  }
   h2 {
     padding-left: 30px;
     font-size: 2rem;

src/views/Login.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="container">
     <div class="box">
-      <img class="logo" src="../assets/logo.svg" alt="ProLab">
       <form v-on:submit.prevent="onLogin">
         <label for="id">Name or Email Address</label>
         <input required type="text" v-model="name">
@@ -61,6 +60,7 @@ export default {
     align-items: center;
     flex-direction: column;
     height: 100%;
+    margin-top: 100px;
   }
 
   img {

src/views/memberIntroduction/Profile.vue

@@ -40,7 +40,6 @@
         </a></dd>
       </template>
     </dl>
-    <button v-on:click="onBack">もどる</button>
   </div>
 </template>
 

src/views/oauth/Login.vue

@@ -4,7 +4,6 @@
     <div v-if="checkingChallenge">Please Wait</div>
     <div v-else-if="!challengeError">
       <div class="box">
-        <img class="logo" src="../../assets/logo.svg" alt="ProLab">
         <form v-on:submit.prevent="onLogin">
           <label for="id">Name or Email Address</label>
           <input required type="text" v-model="name">
@@ -25,6 +24,7 @@
     align-items: center;
     flex-direction: column;
     height: 100%;
+    margin-top: 100px;
   }
 
   img {