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

3 files changed, 61 insertions, 29 deletions

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>
   );
diff --git a/src/components/style.css b/src/components/style.css
index 4feb1d6..c1b78be 100644
--- a/src/components/style.css
+++ b/src/components/style.css
@@ -1,20 +1,23 @@
 @import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');
 
 #print-area {
+  border-color: #aaa;
+  border-style: dashed;
+  margin-bottom: 2em;
   margin-top: 2em;
   padding: 1em;
 }
+
 .details {
   display: flex;
-  padding: 1em;
+  align-items: center;
 }
-.details .text {
-  margin: 0;
-}
-.details .text * {
-  margin: 0 1em;
+
+.qrcode {
+  margin-bottom: 1em;
 }
-.details .text textarea {
+
+textarea {
   background-color: #fff;
   border: solid 1px #ddd;
   font-family: 'Source Code Pro', serif;
@@ -24,14 +27,22 @@
   overflow: hidden;
   resize: none;
 }
-.print-btn {
-  padding-top: 2em;
-}
-.print-btn button {
-  color: #fff;
+
+button {
   height: 50px;
   width: 180px;
+}
+
+button#print {
+  color: #fff;
   background-color: #0074d9;
+  border-color: #0074d9;
+}
+
+button#rotate {
+  color: #fff;
+  background-color: #6c757d;
+  border-color: #6c757d;
 }
 
 @media print {
@@ -42,7 +53,7 @@
   #print-area * {
     visibility: visible;
   }
-  #print-area input {
+  #print-area textarea {
     border: none;
   }
   #print-area {
diff --git a/src/style.css b/src/style.css
index b7819af..f29d097 100644
--- a/src/style.css
+++ b/src/style.css
@@ -4,7 +4,3 @@ body {
 .tag {
   line-height: 1.6;
 }
-fieldset {
-  border-style: dashed;
-  border-color: #aaa;
-}