franklinblanco
/
remax-frontend-rs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Navbar now makes logo clickable

This commit is contained in:
Franklin 2023-03-14 07:16:55 -04:00
parent 0f8b20782c
commit 72d67dc77c
8 changed files with 51 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
css/navbar.css
View File

@ -1,7 +1,4 @@
/* Mobile View */ /* Mobile View */
.navbar-background { .navbar-background {
position: fixed; position: fixed;
width: 100%; width: 100%;
@ -13,6 +10,7 @@
background-color: #252631; background-color: #252631;
min-height: 74px; min-height: 74px;
} }
.navbar-container { .navbar-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -21,6 +19,7 @@
flex-grow: 1; flex-grow: 1;
padding: 15px; padding: 15px;
} }
.navbar-hamburger { .navbar-hamburger {
font-size: 20pt; font-size: 20pt;
color: white; color: white;
@ -32,6 +31,7 @@
min-width: 30px; min-width: 30px;
padding: 15px; padding: 15px;
} }
.navbar-hamburger:hover { .navbar-hamburger:hover {
background-color: #ffffff14; background-color: #ffffff14;
font-size: 22pt; font-size: 22pt;
@ -40,6 +40,7 @@
transition-duration: 0.3s; transition-duration: 0.3s;
cursor: pointer; cursor: pointer;
} }
.navbar-closed{ .navbar-closed{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -47,6 +48,7 @@
margin-top: 10px; margin-top: 10px;
display: none; display: none;
} }
.navbar-open { .navbar-open {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -62,6 +64,7 @@
padding-bottom: 10px; padding-bottom: 10px;
font-family: Source Sans Pro; font-family: Source Sans Pro;
} }
.navbar-item:hover { .navbar-item:hover {
background-color: #ffffff14; background-color: #ffffff14;
font-size: 13pt; font-size: 13pt;
@ -71,12 +74,16 @@
cursor: pointer; cursor: pointer;
} }
.navbar-brand-container{ .navbar-brand-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: flex-start;
align-items: center; align-items: center;
max-width: 250px;
}
.navbar-brand-container:hover {
cursor: pointer;
} }
.navbar-title { .navbar-title {
@ -98,12 +105,14 @@
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
} }
.navbar { .navbar {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-end; justify-content: flex-end;
flex-grow: 1; flex-grow: 1;
} }
.navbar-closed { .navbar-closed {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -111,6 +120,7 @@
flex-grow: 1; flex-grow: 1;
margin-top: 0px; margin-top: 0px;
} }
.navbar-open { .navbar-open {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -118,6 +128,7 @@
flex-grow: 1; flex-grow: 1;
margin-top: 0px; margin-top: 0px;
} }
.navbar-item { .navbar-item {
color: white; color: white;
font-size: 12pt; font-size: 12pt;
@ -127,6 +138,7 @@
padding-bottom: 10px; padding-bottom: 10px;
font-family: Source Sans Pro; font-family: Source Sans Pro;
} }
.navbar-item:hover { .navbar-item:hover {
background-color: #ffffff14; background-color: #ffffff14;
font-size: 13pt; font-size: 13pt;
@ -135,11 +147,13 @@
transition-duration: 0.3s; transition-duration: 0.3s;
cursor: pointer; cursor: pointer;
} }
.navbar-title { .navbar-title {
color: white; color: white;
font-size: 23pt; font-size: 23pt;
font-family: Sacramento; font-family: Sacramento;
} }
.navbar-hamburger { .navbar-hamburger {
display: none; display: none;
} }

1
css/search.css
View File

@ -1,5 +1,4 @@
.property-search-container { .property-search-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

10
dist/index.html vendored
View File

@ -3,9 +3,9 @@
<title>Yew App</title> <title>Yew App</title>
<link rel="stylesheet" href="/body-44d4d46a4658cacc.css"> <link rel="stylesheet" href="/body-44d4d46a4658cacc.css">
<link rel="stylesheet" href="/navbar-747deb585a2d3e8e.css"> <link rel="stylesheet" href="/navbar-75e2d6f22c68a898.css">
<link rel="stylesheet" href="/landing-c920ca43256fdcb9.css"> <link rel="stylesheet" href="/landing-c920ca43256fdcb9.css">
<link rel="stylesheet" href="/search-daf569157201d199.css"> <link rel="stylesheet" href="/search-9bc9884bfc93b0b5.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Sacramento" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Sacramento" rel="stylesheet">
<script src="https://kit.fontawesome.com/fcdfdfe1ad.js" crossorigin="anonymous"></script> <script src="https://kit.fontawesome.com/fcdfdfe1ad.js" crossorigin="anonymous"></script>
@ -13,9 +13,9 @@
<base href="/"> <base href="/">
<link rel="preload" href="/remax-template-frontend-94e47e680b3b812_bg.wasm" as="fetch" type="application/wasm" crossorigin=""> <link rel="preload" href="/remax-template-frontend-4bfc28b84d3a6336_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
<link rel="modulepreload" href="/remax-template-frontend-94e47e680b3b812.js"></head> <link rel="modulepreload" href="/remax-template-frontend-4bfc28b84d3a6336.js"></head>
<body><script type="module">import init from '/remax-template-frontend-94e47e680b3b812.js';init('/remax-template-frontend-94e47e680b3b812_bg.wasm');</script><script>(function () { <body><script type="module">import init from '/remax-template-frontend-4bfc28b84d3a6336.js';init('/remax-template-frontend-4bfc28b84d3a6336_bg.wasm');</script><script>(function () {
var protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'; var protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
var url = protocol + '//' + window.location.host + '/_trunk/ws'; var url = protocol + '//' + window.location.host + '/_trunk/ws';
var poll_interval = 5000; var poll_interval = 5000;

24
dist/navbar-747deb585a2d3e8e.css → dist/navbar-75e2d6f22c68a898.css vendored
View File

@ -1,7 +1,4 @@
/* Mobile View */ /* Mobile View */
.navbar-background { .navbar-background {
position: fixed; position: fixed;
width: 100%; width: 100%;
@ -13,6 +10,7 @@
background-color: #252631; background-color: #252631;
min-height: 74px; min-height: 74px;
} }
.navbar-container { .navbar-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -21,6 +19,7 @@
flex-grow: 1; flex-grow: 1;
padding: 15px; padding: 15px;
} }
.navbar-hamburger { .navbar-hamburger {
font-size: 20pt; font-size: 20pt;
color: white; color: white;
@ -32,6 +31,7 @@
min-width: 30px; min-width: 30px;
padding: 15px; padding: 15px;
} }
.navbar-hamburger:hover { .navbar-hamburger:hover {
background-color: #ffffff14; background-color: #ffffff14;
font-size: 22pt; font-size: 22pt;
@ -40,6 +40,7 @@
transition-duration: 0.3s; transition-duration: 0.3s;
cursor: pointer; cursor: pointer;
} }
.navbar-closed{ .navbar-closed{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -47,6 +48,7 @@
margin-top: 10px; margin-top: 10px;
display: none; display: none;
} }
.navbar-open { .navbar-open {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -62,6 +64,7 @@
padding-bottom: 10px; padding-bottom: 10px;
font-family: Source Sans Pro; font-family: Source Sans Pro;
} }
.navbar-item:hover { .navbar-item:hover {
background-color: #ffffff14; background-color: #ffffff14;
font-size: 13pt; font-size: 13pt;
@ -71,12 +74,16 @@
cursor: pointer; cursor: pointer;
} }
.navbar-brand-container{ .navbar-brand-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: flex-start;
align-items: center; align-items: center;
max-width: 250px;
}
.navbar-brand-container:hover {
cursor: pointer;
} }
.navbar-title { .navbar-title {
@ -98,12 +105,14 @@
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
} }
.navbar { .navbar {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-end; justify-content: flex-end;
flex-grow: 1; flex-grow: 1;
} }
.navbar-closed { .navbar-closed {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -111,6 +120,7 @@
flex-grow: 1; flex-grow: 1;
margin-top: 0px; margin-top: 0px;
} }
.navbar-open { .navbar-open {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -118,6 +128,7 @@
flex-grow: 1; flex-grow: 1;
margin-top: 0px; margin-top: 0px;
} }
.navbar-item { .navbar-item {
color: white; color: white;
font-size: 12pt; font-size: 12pt;
@ -127,6 +138,7 @@
padding-bottom: 10px; padding-bottom: 10px;
font-family: Source Sans Pro; font-family: Source Sans Pro;
} }
.navbar-item:hover { .navbar-item:hover {
background-color: #ffffff14; background-color: #ffffff14;
font-size: 13pt; font-size: 13pt;
@ -135,11 +147,13 @@
transition-duration: 0.3s; transition-duration: 0.3s;
cursor: pointer; cursor: pointer;
} }
.navbar-title { .navbar-title {
color: white; color: white;
font-size: 23pt; font-size: 23pt;
font-family: Sacramento; font-family: Sacramento;
} }
.navbar-hamburger { .navbar-hamburger {
display: none; display: none;
} }

10
dist/remax-template-frontend-94e47e680b3b812.js → dist/remax-template-frontend-4bfc28b84d3a6336.js vendored
View File

@ -780,12 +780,12 @@ function getImports() {
const ret = wasm.memory; const ret = wasm.memory;
return addHeapObject(ret); return addHeapObject(ret);
}; };
imports.wbg.__wbindgen_closure_wrapper7693 = function(arg0, arg1, arg2) { imports.wbg.__wbindgen_closure_wrapper7704 = function(arg0, arg1, arg2) {
const ret = makeMutClosure(arg0, arg1, 632, __wbg_adapter_36); const ret = makeMutClosure(arg0, arg1, 635, __wbg_adapter_36);
return addHeapObject(ret); return addHeapObject(ret);
}; };
imports.wbg.__wbindgen_closure_wrapper7997 = function(arg0, arg1, arg2) { imports.wbg.__wbindgen_closure_wrapper8008 = function(arg0, arg1, arg2) {
const ret = makeMutClosure(arg0, arg1, 667, __wbg_adapter_39); const ret = makeMutClosure(arg0, arg1, 670, __wbg_adapter_39);
return addHeapObject(ret); return addHeapObject(ret);
}; };
@ -824,7 +824,7 @@ function initSync(module) {
async function init(input) { async function init(input) {
if (typeof input === 'undefined') { if (typeof input === 'undefined') {
input = new URL('remax-template-frontend-94e47e680b3b812_bg.wasm', import.meta.url); input = new URL('remax-template-frontend-4bfc28b84d3a6336_bg.wasm', import.meta.url);
} }
const imports = getImports(); const imports = getImports();

BIN
dist/remax-template-frontend-94e47e680b3b812_bg.wasm → dist/remax-template-frontend-4bfc28b84d3a6336_bg.wasm vendored
View File

Binary file not shown.

1
dist/search-daf569157201d199.css → dist/search-9bc9884bfc93b0b5.css vendored
View File

@ -1,5 +1,4 @@
.property-search-container { .property-search-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

4
src/components/nav_bar.rs
View File

@ -12,16 +12,18 @@ pub fn navigation_bar() -> Html {
let cloned_navigator_2 = navigator.clone(); let cloned_navigator_2 = navigator.clone();
let cloned_navigator_3 = navigator.clone(); let cloned_navigator_3 = navigator.clone();
let cloned_navigator_4 = navigator.clone(); let cloned_navigator_4 = navigator.clone();
let cloned_navigator_5 = navigator.clone();
let navbar_toggle = use_state(|| true); let navbar_toggle = use_state(|| true);
let on_click_hamburger = { let on_click_hamburger = {
let navbar_toggle = navbar_toggle.clone(); let navbar_toggle = navbar_toggle.clone();
Callback::from(move |_| navbar_toggle.set(!*navbar_toggle)) Callback::from(move |_| navbar_toggle.set(!*navbar_toggle))
}; };
html! { html! {
<div class={"navbar-background"}> <div class={"navbar-background"}>
<div class={"navbar-container"}> <div class={"navbar-container"}>
<div class={"navbar-brand-container"}> <div class={"navbar-brand-container"} onclick={move |_| cloned_navigator_5.push(&Route::LandingPage)}>
<img class={"navbar-image"} src="images/remax-logo.png" alt=""/> <img class={"navbar-image"} src="images/remax-logo.png" alt=""/>
<div class={"navbar-title"}> <div class={"navbar-title"}>
{NAVBAR_TITLE} {NAVBAR_TITLE}