Some new code for the new layout.

This commit is contained in:
James Cole
2018-12-23 07:21:47 +01:00
parent 17e85ca2cf
commit 91deac706c
16 changed files with 426 additions and 163 deletions

16
resources/js/app.js vendored Normal file
View File

@@ -0,0 +1,16 @@
/**
* First we will load all of this project's JavaScript dependencies which
* includes React and other helpers. It's a great starting point while
* building robust, powerful web applications using React + Laravel.
*/
require('./bootstrap');
/**
* Next, we will create a fresh React component 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.
*/
require('./components/Example');

56
resources/js/bootstrap.js vendored Normal file
View File

@@ -0,0 +1,56 @@
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.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} 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 {
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.
*/
// import Echo from 'laravel-echo'
// window.Pusher = require('pusher-js');
// window.Echo = new Echo({
// broadcaster: 'pusher',
// key: process.env.MIX_PUSHER_APP_KEY,
// cluster: process.env.MIX_PUSHER_APP_CLUSTER,
// encrypted: true
// });

26
resources/js/components/Example.js vendored Normal file
View File

@@ -0,0 +1,26 @@
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
export default class Example extends Component {
render() {
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<div className="card">
<div className="card-header">Example Component</div>
<div className="card-body">
I'm an example component!
</div>
</div>
</div>
</div>
</div>
);
}
}
if (document.getElementById('example')) {
ReactDOM.render(<Example />, document.getElementById('example'));
}

View File

@@ -41,6 +41,7 @@ return [
'cancel' => 'Cancel',
'from' => 'From',
'to' => 'To',
'structure' => 'Structure',
'help_translating' => 'This help text is not yet available in your language. <a href="https://crowdin.com/project/firefly-iii-help">Will you help translate?</a>',
'showEverything' => 'Show everything',
'never' => 'Never',
@@ -113,6 +114,7 @@ return [
'cannot_redirect_to_account' => 'Firefly III cannot redirect you to the correct page. Apologies.',
'sum_of_expenses' => 'Sum of expenses',
'sum_of_income' => 'Sum of income',
'liabilities' => 'Liabilities',
'spent_in_specific_budget' => 'Spent in budget ":budget"',
'sum_of_expenses_in_budget' => 'Spent total in budget ":budget"',
'left_in_budget_limit' => 'Left to spend according to budgeting',
@@ -913,7 +915,10 @@ return [
'income' => 'Revenue / income',
'transfers' => 'Transfers',
'moneyManagement' => 'Money management',
'money_management' => 'Money management',
'tools' => 'Tools',
'piggyBanks' => 'Piggy banks',
'piggy_banks' => 'Piggy banks',
'bills' => 'Bills',
'withdrawal' => 'Withdrawal',
'opening_balance' => 'Opening balance',

View File

@@ -1,6 +1,8 @@
{% extends "./layout/default" %}
{% block content %}
<div class="row row-cards">
<div class="col-6 col-sm-4 col-lg-2">
<div class="card">
<div class="card-body p-3 text-center">
@@ -73,6 +75,7 @@
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card">
<div class="card-header">

View File

@@ -20,8 +20,8 @@
Firefly III
</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
<link rel="stylesheet" href="v2/lib/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="v2/assets/css/gf-source.css">
<script src="v2/assets/js/require.min.js"></script>
<script>
requirejs.config({
@@ -46,79 +46,8 @@
<div class="header py-4">
<div class="container">
<div class="d-flex">
<a class="header-brand" href="./index.html">
<img src="v2/demo/brand/tabler.svg" class="header-brand-img" alt="tabler logo">
</a>
<div class="d-flex order-lg-2 ml-auto">
<div class="nav-item d-none d-md-flex">
<a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
</div>
<div class="dropdown d-none d-md-flex">
<a class="nav-link icon" data-toggle="dropdown">
<i class="fe fe-bell"></i>
<span class="nav-unread"></span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a href="#" class="dropdown-item d-flex">
<span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
<div>
<strong>Nathan</strong> pushed new commit: Fix page load performance issue.
<div class="small text-muted">10 minutes ago</div>
</div>
</a>
<a href="#" class="dropdown-item d-flex">
<span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
<div>
<strong>Alice</strong> started new task: Tabler UI design.
<div class="small text-muted">1 hour ago</div>
</div>
</a>
<a href="#" class="dropdown-item d-flex">
<span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
<div>
<strong>Rose</strong> deployed new version of NodeJS REST Api V3
<div class="small text-muted">2 hours ago</div>
</div>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
</div>
</div>
<div class="dropdown">
<a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
<span class="avatar" style="background-image: url(./demo/faces/female/25.jpg)"></span>
<span class="ml-2 d-none d-lg-block">
<span class="text-default">Jane Pearson</span>
<small class="text-muted d-block mt-1">Administrator</small>
</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="#">
<i class="dropdown-icon fe fe-user"></i> Profile
</a>
<a class="dropdown-item" href="#">
<i class="dropdown-icon fe fe-settings"></i> Settings
</a>
<a class="dropdown-item" href="#">
<span class="float-right"><span class="badge badge-primary">6</span></span>
<i class="dropdown-icon fe fe-mail"></i> Inbox
</a>
<a class="dropdown-item" href="#">
<i class="dropdown-icon fe fe-send"></i> Message
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<i class="dropdown-icon fe fe-help-circle"></i> Need help?
</a>
<a class="dropdown-item" href="#">
<i class="dropdown-icon fe fe-log-out"></i> Sign out
</a>
</div>
</div>
</div>
<a href="#" class="header-toggler d-lg-none ml-3 ml-lg-0" data-toggle="collapse" data-target="#headerMenuCollapse">
<span class="header-toggler-icon"></span>
</a>
{# favicons #}
{% include('partials.top_bar') %}
</div>
</div>
</div>
@@ -126,64 +55,16 @@
<div class="container">
<div class="row align-items-center">
<div class="col-lg-3 ml-auto">
<form class="input-icon my-3 my-lg-0">
<input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
<form class="input-icon my-3 my-lg-0" action="{{ route('search.index') }}" method="get">
<input type="search" class="form-control header-search" placeholder="Search&hellip;" name="q" tabindex="1">
<div class="input-icon-addon">
<i class="fe fe-search"></i>
</div>
</form>
</div>
<div class="col-lg order-lg-first">
<ul class="nav nav-tabs border-0 flex-column flex-lg-row">
<li class="nav-item">
<a href="./index.html" class="nav-link active"><i class="fe fe-home"></i> Home</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-box"></i> Interface</a>
<div class="dropdown-menu dropdown-menu-arrow">
<a href="./cards.html" class="dropdown-item ">Cards design</a>
<a href="./charts.html" class="dropdown-item ">Charts</a>
<a href="./pricing-cards.html" class="dropdown-item ">Pricing cards</a>
</div>
</li>
<li class="nav-item dropdown">
<a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-calendar"></i> Components</a>
<div class="dropdown-menu dropdown-menu-arrow">
<a href="./maps.html" class="dropdown-item ">Maps</a>
<a href="./icons.html" class="dropdown-item ">Icons</a>
<a href="./store.html" class="dropdown-item ">Store</a>
<a href="./blog.html" class="dropdown-item ">Blog</a>
<a href="./carousel.html" class="dropdown-item ">Carousel</a>
</div>
</li>
<li class="nav-item dropdown">
<a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a>
<div class="dropdown-menu dropdown-menu-arrow">
<a href="./profile.html" class="dropdown-item ">Profile</a>
<a href="./login.html" class="dropdown-item ">Login</a>
<a href="./register.html" class="dropdown-item ">Register</a>
<a href="./forgot-password.html" class="dropdown-item ">Forgot password</a>
<a href="./400.html" class="dropdown-item ">400 error</a>
<a href="./401.html" class="dropdown-item ">401 error</a>
<a href="./403.html" class="dropdown-item ">403 error</a>
<a href="./404.html" class="dropdown-item ">404 error</a>
<a href="./500.html" class="dropdown-item ">500 error</a>
<a href="./503.html" class="dropdown-item ">503 error</a>
<a href="./email.html" class="dropdown-item ">Email</a>
<a href="./empty.html" class="dropdown-item ">Empty page</a>
<a href="./rtl.html" class="dropdown-item ">RTL mode</a>
</div>
</li>
<li class="nav-item dropdown">
<a href="./form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
</li>
<li class="nav-item">
<a href="./gallery.html" class="nav-link"><i class="fe fe-image"></i> Gallery</a>
</li>
<li class="nav-item">
<a href="./docs/index.html" class="nav-link"><i class="fe fe-file-text"></i> Documentation</a>
</li>
</ul>
{# favicons #}
{% include('partials.top_menu') %}
</div>
</div>
</div>
@@ -192,7 +73,8 @@
<div class="container">
<div class="page-header">
<h1 class="page-title">
Dashboard
{{ title }}
<small class="text-muted">{{ subTitle }}</small>
</h1>
</div>
{% block content %}{% endblock %}

View File

@@ -0,0 +1,88 @@
<a class="header-brand" href="{{ route('index') }}">
<img src="v2/assets/images/basic-logo-ff3.png" class="header-brand-img" alt="Firefly III">
</a>
<div class="d-flex order-lg-2 ml-auto">
{# SOURCE CODE LINK #}
{#
<div class="nav-item d-none d-md-flex">
<a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
</div>
#}
{# TOP MENU WITH ALERTS, NOT IN USE #}
{#
<div class="dropdown d-none d-md-flex">
<a class="nav-link icon" data-toggle="dropdown">
<i class="fe fe-bell"></i>
<span class="nav-unread"></span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a href="#" class="dropdown-item d-flex">
<span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span>
<div>
<strong>Nathan</strong> pushed new commit: Fix page load performance issue.
<div class="small text-muted">10 minutes ago</div>
</div>
</a>
<a href="#" class="dropdown-item d-flex">
<span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span>
<div>
<strong>Alice</strong> started new task: Tabler UI design.
<div class="small text-muted">1 hour ago</div>
</div>
</a>
<a href="#" class="dropdown-item d-flex">
<span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span>
<div>
<strong>Rose</strong> deployed new version of NodeJS REST Api V3
<div class="small text-muted">2 hours ago</div>
</div>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a>
</div>
</div>
#}
<div class="dropdown">
<a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
<span class="avatar" {#style="background-image: url(./demo/faces/female/25.jpg)"#}></span>
<span class="ml-2 d-none d-lg-block">
<span class="text-default">{{ Auth.user.email }}</span>
<small class="text-muted d-block mt-1">USER ROLE</small>
</span>
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
<a class="dropdown-item" href="{{ route('profile.index') }}">
<i class="dropdown-icon fa fa-user"></i> {{ 'profile'|_ }}
</a>
<a class="dropdown-item" href="#">
<i class="dropdown-icon fa fa-gear"></i> {{ 'preferences'|_ }}
</a>
<a class="dropdown-item" href="#">
<i class="dropdown-icon fa fa-hand-spock-o"></i> {{ 'administration'|_ }}
</a>
{#
<a class="dropdown-item" href="#">
<span class="float-right"><span class="badge badge-primary">6</span></span>
<i class="dropdown-icon fe fe-mail"></i> Inbox
</a>
<a class="dropdown-item" href="#">
<i class="dropdown-icon fe fe-send"></i> Message
</a>
#}
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<i class="dropdown-icon fe fe-help-circle"></i> {{ 'need_help'|_ }}
</a>
<a class="dropdown-item" href="#">
<i class="dropdown-icon fe fe-log-out"></i> {{ 'logout'|_ }}
</a>
</div>
</div>
</div>
<a href="#" class="header-toggler d-lg-none ml-3 ml-lg-0" data-toggle="collapse" data-target="#headerMenuCollapse">
<span class="header-toggler-icon"></span>
</a>

View File

@@ -0,0 +1,49 @@
<ul class="nav nav-tabs border-0 flex-column flex-lg-row">
<li class="nav-item">
<a href="{{ route('index') }}" class="nav-link active"><i class="fa fa-home"></i> {{ 'dashboard'|_ }}</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fa fa-repeat"></i> {{ 'transactions'|_ }}</a>
<div class="dropdown-menu dropdown-menu-arrow">
<a href="{{ route('transactions.show', ['withdrawal']) }}" class="dropdown-item ">{{ 'expenses'|_ }}</a>
<a href="{{ route('transactions.show', ['expense']) }}" class="dropdown-item ">{{ 'income'|_ }}</a>
<a href="{{ route('transactions.show', ['transfer']) }}" class="dropdown-item ">{{ 'transfers'|_ }}</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fa fa-credit-card"></i> {{ 'accounts'|_ }}</a>
<div class="dropdown-menu dropdown-menu-arrow">
<a href="{{ route('accounts.show', ['asset']) }}" class="dropdown-item ">{{ 'asset_accounts'|_ }}</a>
<a href="{{ route('accounts.show', ['expense']) }}" class="dropdown-item ">{{ 'expense_accounts'|_ }}</a>
<a href="{{ route('accounts.show', ['revenue']) }}" class="dropdown-item ">{{ 'revenue_accounts'|_ }}</a>
<a href="{{ route('accounts.show', ['liabilities']) }}" class="dropdown-item ">{{ 'liabilities'|_ }}</a>
</div>
</li>
<li class="nav-item dropdown">
<a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fa fa-database"></i> {{ 'structure'|_ }}</a>
<div class="dropdown-menu dropdown-menu-arrow">
<a href="{{ route('categories.index') }}" class="dropdown-item ">{{ 'categories'|_ }}</a>
<a href="{{ route('budgets.index') }}" class="dropdown-item ">{{ 'budgets'|_ }}</a>
<a href="{{ route('tags.index') }}" class="dropdown-item ">{{ 'tags'|_ }}</a>
</div>
</li>
<li class="nav-item dropdown">
<a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fa fa-filter"></i> {{ 'money_management'|_ }}</a>
<div class="dropdown-menu dropdown-menu-arrow">
<a href="{{ route('bills.index') }}" class="dropdown-item ">{{ 'bills'|_ }}</a>
<a href="{{ route('piggy-banks.index') }}" class="dropdown-item ">{{ 'piggy_banks'|_ }}</a>
<a href="{{ route('reports.index') }}" class="dropdown-item ">{{ 'reports'|_ }}</a>
</div>
</li>
<li class="nav-item dropdown">
<a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fa fa-gears"></i> {{ 'tools'|_ }}</a>
<div class="dropdown-menu dropdown-menu-arrow">
<a href="{{ route('rules.index') }}" class="dropdown-item ">{{ 'rules'|_ }}</a>
<a href="{{ route('recurring.index') }}" class="dropdown-item ">{{ 'recurrences'|_ }}</a>
<a href="{{ route('currencies.index') }}" class="dropdown-item ">{{ 'currencies'|_ }}</a>
<a href="{{ route('import.index') }}" class="dropdown-item ">{{ 'import_data'|_ }}</a>
<a href="{{ route('export.index') }}" class="dropdown-item ">{{ 'export_data'|_ }}</a>
</div>
</li>
</ul>