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:
parent
7feb76517a
commit
c087d00a2b
9 changed files with 188 additions and 42 deletions
35
app/Http/Controllers/ExportController.php
Normal file
35
app/Http/Controllers/ExportController.php
Normal 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;
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
}
|
||||||
|
}
|
|
@ -19,7 +19,7 @@ form.index-search-form {
|
||||||
}
|
}
|
||||||
|
|
||||||
form.index-search-form > input[type="text"] {
|
form.index-search-form > input[type="text"] {
|
||||||
width: 91%;
|
width: 88%;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
font: 44px var(--base-type);
|
font: 44px var(--base-type);
|
||||||
}
|
}
|
||||||
|
@ -29,6 +29,7 @@ form.index-search-form > button {
|
||||||
width: 60px;
|
width: 60px;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 9px;
|
top: 9px;
|
||||||
|
right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
::placeholder {
|
::placeholder {
|
||||||
|
@ -39,3 +40,11 @@ form.index-search-form > button {
|
||||||
section.index-meta article {
|
section.index-meta article {
|
||||||
margin-top: 20px;
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -19,10 +19,10 @@ html body {
|
||||||
a {
|
a {
|
||||||
color: var(--highlight);
|
color: var(--highlight);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
transition: all 0.2s linear;
|
||||||
/*
|
/*
|
||||||
border-bottom: 1px solid var(--white);
|
border-bottom: 1px solid var(--white);
|
||||||
transition: all 0.2s linear;
|
|
||||||
*/
|
*/
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -34,7 +34,7 @@ header {
|
||||||
|
|
||||||
header > div:nth-child(1) {
|
header > div:nth-child(1) {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 200px 50% 1fr;
|
grid-template-columns: 200px 1fr 40px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
|
@ -66,9 +66,12 @@ header > div i {
|
||||||
}
|
}
|
||||||
|
|
||||||
header > div nav {
|
header > div nav {
|
||||||
position: absolute;
|
background: var(--black);
|
||||||
bottom: 20px;
|
position: relative;
|
||||||
right: 0;
|
}
|
||||||
|
|
||||||
|
.header-right {
|
||||||
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.system-notice-error {
|
div.system-notice-error {
|
||||||
|
@ -90,15 +93,47 @@ main > section > article {
|
||||||
min-height: 400px;
|
min-height: 400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* GLOBALS */
|
/* NAV */
|
||||||
|
|
||||||
a.nav-links {
|
#main-nav {
|
||||||
padding: 7px;
|
position: fixed;
|
||||||
border-bottom: none;
|
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 {
|
a:hover {
|
||||||
|
/*
|
||||||
border-bottom: 1px solid var(--secondary);
|
border-bottom: 1px solid var(--secondary);
|
||||||
|
*/
|
||||||
|
color: var(--white);
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
|
@ -126,6 +161,14 @@ sup {
|
||||||
padding-top: 3px;
|
padding-top: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.menu-icon {
|
||||||
|
width: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.location-title {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.location-image {
|
.location-image {
|
||||||
height: 200px;
|
height: 200px;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
|
@ -133,8 +176,6 @@ sup {
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* GLOBALS */
|
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
color: var(--primary);
|
color: var(--primary);
|
||||||
|
@ -153,3 +194,30 @@ footer > div:nth-child(1) {
|
||||||
max-width: 1000px;
|
max-width: 1000px;
|
||||||
position: relative;
|
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) {
|
||||||
|
}
|
||||||
|
|
|
@ -41,7 +41,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 3em;
|
font-size: 2.5em;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-kerning: normal;
|
font-kerning: normal;
|
||||||
letter-spacing: -5px;
|
letter-spacing: -5px;
|
||||||
|
@ -50,11 +50,12 @@ h1 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 20px;
|
bottom: 20px;
|
||||||
width: 66%;
|
width: 70%;
|
||||||
|
overflow-wrap: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
h2 {
|
||||||
font-size: 2em;
|
font-size: 1.5em;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: 0.8em;
|
line-height: 0.8em;
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
|
@ -62,6 +63,6 @@ h2 {
|
||||||
}
|
}
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
font-size: 2em;
|
font-size: 1.5em;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
|
|
7
public/assets/images/global/close.svg
Normal file
7
public/assets/images/global/close.svg
Normal 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 |
8
public/assets/images/global/menu.svg
Normal file
8
public/assets/images/global/menu.svg
Normal 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 |
|
@ -12,18 +12,27 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<div>
|
<div>
|
||||||
<div class="nav-left">
|
<div class="header-left">
|
||||||
<a href="/">
|
<a href="/">
|
||||||
<img src="/assets/images/global/logo-dark.svg" title="bad-space-logo" />
|
<img src="/assets/images/global/logo-dark.svg" title="bad-space-logo" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="header-center">
|
||||||
<h1>{{$title}}</h1>
|
<h1>{{$title}}</h1>
|
||||||
</div>
|
</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>
|
<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">
|
<a href="/about" title="about" class="nav-links">
|
||||||
About
|
About
|
||||||
</a><br />
|
</a><br />
|
||||||
|
@ -45,6 +54,7 @@
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
@if($errors->any())
|
@if($errors->any())
|
||||||
|
|
|
@ -6,13 +6,17 @@
|
||||||
@parent
|
@parent
|
||||||
<section>
|
<section>
|
||||||
<article>
|
<article>
|
||||||
|
<h1 class="location-title">{{$title}}</h1>
|
||||||
<h2>Description</h2>
|
<h2>Description</h2>
|
||||||
{{$location->description}}<br />
|
{{$location->description}}<br />
|
||||||
<h2>Screens</h2>
|
<h2>Screens</h2>
|
||||||
|
@if($images != null)
|
||||||
@foreach($images as $image)
|
@foreach($images as $image)
|
||||||
<a href="/{{$image->path}}" class="location-image" style="background: url(/{{$image->path}}) no-repeat center center / cover #fc6399" />
|
<a href="/{{$image->path}}" class="location-image" style="background: url(/{{$image->path}}) no-repeat center center / cover #fc6399" />
|
||||||
</a>
|
</a>
|
||||||
@endforeach
|
@endforeach
|
||||||
|
@endif
|
||||||
|
|
||||||
<br />UPDATED : {{$updated}}
|
<br />UPDATED : {{$updated}}
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
@ -5,6 +5,7 @@ use App\Http\Controllers\FrontIndexController;
|
||||||
use App\Http\Controllers\AuthController;
|
use App\Http\Controllers\AuthController;
|
||||||
use App\Http\Controllers\DenController;
|
use App\Http\Controllers\DenController;
|
||||||
use App\Http\Controllers\LocationController;
|
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::get("/location/{uuid}", [FrontIndexController::class, 'location']);
|
||||||
Route::post("/search", [FrontIndexController::class, 'indexSearch']);
|
Route::post("/search", [FrontIndexController::class, 'indexSearch']);
|
||||||
|
|
||||||
|
//exports
|
||||||
|
Route::get("/exports/test", [ExportController::class, 'exportCSV']);
|
||||||
|
|
||||||
//auth
|
//auth
|
||||||
Route::get("/login", [AuthController::class, 'showLogin']);
|
Route::get("/login", [AuthController::class, 'showLogin']);
|
||||||
Route::post("/login", [AuthController::class, 'memberAuth']);
|
Route::post("/login", [AuthController::class, 'memberAuth']);
|
||||||
|
|
Loading…
Reference in a new issue