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.
This commit is contained in:
Ro 2023-08-28 14:51:42 -07:00
parent 7feb76517a
commit c087d00a2b
No known key found for this signature in database
GPG key ID: 29B551CDBD4D3B50
9 changed files with 188 additions and 42 deletions

View file

@ -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;
}
*/
}
}

View file

@ -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);
}
}

View file

@ -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) {
}

View file

@ -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;
}

View file

@ -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>

After

Width:  |  Height:  |  Size: 523 B

View file

@ -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>

After

Width:  |  Height:  |  Size: 658 B

View file

@ -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())

View file

@ -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>

View file

@ -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']);