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

1 files changed, 24 insertions, 13 deletions

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 {