kenmirrors/grocy
1
0
Fork 0
mirror of https://github.com/grocy/grocy.git synced 2025-04-29 09:39:57 +00:00
Code Issues Projects Releases Wiki Activity

Continue upgrading to Bootstrap 4

Browse Source
This commit is contained in:
Bernd Bestel 2018-07-10 00:07:38 +02:00
parent 4fab4f87d3
commit 306c404362
No known key found for this signature in database
GPG Key ID: 71BD34C0D4891300
5 changed files with 111 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -3,6 +3,7 @@
"private": true, "private": true,
"dependencies": { "dependencies": {
"bootstrap": "^4.1.1", "bootstrap": "^4.1.1",
"jquery": "^3.3.1",
"font-awesome": "^4.7.0", "font-awesome": "^4.7.0",
"bootbox": "^4.4.0", "bootbox": "^4.4.0",
"jquery-serializejson": "^2.8.1", "jquery-serializejson": "^2.8.1",

18
public/css/grocy.css
View File

@ -24,6 +24,12 @@
max-width: 260px; max-width: 260px;
border-left: 0; border-left: 0;
overflow-y: auto; overflow-y: auto;
height: 100%;
}
#sidebar > ul > a > li {
background-color: #e5e5e5;
border: 0;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
@ -36,25 +42,25 @@
} }
} }
.sidebar-nav > li > a { .sidebar-nav > li {
padding-right: 20px; padding-right: 20px;
padding-left: 20px; padding-left: 20px;
transition: all 0.3s; transition: all 0.3s;
} }
.sidebar-nav > li > a:hover { .sidebar-nav > li:hover {
box-shadow: inset 5px 0 0 #337ab7; box-shadow: inset 5px 0 0 #337ab7;
transition: all 0.3s; transition: all 0.3s;
} }
.sidebar-nav > li > a:focus { .sidebar-nav > li:focus {
box-shadow: inset 5px 0 0 #ab2230; box-shadow: inset 5px 0 0 #ab2230;
transition: all 0.3s; transition: all 0.3s;
} }
.sidebar-nav > .active > a, .sidebar-nav > .active,
.sidebar-nav > .active > a:hover, .sidebar-nav > .active:hover,
.sidebar-nav > .active > a:focus { .sidebar-nav > .active:focus {
background-color: #d6d6d6; background-color: #d6d6d6;
box-shadow: inset 5px 0 0 #ab2230; box-shadow: inset 5px 0 0 #ab2230;
transition: all 0.3s; transition: all 0.3s;

104
views/components/menu.blade.php
View File

@ -1,66 +1,96 @@
<ul class="list-group list-group-flush sidebar-nav">
<ul class="nav flex-column sidebar-nav"> <a class="discrete-link" href="{{ $U('/stockoverview') }}">
<li class="nav-item" data-nav-for-page="stockoverview"> <li class="list-group-item" data-nav-for-page="stockoverview">
<a class="discrete-link" href="{{ $U('/stockoverview') }}"><i class="fa fa-tachometer fa-fw"></i>&nbsp;{{ $L('Stock overview') }}</a> <i class="fa fa-tachometer fa-fw"></i>&nbsp;{{ $L('Stock overview') }}
</li> </li>
<li class="nav-item" data-nav-for-page="habitsoverview"> </a>
<a class="discrete-link" href="{{ $U('/habitsoverview') }}"><i class="fa fa-tachometer fa-fw"></i>&nbsp;{{ $L('Habits overview') }}</a> <a class="discrete-link" href="{{ $U('/habitsoverview') }}">
<li class="list-group-item" data-nav-for-page="habitsoverview">
<i class="fa fa-tachometer fa-fw"></i>&nbsp;{{ $L('Habits overview') }}
</li> </li>
<li class="nav-item" data-nav-for-page="batteriesoverview"> </a>
<a class="discrete-link" href="{{ $U('/batteriesoverview') }}"><i class="fa fa-tachometer fa-fw"></i>&nbsp;{{ $L('Batteries overview') }}</a> <a class="discrete-link" href="{{ $U('/batteriesoverview') }}">
<li class="list-group-item" data-nav-for-page="batteriesoverview">
<i class="fa fa-tachometer fa-fw"></i>&nbsp;{{ $L('Batteries overview') }}
</li> </li>
</a>
</ul> </ul>
<div class="discrete-content-separator-2x"></div> <div class="discrete-content-separator-2x"></div>
<ul class="nav flex-column"> <ul class="list-group list-group-flush sidebar-nav">
<li class="nav-item" class="disabled"><a href="#"><strong>{{ $L('Record data') }}</strong></a></li> <li class="list-group-item disabled"><a href="#"><strong>{{ $L('Record data') }}</strong></a></li>
<li class="nav-item" data-nav-for-page="purchase"> <a class="discrete-link" href="{{ $U('/purchase') }}">
<a class="discrete-link" href="{{ $U('/purchase') }}"><i class="fa fa-shopping-cart fa-fw"></i>&nbsp;{{ $L('Purchase') }}</a> <li class="list-group-item" data-nav-for-page="purchase">
<i class="fa fa-shopping-cart fa-fw"></i>&nbsp;{{ $L('Purchase') }}
</li> </li>
<li class="nav-item" data-nav-for-page="consume"> </a>
<a class="discrete-link" href="{{ $U('/consume') }}"><i class="fa fa-cutlery fa-fw"></i>&nbsp;{{ $L('Consume') }}</a> <a class="discrete-link" href="{{ $U('/consume') }}">
<li class="list-group-item" data-nav-for-page="consume">
<i class="fa fa-cutlery fa-fw"></i>&nbsp;{{ $L('Consume') }}
</li> </li>
<li class="nav-item" data-nav-for-page="shoppinglist"> </a>
<a class="discrete-link" href="{{ $U('/shoppinglist') }}"><i class="fa fa-shopping-bag fa-fw"></i>&nbsp;{{ $L('Shopping list') }}</a> <a class="discrete-link" href="{{ $U('/shoppinglist') }}">
<li class="list-group-item" data-nav-for-page="shoppinglist">
<i class="fa fa-shopping-bag fa-fw"></i>&nbsp;{{ $L('Shopping list') }}
</li> </li>
<li class="nav-item" data-nav-for-page="inventory"> </a>
<a class="discrete-link" href="{{ $U('/inventory') }}"><i class="fa fa-list fa-fw"></i>&nbsp;{{ $L('Inventory') }}</a> <a class="discrete-link" href="{{ $U('/inventory') }}">
<li class="list-group-item" data-nav-for-page="inventory">
<i class="fa fa-list fa-fw"></i>&nbsp;{{ $L('Inventory') }}
</li> </li>
<li class="nav-item" data-nav-for-page="habittracking"> </a>
<a class="discrete-link" href="{{ $U('/habittracking') }}"><i class="fa fa-play fa-fw"></i>&nbsp;{{ $L('Habit tracking') }}</a> <a class="discrete-link" href="{{ $U('/habittracking') }}">
<li class="list-group-item" data-nav-for-page="habittracking">
<i class="fa fa-play fa-fw"></i>&nbsp;{{ $L('Habit tracking') }}
</li> </li>
<li class="nav-item" data-nav-for-page="batterytracking"> </a>
<a class="discrete-link" href="{{ $U('/batterytracking') }}"><i class="fa fa-fire fa-fw"></i>&nbsp;{{ $L('Battery tracking') }}</a> <a class="discrete-link" href="{{ $U('/batterytracking') }}">
<li class="list-group-item" data-nav-for-page="batterytracking">
<i class="fa fa-fire fa-fw"></i>&nbsp;{{ $L('Battery tracking') }}
</li> </li>
</a>
</ul> </ul>
<div class="discrete-content-separator-2x"></div> <div class="discrete-content-separator-2x"></div>
<ul class="nav flex-column"> <ul class="list-group list-group-flush sidebar-nav">
<li class="nav-item" class="disabled"><a href="#"><strong>{{ $L('Manage master data') }}</strong></a></li> <li class="list-group-item disabled"><a href="#"><strong>{{ $L('Manage master data') }}</strong></a></li>
<li class="nav-item" data-nav-for-page="products">
<a class="discrete-link" href="{{ $U('/products') }}"><i class="fa fa-product-hunt fa-fw"></i>&nbsp;{{ $L('Products') }}</a> <a class="discrete-link" href="{{ $U('/products') }}">
<li class="list-group-item" data-nav-for-page="products">
<i class="fa fa-product-hunt fa-fw"></i>&nbsp;{{ $L('Products') }}
</li> </li>
<li class="nav-item" data-nav-for-page="locations"> </a>
<a class="discrete-link" href="{{ $U('/locations') }}"><i class="fa fa-map-marker fa-fw"></i>&nbsp;{{ $L('Locations') }}</a> <a class="discrete-link" href="{{ $U('/locations') }}">
<li class="list-group-item" data-nav-for-page="locations">
<i class="fa fa-map-marker fa-fw"></i>&nbsp;{{ $L('Locations') }}
</li> </li>
<li class="nav-item" data-nav-for-page="quantityunits"> </a>
<a class="discrete-link" href="{{ $U('/quantityunits') }}"><i class="fa fa-balance-scale fa-fw"></i>&nbsp;{{ $L('Quantity units') }}</a> <a class="discrete-link" href="{{ $U('/quantityunits') }}">
<li class="list-group-item" data-nav-for-page="quantityunits">
<i class="fa fa-balance-scale fa-fw"></i>&nbsp;{{ $L('Quantity units') }}
</li> </li>
<li class="nav-item" data-nav-for-page="habits"> </a>
<a class="discrete-link" href="{{ $U('/habits') }}"><i class="fa fa-refresh fa-fw"></i>&nbsp;{{ $L('Habits') }}</a> <a class="discrete-link" href="{{ $U('/habits') }}">
<li class="list-group-item" data-nav-for-page="habits">
<i class="fa fa-refresh fa-fw"></i>&nbsp;{{ $L('Habits') }}
</li> </li>
<li class="nav-item" data-nav-for-page="batteries"> </a>
<a class="discrete-link" href="{{ $U('/batteries') }}"><i class="fa fa-battery-three-quarters fa-fw"></i>&nbsp;{{ $L('Batteries') }}</a> <a class="discrete-link" href="{{ $U('/batteries') }}">
<li class="list-group-item" data-nav-for-page="batteries">
<i class="fa fa-battery-three-quarters fa-fw"></i>&nbsp;{{ $L('Batteries') }}
</li> </li>
</a>
</ul> </ul>
<div class="discrete-content-separator-2x hidden-xs"></div> <div class="discrete-content-separator-2x hidden-xs"></div>
<ul class="nav flex-column nav-copyright"> <ul class="list-group list-group-flush nav-copyright">
<li class="nav-item"> <a class="discrete-link" href="#" data-toggle="modal" data-target="#about-modal">
<li class="list-group-item">
Version {{ $version }}<br> Version {{ $version }}<br>
<a class="discrete-link" href="#" data-toggle="modal" data-target="#about-modal">{{ $L('About grocy') }}</a> {{ $L('About grocy') }}
</li> </li>
</a>
</ul> </ul>

12
views/layout/default.blade.php
View File

@ -36,7 +36,7 @@
</head> </head>
<body class="h-100"> <body class="h-100">
<nav id="top-nav" class="navbar navbar-expand-lg navbar-light py-0"> <nav id="top-nav" class="navbar navbar-expand-lg navbar-light fixed-top py-0">
<a class="navbar-brand py-0" href="{{ $U('/') }}">grocy</a> <a class="navbar-brand py-0" href="{{ $U('/') }}">grocy</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-mobile"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-mobile">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
@ -53,13 +53,13 @@
</nav> </nav>
<div class="container-fluid h-100"> <div class="container-fluid h-100">
<div class="row h-100"> <div class="row h-100 pt-5">
<div id="sidebar" class="col-sm-3 col-xl-2 d-none d-lg-block sidebar pt-4"> <nav id="sidebar" class="col-2 d-none d-lg-block pt-3 px-0">
<!--@include('components.menu')--> @include('components.menu')
</div> </nav>
<div class="col pt-4 ml-4 mr-0"> <div class="col pt-3 ml-4 mr-0">
@yield('content') @yield('content')
</div> </div>

11
views/stockoverview.blade.php
View File

@ -10,17 +10,16 @@
@section('content') @section('content')
<div class="row"> <div class="row">
<div class="col">
<h1>{{ $L('Stock overview') }} <small class="text-muted">{{ $L('#1 products with #2 units in stock', count($currentStock), SumArrayValue($currentStock, 'amount')) }}</small></h1> <h1>{{ $L('Stock overview') }} <small class="text-muted">{{ $L('#1 products with #2 units in stock', count($currentStock), SumArrayValue($currentStock, 'amount')) }}</small></h1>
</div>
<div class="row">
<p class="btn btn-lg btn-warning no-real-button responsive-button mr-2">{{ $L('#1 products expiring within the next #2 days', $countExpiringNextXDays, $nextXDays) }}</p> <p class="btn btn-lg btn-warning no-real-button responsive-button mr-2">{{ $L('#1 products expiring within the next #2 days', $countExpiringNextXDays, $nextXDays) }}</p>
<p class="btn btn-lg btn-danger no-real-button responsive-button mr-2">{{ $L('#1 products are already expired', $countAlreadyExpired) }}</p> <p class="btn btn-lg btn-danger no-real-button responsive-button mr-2">{{ $L('#1 products are already expired', $countAlreadyExpired) }}</p>
<p class="btn btn-lg btn-info no-real-button responsive-button">{{ $L('#1 products are below defined min. stock amount', count($missingProducts)) }}</p> <p class="btn btn-lg btn-info no-real-button responsive-button">{{ $L('#1 products are below defined min. stock amount', count($missingProducts)) }}</p>
</div>
</div> </div>
<div class="row mt-3"> <div class="row mt-3">
<div class="col-3 pl-0"> <div class="col-3">
<label for="location-filter">{{ $L('Filter by location') }}</label> <label for="location-filter">{{ $L('Filter by location') }}</label>
<select class="form-control" id="location-filter"> <select class="form-control" id="location-filter">
<option value="all">{{ $L('All') }}</option> <option value="all">{{ $L('All') }}</option>
@ -29,14 +28,14 @@
@endforeach @endforeach
</select> </select>
</div> </div>
<div class="col-3 pl-0"> <div class="col-3">
<label for="search">{{ $L('Search') }}</label> <label for="search">{{ $L('Search') }}</label>
<input type="text" class="form-control" id="search"> <input type="text" class="form-control" id="search">
</div> </div>
</div> </div>
<div class="row table-responsive"> <div class="row table-responsive">
<table id="stock-overview-table" class="table table-striped table-sm"> <table id="stock-overview-table" class="col table table-sm table-striped">
<thead> <thead>
<tr> <tr>
<th>#</th> <th>#</th>