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
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"] {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
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,37 +12,47 @@
|
|||
</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>
|
||||
<nav>
|
||||
<a href="/about" title="about" class="nav-links">
|
||||
About
|
||||
</a><br />
|
||||
<a href="/listings/1" title="instance listing" class="nav-links">
|
||||
Listings
|
||||
</a><br />
|
||||
@if(Auth::check())
|
||||
<a href="/den" title="den-start" class="nav-links">
|
||||
Den
|
||||
<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 />
|
||||
<a href="/logout" title="logout" class="nav-links">
|
||||
Logout
|
||||
<a href="/listings/1" title="instance listing" class="nav-links">
|
||||
Listings
|
||||
</a><br />
|
||||
@else
|
||||
<a href="/den" title="login" class="nav-links">
|
||||
The Den
|
||||
</a><br />
|
||||
@endif
|
||||
</nav>
|
||||
@if(Auth::check())
|
||||
<a href="/den" title="den-start" class="nav-links">
|
||||
Den
|
||||
</a><br />
|
||||
<a href="/logout" title="logout" class="nav-links">
|
||||
Logout
|
||||
</a><br />
|
||||
@else
|
||||
<a href="/den" title="login" class="nav-links">
|
||||
The Den
|
||||
</a><br />
|
||||
@endif
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -6,13 +6,17 @@
|
|||
@parent
|
||||
<section>
|
||||
<article>
|
||||
<h1 class="location-title">{{$title}}</h1>
|
||||
<h2>Description</h2>
|
||||
{{$location->description}}<br />
|
||||
<h2>Screens</h2>
|
||||
@foreach($images as $image)
|
||||
<a href="/{{$image->path}}" class="location-image" style="background: url(/{{$image->path}}) no-repeat center center / cover #fc6399" />
|
||||
</a>
|
||||
@endforeach
|
||||
@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>
|
||||
|
|
|
|||
|
|
@ -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']);
|
||||
|
|
|
|||
Loading…
Reference in a new issue