Commit 515dad1b authored by ZeMKI's avatar ZeMKI

Admin area rework and optimization

* now css is using tailwindcss
* minor optimization
* new layout
parent 0686f254
......@@ -26,7 +26,7 @@ class AdminController extends Controller
$data['usercount'] = User::all()->count();
$data['studiescount'] = Study::all()->count();
$data['interviewcount'] = Interview::all()->count();
$data['actions'] = Action::with('user')->get();
$data['actions'] = Action::with('user')->paginate(15);
$data['actionscount'] = Action::all()->count();
$data['occupiedstorage'] = $this->formatBytes(Files::occupiedStorage());
return view('admin.dashboard', $data);
......
This diff is collapsed.
......@@ -10,48 +10,48 @@
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"@babel/core": "^7.4.5",
"@babel/preset-env": "^7.1.1",
"axios": "^0.19.0",
"@babel/core": "^7.9.0",
"@babel/preset-env": "^7.9.0",
"axios": "^0.19.2",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"bootstrap": "^4.3.1",
"bootstrap": "^4.4.1",
"cross-env": "^6.0.3",
"jquery": "^3.4.1",
"laravel-mix": "^5.0.0",
"laravel-mix-polyfill": "^1.1.0",
"laravel-mix": "^5.0.4",
"laravel-mix-polyfill": "^2.0.0",
"laravel-mix-purgecss": "^4.2.0",
"lodash": "^4.17.15",
"popper.js": "^1.16.0",
"sass-loader": "^8.0.0",
"vue": "^2.6.10"
"popper.js": "^2.0.0-next.4",
"sass-loader": "^8.0.2",
"vue": "^2.6.11"
},
"dependencies": {
"@babel/runtime": "^7.7.2",
"@mdi/font": "^4.5.95",
"buefy": "^0.8.6",
"@babel/runtime": "^7.9.2",
"@mdi/font": "^4.9.95",
"buefy": "^0.8.15",
"bulma-extensions": "^6.2.7",
"child_process": "^1.0.2",
"core-js": "^3.4.1",
"core-js": "^3.6.4",
"es6-promise": "^4.2.8",
"fs": "0.0.1-security",
"html-to-image": "^0.1.1",
"html2canvas": "^1.0.0-rc.5",
"html2pdf.js": "^0.9.1",
"html2pdf.js": "^0.9.2",
"i": "^0.3.6",
"imagemin": "^7.0.1",
"interactjs": "^1.7.0",
"interactjs": "^1.9.7",
"jsonlint": "^1.6.3",
"jspdf": "^1.5.3",
"launch-editor-middleware": "^2.2.1",
"moment": "^2.24.0",
"node-sass": "^4.13.0",
"npm": "^6.13.1",
"tailwindcss": "^1.1.3",
"vue-material-design-icons": "^4.2.0",
"vue-select": "^3.2.0",
"vue-template-compiler": "^2.6.10",
"vue2-touch-events": "^2.0.1",
"vuex": "^3.1.2"
"node-sass": "^4.13.1",
"npm": "^6.14.4",
"tailwindcss": "^1.2.0",
"vue-material-design-icons": "^4.4.0",
"vue-select": "^3.9.5",
"vue-template-compiler": "^2.6.11",
"vue2-touch-events": "^2.2.1",
"vuex": "^3.1.3"
}
}
......@@ -75,7 +75,7 @@
</script>
<style scoped>
.pagination-list li{
list-style: none;
ul li{
list-style: none !important;
}
</style>
......@@ -2,51 +2,49 @@
@section('content')
<section class="hero is-info welcome is-small w-full">
<div class="hero-body">
<div class="container mx-auto">
<h1 class="title">
<section class="bg-blue-300 w-full p-4 rounded">
<div class="container mx-auto mx-auto mx-auto mx-auto">
<h1 class="font-bold text-4xl mb-2">
Hello, {{$user->email}}.
</h1>
<h2 class="subtitle">
<h2 class="font-bold text-lg mb-2">
I hope you are having a great day!
</h2>
</div>
</div>
</section>
<section class="info-tiles">
<div class="tile is-ancestor has-text-centered">
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">{{$usercount}}</p>
<p class="subtitle">Users</p>
</article>
<section class="flex">
<div class="max-w-sm rounded overflow-hidden flex-1 p-4 text-center border-solid border-2 mt-1 mr-1 border-gray-400 bg-white lg:rounded-r p-4 ">
<p class="font-bold text-xl mb-2">{{$usercount}}</p>
<p class="font-bold text-lg mb-2">Users</p>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">{{$studiescount}}</p>
<p class="subtitle">Studies</p>
</article>
<div class="max-w-sm rounded overflow-hidden flex-1 p-4 text-center border-solid border-2 mt-1 mr-1 ml-1 border-gray-400 bg-white lg:rounded-r p-4 ">
<p class="font-bold text-xl mb-2">{{$studiescount}}</p>
<p class="font-bold text-lg mb-2">Studies</p>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">{{$interviewcount}}</p>
<p class="subtitle">Interviews</p>
</article>
<div class="max-w-sm rounded overflow-hidden flex-1 p-4 text-center border-solid border-2 mt-1 mr-1 ml-1 border-gray-400 bg-white lg:rounded-r p-4 ">
<p class="font-bold text-xl mb-2">{{$interviewcount}}</p>
<p class="font-bold text-lg mb-2">Interviews</p>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">{{$actionscount}}</p>
<p class="subtitle">Actions</p>
</article>
<div class="max-w-sm rounded overflow-hidden flex-1 p-4 text-center border-solid border-2 mt-1 mr-1 ml-1 border-gray-400 bg-white lg:rounded-r p-4 ">
<p class="font-bold text-xl mb-2">{{$actionscount}}</p>
<p class="font-bold text-lg mb-2">Actions</p>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">{{$occupiedstorage}}</p>
<p class="subtitle">Storage occupied by Screenshots</p>
</article>
<div class="max-w-sm rounded overflow-hidden flex-1 p-4 text-center border-solid border-2 mt-1 ml-1 border-gray-400 bg-white lg:rounded-r p-4 ">
<p class="font-bold text-xl mb-2">{{$occupiedstorage}}</p>
<p class="font-bold text-lg mb-2">Storage occupied by Screenshots</p>
</div>
</div>
</section>
<div class="w-full">
<div class="mt-3 text-center font-bold">
......@@ -55,7 +53,37 @@
</p>
</div>
<div class="content">
<action-table :actions="{{$actions}}"></action-table>
<table class="table-auto">
<thead>
<tr>
<th class="px-4 py-2">id</th>
<th class="px-4 py-2">Author</th>
<th class="px-4 py-2">Name</th>
<th class="px-4 py-2">Description</th>
<th class="px-4 py-2">Url</th>
<th class="px-4 py-2">Time</th>
</tr>
</thead>
<tbody>
@foreach($actions as $action)
<tr
@if(strpos($action['description'],'delete'))
class="bg-red-600 text-gray-300 hover:bg-red-800"
@endif
>
<td class="border px-4 py-2">{{$action['id']}}</td>
<td class="border px-4 py-2">{{$action['email']}}</td>
<td class="border px-4 py-2">{{$action['name']}}</td>
<td class="border px-4 py-2">{{$action['description']}}</td>
<td class="border px-4 py-2">{{$action['url']}}</td>
<td class="border px-4 py-2">{{$action['time']}}</td>
</tr>
@endforeach
</tbody>
</table>
{{ $actions->links() }}
</div>
</div>
......
@include('layouts.header')
<body>
<div class="container mx-auto" id="app">
<!-- START NAV -->
@include('layouts.nav')
<!-- END NAV -->
@if(session()->has('message'))
<b-notification
aria-close-label="Close notification"
type="is-danger"
role="alert"
>
{{session()->get('message')}}
</b-notification>
@endif
<div class="columns">
@include('admin.sidebar')
<div class="column is-9">
@yield('content')
<body class="bg-black-alt font-sans leading-normal tracking-normal">
<div id="app">
<nav id="header" class="bg-gray-900 block w-full z-10 top-0 shadow">
<?php
$grav_url = "https://www.gravatar.com/avatar/" . md5( strtolower( trim( Auth::user()->email ) ) ) . "&s=40";
?>
<div class="w-full container mx-auto mx-auto mx-auto mx-auto flex flex-wrap items-center mt-0 pt-3 pb-3 md:pb-0">
<div class="w-1/2 pl-2 md:pl-0">
<a class="text-gray-100 text-base xl:text-xl no-underline hover:no-underline font-bold" href="#">
<img class="w-8 h-8 rounded-full mr-4 inline" src="{{config('utilities.base64logo')}}" alt="Logo">
Mesort Admin
</a>
</div>
<div class="w-1/2 pr-0">
<div class="flex relative inline-block float-right">
<div class="relative text-sm text-gray-100 logoutdropbtn">
<button id="userButton"
@click="showdropdown('dropdownLogout')"
@mouseover="showdropdown('dropdownLogout')"
class="logoutdropbtn flex items-center focus:outline-none mr-3">
<img class="w-8 h-8 rounded-full mr-4" src="{{$grav_url}}" alt="Avatar of User">
<span class="md:inline-block text-gray-100">{{ Auth::user()->email }}</span>
<form id="logout-form" action="{{ route('logout') }}" method="POST" class="hidden">
@csrf
</form>
<svg class="pl-2 mb-2 font-medium leading-tight text-3xl fill-current text-gray-100" version="1.1"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129"
enable-background="new 0 0 129 129">
<g>
<path
d="m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z"/>
</g>
</svg>
</button>
<div id="dropdownLogout"
class="bg-gray-900 rounded shadow-md absolute mt-8 top-0 right-0 min-w-full overflow-auto z-30 logoutdropdown-content hidden"
@mouseleave="showdropdown('dropdownLogout')"
>
<ul class="list-reset w-full">
<li>
<hr class="border-t mx-2 border-gray-400">
</li>
<li><a href="#"
class="px-4 py-2 block text-gray-100 hover:bg-gray-800 no-underline hover:no-underline"
href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">{{ __('Logout') }}</a>
</li>
</ul>
</div>
</div>
<div class="block lg:hidden pr-4">
<button id="nav-toggle"
class="flex items-center px-3 py-2 border rounded text-gray-500 border-gray-600 hover:text-gray-100 hover:border-teal-500 appearance-none focus:outline-none">
<svg class="fill-current mb-2 font-medium leading-tight text-2xl w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<title>
Menu</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/>
</svg>
</button>
</div>
</div>
</div>
<div
class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block mt-2 lg:mt-0 bg-gray-900 z-20"
id="nav-content">
<ul class="list-reset lg:flex flex-1 items-center px-4 md:px-0">
<li class="mr-6 my-2 md:my-0">
<a :class="url == 'admin' ? 'text-blue-400' :'text-gray-500'" href="{{url('admin/')}}"
class="block py-1 md:py-3 pl-1 align-middle no-underline hover:text-gray-100 border-b-2 border-blue-400 hover:border-blue-400">
<i class="fas fa-home fa-fw mr-3 "></i><span
class="pb-1 md:pb-0 text-sm">Dashboard</span>
</a>
</li>
<li class="mr-6 my-2 md:my-0">
<a :class="url == 'supervisor' ? 'text-blue-400' :'text-gray-500'" href="{{url('admin/supervisor')}}"
class="block py-1 md:py-3 pl-1 align-middle no-underline hover:text-gray-100 border-b-2 border-gray-900 hover:border-pink-400">
<i class="fas fa-tasks fa-fw mr-3"></i><span
class="pb-1 md:pb-0 text-sm">Add Supervisor</span>
</a>
</li>
<li class="mr-6 my-2 md:my-0">
<a :class="url == '' ? 'text-blue-400' :'text-gray-500'" href="{{url('admin/downloadbackup')}}"
target="_blank"
class="block py-1 md:py-3 pl-1 align-middle no-underline hover:text-gray-100 border-b-2 border-gray-900 hover:border-purple-400">
<i class="fa fa-envelope fa-fw mr-3"></i><span class="pb-1 md:pb-0 text-sm">Download Database Backup</span>
</a>
</li>
<li class="mr-6 my-2 md:my-0">
<a href="{{url('admin/users')}}" :class="url == 'users' ? 'text-blue-400' :'text-gray-500'"
class="block py-1 md:py-3 pl-1 align-middle no-underline hover:text-gray-100 border-b-2 border-gray-900 hover:border-green-400">
<i class="fas fa-chart-area fa-fw mr-3"></i><span
class="pb-1 md:pb-0 text-sm">Users</span>
</a>
</li>
<li class="mr-6 my-2 md:my-0">
<a href="{{url('admin/notifications')}}" :class="url == 'notifications' ? 'text-blue-400' :'text-gray-500'"
class="block py-1 md:py-3 pl-1 align-middle no-underline hover:text-gray-100 border-b-2 border-gray-900 hover:border-red-400">
<i class="fa fa-wallet fa-fw mr-3"></i><span
class="pb-1 md:pb-0 text-sm">Notifications</span>
</a>
</li>
<li class="mr-6 my-2 md:my-0">
<a href="{{url('')}}"
class="block py-1 text-gray-500 md:py-3 pl-1 align-middle no-underline hover:text-gray-100 border-b-2 border-gray-900 hover:border-red-400">
<i class="fa fa-wallet fa-fw mr-3"></i><span
class="pb-1 md:pb-0 text-sm">Mesort Home</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container mx-auto mx-auto mx-auto mx-auto mt-2">
<!-- START NAV -->
<!-- END NAV -->
@if(session()->has('message'))
<b-notification
aria-close-label="Close notification"
type="is-danger"
role="alert"
>
{{session()->get('message')}}
</b-notification>
@endif
<div class="w-full">
@yield('content')
</div>
</div>
</div>
</body>
</html>
This diff is collapsed.
......@@ -2,61 +2,44 @@
@section('content')
@if(isset($message))
<span @created="showtoast('{{$message}}')"></span>
@endif
<h1 class="title">Create a Notification</h1>
<form method="POST" action="{{url('admin/notify')}}" class="">
@csrf
<input type="hidden" value="2" name="role">
<label for="name" class="label">
Email
</label>
<input type="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline w-1/4" name="email" >
<input type="checkbox" name="all" value="true"> Send to all users<br>
<label for="name" class="label">
Title
</label>
<input type="text" class="input" name="title">
<label for="email" class="label">
Notification Message
</label>
<textarea class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" name="message" rows="3" cols="10"></textarea>
<button class="button is-link">Send notification</button>
</form>
<div class="columns">
@if(isset($message))
<span @created="showtoast('{{$message}}')"></span>
@endif
<div class="level">
<div class="column">
<h1 class="title">Create a Notification</h1>
<form method="POST" action="{{url('admin/notify')}}" class="" style="padding-top: 40px">
@csrf
<input type="hidden" value="2" name="role">
<div class="field">
<label for="name" class="label">
Email
</label>
<div class="control">
<input type="text" class="input" name="email">
</div>
<div class="field">
<div class="control">
<input type="checkbox" name="all" value="true"> Send to all users<br>
</div>
</div>
</div>
<div class="field">
<label for="name" class="label">
Title
</label>
<div class="control">
<input type="text" class="input" name="title">
</div>
</div>
<div class="field">
<label for="email" class="label">
Notification Message
</label>
<textarea class="textarea" name="message" rows="3" cols="10"></textarea>
</div>
<div class="level">
<div class="field">
<div class="control">
<button class="button is-link">Send notification</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
@endsection
......@@ -3,7 +3,7 @@
@section('content')
<div class="columns">
<div>
@if(isset($message))
<span @created="showtoast({{$message}})"></span>
......@@ -11,53 +11,33 @@
@endif
<div class="level">
<div class="column">
<h1 class="title">Create a Supervisor</h1>
<h6 class="subtitle has-text-danger">A valid email is required. <br> If you don't enter the email text,
the default will be used.</h6>
<form method="POST" action="{{url('admin/users/supervisor')}}" class="" style="padding-top: 40px">
@csrf
<input type="hidden" value="2" name="role">
<div class="field">
<label for="name" class="label">
Email
</label>
<div class="control">
<input type="text" class="input" name="email" required>
</div>
</div>
<div class="field">
<p class="text-base">You can use markdown in this field, it will be rendered in the email.</p>
<label for="email" class="label">
Email text
</label>
<textarea class="textarea" name="emailtext" rows="3" cols="10"></textarea>
</div>
<div class="level">
<div class="field">
<div class="control">
<input type="checkbox" name="testEmail" value="true"> Don't create user but send
email<br>
</div>
</div>
<div class="field">
<div class="control">
<button class="button is-link">Send email</button>
</div>
</div>
</div>
</form>
</div>
</div>
<h1 class="title">Create a Supervisor</h1>
<h6 class="subtitle text-red-500">A valid email is required. <br> If you don't enter the email text,
the default will be used.</h6>
<form method="POST" action="{{url('admin/users/supervisor')}}" class="mt-2" >
@csrf
<input type="hidden" value="2" name="role">
<label for="name" class="label">
Email
</label>
<input type="email" class="shadow appearance-none border rounded w-1/4 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" name="email" required>
<p class="text-base">You can use markdown in this field, it will be rendered in the email.</p>
<label for="email" class="label mt-2">
Email text
</label>
<textarea class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" name="emailtext" rows="3" cols="10"></textarea>
<input type="checkbox" name="testEmail" value="true"> Don't create user but send
email<br>
<button class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded float-right" type="submit">Send email</button>
</form>
</div>
@endsection
......@@ -2,7 +2,7 @@
@section('content')
<div class="bg-img"></div>
<div class="container mx-auto ">
<div class="container mx-auto mx-auto mx-auto mx-auto ">
<div class="columns is-centered">
<div class="column is-6" style="margin-top: 10%">
......
@extends('layouts.app')
@section('content')
<div class="container mx-auto">
<div class="container mx-auto mx-auto mx-auto mx-auto">
<div class="flex flex-wrap justify-center">
<div class="md:w-2/3 pr-4 pl-4">
<div class="relative flex flex-col min-w-0 rounded break-words border bg-white border-1 border-grey-light">
......@@ -9,7 +9,7 @@
<div class="flex-auto p-6">