BoxPistols
1/4/2019 - 7:44 PM

Vue.js SPA [TimeAdminJP] V2.3

Vue.js SPA [TimeAdminJP] V2.3

<div class="navIcon"><i class="fas fa-bars fa-lg"></i></div>

<div class="sidenav">
  <logo class="logo">
    <a href="#">
      <i class="fas fa-fw fa-balance-scale fa-lg"></i>
      <span>TimeApp</span>
    </a>
  </logo>

  <div class="role">
    <img src="http://placeimg.com/80/80/any" alt="">
    <div class="name">坂本 一生</div>
    <div class="name">(デザインチーム)</div>
  </div>

  <a href="#about">
    <i class="fas fa-fw fa-home"></i>ホーム
  </a>
  <a href="#services">
    <i class="fas fa-fw fa-clock"></i>タイムログ
  </a>
  <a href="#clients">
    <i class="fas fa-fw fa-users"></i>メンバー
  </a>
  <a href="#contact">
    <i class="fas fa-fw fa-cogs"></i>設定
  </a>
</div>

<div class="main">
  <div class="topnav">

    <div class="search-container">
      <form action="javascript:void(0);">
        <input type="text" placeholder="検索..." name="search">
        <button type="submit"><i class="fa fa-search"></i></button>
      </form>
    </div>

    <div class="nav_group">
      <a href="#"><i class="fas fa-fw fa-user"></i> ユーザー</a>
      <a class="notifi active" href="#"><i class="fas fa-fw fa-bell"></i> 通知</a>
      <a href="#"><i class="fas fa-fw fa-sign-in-alt"></i> ログアウト</a>
    </div>

  </div>
  <div id="title">
    <h1><i class="fas fa-fw fa-clock fa-lg"></i> {{ message }}
    </h1>
  </div>
  <div class="container">
    <div id="logtitle">
      <h2>
        <i class="fas fa-fw fa-clock fa-lg"></i> {{ message }}
      </h2>
    </div>

    <table class="table table-hover">
      <thead>
        <tr id="tableName">
          <th v-for="item in items">
            {{ item.item }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr id="log1">
          <td v-for="name in names01">
            {{ name.name }}
          </td>
        </tr>

        <tr id="log2">
          <td v-for="name in names02">
            {{ name.name }}
          </td>
        </tr>

        <tr id="log3">
          <td v-for="name in names03">
            {{ name.name }}
          </td>
        </tr>

      </tbody>
    </table>
  </div>

  <div class="container">

    <div id="todoApp">

      <h2 class="todo_title" v-bind:style="fontStyle">
        <i class="far fa-edit fa-fw fa-lg"></i> {{ title }}</h2>

      <input type="text" v-model="todo" v-on:keyup.enter="addTodo">

      <div class="todo-default">
        <i class="far fa-edit"></i> イベント資料のチーム共有
      </div>

      <div>
        <div v-for="t in todos" :key="t.id" v-bind:class="['todo-default', t.doing ? 'todo-doing' : '']" v-on:click="begin(t)">
          <i class="far fa-edit"></i> {{t.name}}
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <form action="javascript:void(0);">
      <h2><i class="far fa-sticky-note fa-fw fa-lg"></i> ノート作成</h2>

      <h3>記入</h3>
      <div id="write">
        <textarea v-model="writeNote" name="" cols="5" rows="5" placeholder="入力..."></textarea>
        <h3>表示</h3>
        <textarea name="" cols="10" rows="10" placeholder="表示...">{{ writeNote }}</textarea>

      </div>

      <div class="buttonArea">
        <button type="submit" class="btn">ノート作成 <i class="far fa-sticky-note fa-lg"></i></button>
      </div>
    </form>
  </div>

  <div class="container">
    <div class="tgt" id="target"></div>
  </div>

  <div class="container">
    <div class="tgt" id="target2"></div>
  </div>

</div>
<!-- ./maini -->

<footer>
  <small>
     Copyright © 2016-2018 Asagiri Design. All Rights Reserved
  </small>
</footer>
//  Vue
var app = new Vue({
  el: "#title",
  data: {
    message: "Timelog Note"
  }
});

var app = new Vue({
  el: "#logtitle",
  data: {
    message: "記録一覧"
  }
});

var app = new Vue({
  el: "#tableName",
  data: {
    items: [
      {
        item: "記録日"
      },
      {
        item: "記録ログ"
      },
      {
        item: "ノート見出し"
      }
    ]
  }
});

var app = new Vue({
  el: "#log1",
  data: {
    names01: [
      {
        name: "2017/06/13"
      },
      {
        name: "09:00-13:00"
      },
      {
        name:
          "本日の記事録メモ。出席:山田さん、高橋さん、吉岡さん。5月に行われたデザインコンペの結果の共有。提携企業様への共有進捗の確認。担当の確認。来月予算の見積もり。F社社様への新規企画アイデア出し。"
      }
    ]
  }
});

var app = new Vue({
  el: "#log2",
  data: {
    names02: [
      {
        name: "2017/06/18"
      },
      {
        name: "12:00-14:00"
      },
      {
        name: "定例会議。 出席:高橋さん、清水さん"
      }
    ]
  }
});

var app = new Vue({
  el: "#log3",
  data: {
    names03: [
      {
        name: "2017/06/25"
      },
      {
        name: "19:00-21:00"
      },
      {
        name:
          "Skypeミーティング。 出席:吉岡さん、高橋さん、清水さん。進捗共有レギュレーションのうつ合わせ"
      }
    ]
  }
});

// ToDo Component
var app = new Vue({
  el: "#todoApp",
  data: {
    title: "追加タスク",
    fontStyle: {
      fontSize: "1.6rem"
    },
    todo: "",
    todos: []
  },
  methods: {
    addTodo: function() {
      this.todos.push({
        id: this.todos.length,
        name: this.todo,
        doing: false
      });
      this.todo = "";
    },
    begin: function(todo) {
      todo.doing = !todo.doing;
    }
  }
});

// write note
var app = new Vue({
  el: "#write",
  data: {
    writeNote: ""
  }
});

// Text Length Count
$(function() {
  var $setElm = $("td");
  var cutFigure = "50"; // カットする文字数
  var afterTxt = "..."; // 文字カット後に表示するテキスト

  $setElm.each(function() {
    var textLength = $(this).text().length;
    var textTrim = $(this)
      .text()
      .substr(0, cutFigure);

    if (cutFigure < textLength) {
      $(this)
        .html(textTrim + afterTxt)
        .css({ visibility: "visible" });
    } else if (cutFigure >= textLength) {
      $(this).css({ visibility: "visible" });
    }
  });
});

// Toggle
$(".navIcon").on("click", function() {
  $(".sidenav").toggleClass("pull");
  $(".main").toggleClass("pull");
  $(this).toggleClass("pull");
});

(function() {
  "use strict";

  function drawChart() {
    var target = document.getElementById("target");
    var data;
    var options = {
      title: "先月比、チーム内ノート共有率",
      width: "800",
      height: "400",
      colors: ["lightskyblue", "lightgreen"],
      animation: {
        startup: true,
        duration: 800,
        easing: "inAndOut"
      }
      //       isStacked: = 積み上げ表示
      // isStacked: true,
      //       percent = 100%表記
      // isStacked: "percent"
    };
    // var chart = new google.visualization.BarChart(target);
    var chart = new google.visualization.ColumnChart(target);
    data = new google.visualization.arrayToDataTable([
      ["Team", "5月", "6月"],
      ["Team A", 12, 38],
      ["Team B", 42, 18],
      ["Team C", 11, 58],
      ["Team D", 25, 18]
    ]);
    chart.draw(data, options);
  }

  google.charts.load("current", { packages: ["corechart"] });
  google.charts.setOnLoadCallback(drawChart);
})();

// Chart2
(function() {
  "use strict";

  function drawChart() {
    var target = document.getElementById("target2");
    var data;
    var options = {
      title: "参照資料 イメージ",
      width: "800",
      height: "400",
      animation: {
        startup: true,
        duration: 800,
        easing: "inAndOut"
      },
      hAxis: { title: "Year" },
      vAxis: { title: "Sales" },
      curveType: "function",
      pointSize: 6
      // pointShape: 'square'
    };
    var chart = new google.visualization.LineChart(target);
    // var chart = new google.visualization.ColumnChart(target);
    data = new google.visualization.arrayToDataTable([
      // ["Year", "Bob", "Jane", { role: "certainty" }, "Carry"],
      // ["2017/05", 12, 38, null, 80],
      // ["2017/06", 42, 18, null, 10],
      // ["2017/07", 11, 58, 'Camp A', 130],
      // ["2017/08", 111, 158, null, 70]

      [
        "Year",
        "@アイテムA",
        { role: "annotation" },
        { role: "certainty" },
        "@アイテムB",
        { role: "certainty" }
      ],
      ["2014", 52, "キャンペーン A", true, 89, true],
      ["2015", 38, null, true, 78, true],
      ["2016", 122, "キャンペーン B", true, 88, true],
      ["2017", 62, null, true, 91, true],
      ["2018", 142, "想定売上げ", false, 101, false]
    ]);
    chart.draw(data, options);
  }

  google.charts.load("current", { packages: ["corechart"] });
  google.charts.setOnLoadCallback(drawChart);
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
$bp: 640px;

body {
  background-color: dodgerblue;
  padding: 20px;z-index: 1;

  position: relative;
  // background: linear-gradient(rgba(200, 150, 140, 0.7), rgba(100, 200, 200, 0.7)),
  //   url(https://picsum.photos/1600/1200?image=1);

  background-size: cover;
  background-repeat: no-repeat;
  width: 100vw;
  min-height: 100vh;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ",
    Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;

  background: linear-gradient(
      -45deg,
      rgba(120, 186, 120, 0.6),
      rgba(145, 120, 188, 0.6)
    ),
    url(https://picsum.photos/1600/1200?image=1) center center / cover no-repeat;
  &:after {
    background-image: url(https://goo.gl/wRbfcs);
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0.3;
  }

  color: #444;
}

* {
  box-sizing: border-box;
}

.topnav {
  overflow: hidden;
  margin: -20px -30px 0px;
  // border: 1px solid #333;
  background-color: rgba(200, 210, 205, 0.4);
  .nav_group {
    float: right;
  }
  a {
    float: left;
    display: block;
    color: black;
    text-align: center;
    padding: 12px 20px;
    text-decoration: none;
    font-size: 17px;
    transition: 0.3s;
    &:hover {
      background-color: teal;
      color: white;
    }
    &.active {
      background-color: #333;
      color: white;
    }
  }
  .notifi {
    position: relative;
    z-index: 1;
    &:after {
      z-index: 2;
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      content: "3";
      right: 3px;
      top: 3px;
      width: 25px;
      height: 25px;
      background-color: tomato;
      border-radius: 50%;
      opacity: 0.9;
    }
  }
  .search-container {
    float: left;
    padding-left: 24px;
  }
  input[type="text"] {
    padding: 6px;
    margin-top: 6px;
    font-size: 17px;
    border: none;
    width: 400px;
    background-color: rgba(255, 255, 255, 0.6);
  }
  .search-container button {
    float: right;
    padding: 6px 10px;
    margin-top: 6px;
    margin-right: 16px;
    background: #ddd;
    font-size: 17px;
    border: none;
    cursor: pointer;
    transition: 0.3s;
    &:hover {
      background: teal;
      color: white;
    }
  }
}

@media screen and (max-width: $bp) {
  .topnav {
    .nav_group {
      float: unset;
    }
    margin: auto;
    .search-container {
      float: none;
      padding: 0;
    }
    a,
    input[type="text"],
    .search-container button {
      float: none;
      display: block;
      text-align: left;
      width: 100%;
      margin: 0;
      padding: 14px;
    }
    input[type="text"] {
      border: 1px solid #ccc;
    }
  }
}

.sidenav {
  height: 100%;
  width: 160px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgba(20, 20, 20, 0.5);
  overflow-x: hidden;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  // opacity: .9;
  transition: 0.3s;
  &.pull {
    width: 0px;
    opacity: 0;
  }

  @media screen and (max-width: $bp) {
    display: none;
  }
  a {
    padding: 12px 8px 12px 16px;
    text-decoration: none;
    font-size: 18px;
    color: #fff;
    display: block;
    border-bottom: 1px solid rgba(200, 200, 200, 0.2);
    transition: 0.3s;
    opacity: 0.8;
    &:hover {
      color: #f1f1f1;
      background-color: teal;
    }
    svg {
      margin-right: 0.5rem;
    }
  }
}

.container {
  background-color: rgba(250, 250, 250, 0.68);
  margin-top: 40px;
  padding: 20px;
  box-shadow: 2px 2px 10px rgba(100, 150, 120, 0.5);
  border: 1px solid rgba(20, 60, 30, 0.4);
  + .container {
    margin-top: 80px;
  }
}

textarea {
  background-color: rgba(255, 255, 255, 0.6);
  min-width: calc(100% - 10px);
  min-height: 100px;
  margin-left: 5px;
  margin-top: 5px;
  border-radius: 5px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.6);
  border: 2px solid rgba(20, 60, 20, 0.5);
  color: #444;
  font-size: 1.2rem;
}

h1 {
  color: white;
  text-align: center;
  margin-top: 30px;
  opacity: 0.8;
  margin-bottom: -10px;
  font-size: 3rem;
  line-height: 2;
}

h2 {
  font-size: 1.6rem;
  color: teal;
}

h3 {
  font-size: 1.3rem;
  color: teal;
  margin-left: 10px;
  margin-top: 20px;
  margin-bottom: 5px;
}

.navIcon {
  position: fixed;
  top: 55px;
  left: 165px;
  color: white;
  opacity: 0.85;
  transform: rotate(630deg);
  z-index: 3;
  transition: 0.5s;
  &.pull {
    left: 10px;
    transform: rotate(0deg);
  }
  @media screen and (max-width: $bp) {
    display: none;
  }
}

.main {
  margin-left: 160px;
  /* Same as the width of the sidenav */
  padding: 0px 10px;
  min-height: 300vh;
  transition: 0.3s;
  &.pull {
    margin-left: 0;
  }
  @media screen and (max-width: $bp) {
    margin-left: 0;
  }
  td {
    max-width: 500px;
    vertical-align: baseline;
  }

  tr#tableName {
    border-top: 2px solid #eee !important;
  }
}

.logo {
  font-size: 2.4rem;
  // padding: 5px 0 5px;
  color: white;
  background-color: teal;
  /* margin-left: 18px; */
  line-height: 1.2;
  transition: 0.3s;
  span {
    font-size: 1.2rem;
    margin-left: 0.4px;
    font-weight: 100;
  }
  &:hover {
    background: rgba(80, 120, 110, 0.8);
  }
  a {
    padding: 6px 8px 6px 16px;
    margin: 5px 0;
    border: none;
    font-size: 20px;
    transition: 0.3s;
    opacity: 1;
    &:hover {
      background: rgba(80, 120, 110, 0.8);
    }
    svg {
      margin-right: 0px;
    }
  }
}

.role {
  border-bottom: 1px solid #555;
  width: 100%;
  padding: 10px;
  img {
    border-radius: 50%;
    margin: 3px auto;
    width: 60px;
    display: block;
  }
  .name {
    text-align: center;
    color: white;
    font-size: 0.8rem;
  }
}

#todoApp {
  h2.todo_title {
    line-height: 1.8;
    margin: 10px 0 15px;
  }
  input[type="text"] {
    width: 300px;
    min-width: 66%;
    height: 50px;
    border-radius: 5px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.6);
    border: 2px solid rgba(20, 60, 20, 0.5);
    color: #444;
    font-size: 1.4rem;
  }
  .todo-default {
    background: rgba(239, 247, 246, 0.5);
    padding: 5px 10px;
    margin-top: 12px;
    font-size: 1.4rem;
    color: #555;
    box-shadow: 1px 1px 3px #9b9;
    border-radius: 4px;
    width: 300px;
    min-width: 66%;
  }
}

.buttonArea {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  /* max-width: 66%; */
  position: relative;
  height: 50px;
  .btn {
    background-color: rgba(15, 125, 105, 0.7);
    color: white;
    border: 1px solid #274;
    width: 20rem;
    height: 3rem;
    font-size: 1.2rem;
    position: absolute;
    line-height: 1.5rem;
    left: 0;
    right: 0;
    bottom: -3px;
    margin: auto;
    width: 60%;
  }
}

.tgt {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px10px;
  width: 800px;
  max-width: 100%;
  min-height: 400px;
  overflow-y: hidden;
  overflow-x: scroll;
  opacity: 0.9;
  svg {
    fill: #eee;
    opacity: 0.8;
  }
}

footer {
  position: absolute;
  bottom: 10px;
  color: white;
  left: calc(50% - 180px);
  opacity: 0.6;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />

Vue.js SPA [TimeAdminJP] V2.3

A Pen by Pistol on CodePen.

License.