Difference between revisions of "Template:Valencia UPV"

Line 1: Line 1:
−
<html>
+
<html lang="en" >
−
 
+
  <head>
−
<head>
+
     <meta charset="UTF-8">
−
     <meta charset="utf-8">
+
     <title>bulma|vue kanban</title>
−
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
   
−
     <meta name="viewport" content="width=device-width, initial-scale=1">
+
   
−
    <title>Cover - Free Bulma template</title>
+
     <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css'>
−
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+
     <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>
−
     <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
+
     <link rel="stylesheet" href="../css/kanban.css">
−
    <!-- Bulma Version 0.7.1-->
+
   
−
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" />
+
  </head>
−
     <style type="text/css">
+
  <body>
−
         html,
+
    <div id="app">
−
         body {
+
      <nav class="navbar has-shadow">
−
            font-family: 'Open Sans';
+
        <div class="container">
−
             }
+
          <div class="navbar-brand"><a class="navbar-item" href="../">
−
        img {
+
          <img src="http://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox"/></a>
−
             padding: 5px;
+
        </div>
−
             border: 1px solid #ccc;
+
      </div>
−
             }
+
     </nav>
−
    </style>
+
    <section class="hero is-info">
−
</head>
+
      <div class="hero-body">
−
 
+
        <div class="container">
−
<body>
+
          <div class="card">
−
    
+
            <div class="card-content">
 +
              <div class="content">
 +
                <div class="control has-icons-left has-icons-right search-field">
 +
                  <input class="input is-large" type="text" placeholder="ｓｅａｒｃｈｂｏｘ" v-model="search" /><span class="icon is-medium is-left"><i class="fa fa-search"></i></span>
 +
                  <span class="icon is-medium is-right">
 +
                    <i class="delete is-medium clear-search" @click="clearSearchField()" v-if="search.length"></i>
 +
                  </span>
 +
                </div>
 +
              </div>
 +
            </div>
 +
          </div>
 +
         </div>
 +
      </div>
 +
    </section>
 +
        <div class="box cta">
 +
        <p class="has-text-centered">
 +
          Powered by  <span class="tag is-link">Vue.js</span>. All the data is stored inside of <span class="tag is-black">kanban.js</span> file, and can be easily changed according to your needs.
 +
         </p>
 +
    </div>
 +
    <!-- Loop through the parent array -->
 +
    <section class="container" >
 +
      <div class="columns is-mobile is-centered" id="sectioncontainer">
 +
        <div class="column is-narrow" v-for="yxy in filteredCards">
 +
          <article class="message" :class="'is-' + yxy.cardColor">
 +
             <div class="message-header">
 +
              <!-- Make a header using the `name` property from the current season in the loop -->
 +
              <p>{{title}} » {{ yxy.name}}</p>
 +
              <button class="delete" aria-label="delete" @click="removeCard(yxy)"></button>
 +
            </div>
 +
            <div class="message-body">
 +
              <div class="board-item">
 +
                <!-- Loop through the `items` array from the current season to show each item -->
 +
                <div class="board-item-content" v-for="item in yxy.items"><span>{{ item}}</span></div>
 +
              </div>
 +
             </div>
 +
          </article>
 +
        </div>
 +
      </div>
 +
    </section>
 +
  </div>
 +
  <footer>
 +
    <div class="box cta">
 +
      <div class="columns is-mobile is-centered">
 +
        <div class="field is-grouped is-grouped-multiline">
 +
          <div class="control">
 +
             <div class="tags has-addons"><a class="tag is-link" href="https://github.com/dansup/bulma-templates">Bulma Templates</a><span class="tag is-light">Daniel Supernault</span></div>
 +
          </div>
 +
          <div class="control">
 +
             <div class="tags has-addons"><a class="tag is-link">The source code is licensed</a><span class="tag is-light">MIT  <i class="fa fa-github"></i></span></div>
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </div>
 +
   </footer>
 +
</div>
 +
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js'></script>
 +
<script  src="../js/kanban.js"></script>
 
</body>
 
</body>
−
 
 
</html>
 
</html>

Revision as of 11:00, 19 June 2018

bulma|vue kanban

Powered by Vue.js. All the data is stored inside of kanban.js file, and can be easily changed according to your needs.

{{title}} » {{ yxy.name}}

{{ item}}