既存のファイル化されているフロントコードを全てassetsに移動し、mixビルドの準備
This commit is contained in:
shibafu
21
resources/assets/js/app.js
vendored
21
resources/assets/js/app.js
vendored
@@ -1,22 +1 @@
|
||||
|
||||
/**
|
||||
* First we will load all of this project's JavaScript dependencies which
|
||||
* includes Vue and other libraries. It is a great starting point when
|
||||
* building robust, powerful web applications using Vue and Laravel.
|
||||
*/
|
||||
|
||||
require('./bootstrap');
|
||||
|
||||
window.Vue = require('vue');
|
||||
|
||||
/**
|
||||
* Next, we will create a fresh Vue application instance and attach it to
|
||||
* the page. Then, you may begin adding components to this application
|
||||
* or customize the JavaScript scaffolding to fit your unique needs.
|
||||
*/
|
||||
|
||||
Vue.component('example', require('./components/Example.vue'));
|
||||
|
||||
const app = new Vue({
|
||||
el: '#app'
|
||||
});
|
||||
|
||||
60
resources/assets/js/bootstrap.js
vendored
60
resources/assets/js/bootstrap.js
vendored
@@ -1,53 +1,17 @@
|
||||
// jQuery
|
||||
import './tissue';
|
||||
|
||||
window._ = require('lodash');
|
||||
|
||||
/**
|
||||
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
|
||||
* for JavaScript based Bootstrap features such as modals and tabs. This
|
||||
* code may be modified to fit the specific needs of your application.
|
||||
*/
|
||||
|
||||
try {
|
||||
window.$ = window.jQuery = require('jquery');
|
||||
|
||||
require('bootstrap-sass');
|
||||
} catch (e) {}
|
||||
|
||||
/**
|
||||
* We'll load the axios HTTP library which allows us to easily issue requests
|
||||
* to our Laravel back-end. This library automatically handles sending the
|
||||
* CSRF token as a header based on the value of the "XSRF" token cookie.
|
||||
*/
|
||||
|
||||
window.axios = require('axios');
|
||||
|
||||
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
|
||||
|
||||
/**
|
||||
* Next we will register the CSRF Token as a common header with Axios so that
|
||||
* all outgoing HTTP requests automatically have it attached. This is just
|
||||
* a simple convenience so we don't have to attach every token manually.
|
||||
*/
|
||||
|
||||
let token = document.head.querySelector('meta[name="csrf-token"]');
|
||||
|
||||
if (token) {
|
||||
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
|
||||
} else {
|
||||
// Setup global request header
|
||||
const token = document.head.querySelector('meta[name="csrf-token"]');
|
||||
if (!token) {
|
||||
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
|
||||
}
|
||||
|
||||
/**
|
||||
* Echo exposes an expressive API for subscribing to channels and listening
|
||||
* for events that are broadcast by Laravel. Echo and event broadcasting
|
||||
* allows your team to easily build robust real-time web applications.
|
||||
*/
|
||||
$.ajaxSetup({
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': token.content
|
||||
}
|
||||
});
|
||||
|
||||
// import Echo from 'laravel-echo'
|
||||
|
||||
// window.Pusher = require('pusher-js');
|
||||
|
||||
// window.Echo = new Echo({
|
||||
// broadcaster: 'pusher',
|
||||
// key: 'your-pusher-key'
|
||||
// });
|
||||
// Bootstrap
|
||||
import 'bootstrap';
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-md-offset-2">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">Example Component</div>
|
||||
|
||||
<div class="panel-body">
|
||||
I'm an example component!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
console.log('Component mounted.')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
58
resources/assets/js/tissue.js
vendored
Normal file
58
resources/assets/js/tissue.js
vendored
Normal file
@@ -0,0 +1,58 @@
|
||||
// app.jsの名はモジュールバンドラーを投入する日まで予約しておく。CSSも同じ。
|
||||
|
||||
(function ($) {
|
||||
|
||||
$.fn.linkCard = function (options) {
|
||||
var settings = $.extend({
|
||||
endpoint: '/api/checkin/card'
|
||||
}, options);
|
||||
|
||||
return this.each(function () {
|
||||
var $this = $(this);
|
||||
$.ajax({
|
||||
url: settings.endpoint,
|
||||
method: 'get',
|
||||
type: 'json',
|
||||
data: {
|
||||
url: $this.find('a').attr('href')
|
||||
}
|
||||
}).then(function (data) {
|
||||
var $metaColumn = $this.find('.col-12:last-of-type');
|
||||
var $imageColumn = $this.find('.col-12:first-of-type');
|
||||
var $title = $this.find('.card-title');
|
||||
var $desc = $this.find('.card-text');
|
||||
var $image = $imageColumn.find('img');
|
||||
|
||||
if (data.title === '') {
|
||||
$title.hide();
|
||||
} else {
|
||||
$title.text(data.title);
|
||||
}
|
||||
|
||||
if (data.description === '') {
|
||||
$desc.hide();
|
||||
} else {
|
||||
$desc.text(data.description);
|
||||
}
|
||||
|
||||
if (data.image === '') {
|
||||
$imageColumn.hide();
|
||||
$metaColumn.removeClass('col-md-6');
|
||||
} else {
|
||||
$image.attr('src', data.image);
|
||||
}
|
||||
|
||||
if (data.title !== '' || data.description !== '' || data.image !== '') {
|
||||
$this.removeClass('d-none');
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
$.fn.pageSelector = function () {
|
||||
return this.on('change', function () {
|
||||
location.href = $(this).find(':selected').data('href');
|
||||
});
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
38
resources/assets/sass/_variables.scss
vendored
38
resources/assets/sass/_variables.scss
vendored
@@ -1,38 +0,0 @@
|
||||
|
||||
// Body
|
||||
$body-bg: #f5f8fa;
|
||||
|
||||
// Borders
|
||||
$laravel-border-color: darken($body-bg, 10%);
|
||||
$list-group-border: $laravel-border-color;
|
||||
$navbar-default-border: $laravel-border-color;
|
||||
$panel-default-border: $laravel-border-color;
|
||||
$panel-inner-border: $laravel-border-color;
|
||||
|
||||
// Brands
|
||||
$brand-primary: #3097D1;
|
||||
$brand-info: #8eb4cb;
|
||||
$brand-success: #2ab27b;
|
||||
$brand-warning: #cbb956;
|
||||
$brand-danger: #bf5329;
|
||||
|
||||
// Typography
|
||||
$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
|
||||
$font-family-sans-serif: "Raleway", sans-serif;
|
||||
$font-size-base: 14px;
|
||||
$line-height-base: 1.6;
|
||||
$text-color: #636b6f;
|
||||
|
||||
// Navbar
|
||||
$navbar-default-bg: #fff;
|
||||
|
||||
// Buttons
|
||||
$btn-default-color: $text-color;
|
||||
|
||||
// Inputs
|
||||
$input-border: lighten($text-color, 40%);
|
||||
$input-border-focus: lighten($brand-primary, 25%);
|
||||
$input-color-placeholder: lighten($text-color, 30%);
|
||||
|
||||
// Panels
|
||||
$panel-default-heading-bg: #fff;
|
||||
15
resources/assets/sass/app.scss
vendored
15
resources/assets/sass/app.scss
vendored
@@ -1,9 +1,8 @@
|
||||
|
||||
// Fonts
|
||||
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");
|
||||
|
||||
// Variables
|
||||
@import "variables";
|
||||
|
||||
// Bootstrap
|
||||
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
|
||||
@import "~bootstrap/scss/bootstrap";
|
||||
|
||||
// Open Iconic
|
||||
@import "~open-iconic/font/css/open-iconic-bootstrap";
|
||||
|
||||
// Legacy app styles
|
||||
@import "tissue.css";
|
||||
99
resources/assets/sass/tissue.css
vendored
Normal file
99
resources/assets/sass/tissue.css
vendored
Normal file
@@ -0,0 +1,99 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
.tis-footer {
|
||||
color: #a2a2a2;
|
||||
font-size: small;
|
||||
border-top: 1px solid #eee;
|
||||
background: linear-gradient(to bottom, #f8f9fa, #fff)
|
||||
}
|
||||
|
||||
.tis-word-wrap {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.tis-contribution-graph {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.tis-need-agecheck .container {
|
||||
filter: blur(45px);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
transition: filter .15s linear;
|
||||
}
|
||||
|
||||
.list-group-item.no-side-border {
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.list-group-item.border-bottom-only:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.list-group-item.border-bottom-only {
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.list-group-item.border-bottom-only:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.timeline-action-item {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.tis-global-count-graph {
|
||||
height: 90px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, .125);
|
||||
}
|
||||
|
||||
.tis-page-selector {
|
||||
margin-left: -1px;
|
||||
width: calc(100% + 2px);
|
||||
height: 100%;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.tis-sidebar-info {
|
||||
font-size: small;
|
||||
}
|
||||
}
|
||||
|
||||
#navbarNav > .d-lg-none > .row > div:first-of-type {
|
||||
padding-left: 15px;
|
||||
padding-right: 7.5px;
|
||||
}
|
||||
|
||||
#navbarNav > .d-lg-none > .row > div {
|
||||
padding-left: 7.5px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
#navbarNav > .d-lg-none > .row > .col .btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#navbarAccountDropdownSp {
|
||||
max-width: calc(100vw - 5em);
|
||||
}
|
||||
|
||||
.card-img-left {
|
||||
width: 100%;
|
||||
border-top-left-radius: calc(.25rem - 1px);
|
||||
border-bottom-left-radius: calc(.25rem - 1px);
|
||||
}
|
||||
|
||||
.card-img-right {
|
||||
width: 100%;
|
||||
border-top-right-radius: calc(.25rem - 1px);
|
||||
border-bottom-right-radius: calc(.25rem - 1px);
|
||||
}
|
||||
Reference in New Issue
Block a user