Merge pull request #1 from notfoundsam/updates/mobile-view

Added mobile version

Makefile

@@ -10,7 +10,7 @@ UNAME= $(shell uname -s)
 
 ifeq ($(UNAME), Linux)
 	UID=$(id -u):$(id -g)
-	RHOST='192.168.100.101'
+	RHOST=$(hostname -I | awk '{print $1}')
 	OS='linux'
 endif
 ifeq ($(UNAME), Darwin)
@@ -69,6 +69,3 @@ deploy-prod:
 	./aws/release-production.sh $(OS)
 rollback-db-prod:
 	./aws/rollback-db-production.sh $(OS)
-laravel-plugins:
-	CURRENT_UID=$(value UID) docker-compose -f $(DCF) run --rm composer composer require --dev barryvdh/laravel-ide-helper
-	CURRENT_UID=$(value UID) docker-compose -f $(DCF) run --rm composer composer require --dev barryvdh/laravel-debugbar

aws/run-task-migrate.json

@@ -5,9 +5,9 @@
   "launchType": "FARGATE",
   "networkConfiguration": {
     "awsvpcConfiguration": {
-      "securityGroups": ["sg-0f16aa9b561ff481b"],
+      "securityGroups": ["sg-your-security-group"],
       "assignPublicIp": "ENABLED",
-      "subnets": ["subnet-0a7ebb79deb937d5b", "subnet-04b3625a98e1b05cf"]
+      "subnets": ["subnet-your-subnet-1", "subnet-your-subnet-2"]
     }
   }
 }

composer.json

@@ -8,7 +8,7 @@
     ],
     "license": "MIT",
     "require": {
-        "php": "^7.4|^8.0",
+        "php": "^8.0",
         "fideloper/proxy": "^4.4",
         "fruitcake/laravel-cors": "^2.0",
         "guzzlehttp/guzzle": "^7.0.1",

resources/js/admin/pages/UsersIndex.vue

@@ -6,7 +6,7 @@
     <div class="uk-container uk-container-expand">
       <div class="area-users-index">
 
-        <div class="uk-card uk-card-default uk-card-small uk-width-1 uk-card-body uk-margin" v-if="showUsersTable">
+        <div class="uk-card uk-card-default uk-card-small uk-width-1 uk-card-body uk-margin uk-overflow-auto" v-if="showUsersTable">
           <table class="uk-table uk-table-small uk-table-middle uk-table-divider">
             <thead>
               <tr>

resources/sass/admin/_content.scss

@@ -1,3 +1,7 @@
 .content {
   margin-left: 240px;
+
+  @media only screen and (max-width: 959px) {
+    margin-left: 0;
+  }
 }

resources/sass/admin/_leftbar.scss

@@ -1,13 +1,17 @@
 .left-bar {
-  position: fixed;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  overflow-x: hidden;
-  overflow-y: auto;
-  background-color: #222A30;
   width: 240px;
-  z-index: 2;
+  padding: 0;
+  background-color: #222A30;
+
+  @media only screen and (min-width: 960px) {
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    z-index: 2;
+  }
 
   ul.uk-nav-default > li > a {
     padding: 8px 20px;
@@ -51,3 +55,7 @@
     padding: 8px 20px;
   }
 }
+
+.uk-offcanvas-bar {
+  left: -240px;
+}

resources/sass/admin/_topbar.scss

@@ -0,0 +1,30 @@
+.top-bar {
+  height: 50px;
+  background-color: #222A30;
+
+  .bar-title {
+    color: #d4d4d4;
+  }
+
+  .hamburger {
+    height: 34px;
+    width: 32px;
+    margin-left: 10px;
+    padding: 0;
+    border: none;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    cursor: pointer;
+    background-color: transparent;
+
+  }
+
+  .bar {
+    display: block;
+    width: 100%;
+    height: 4px;
+    border-radius: 1px;
+    background-color: #fff;
+  }
+}

resources/sass/admin/main.scss

@@ -1,2 +1,3 @@
 @import "leftbar";
+@import "topbar";
 @import "content";

resources/views/admin/leftbar.blade.php

@@ -1,18 +1,3 @@
 <aside class="left-bar uk-light uk-visible@m">
-  <div class="left-nav-wrap">
-    <ul class="uk-nav uk-nav-default uk-nav-parent-icon" data-uk-nav="">
-      @if(auth()->user()->role == App\Models\AdminUser::ADMIN)
-        <li class="uk-nav-header">{{ trans('admin.leftbar.admin') }}</li>
-        <li class="{{ request()->is('admin/users') ? 'uk-open' : '' }}"><a href="{{ route('admin.users.index') }}"><span class="item"><span data-uk-icon="icon: users" class="uk-margin-small-right"></span>@lang('admin.leftbar.users')</span></a></li>
-        <li class="{{ request()->is('admin/vue_users') ? 'uk-open' : '' }}"><a href="{{ route('admin.vue_users.index') }}"><span class="item"><span data-uk-icon="icon: code" class="uk-margin-small-right"></span>@lang('admin.leftbar.vue_users')</span></a></li>
-        <li class="{{ request()->is('admin/tests') ? 'uk-open' : '' }}"><a href="{{ route('admin.users.index') }}"><span class="item"><span data-uk-icon="icon: code" class="uk-margin-small-right"></span>@lang('admin.leftbar.tests')</span></a></li>
-        <li class="{{ request()->is('admin/tests') ? 'uk-open' : '' }}"><a href="{{ route('admin.users.index') }}"><span class="item"><span data-uk-icon="icon: code" class="uk-margin-small-right"></span>@lang('admin.leftbar.tests')</span></a></li>
-      @endif
-    </ul>
-
-    <form action="{{ route('admin.logout') }}" method="POST" class="lang-padding">
-      @csrf
-      <button type="submit" class="uk-width-expand uk-button uk-button-small uk-button-primary" type="submit">@lang('admin.leftbar.logout_btn')</button>
-    </form>
-  </div>
+  @include('admin.navigation')
 </aside>

resources/views/admin/navigation.blade.php

@@ -0,0 +1,16 @@
+<div class="left-nav-wrap">
+  <ul class="uk-nav uk-nav-default uk-nav-parent-icon" data-uk-nav="">
+    @if(auth()->user()->role == App\Models\AdminUser::ADMIN)
+      <li class="uk-nav-header">{{ trans('admin.leftbar.admin') }}</li>
+      <li class="{{ request()->is('admin/users') ? 'uk-open' : '' }}"><a href="{{ route('admin.users.index') }}"><span class="item"><span data-uk-icon="icon: users" class="uk-margin-small-right"></span>@lang('admin.leftbar.users')</span></a></li>
+      <li class="{{ request()->is('admin/vue_users') ? 'uk-open' : '' }}"><a href="{{ route('admin.vue_users.index') }}"><span class="item"><span data-uk-icon="icon: code" class="uk-margin-small-right"></span>@lang('admin.leftbar.vue_users')</span></a></li>
+      <li class="{{ request()->is('admin/tests') ? 'uk-open' : '' }}"><a href="{{ route('admin.users.index') }}"><span class="item"><span data-uk-icon="icon: code" class="uk-margin-small-right"></span>@lang('admin.leftbar.tests')</span></a></li>
+      <li class="{{ request()->is('admin/tests') ? 'uk-open' : '' }}"><a href="{{ route('admin.users.index') }}"><span class="item"><span data-uk-icon="icon: code" class="uk-margin-small-right"></span>@lang('admin.leftbar.tests')</span></a></li>
+    @endif
+  </ul>
+
+  <form action="{{ route('admin.logout') }}" method="POST" class="lang-padding">
+    @csrf
+    <button type="submit" class="uk-width-expand uk-button uk-button-small uk-button-primary" type="submit">@lang('admin.leftbar.logout_btn')</button>
+  </form>
+</div>

resources/views/admin/offcanvas.blade.php

@@ -0,0 +1,6 @@
+<div id="offcanvas-slide" uk-offcanvas="overlay: true">
+<aside class="uk-offcanvas-bar left-bar uk-light ">
+  <button class="uk-offcanvas-close" type="button" uk-close></button>
+  @include('admin.navigation')
+</aside>
+</div>

resources/views/admin/topbar.blade.php

@@ -0,0 +1,8 @@
+<header class="top-bar uk-flex uk-flex-middle uk-hidden@m">
+  <button class="hamburger" type="button" uk-toggle="target: #offcanvas-slide">
+    <span class="bar"></span>
+      <span class="bar"></span>
+      <span class="bar"></span>
+  </button>
+  <div class="bar-title uk-text-center uk-text-bold uk-flex-auto">NOTFOUNDSAM</div>
+</header>

resources/views/admin/users/index.blade.php

@@ -7,7 +7,7 @@
     <div class="uk-flex uk-flex-right uk-margin-top">
       <a class="uk-button uk-button-primary" href="{{ route('admin.users.create') }}">New</a>
     </div>
-    <div class="uk-card uk-card-default uk-card-small uk-card-body uk-margin-bottom uk-margin-top">
+    <div class="uk-card uk-card-default uk-card-small uk-card-body uk-margin-bottom uk-margin-top uk-overflow-auto">
       <table class="uk-table uk-table-small uk-table-divider">
         <thead>
           <tr>

resources/views/layouts/admin.blade.php

@@ -15,6 +15,8 @@
 <body>
   <div id="admin_app" data-role="{{ auth()->user()->role }}">
     @include('admin.leftbar')
+    @include('admin.offcanvas')
+    @include('admin.topbar')
     <main class="content uk-background-muted" data-uk-height-viewport="expand: true">
       @yield('content')
     </main>