Minor UI improvements (#12)

- drop lack of noscript support - now only don't support the side nav and interactive encryption form - everything else should be functional - `request a site`-like buttons now link to `/request/email` which forwards the user to email the request inbox * fix height of home page rows on mobile * as part of the refactor, remove the need for the `.removeClass('hide')` legacy snippet for the home page. This was originally used as part of Materialize 0.x scrollspy which was deprecated in Materialize 1.0. This script might get nuked as part of a larger refactor, but for now it's just commented out in the handlebars level * fix minor UI issues in request form
HexRweb · Feb 10, 2019 · 0f7896f · 0f7896f
1 parent 23990f3
commit 0f7896f
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 38 deletions.
diff --git a/src/assets/css/global.css b/src/assets/css/global.css
diff --git a/src/layouts/default.hbs b/src/layouts/default.hbs
@@ -19,10 +19,9 @@
 			.hexr-background{/*background-color:#1e5799*/background-color:#12374a !important}
 			.text-hexr-blue{/*color:#1e5799 !important;*/color:#12374a !important}
 			nav.hexr-background{padding:0 23px}
-			#noscript{height:calc(100vh - 64px);animation-delay:0.5s;animation-duration:3s;display:none;overflow:hidden}
-			#noscript-wrapper{width:100vw}
+			.noscript{display: none}
 		</style>
-		<noscript><style>main, footer {display:none}#noscript {display:flex}</style></noscript>
+		<noscript><style>.needsjs{display: none}.noscript{display: inline-block; display: inherit}</style></noscript>
 		{{{block "head"}}}
 	</head>
 	<body class="grey darken-4 white-text {{classes}}">
@@ -32,7 +31,8 @@
 					<div class="nav-wrapper hexr-background">
 						<a href="/" class="brand-logo font-anders hide-on-med-and-down active">HexR</a>
 						<a href="/" class="brand-logo font-anders center hide-on-large-only active">HexR</a>
-						<a href="#" data-target="mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a>
+						<span class="noscript center red-text hide-on-large-only sidenav-trigger">Nav needs javascript</span>
+						<a href="#" data-target="mobile" class="needsjs sidenav-trigger"><i class="material-icons">menu</i></a>
 						<!-- @todo: Active page -->
 						<ul class="right hide-on-med-and-down">
 							<li><a class="flow-text" href="/about">About</a></li>
@@ -60,17 +60,6 @@
 				</nav>
 			</div>
 		</header>
-		<div id="noscript" class="center valign-wrapper white-text animated bounce">
-			<div class="valign center" id="noscript-wrapper">
-				<h5>Uh-Oh!</h5>
-				<h4>Why no JavaScript?</h4>
-				<h3>This website requires javascript to run!</h3>
-				<h2>
-					<a href="http://enable-javascript.com/" {{> blank-target}}>Enable JavaScript</a>
-					to find out what HexR is about!
-				</h2>
-			</div>
-		</div>
 		<main>
 			{{{body}}}
 		</main>

diff --git a/src/pages/contact.hbs b/src/pages/contact.hbs
@@ -18,9 +18,12 @@ title: Contact HexR
 		Please note we do not have live chat, phone, or mailing addresses since we currently have no sponsors for those services.
 	</p>
 	<p class="flow-text">Sensitive matter? Feel free to use PGP!</p>
-	<textarea id="pgp-input"></textarea>
-	<br />
-	<button id="pgp-submit" class="btn">Encrypt</button>
+	<textarea id="pgp-input" class="needsjs"></textarea>
+	<p class="noscript flow-text">
+		<small>Javascript is disabled so our interactive encryption form doesn't work</small>
+	</p>
+	<br class="needsjs"/>
+	<button id="pgp-submit" class="btn needsjs">Encrypt</button>
 	<p class="flow-text">You can <a href="/pubkey.asc" target="_blank">download</a> the PGP key as well!</p>
 </div>
 

diff --git a/src/pages/home.hbs b/src/pages/home.hbs
@@ -5,6 +5,9 @@ captcha: true
 meta:
   home: true
 ---
+{{#contentFor "head"}}
+<style>.noscript.hide{display: initial !important}</style>
+{{/contentFor}}
 <div id="index-banner" class="transparent">
 	<div class="section no-pad-bot">
 		<div class="container">
@@ -33,7 +36,7 @@ meta:
 	</div>
 </div>
 <div class="section section-1 z-depth-5 valign-wrapper" id="benefit-1">
-	<div class="row container hide valign">
+	<div class="row container hide noscript valign">
 		<div class="col s12 m5 l5 benefit-icon"><i class="material-icons large">code</i></div>
 		<div class="col s12 m7 l7 right-align">
 			<h3>Beautifully Coded</h3>
@@ -42,7 +45,7 @@ meta:
 	</div>
 </div>
 <div class="section section-2 z-depth-4 valign-wrapper" id="benefit-2">
-	<div class="row container hide valign">
+	<div class="row container hide noscript valign">
 		<div class="col s12 m7 l7">
 			<h3>Scalable</h3>
 			<span class="flow-text">HexR websites go through a big evaluation before being available for you. This includes responsive design and robust backend. Every website will work everywhere and can support any amount of content.</span>
@@ -51,7 +54,7 @@ meta:
 	</div>
 </div>
 <div class="section section-3 z-depth-3 valign-wrapper opposite" id="benefit-3">
-	<div class="row container hide valign">
+	<div class="row container hide noscript valign">
 		<div class="col s12 m5 l5 benefit-icon"><i class="material-icons large">$$$</i></div>
 		<div class="col s12 m7 l7 right-align">
 			<h3>Inexpensive</h3>
@@ -60,7 +63,7 @@ meta:
 	</div>
 </div>
 <div class="section section-1 z-depth-2 valign-wrapper opposite" id="benefit-4">
-	<div class="row container hide valign">
+	<div class="row container hide noscript valign">
 		<div class="col s12 m7 l7">
 			<h3>Manageable</h3>
 			<span class="flow-text">We get all the emails so you don't have to. All of the background stuff is managed by us so you can focus on the content that matters most to you.</span>
@@ -69,7 +72,7 @@ meta:
 	</div>
 </div>
 <div class="section section-2 z-depth-1 valign-wrapper opposite" id="benefit-5">
-	<div class="row container hide valign">
+	<div class="row container hide noscript valign">
 		<div class="col s12 m5 l5 benefit-icon"><i class="material-icons large">lock</i></div>
 		<div class="col s12 m7 l7">
 			<h3 class="right-align">Secure</h3>
@@ -81,7 +84,7 @@ meta:
 	</div>
 </div>
 <div class="section section-3 valign-wrapper" id="benefit-6" data-animate="jello">
-	<div class="row container hide valign">
+	<div class="row container hide noscript valign">
 		<div class="col s12 m7 l7">
 			<h3>Support</h3>
 			<span class="flow-text">However you want your website and whatever you need, HexR will work to make it happen. From the computer fearing individual to the tech savvy engineer, we're ready to work with you, all the way through.</span>
@@ -92,7 +95,10 @@ meta:
 <div class="section center white-text valign" id="contact">
 	<div class="valign">
 		<p class="flow-text">So what are you waiting for?</p>
-			<a class="modal-trigger btn flow-text waves-effect waves-light hexr-background" href="#request">
+			<a class="noscript btn flow-text waves-effect waves-light hexr-background" href="/request/email">
+				GET YOUR WEBSITE NOW!
+			</a>
+			<a class="modal-trigger needsjs btn flow-text waves-effect waves-light hexr-background" href="#request">
 				GET YOUR WEBSITE NOW!
 			</a>
 		<br/>
@@ -102,9 +108,9 @@ meta:
 {{> components/request-form}}
 {{#contentFor "scripts"}}
 <link rel="stylesheet" href="/assets/css/animations.home.css" />
-<script>
-	//$(".parallax").parallax();
-/*var o = [{
+{{!-- <script>
+$(".parallax").parallax();
+var o = [{
 		selector: '#benefit-1',
 		offset: 200,
 		callback: '$("#benefit-1").children().addClass("animated slideInRight").removeClass("hide");'
@@ -134,6 +140,6 @@ meta:
 		callback: '$("#contact").children().addClass("animated rotateIn").delay(1000).removeClass("rotateIn").addClass("flash")'
 	}, ];
 	if ($(window).width() >= 922) M.ScrollSpy(o);
-	else*/ document.querySelectorAll('.section .row').forEach(el => el.classList.remove('hide'));// .addClass('center');
-</script>
+	else document.querySelectorAll('.section .row').forEach(el => el.classList.remove('hide'));
+</script> --}}
 {{/contentFor}}
diff --git a/src/pages/noscript-request.hbs b/src/pages/noscript-request.hbs
@@ -0,0 +1,10 @@
+---
+path: /request/email
+title: Send us an email to request a website! | HexR
+---
+<div class="container">
+	<h1 class="center">Request a Site</h1>
+	<p class="flow-text">Hey there 👋</p>
+	<p class="flow-text">It looks like you have javascript disabled! We get that, there's a lot of bloatware on the web. We normally use a request form for website requests, but it requires javascript to prevent spam submissions.* We have a dedicated inbox for website requests, so please <a href="mailto:request@hexr.org">send us an email</a> instead of using the form. Thanks for your understanding!</p>
+	<p class="flow-text"><small>*We noticed a 100% drop in successful automated spam submissions after using javascript to submit requests!</small></p>
+</div>
diff --git a/src/pages/pricing.hbs b/src/pages/pricing.hbs
@@ -6,7 +6,12 @@ captcha: true
 	<h1 class="center">HexR | Plans</h1>
 	<p class="center flow-text">
 		The table below gives a quick description of our "plans". They are just for your reference;
-		<a class="modal-trigger btn flow-text waves-effect waves-light hexr-background" href="#request">Request a Website</a>
+		<a class="modal-trigger needsjs btn flow-text waves-effect waves-light hexr-background" href="#request">
+			Request a Website
+		</a>
+		<a class="noscript btn flow-text waves-effect waves-light hexr-background" href="/request/email">
+			Request a Website
+		</a>&nbsp;
 		for further discussion.
 	</p>
 	<table class="tg center flow-text bordered">
@@ -55,7 +60,12 @@ captcha: true
 	</table>
 	<p class="flow-text center">
 		These plans are just for reference. Please
-		<a class="modal-trigger btn flow-text waves-effect waves-light hexr-background" href="#request">Request a Website</a>
+		<a class="modal-trigger needsjs btn flow-text waves-effect waves-light hexr-background" href="#request">
+			Request a Website
+		</a>
+		<a class="noscript btn flow-text waves-effect waves-light hexr-background" href="/request/email">
+			Request a Website
+		</a>&nbsp;
 		so we can discuss this more in depth.
 	</p>
 	{{> components/request-form}}

diff --git a/src/partials/components/request-form.hbs b/src/partials/components/request-form.hbs
@@ -50,15 +50,15 @@
 				</div>
 			</div>
 			<div class="row">
-				<div class="input-field col s4"><i class="material-icons prefix">assignment_ind</i>
+				<div class="input-field col l4 s12"><i class="material-icons prefix">assignment_ind</i>
 					<input type="number" id="num-employees" name="num-employees" class="validate" required />
 					<label for="num-employees">Employees<a class="red-text">*</a></label>
 				</div>
-				<div class="input-field col m4"><i class="material-icons prefix">$</i>
+				<div class="input-field col l4 s12"><i class="material-icons prefix">$</i>
 					<input type="number" id="income" name="income" class="validate" required />
 					<label for="income">Income <a class="red-text">*</a></label>
 				</div>
-				<div class="input-field col m4">
+				<div class="input-field col l4 s12">
 					<div class="switch">
 						<label>For profit
 							<input type="checkbox" id="profit" name="profit" class="validate">
@@ -68,7 +68,7 @@
 				</div>
 			</div>
 			<div class="row center">
-				<div class="input-field col s12 offset-m4">
+				<div class="input-field col s12 offset-l4">
 					<div class="g-recaptcha" data-sitekey="{{@site.recaptcha_key}}"></div>
 				</div>
 				<button type="submit" class="btn btn-large green darken-4 waves-effect waves-effect-light">Submit</button>

diff --git a/src/sass/hexr-components/_global.scss b/src/sass/hexr-components/_global.scss
@@ -43,7 +43,7 @@ footer {
 .section.section-1,
 .section.section-2,
 .section.section-3 {
-	height: 300px;
+	min-height: 300px;
 	color: white;
 }