From d2dd54caca19d3660e49c729828d52aa2bbb5716 Mon Sep 17 00:00:00 2001
From: Ben Woodward <ben@bdw.to>
Date: Sun, 11 Jul 2021 10:49:28 -0700
Subject: Portrait orientation (#35)

* Portrait orientation

Adds a rotate button that toggle landscape and portrait orientation.
Fixes #30

* Fix QRCode padding in portait orientation

* Default to portrait on small screens
---
 src/components/Card.js | 49 +++++++++++++++++++++++++++++++++++++------------
 1 file changed, 37 insertions(+), 12 deletions(-)

(limited to 'src/components/Card.js')

diff --git a/src/components/Card.js b/src/components/Card.js
index bbf29f9..4ec4430 100644
--- a/src/components/Card.js
+++ b/src/components/Card.js
@@ -1,13 +1,15 @@
 import QRCode from 'qrcode.react';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import './style.css';
 
 export const Card = () => {
+  const firstLoad = useRef(true);
+  const [qrvalue, setQrvalue] = useState('');
   const [network, setNetwork] = useState({
     ssid: '',
     password: '',
   });
-  const [qrvalue, setQrvalue] = useState('');
+  const [portrait, setPortrait] = useState(false);
 
   const escape = (v) => {
     const needsEscape = ['"', ';', ',', ':', '\\'];
@@ -33,6 +35,11 @@ export const Card = () => {
   };
 
   useEffect(() => {
+    if (firstLoad.current && window.innerWidth < 500) {
+      firstLoad.current = false;
+      setPortrait(true);
+    }
+
     const ssid = escape(network.ssid);
     const password = escape(network.password);
     setQrvalue(`WIFI:T:WPA;S:${ssid};P:${password};;`);
@@ -40,16 +47,24 @@ export const Card = () => {
 
   return (
     <div>
-      <fieldset id="print-area">
-        <legend></legend>
-
-        <h1>WiFi Login</h1>
-        <hr />
+      <fieldset
+        id="print-area"
+        style={{ maxWidth: portrait ? '350px' : '100%' }}
+      >
+        <h1 style={{ textAlign: portrait ? 'center' : 'left' }}>WiFi Login</h1>
 
-        <div className="details">
-          <QRCode className="qrcode" value={qrvalue} size={175} />
+        <div
+          className="details"
+          style={{ flexDirection: portrait ? 'column' : 'row' }}
+        >
+          <QRCode
+            className="qrcode"
+            style={{ paddingRight: portrait ? '' : '1em' }}
+            value={qrvalue}
+            size={175}
+          />
 
-          <div className="text">
+          <div className="inputs">
             <label>Network name</label>
             <textarea
               id="ssid"
@@ -63,6 +78,10 @@ export const Card = () => {
             <textarea
               id="password"
               type="text"
+              style={{
+                height:
+                  portrait && network.password.length > 40 ? '5em' : 'auto',
+              }}
               maxLength="63"
               placeholder="Password"
               value={network.password}
@@ -80,8 +99,14 @@ export const Card = () => {
           Point your phone's camera at the QR Code to connect automatically
         </p>
       </fieldset>
-      <div className="print-btn">
-        <button onClick={onPrint}>Print</button>
+
+      <div className="buttons">
+        <button id="rotate" onClick={() => setPortrait(!portrait)}>
+          Rotate
+        </button>
+        <button id="print" onClick={onPrint}>
+          Print
+        </button>
       </div>
     </div>
   );
-- 
cgit v1.2.3