Feature: Add header for Pinry Page

5年前 · bbab5b8858
--- a/pinry-spa/public/index.html
+++ b/pinry-spa/public/index.html
@@ -5,11 +5,11 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>pinry-spa</title>
    <title>Pinry</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but pinry-spa doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
      <strong>We're sorry but Pinry doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
--- a/pinry-spa/src/App.vue
+++ b/pinry-spa/src/App.vue
@@ -1,17 +1,16 @@
 <template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <Home></Home>
  </div>
 </template>

 <script>
 import HelloWorld from './components/HelloWorld.vue';
 import Home from './pages/Home.vue';

 export default {
  name: 'app',
  components: {
    HelloWorld,
    Home,
  },
 };
 </script>
--- a/pinry-spa/src/assets/logo-dark.png
+++ b/pinry-spa/src/assets/logo-dark.png
--- a/pinry-spa/src/assets/logo-light.png
+++ b/pinry-spa/src/assets/logo-light.png
--- a/pinry-spa/src/assets/logo.png
+++ b/pinry-spa/src/assets/logo.png
--- a/pinry-spa/src/components/HelloWorld.vue
+++ b/pinry-spa/src/components/HelloWorld.vue
@@ -1,58 +0,0 @@
 <template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
 </template>

 <script>
 export default {
  name: 'HelloWorld',
  props: {
    msg: String,
  },
 };
 </script>

 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
 h3 {
  margin: 40px 0 0;
 }
 ul {
  list-style-type: none;
  padding: 0;
 }
 li {
  display: inline-block;
  margin: 0 10px;
 }
 a {
  color: #42b983;
 }
 </style>
--- a/pinry-spa/src/components/PHeader.vue
+++ b/pinry-spa/src/components/PHeader.vue
@@ -0,0 +1,65 @@
 <template>
  <div class="p-header">
    <nav class="navbar" role="navigation" aria-label="main navigation">
      <div class="container">
        <div class="navbar-brand">
          <a class="navbar-item" href="/">
            <img src="../assets/logo-dark.png" height="28">
          </a>
          <a role="button" class="navbar-burger burger"
             aria-label="menu" aria-expanded="false"
             data-target="PinryNav">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
          </a>
        </div>
        <div id="PinryNav" class="navbar-menu">
          <div class="navbar-start">
            <a class="navbar-item">
              BookmarkLet
            </a>
            <a class="navbar-item">
              Create Pin
            </a>
            <div class="navbar-item has-dropdown is-hoverable">
              <a class="navbar-link">
                Browser Extensions
              </a>
              <div class="navbar-dropdown">
                <a class="navbar-item">
                  Chrome
                </a>
                <a class="navbar-item">
                  Firefox
                </a>
              </div>
            </div>
          </div>
          <div class="navbar-end">
            <div class="navbar-item">
              <div class="buttons">
                <a class="button is-primary">
                  <strong>Sign up</strong>
                </a>
                <a class="button is-light">
                  Log in
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </nav>
  </div>
 </template>

 <script>
 export default {
  name: 'p-header',
 };
 </script>

 <style scoped>

 </style>
--- a/pinry-spa/src/pages/Home.vue
+++ b/pinry-spa/src/pages/Home.vue
@@ -0,0 +1,24 @@
 <template>
  <div class="hello">
    <PHeader></PHeader>
    <section class="section">
      <div class="container">
      </div>
    </section>
  </div>
 </template>

 <script>
 import PHeader from '../components/PHeader.vue';

 export default {
  name: 'p-header',
  components: {
    PHeader,
  },
 };
 </script>

 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
 </style>