Merge pull request #13 from mozilla-services/responsive

Make the design responsive
mozilla-services · Jan 27, 2017 · 27898ef · 27898ef
2 parents 6bf471c + 00cf768
commit 27898ef
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 138 deletions.
diff --git a/Main.elm b/Main.elm
@@ -104,14 +104,16 @@ update message model =
 
 formView : Model -> Html.Html Msg
 formView model =
-    Html.div
+    Html.form
         [ Html.Attributes.class <|
             if model.lock then
-                "form"
+                ""
             else
                 "hidden"
+        , Html.Events.onSubmit GetData
         ]
-        [ Html.div []
+        [ Html.div [ Html.Attributes.class "spacer" ] []
+        , Html.div []
             [ Html.text model.error ]
         , Html.div []
             [ Html.label [ Html.Attributes.for "email" ] [ Html.text "Email" ]
@@ -137,9 +139,10 @@ formView model =
             ]
         , Html.div []
             [ Html.button
-                [ Html.Events.onClick GetData ]
+                []
                 [ Html.text "Login and unlock" ]
             ]
+        , Html.div [ Html.Attributes.class "spacer" ] []
         ]
 
 
@@ -215,21 +218,23 @@ view model =
                     model.email
     in
         Html.div [ Html.Attributes.class "outer-wrapper" ]
-            [ Html.h1 [] [ Html.text title ]
-            , Html.a
-                [ Html.Attributes.id "lock"
-                , Html.Attributes.href "#"
-                , Html.Attributes.class <|
-                    if model.lock then
-                        "hidden"
-                    else
-                        ""
-                , Html.Events.onClick Lock
+            [ Html.header []
+                [ Html.h1 [] [ Html.text title ]
+                , Html.a
+                    [ Html.Attributes.id "lock"
+                    , Html.Attributes.href "#"
+                    , Html.Attributes.class <|
+                        if model.lock then
+                            "hidden"
+                        else
+                            ""
+                    , Html.Events.onClick Lock
+                    ]
+                    [ Html.text "Lock" ]
                 ]
-                [ Html.text "Lock" ]
             , formView model
             , padView model
-            , Html.span [] [ Html.text "Available everywhere with your Email and Passphrase!" ]
+            , Html.footer [] [ Html.text "Available everywhere with your Email and Passphrase!" ]
             ]
 
 

diff --git a/README.md b/README.md
@@ -9,6 +9,8 @@ your browsers.
 Works in Firefox 53+, and will also work as a Chrome extension, out of
 the box.
 
+Try out [the demo](https://mozilla-services.github.io/hoverpad/)
+
 ## What it does
 
 This extension includes:

diff --git a/index.html b/index.html
@@ -7,18 +7,6 @@
   </head>
 
   <body>
-      <div class="outer-wrapper hidden">
-        <h1>Universal Notepad</h1>
-        <a id="lock" href="#">Lock</a>
-        <div class="pad">
-          <textarea></textarea>
-        </div>
-        <span>Available everywhere you're signed in to Firefox</span>
-        <a id="connect" href="#">Connect a device</a>
-      </div>
-
-    <div id="root"></div>
-
     <script src="hoverpad.js"></script>
     <script src="encryption.js"></script>
     <script src="ports.js"></script>

diff --git a/package.json b/package.json
@@ -6,7 +6,8 @@
     "build": "elm-make Main.elm --output=hoverpad.js",
     "debug": "elm-live Main.elm --output=hoverpad.js --open -- --debug",
     "live": "elm-live Main.elm --output=hoverpad.js --open",
-    "fx-web-ext": "web-ext build"
+    "fx-web-ext": "web-ext build",
+    "publish-to-gh-pages": "mkdir -p dist && cp -r index.html *.js *.css icons dist && gh-pages --dist ./dist"
   },
   "repository": {
     "type": "git",
@@ -21,6 +22,7 @@
   "devDependencies": {
     "elm": "^0.18.0",
     "elm-live": "^2.6.1",
-    "web-ext": "^1.7.0"
+    "web-ext": "^1.7.0",
+    "gh-pages": "^0.11.0"
   }
 }
diff --git a/ports.js b/ports.js
@@ -1,6 +1,6 @@
 const KEY_PREFIX = "hoverpad";
 var credentials;
-var app = Elm.Main.embed(document.getElementById("root"));
+var app = Elm.Main.fullscreen();
 
 function placeCaretAtEnd(el) {
   return function() {

diff --git a/style.css b/style.css
@@ -5,158 +5,130 @@
 }
 
 html {
+  background: #fff;
   font-family: sans-serif;
   font-size: 10px;
-  background: #fff;
-  height: 500px;
-  margin: 0;
-}
-
-body {
-  width: 750px;
-  background: #fff;
+  height: 100%;
   margin: 0 auto;
-  height: inherit;
+  max-width: 750px;
+  overflow: hidden;
+  width: 100%;
 }
 
-#root {
-  width: inherit;
-  height: inherit;
+body {
+  height: 100%;
+  width: 100%;
 }
 
 .outer-wrapper {
-  position: relative;
-  overflow: hidden;
-  width: 100%;
+  display: flex;
+  flex-flow: column;
   height: 100%;
-  background: #fff;
-  margin: auto;
+  min-height: 480px;
+  width: 100%;
 }
 
 div[contenteditable] {
-	border: 0;
-	padding: 20px;
-	padding-top: 90px;
-	border-radius: 3px;
-	font-family: sans-serif;
-	font-size: 14px;
-	width: 100%;
-	height: 100%;
-	color: #4a4a4a;
-	margin-bottom: 4px;
-	resize: none;
+  border: 0;
+  color: #4a4a4a;
+  flex: auto;
+  font-family: sans-serif;
+  font-size: 14px;
+  padding: 5px 0;
+  resize: none;
 }
 
 div[contenteditable] b {
-	filter: blur(4px);
+  filter: blur(4px);
 }
 
 div[contenteditable].reveal b {
-	filter: none;
+  filter: none;
 }
 
 .stored {
-    background: lightgreen;
+  background: lightgreen;
 }
 
 .hidden {
-	display: none;
+  display: none;
 }
 
 
 /* Login form */
-.form {
-	position: absolute;
-	top: 150px;
-	left: 150px;
+form {
+  display: flex;
+  flex: auto;
+  flex-flow: column;
+  margin: 0 auto;
 }
 
-.form div {
-	clear: both;
-	padding: 10px;
+form div.spacer {
+  flex: auto;
 }
 
-.form label {
-	display: block;
-	height: 25px;
-	width: 150px;
-	float: left;
-	font-size: 20px;
+form div {
+  display: flex;
+  flex: none;
+  flex-flow: row;
+  padding-top: 10px;
 }
 
-.form input {
-	margin-left: 10px;
-	float: left;
+form label {
+  height: 25px;
+  flex: auto;
+  font-size: 20px;
 }
 
-.form button {
-	display: block;
-	margin: auto;
-	width: 150px;
+form input {
+  margin-left: 10px;
+  width: 150px;
+}
+
+form button {
+  display: block;
+  margin: auto;
+  width: 150px;
 }
-/* New notes entry box */
 
+/* New notes entry box */
 .pad {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 740px;
-	height: 700px;
-	z-index: 0;
+  display: flex;
+  flex: auto;
+  flex-flow: column;
+  padding: 5px;
+}
+
+header {
+  color: #999;
+  display: flex;
+  flex-flow: row;
+  font-family: sans-serif;
+  font-size: 20px;
+  padding: 20px;
 }
 
 h1 {
-	position: absolute;
-	top: 5px;
-	left: 20px;
-	z-index: 30;
-	font-size: 20px;
-	font-weight: normal;
-	font-family: sans-serif;
-	color: #999;
+  flex: auto;
+  font-size: inherit;
+  font-weight: normal;
+  margin: 0;
 }
 
 #lock {
-	position: absolute;
-	top: 25px;
-	right: 20px;
-	color: #bbb;
-	z-index: 10;
-	text-decoration: none;
-	font-size: 16px;
-}
-
-#lock.locked {
-	display: block;
-	top: 0;
-	left: 0;
-	text-align: center;
-	padding-top: 220px;
-	color: black;
-	font-weight: bold;
-	font-size: 30px;
-	height: 100%;
-	width: 100%;
-	background: #ebb;
-	z-index: 20;
-}
-
-span {
-	position: absolute;
-	bottom: 20px;
-	left: 20px;
-	color: #bbb;
-	z-index: 10;
-	text-decoration: none;
-	font-size: 16px;	
-}
-
-.control-bar {
-    position: absolute;
-    top: 50px;
-    left: 20px;
+  color: inherit;
+  flex: none;
+  text-decoration: none;
+}
+
+footer {
+  color: #bbb;
+  flex: none;
+  font-size: 16px;
+  padding: 20px;
 }
 
 .control-bar button {
-	margin-right: 5px;
-}
+  flex: none;
+  margin-right: 5px;
+}