Improves responsiveness of work order page.

Same styling improvements can apply to other pages in the future.

app/Asset.php

@@ -16,4 +16,9 @@ class Asset extends Model
     {
         return $this->hasMany('App\WorkOrder');
     }
+
+    public function group()
+    {
+        return $this->belongsTo('App\Group', 'pcgroupid');
+    }
 }

app/Group.php

@@ -0,0 +1,17 @@
+<?php
+
+namespace App;
+
+use Illuminate\Database\Eloquent\Model;
+
+class Group extends Model
+{
+    protected $table = 'pc_group';
+    protected $primaryKey = 'pcgroupid';
+
+    const UPDATED_AT = 'modified_date';
+
+    public function assets() {
+        return $this->hasMany('App\Asset',);
+    }
+}

public/css/app.css

@@ -10888,3 +10888,38 @@ a.text-dark:focus {
   padding: 0.5rem 0.5rem;
 }
 
+.xs-collapse {
+  display: block;
+}
+
+/* Styles for toggle button (optional) */
+
+.xs-toggle .icon-bar {
+  display: block;
+  width: 22px;
+  height: 2px;
+  border-radius: 1px;
+}
+
+.xs-toggle .icon-bar + .icon-bar {
+  margin-top: 4px;
+}
+
+.btn-default.xs-toggle .icon-bar {
+  background-color: #888;
+}
+
+@media (min-width: 575.98px) {
+  .xs-toggle {
+    display: none;
+    visibility: hidden;
+  }
+
+  .xs-collapse,
+  .xs-collapse.show,
+  .xs-collapse:not(.show) {
+    display: flex;
+    visibility: visible;
+  }
+}
+

resources/sass/app.scss

@@ -10,3 +10,36 @@
 .nav-link {
     padding: 0.5rem 0.5rem;
 }
+
+.xs-collapse {
+    display: block;
+}
+
+/* Styles for toggle button (optional) */
+
+.xs-toggle .icon-bar {
+    display: block;
+    width: 22px;
+    height: 2px;
+    border-radius: 1px;
+}
+
+.xs-toggle .icon-bar + .icon-bar {
+    margin-top: 4px;
+}
+
+.btn-default.xs-toggle .icon-bar {
+    background-color: #888;
+}
+
+
+@media (min-width: 575.98px) {
+    .xs-toggle {
+        display: none;
+        visibility: hidden;
+    }
+    .xs-collapse, .xs-collapse.show, .xs-collapse:not(.show) {
+        display: flex;
+        visibility: visible;
+    }
+}

resources/views/workorders/show.blade.php

@@ -6,15 +6,24 @@
     <div class="d-flex flex-wrap">
         <div class="card m-3 flex-fill">
             <div class="card-header">
-                <ul class="nav nav-tabs card-header-tabs nav-justified" id="assetTab" role="tablist">
+                <button type="button" class="btn btn-default xs-toggle float-right" data-toggle="collapse" data-target="#assetTab">
+                    <span class="sr-only">Toggle Navigation</span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </button>
+                <p class="h4 text-center">Asset Information</p>
+                <ul class="nav nav-pills card-header-pills nav-justified xs-collapse collapse" id="assetTab" role="tablist">
                     <li class="nav-item">
-                        <a class="nav-link active" id="assetinfo-tab" data-toggle="tab" href="#assetinfo" role="tab" aria-controls="assetinfo" aria-selected="true">Asset Info</a>
+                        <a class="nav-link active" id="assetinfo-tab" data-toggle="pill" href="#assetinfo" role="tab" aria-controls="assetinfo" aria-selected="true">Asset Info</a>
                     </li>
+                    @if($workOrder->asset->group !== null)
                     <li class="nav-item">
-                        <a class="nav-link" id="history-tab" data-toggle="tab" href="#history" role="tab" aria-controls="history" aria-selected="false">History</a>
+                        <a class="nav-link" id="group-tab" data-toggle="pill" href="#group" role="tab" aria-controls="group" aria-selected="false">Group</a>
                     </li>
+                    @endif
                     <li class="nav-item">
-                        <a class="nav-link" id="credentials-tab" data-toggle="tab" href="#credentials" role="tab" aria-controls="credentials" aria-selected="false">Credentials</a>
+                        <a class="nav-link" id="credentials-tab" data-toggle="pill" href="#credentials" role="tab" aria-controls="credentials" aria-selected="false">Credentials</a>
                     </li>
                 </ul>
             </div>
@@ -24,9 +33,11 @@
                         <assetinfo asset="{{$workOrder->asset}}"></assetinfo>
                         <a href="{{ route('editasset', ['asset' => $workOrder->asset]) }}" class="btn btn-primary">Edit</a>
                     </div>
-                    <div class="tab-pane" id="history" role="tabpanel" aria-labelledby="history-tab">
-                        TODO
+                    @if($workOrder->asset->group !== null)
+                    <div class="tab-pane" id="group" role="tabpanel" aria-labelledby="group-tab">
+                        Name: {{$workOrder->asset->group->pcgroupname}}
                     </div>
+                    @endif
                     <div class="tab-pane" id="credentials" role="tabpanel" aria-labelledby="credentials-tab">
                         TODO
                     </div>
@@ -35,12 +46,19 @@
         </div>
         <div class="card m-3 flex-fill">
             <div class="card-header">
-                <ul class="nav nav-tabs card-header-tabs nav-justified" id="workorderTab" role="tablist">
+                <button type="button" class="btn btn-default xs-toggle float-right" data-toggle="collapse" data-target="#workorderTab">
+                    <span class="sr-only">Toggle Navigation</span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </button>
+                <p class="h4 text-center">Work Order Information</p>
+                <ul class="nav nav-pills card-header-pills nav-justified xs-collapse collapse" id="workorderTab" role="tablist">
                     <li class="nav-item">
-                        <a class="nav-link active" id="workorderinfo-tab" data-toggle="tab" href="#workorderinfo" role="tab" aria-controls="workorderinfo" aria-selected="true">Work Order Info</a>
+                        <a class="nav-link active" id="workorderinfo-tab" data-toggle="pill" href="#workorderinfo" role="tab" aria-controls="workorderinfo" aria-selected="true">Work Order Info</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" id="attachments-tab" data-toggle="tab" href="#attachments" role="tab" aria-controls="attachments" aria-selected="false">Attachments</a>
+                        <a class="nav-link" id="attachments-tab" data-toggle="pill" href="#attachments" role="tab" aria-controls="attachments" aria-selected="false">Attachments</a>
                     </li>
                 </ul>
             </div>