Updated package (#2)

- added local debugging with flag in src/resources/js/config.js
- packed css and js to use in projects
- updated styles
- fixed navigation
- allowed overrides for routes

.gitignore

@@ -14,3 +14,4 @@ npm-debug.log
 yarn-error.log
 /.idea
 /.vscode
+/.php-cs-fixer.cache

README.md

@@ -1,7 +1,7 @@
 # gallery
 Packaged version of the recreate gallery project
 
-Run:
+## Run:
 
 `composer require lisa-fehr/gallery`
 
@@ -13,19 +13,48 @@ Run:
 
 `npm run development`
 
+## Add the css and js files to your layout file:
+```html
+<link rel="stylesheet" href="{{ asset('vendor/lisa-fehr/gallery/css/app.css') }}" type="text/css" media="screen"/>
+...
+<script src="{{mix('js/app.js', 'vendor/lisa-fehr/gallery')}}"></script>
+```
 
-
-Add this div to a view called portfolio:
+## Add this div to a view called `portfolio`:
 ```html
 <div id="gallery-app" class="text-sm w-full" data-filters="{{$filter['tags'] ?? ''}}"></div>
 ```
 
-Add this kind of code to routes where tags match the uber_tags table names you want to show:
+You can also override routes with inconsistent patterns:
+```javascript
+{
+    "tag": "path from root - no starting slash needed"
+}
+```
+```html
+<div id="gallery-app" class="text-sm w-full" 
+    data-filters="{{$filter['tags'] ?? ''}}"
+    data-routes='{"portfolio":"portfolio","Folder2005":"Folder\/2005"}'
+></div>
+```
+
+## Add to routes file
+Add this kind of code to routes, where `tags` match the `uber_tags` table (route `name` is required to match the tag):
 
 ```php
 Route::get('photos', function () {
 
-return view('portfolio')->with('filter', ['tags' => 'photos,california2014']);
+return view('portfolio')->with('filter', ['tags' => 'California,California2005,California2009,California2014']);
 
 })->name('photos');
 ```
+
+Or use the Tag model to get all the children:
+```php
+Route::get('California', function () {
+    $children = UberTags::where('name', 'california')->allChildren()->pluck('name')->implode(',');
+    return view('portfolio')->with('filter', ['tags' => 'california,' . $children]);
+})->name('California');
+```
+
+If the named route for the tag doesn't exist, it will not show up in navigation to prevent broken links.

gallery.json

@@ -0,0 +1,75 @@
+{
+    "current_page": 1,
+    "data": [
+        {
+            "image": "\/gallery\/missing.gif",
+            "thumbnail": "\/gallery\/missing.gif"
+        },
+        {
+            "image": "\/gallery\/missing.gif",
+            "thumbnail": "\/gallery\/missing.gif"
+        },
+        {
+            "image": "\/gallery\/missing.gif",
+            "thumbnail": "\/gallery\/missing.gif"
+        },
+        {
+            "image": "\/gallery\/missing.gif",
+            "thumbnail": "\/gallery\/missing.gif"
+        },
+        {
+            "image": "\/gallery\/missing.gif",
+            "thumbnail": "\/gallery\/missing.gif"
+        },
+        {
+            "image": "\/gallery\/missing.gif",
+            "thumbnail": "\/gallery\/missing.gif"
+        },
+        {
+            "image": "\/gallery\/missing.gif",
+            "thumbnail": "\/gallery\/missing.gif"
+        },
+        {
+            "image": "\/gallery\/missing.gif",
+            "thumbnail": "\/gallery\/missing.gif"
+        },
+        {
+            "image": "\/gallery\/missing.gif",
+            "thumbnail": "\/gallery\/missing.gif"
+        },
+        {
+            "image": "\/gallery\/missing.gif",
+            "thumbnail": "\/gallery\/missing.gif"
+        },
+        {
+            "image": "\/gallery\/missing.gif",
+            "thumbnail": "\/gallery\/missing.gif"
+        },
+        {
+            "image": "\/gallery\/missing.gif",
+            "thumbnail": "\/gallery\/missing.gif"
+        }
+    ],
+    "first_page_url": "\/gallery?page=1",
+    "from": 1,
+    "last_page": 1,
+    "last_page_url": "\/gallery?page=1",
+    "links": [
+        {
+            "url": null,
+            "label": "« Previous",
+            "active": false
+        },
+        {
+            "url": "\/gallery?page=1",
+            "label": "1",
+            "active": true
+        }
+    ],
+    "next_page_url": "",
+    "path": "\/gallery",
+    "per_page": 12,
+    "prev_page_url": null,
+    "to": 12,
+    "total": 12
+}

index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Gallery</title>
+    <link href="public/css/app.css" rel="stylesheet">
+    <style>
+        body {
+            color: orange;
+        }
+    </style>
+</head>
+<body class="antialiased bg-stone-800 p-5">
+<div id="gallery-app" data-filters="" data-routes='{"portfolio":"portfolio","California2005":"California\/2005","California2009":"California\/2009","California2014":"California\/2014","FanExpo2010":"FanExpo\/2010","FanExpo2011":"FanExpo\/2011","FanExpo2012":"FanExpo\/2012"}'></div>
+<script src="public/js/app.js"></script>
+</body>
+</html>

public/css/app.css

@@ -454,9 +454,6 @@ Ensure the default browser behavior of the `hidden` attribute.
 .w-full {
   width: 100%;
 }
-.w-32 {
-  width: 8rem;
-}
 .w-5 {
   width: 1.25rem;
 }
@@ -479,12 +476,15 @@ Ensure the default browser behavior of the `hidden` attribute.
 .cursor-not-allowed {
   cursor: not-allowed;
 }
-.grid-cols-6 {
-  grid-template-columns: repeat(6, minmax(0, 1fr));
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 .flex-col {
   flex-direction: column;
 }
+.flex-wrap {
+  flex-wrap: wrap;
+}
 .items-center {
   align-items: center;
 }
@@ -512,28 +512,25 @@ Ensure the default browser behavior of the `hidden` attribute.
   -o-object-fit: scale-down;
      object-fit: scale-down;
 }
-.p-5 {
-  padding: 1.25rem;
-}
 .p-1 {
   padding: 0.25rem;
 }
-.px-5 {
-  padding-left: 1.25rem;
-  padding-right: 1.25rem;
+.py-5 {
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
 }
 .py-1 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
-.pl-5 {
-  padding-left: 1.25rem;
+.pb-5 {
+  padding-bottom: 1.25rem;
 }
 .pt-5 {
   padding-top: 1.25rem;
 }
-.pl-2 {
-  padding-left: 0.5rem;
+.pr-2 {
+  padding-right: 0.5rem;
 }
 .text-neutral-500 {
   --tw-text-opacity: 1;
@@ -570,4 +567,31 @@ Ensure the default browser behavior of the `hidden` attribute.
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+@media (min-width: 768px) {
+
+  .md\:grid-cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+
+  .md\:p-5 {
+    padding: 1.25rem;
+  }
+
+  .md\:px-5 {
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+  }
+
+  .md\:pl-5 {
+    padding-left: 1.25rem;
+  }
+
+  .md\:pt-5 {
+    padding-top: 1.25rem;
+  }
+
+  .md\:pl-2 {
+    padding-left: 0.5rem;
+  }
+}