Added mobile first menu and started responsive

Swithced the main nav to a mobile layout to cut down on complex responsive styling to make the heaader work. Also began touching up site wide responsive styles so the site works on multiple devices.
2023-08-28 14:51:42 -07:00 · 2023-08-28 14:51:42 -07:00 · c087d00a2b
commit c087d00a2b
parent 7feb76517a
9 changed files with 188 additions and 42 deletions
--- a/app/Http/Controllers/ExportController.php
+++ b/app/Http/Controllers/ExportController.php
@ -0,0 +1,35 @@
+<?php
+
+namespace App\Http\Controllers;
+
+class ExportController extends Controller
+{
+    //
+    public function exportCSV()
+    {
+        /*
+        $columns = [
+            'id',
+            'product_name',
+            'product_url',
+            'price',
+            'category'
+        ];
+
+        $products = [
+            [1, 'product 1', 'https://example.com/product-1', '9.99', 'category 1'],
+            [2, 'product 2', 'https://example.com/product-2', '19.99', 'category 2'],
+            [3, 'product 3', 'https://example.com/product-3', '29.99', 'category 3'],
+            [4, 'product 4', 'https://example.com/product-4', '39.99', 'category 4'],
+        ];
+
+        header('Content-Type: text/csv');
+        header('Content-Disposition: attachment; filename="products.csv"');
+
+        echo implode(',', $columns) . PHP_EOL;
+        foreach ($products as $product) {
+            echo implode(',', $product) . PHP_EOL;
+        }
+        */
+    }
+}
--- a/public/assets/css/front/index.css
+++ b/public/assets/css/front/index.css
@ -19,7 +19,7 @@ form.index-search-form {
 }

 form.index-search-form > input[type="text"] {
-  width: 91%;
+  width: 88%;
  height: 50px;
  font: 44px var(--base-type);
 }
@ -29,6 +29,7 @@ form.index-search-form > button {
  width: 60px;
  position: relative;
  top: 9px;
+  right: 0;
 }

 ::placeholder {
@ -39,3 +40,11 @@ form.index-search-form > button {
 section.index-meta article {
  margin-top: 20px;
 }
+
+@media only screen and (max-width: 800px) {
+  form.index-search-form > input[type="text"] {
+    width: 85%;
+    height: 50px;
+    font: 34px var(--base-type);
+  }
+}
--- a/public/assets/css/global/frame.css
+++ b/public/assets/css/global/frame.css
@ -19,10 +19,10 @@ html body {
 a {
  color: var(--highlight);
  text-decoration: none;
-
+  transition: all 0.2s linear;
  /*
  border-bottom: 1px solid var(--white);
-  transition: all 0.2s linear;
+
  */
 }

@ -34,7 +34,7 @@ header {

 header > div:nth-child(1) {
  display: grid;
-  grid-template-columns: 200px 50% 1fr;
+  grid-template-columns: 200px 1fr 40px;
  padding: 10px;
  gap: 10px;
  height: 200px;
@ -66,9 +66,12 @@ header > div i {
 }

 header > div nav {
-  position: absolute;
-  bottom: 20px;
-  right: 0;
+  background: var(--black);
+  position: relative;
+}
+
+.header-right {
+  text-align: right;
 }

 div.system-notice-error {
@ -90,15 +93,47 @@ main > section > article {
  min-height: 400px;
 }

-/* GLOBALS */
+/* NAV */

-a.nav-links {
-  padding: 7px;
-  border-bottom: none;
+#main-nav {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--black);
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }

+label[for="element-toggle"] {
+  cursor: pointer;
+}
+
+#element-toggle {
+  display: none;
+}
+
+#element-toggle:not(:checked) ~ #main-nav {
+  display: none;
+}
+
+a.nav-links {
+  border-bottom: none;
+  font-size: 40px;
+  color: var(--highlight);
+  text-decoration: none;
+}
+
+/* GLOBALS */
+
 a:hover {
+  /*
  border-bottom: 1px solid var(--secondary);
+  */
+  color: var(--white);
 }

 pre {
@ -126,6 +161,14 @@ sup {
  padding-top: 3px;
 }

+.menu-icon {
+  width: 40px;
+}
+
+.location-title {
+  display: none;
+}
+
 .location-image {
  height: 200px;
  width: 200px;
@ -133,8 +176,6 @@ sup {
  border-radius: 3px;
 }

-/* GLOBALS */
-
 footer {
  width: 100%;
  color: var(--primary);
@ -153,3 +194,30 @@ footer > div:nth-child(1) {
  max-width: 1000px;
  position: relative;
 }
+
+/*
+    responsive
+ */
+
+@media only screen and (max-width: 960px) {
+  header > div:nth-child(1) {
+  }
+
+  header > div nav {
+    bottom: 17px;
+  }
+}
+
+@media only screen and (max-width: 960px) {
+  header > div:nth-child(1) {
+    grid-template-columns: 150px 65% 1fr;
+    height: 150px;
+  }
+
+  header > div nav {
+    bottom: 17px;
+  }
+}
+
+@media only screen and (max-width: 800px) {
+}
--- a/public/assets/css/global/typography.css
+++ b/public/assets/css/global/typography.css
@ -41,7 +41,7 @@
 }

 h1 {
-  font-size: 3em;
+  font-size: 2.5em;
  font-weight: 600;
  font-kerning: normal;
  letter-spacing: -5px;
@ -50,11 +50,12 @@ h1 {
  margin: 0;
  position: absolute;
  bottom: 20px;
-  width: 66%;
+  width: 70%;
+  overflow-wrap: break-word;
 }

 h2 {
-  font-size: 2em;
+  font-size: 1.5em;
  font-weight: 500;
  line-height: 0.8em;
  color: var(--white);
@ -62,6 +63,6 @@ h2 {
 }

 h3 {
-  font-size: 2em;
+  font-size: 1.5em;
  font-weight: 300;
 }
--- a/public/assets/images/global/close.svg
+++ b/public/assets/images/global/close.svg
@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generated by Pixelmator Pro 3.3.8 -->
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path id="Path" fill="none" stroke="none" d="M 0 0 L 24 0 L 24 24 L 0 24 Z"/>
+    <path id="path1" fill="none" stroke="#efebe3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 18 6 L 6 18"/>
+    <path id="path2" fill="none" stroke="#efebe3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 6 6 L 18 18"/>
+</svg>
--- a/public/assets/images/global/menu.svg
+++ b/public/assets/images/global/menu.svg
@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generated by Pixelmator Pro 3.3.8 -->
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path id="Path" fill="none" stroke="none" d="M 0 0 L 24 0 L 24 24 L 0 24 Z"/>
+    <path id="path1" fill="none" stroke="#140d0d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 4 6 L 20 6"/>
+    <path id="path2" fill="none" stroke="#140d0d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 4 12 L 20 12"/>
+    <path id="path3" fill="none" stroke="#140d0d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 4 18 L 20 18"/>
+</svg>
--- a/resources/views/frame.blade.php
+++ b/resources/views/frame.blade.php
@ -12,18 +12,27 @@
 </head>

 <body>
+
  <header>
    <div>
-      <div class="nav-left">
+      <div class="header-left">
        <a href="/">
          <img src="/assets/images/global/logo-dark.svg" title="bad-space-logo" />
        </a>
      </div>
-      <div>
+      <div class="header-center">
        <h1>{{$title}}</h1>
      </div>
-      <div>
+      <div class="header-right">
+        <label for="element-toggle">
+          <img class="menu-icon" src="/assets/images/global/menu.svg" title="menu-open-toggle" />
+        </label>
+        <input id="element-toggle" type="checkbox" />
+        <div id="main-nav">
          <nav>
+            <label for="element-toggle">
+              <img class="menu-icon" src="/assets/images/global/close.svg" title="menu-open-toggle" />
+            </label><br>
            <a href="/about" title="about" class="nav-links">
              About
            </a><br />
@ -45,6 +54,7 @@
          </nav>
        </div>
      </div>
+    </div>
  </header>

  @if($errors->any())
--- a/resources/views/front/location.blade.php
+++ b/resources/views/front/location.blade.php
@ -6,13 +6,17 @@
    @parent
    <section>
      <article>
+        <h1 class="location-title">{{$title}}</h1>
        <h2>Description</h2>
        {{$location->description}}<br />
        <h2>Screens</h2>
+        @if($images != null)
          @foreach($images as $image)
            <a href="/{{$image->path}}" class="location-image" style="background: url(/{{$image->path}}) no-repeat center center / cover #fc6399" />
            </a>
          @endforeach
+        @endif
+
        <br />UPDATED : {{$updated}}
      </article>
    </section>
--- a/routes/web.php
+++ b/routes/web.php
@ -5,6 +5,7 @@ use App\Http\Controllers\FrontIndexController;
 use App\Http\Controllers\AuthController;
 use App\Http\Controllers\DenController;
 use App\Http\Controllers\LocationController;
+use App\Http\Controllers\ExportController;

 /*
 |--------------------------------------------------------------------------
@ -24,6 +25,9 @@ Route::get("/about", [FrontIndexController::class, 'about']);
 Route::get("/location/{uuid}", [FrontIndexController::class, 'location']);
 Route::post("/search", [FrontIndexController::class, 'indexSearch']);

+//exports
+Route::get("/exports/test", [ExportController::class, 'exportCSV']);
+
 //auth
 Route::get("/login", [AuthController::class, 'showLogin']);
 Route::post("/login", [AuthController::class, 'memberAuth']);