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" />