mirror of
https://github.com/invoiceninja/invoiceninja.git
synced 2025-05-24 02:14:21 -04:00
Navigation
This commit is contained in:
Hillel Coren
parent
0d1bbfbe7f
commit
0503887629
@ -13,7 +13,7 @@ return [
|
||||
|
|
||||
*/
|
||||
|
||||
'name' => env('APP_NAME', 'Laravel'),
|
||||
'name' => env('APP_NAME', 'Invoice Ninja'),
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
|
||||
94
resources/views/header.blade.php
Normal file
94
resources/views/header.blade.php
Normal file
@ -0,0 +1,94 @@
|
||||
|
||||
<script>
|
||||
|
||||
// https://bulma.io/documentation/components/navbar/
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
// Get all "navbar-burger" elements
|
||||
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
|
||||
|
||||
// Check if there are any navbar burgers
|
||||
if ($navbarBurgers.length > 0) {
|
||||
|
||||
// Add a click event on each of them
|
||||
$navbarBurgers.forEach( el => {
|
||||
el.addEventListener('click', () => {
|
||||
|
||||
// Get the target from the "data-target" attribute
|
||||
const target = el.dataset.target;
|
||||
const $target = document.getElementById(target);
|
||||
|
||||
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
|
||||
el.classList.toggle('is-active');
|
||||
$target.classList.toggle('is-active');
|
||||
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<header class="hero is-light">
|
||||
<div class="hero-head">
|
||||
<nav class="navbar" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="https://bulma.io">
|
||||
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="navbarBasicExample" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item">
|
||||
Home
|
||||
</a>
|
||||
|
||||
<a class="navbar-item">
|
||||
Documentation
|
||||
</a>
|
||||
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link">
|
||||
More
|
||||
</a>
|
||||
|
||||
<div class="navbar-dropdown">
|
||||
<a class="navbar-item">
|
||||
About
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
Jobs
|
||||
</a>
|
||||
<a class="navbar-item">
|
||||
Contact
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<a class="navbar-item">
|
||||
Report an issue
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="buttons">
|
||||
<a class="button is-primary">
|
||||
<strong>Sign up</strong>
|
||||
</a>
|
||||
<a class="button is-light">
|
||||
Log in
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
@ -27,7 +27,6 @@
|
||||
<meta name="description" content="@yield('meta_description')"/>
|
||||
<link href="{{ asset('favicon.png') }}" rel="shortcut icon" type="image/png">
|
||||
|
||||
|
||||
<!--
|
||||
TODO Setup social sharing info
|
||||
<meta property="og:site_name" content="Invoice Ninja"/>
|
||||
@ -64,8 +63,196 @@
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link rel="canonical" href="{{ config('ninja.app_url') }}{{ request()->path() }}"/>
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css"/>
|
||||
<script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
Hey Dave :)
|
||||
|
||||
@include('header')
|
||||
|
||||
<div class="section">
|
||||
<div class="columns">
|
||||
|
||||
@include('sidebar')
|
||||
|
||||
<main class="column">
|
||||
<div class="level">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<div class="title">Dashboard</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<button type="button" class="button is-small">
|
||||
March 8, 2017 - April 6, 2017
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns is-multiline">
|
||||
<div class="column">
|
||||
<div class="box">
|
||||
<div class="heading">Top Seller Total</div>
|
||||
<div class="title">56,950</div>
|
||||
<div class="level">
|
||||
<div class="level-item">
|
||||
<div class="">
|
||||
<div class="heading">Sales $</div>
|
||||
<div class="title is-5">250,000</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item">
|
||||
<div class="">
|
||||
<div class="heading">Overall $</div>
|
||||
<div class="title is-5">750,000</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item">
|
||||
<div class="">
|
||||
<div class="heading">Sales %</div>
|
||||
<div class="title is-5">25%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="box">
|
||||
<div class="heading">Revenue / Expenses</div>
|
||||
<div class="title">55% / 45%</div>
|
||||
<div class="level">
|
||||
<div class="level-item">
|
||||
<div class="">
|
||||
<div class="heading">Rev Prod $</div>
|
||||
<div class="title is-5">30%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item">
|
||||
<div class="">
|
||||
<div class="heading">Rev Serv $</div>
|
||||
<div class="title is-5">25%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item">
|
||||
<div class="">
|
||||
<div class="heading">Exp %</div>
|
||||
<div class="title is-5">45%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="box">
|
||||
<div class="heading">Feedback Activity</div>
|
||||
<div class="title">78% ↑</div>
|
||||
<div class="level">
|
||||
<div class="level-item">
|
||||
<div class="">
|
||||
<div class="heading">Positive</div>
|
||||
<div class="title is-5">1560</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item">
|
||||
<div class="">
|
||||
<div class="heading">Negative</div>
|
||||
<div class="title is-5">368</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item">
|
||||
<div class="">
|
||||
<div class="heading">Pos/Neg %</div>
|
||||
<div class="title is-5">77% / 23%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="box">
|
||||
<div class="heading">Orders / Returns</div>
|
||||
<div class="title">75% / 25%</div>
|
||||
<div class="level">
|
||||
<div class="level-item">
|
||||
<div class="">
|
||||
<div class="heading">Orders $</div>
|
||||
<div class="title is-5">425,000</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item">
|
||||
<div class="">
|
||||
<div class="heading">Returns $</div>
|
||||
<div class="title is-5">106,250</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-item">
|
||||
<div class="">
|
||||
<div class="heading">Success %</div>
|
||||
<div class="title is-5">+ 28,5%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-6">
|
||||
<div class="panel">
|
||||
<p class="panel-heading">
|
||||
Expenses: Daily - $700
|
||||
</p>
|
||||
<div class="panel-block">
|
||||
<figure class="image is-16x9">
|
||||
<img src="https://placehold.it/1280x720">
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
<div class="panel">
|
||||
<p class="panel-heading">
|
||||
Refunds: Daily - $200
|
||||
</p>
|
||||
<div class="panel-block">
|
||||
<figure class="image is-16x9">
|
||||
<img src="https://placehold.it/1280x720">
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
<div class="panel">
|
||||
<p class="panel-heading">
|
||||
Something
|
||||
</p>
|
||||
<div class="panel-block">
|
||||
<figure class="image is-16x9">
|
||||
<img src="https://placehold.it/1280x720">
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-6">
|
||||
<div class="panel">
|
||||
<p class="panel-heading">
|
||||
Something Else
|
||||
</p>
|
||||
<div class="panel-block">
|
||||
<figure class="image is-16x9">
|
||||
<img src="https://placehold.it/1280x720">
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
36
resources/views/sidebar.blade.php
Normal file
36
resources/views/sidebar.blade.php
Normal file
@ -0,0 +1,36 @@
|
||||
<aside class="column is-2">
|
||||
<nav class="menu">
|
||||
<p class="menu-label">
|
||||
General
|
||||
</p>
|
||||
<ul class="menu-list">
|
||||
<li><a class="is-active">Dashboard</a></li>
|
||||
<li><a>Customers</a></li>
|
||||
</ul>
|
||||
<p class="menu-label">
|
||||
Administration
|
||||
</p>
|
||||
<ul class="menu-list">
|
||||
<li><a>Team Settings</a></li>
|
||||
<li>
|
||||
<a class="">Manage Your Team</a>
|
||||
<ul>
|
||||
<li><a>Members</a></li>
|
||||
<li><a>Plugins</a></li>
|
||||
<li><a>Add a member</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a>Invitations</a></li>
|
||||
<li><a>Cloud Storage Environment Settings</a></li>
|
||||
<li><a>Authentication</a></li>
|
||||
</ul>
|
||||
<p class="menu-label">
|
||||
Transactions
|
||||
</p>
|
||||
<ul class="menu-list">
|
||||
<li><a>Payments</a></li>
|
||||
<li><a>Transfers</a></li>
|
||||
<li><a>Balance</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
Loading…
x
Reference in New Issue
Block a user