fixes
This commit is contained in:
parent
7be7f0da10
commit
0b6fc89e10
12 changed files with 661 additions and 432 deletions
350
composer.lock
generated
350
composer.lock
generated
File diff suppressed because it is too large
Load diff
446
package-lock.json
generated
446
package-lock.json
generated
File diff suppressed because it is too large
Load diff
104
public/css/app.css
vendored
104
public/css/app.css
vendored
|
@ -260,7 +260,14 @@ body {
|
|||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 340px;
|
||||
left: -340px;
|
||||
-webkit-transition: all .35s ease-in-out;
|
||||
transition: all .35s ease-in-out;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: white;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#app .content {
|
||||
|
@ -276,19 +283,43 @@ body {
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
#app .content > header {
|
||||
#app .content .appheader {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
height: 58px;
|
||||
width: 100%;
|
||||
top: -58px;
|
||||
-webkit-transition: all .35s ease-in-out;
|
||||
transition: all .35s ease-in-out;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#app .content > header a {
|
||||
#app .content .appheader ul {
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
height: 58px;
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.6);
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.1);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app .content .appheader li {
|
||||
display: inline-block;
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.6);
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
#app .content .appheader a {
|
||||
display: inline-block;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#app main {
|
||||
padding: 50px;
|
||||
padding: 10px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
|
@ -302,6 +333,10 @@ body {
|
|||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
#app main .config {
|
||||
|
@ -316,10 +351,66 @@ body {
|
|||
color: white;
|
||||
}
|
||||
|
||||
.item-container {
|
||||
width: 340px;
|
||||
-webkit-transition: all .35s ease-in-out;
|
||||
transition: all .35s ease-in-out;
|
||||
}
|
||||
|
||||
#app.header .appheader {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#app.header .item-container {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
#app.header .item,
|
||||
#app.header .add-item {
|
||||
-webkit-transform: scale(0.8);
|
||||
transform: scale(0.8);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
#app.sidebar nav {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.add-item {
|
||||
width: 300px;
|
||||
height: 130px;
|
||||
margin: 20px;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 300px;
|
||||
flex: 0 0 300px;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
border: 4px dashed rgba(255, 255, 255, 0.7);
|
||||
-webkit-box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.3);
|
||||
color: white;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: none;
|
||||
outline: 1px solid transparent;
|
||||
}
|
||||
|
||||
.add-item a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 90px;
|
||||
color: white;
|
||||
font-size: 19px;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 300px;
|
||||
height: 130px;
|
||||
margin: 20px;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 300px;
|
||||
flex: 0 0 300px;
|
||||
background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.25)));
|
||||
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25));
|
||||
border-radius: 6px;
|
||||
|
@ -330,6 +421,9 @@ body {
|
|||
color: white;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
-webkit-transition: all .35s ease-in-out;
|
||||
transition: all .35s ease-in-out;
|
||||
outline: 1px solid transparent;
|
||||
}
|
||||
|
||||
.item:after {
|
||||
|
|
25
public/js/app.js
vendored
25
public/js/app.js
vendored
|
@ -12,5 +12,28 @@ $.when( $.ready ).then(function() {
|
|||
var hueb = new Huebee( elem, {
|
||||
// options
|
||||
});
|
||||
});
|
||||
});
|
||||
$('#app').on('click', '#config-button', function(e) {
|
||||
e.preventDefault();
|
||||
var app = $('#app');
|
||||
var active = (app.hasClass('header'));
|
||||
app.toggleClass('header');
|
||||
if(active) {
|
||||
$('.add-item').hide();
|
||||
$('#app').removeClass('sidebar');
|
||||
} else {
|
||||
setTimeout(
|
||||
function()
|
||||
{
|
||||
$('.add-item').fadeIn();
|
||||
}, 350);
|
||||
|
||||
}
|
||||
}).on('click', '#add-item', function(e) {
|
||||
e.preventDefault();
|
||||
var app = $('#app');
|
||||
var active = (app.hasClass('sidebar'));
|
||||
app.toggleClass('sidebar');
|
||||
|
||||
});
|
||||
});
|
|
@ -1,4 +1,4 @@
|
|||
{
|
||||
"/css/app.css": "/css/app.css?id=4d970da293df2200c19d",
|
||||
"/js/app.js": "/js/app.js?id=0414ea2af14fb9cba08a"
|
||||
"/css/app.css": "/css/app.css?id=74fa6f50c8e0638a2f2c",
|
||||
"/js/app.js": "/js/app.js?id=86f37c024211b755c39e"
|
||||
}
|
25
resources/assets/js/app.js
vendored
25
resources/assets/js/app.js
vendored
|
@ -3,5 +3,28 @@ $.when( $.ready ).then(function() {
|
|||
var hueb = new Huebee( elem, {
|
||||
// options
|
||||
});
|
||||
});
|
||||
});
|
||||
$('#app').on('click', '#config-button', function(e) {
|
||||
e.preventDefault();
|
||||
var app = $('#app');
|
||||
var active = (app.hasClass('header'));
|
||||
app.toggleClass('header');
|
||||
if(active) {
|
||||
$('.add-item').hide();
|
||||
$('#app').removeClass('sidebar');
|
||||
} else {
|
||||
setTimeout(
|
||||
function()
|
||||
{
|
||||
$('.add-item').fadeIn();
|
||||
}, 350);
|
||||
|
||||
}
|
||||
}).on('click', '#add-item', function(e) {
|
||||
e.preventDefault();
|
||||
var app = $('#app');
|
||||
var active = (app.hasClass('sidebar'));
|
||||
app.toggleClass('sidebar');
|
||||
|
||||
});
|
||||
});
|
100
resources/assets/sass/_app.scss
vendored
100
resources/assets/sass/_app.scss
vendored
|
@ -21,30 +21,60 @@ body {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
display:none;
|
||||
position: absolute;
|
||||
width: 340px;
|
||||
left: -340px;
|
||||
transition: all .35s ease-in-out;
|
||||
background: rgba(0,0,0, 0.7);
|
||||
color: white;
|
||||
z-index: 2;
|
||||
}
|
||||
.content {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> header {
|
||||
background: rgba(0,0,0, 0.4);
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
.appheader {
|
||||
background: rgba(0,0,0, 0.4);
|
||||
text-align: center;
|
||||
position:absolute;
|
||||
height: 58px;
|
||||
width: 100%;
|
||||
top: -58px;
|
||||
transition: all .35s ease-in-out;
|
||||
z-index: 1;
|
||||
ul {
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
height: 58px;
|
||||
border-left: 1px solid rgba(0,0,0,0.6);
|
||||
border-right: 1px solid rgba(255,255,255,0.1);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
border-right: 1px solid rgba(0,0,0,0.6);
|
||||
border-left: 1px solid rgba(255,255,255,0.1);
|
||||
|
||||
}
|
||||
a {
|
||||
display: inline-block;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
main {
|
||||
padding: 50px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
flex-wrap: wrap;
|
||||
align-content: center;
|
||||
.config {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
|
@ -58,11 +88,57 @@ body {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-container {
|
||||
width: 340px;
|
||||
transition: all .35s ease-in-out;
|
||||
}
|
||||
#app {
|
||||
&.header {
|
||||
.appheader {
|
||||
top: 0;
|
||||
}
|
||||
.item-container {
|
||||
width: 280px;
|
||||
}
|
||||
.item, .add-item {
|
||||
transform: scale(0.8);
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
&.sidebar {
|
||||
nav {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.add-item {
|
||||
width: 300px;
|
||||
height: 130px;
|
||||
margin: 20px;
|
||||
flex: 0 0 300px;
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
border: 4px dashed rgba(255,255,255,0.7);
|
||||
box-shadow: 0 0 20px 2px rgba(0,0,0,0.3);
|
||||
color: white;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: none;
|
||||
outline: 1px solid transparent;
|
||||
a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 90px;
|
||||
color: white;
|
||||
font-size: 19px;
|
||||
}
|
||||
}
|
||||
.item {
|
||||
width: 300px;
|
||||
height: 130px;
|
||||
margin: 20px;
|
||||
flex: 0 0 300px;
|
||||
background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.25));
|
||||
border-radius: 6px;
|
||||
padding: 20px;
|
||||
|
@ -72,6 +148,8 @@ body {
|
|||
color: white;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
transition: all .35s ease-in-out;
|
||||
outline: 1px solid transparent;
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
|
3
resources/views/add.blade.php
Normal file
3
resources/views/add.blade.php
Normal file
|
@ -0,0 +1,3 @@
|
|||
<section class="add-item">
|
||||
<a id="add-item" href="">Pin item to dash</a>
|
||||
</section>
|
|
@ -20,8 +20,11 @@
|
|||
</ul>
|
||||
</nav>
|
||||
<div class="content">
|
||||
<header>
|
||||
<a href="{{ route('items.index') }}">Items</a>
|
||||
<header class="appheader">
|
||||
<ul>
|
||||
<li><a href="{{ route('dash') }}">Dash</a></li><li>
|
||||
<a href="{{ route('items.index') }}">Items</a></li>
|
||||
</ul>
|
||||
</header>
|
||||
<main>
|
||||
@if ($message = Session::get('success'))
|
||||
|
@ -40,7 +43,7 @@
|
|||
@endif
|
||||
|
||||
@yield('content')
|
||||
<a class="config" href=""><i class="fas fa-cogs"></i></a>
|
||||
<a id="config-button" class="config" href=""><i class="fas fa-cogs"></i></a>
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
|
12
resources/views/item.blade.php
Normal file
12
resources/views/item.blade.php
Normal file
|
@ -0,0 +1,12 @@
|
|||
<section class="item-container">
|
||||
<div class="item" style="background-color: {{ $app->colour }}">
|
||||
@if($app->icon)
|
||||
<img src="" />
|
||||
@else
|
||||
<i class="fas fa-app-store-ios"></i>
|
||||
@endif
|
||||
{{ $app->title }}
|
||||
Item
|
||||
<a class="link" href="{{ $app->url }}"><i class="fas fa-arrow-alt-to-right"></i></a>
|
||||
</div>
|
||||
</section>
|
|
@ -3,19 +3,12 @@
|
|||
@section('content')
|
||||
@if($apps->first())
|
||||
@foreach($apps as $app)
|
||||
<section class="item" style="background-color: {{ $app->colour }}">
|
||||
@if($app->icon)
|
||||
<img src="" />
|
||||
@else
|
||||
<i class="fas fa-app-store-ios"></i>
|
||||
@endif
|
||||
{{ $app->title }}
|
||||
Item
|
||||
<a class="link" href="{{ $app->url }}"><i class="fas fa-arrow-alt-to-right"></i></a>
|
||||
</section>
|
||||
@include('item')
|
||||
@endforeach
|
||||
@include('add')
|
||||
@else
|
||||
There are currently no Applications, add one here
|
||||
@include('add')
|
||||
@endif
|
||||
|
||||
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
|
|
||||
*/
|
||||
|
||||
Route::get('/', 'ItemController@dash');
|
||||
Route::get('/', 'ItemController@dash')->name('dash');
|
||||
|
||||
Route::resources([
|
||||
'items' => 'ItemController',
|
||||
|
|
Loading…
Reference in a new issue