From c087d00a2bc3b40b5398f67b2126060b3571e541 Mon Sep 17 00:00:00 2001 From: Ro Date: Mon, 28 Aug 2023 14:51:42 -0700 Subject: [PATCH] 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. --- app/Http/Controllers/ExportController.php | 35 +++++++++ public/assets/css/front/index.css | 11 ++- public/assets/css/global/frame.css | 92 ++++++++++++++++++++--- public/assets/css/global/typography.css | 9 ++- public/assets/images/global/close.svg | 7 ++ public/assets/images/global/menu.svg | 8 ++ resources/views/frame.blade.php | 52 +++++++------ resources/views/front/location.blade.php | 12 ++- routes/web.php | 4 + 9 files changed, 188 insertions(+), 42 deletions(-) create mode 100644 app/Http/Controllers/ExportController.php create mode 100644 public/assets/images/global/close.svg create mode 100644 public/assets/images/global/menu.svg diff --git a/app/Http/Controllers/ExportController.php b/app/Http/Controllers/ExportController.php new file mode 100644 index 0000000..9d43103 --- /dev/null +++ b/app/Http/Controllers/ExportController.php @@ -0,0 +1,35 @@ + 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); + } +} diff --git a/public/assets/css/global/frame.css b/public/assets/css/global/frame.css index f644082..23b5551 100644 --- 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) { +} diff --git a/public/assets/css/global/typography.css b/public/assets/css/global/typography.css index 35465aa..743eb12 100644 --- 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; } diff --git a/public/assets/images/global/close.svg b/public/assets/images/global/close.svg new file mode 100644 index 0000000..ac1c0e0 --- /dev/null +++ b/public/assets/images/global/close.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/assets/images/global/menu.svg b/public/assets/images/global/menu.svg new file mode 100644 index 0000000..c3bc8b0 --- /dev/null +++ b/public/assets/images/global/menu.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/resources/views/frame.blade.php b/resources/views/frame.blade.php index dfa2572..80f6a3e 100644 --- a/resources/views/frame.blade.php +++ b/resources/views/frame.blade.php @@ -12,37 +12,47 @@ +
-
+
-
+

{{$title}}

-
diff --git a/resources/views/front/location.blade.php b/resources/views/front/location.blade.php index 3814c4c..2498db2 100644 --- a/resources/views/front/location.blade.php +++ b/resources/views/front/location.blade.php @@ -6,13 +6,17 @@ @parent
+

{{$title}}

Description

{{$location->description}}

Screens

- @foreach($images as $image) - - - @endforeach + @if($images != null) + @foreach($images as $image) + + + @endforeach + @endif +
UPDATED : {{$updated}}
diff --git a/routes/web.php b/routes/web.php index 905a5ef..9c62fbd 100644 --- 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']);