Merge branch 'ui-improvements'

max-mapper · Nov 6, 2015 · 9748a58 · 9748a58
2 parents c664d6d + dc7b067
commit 9748a58
Show file tree

Hide file tree

Showing 10 changed files with 281 additions and 24 deletions.
diff --git a/app.html b/app.html
@@ -32,7 +32,7 @@
   </div>
 
   <div class="content-container">
-    <header class="bb b--light-gray pvm">
+    <header class="main-header bb b--light-gray pvs">
       <div class="center mw8 phm phl-ns">
         <h1 class="f3 book dib prm man">ScreenCat</h1>
         <div class="fr">
@@ -49,29 +49,29 @@ <h1 class="f3 book dib prm man">ScreenCat</h1>
             <a class="share-button tc phs pvs pvm-ns f4 btn w-100 mw-fill mrm">Share Your Screen</a>
           </div>
           <div class="w-50 left">
-            <a class="join-button tc phs pvs pvm-ns f4 btn w-100 mw-fill">Join Remote Screen</a>
+            <a class="join-button tc phs pvs pvm-ns f4 btn w-100 mw-fill mlm">Join Remote Screen</a>
           </div>
         </div>
       </div>
 
       <div class="share-container dn">
         <h2 class="f4 ttu book">Share</h2>
         <div class="cr">
-          <div class="w-80 left">
-            <input class="code-copy-input pam brs ba b--light-gray w-100 mw-fill"></input>
+          <div class="w-80 left prl">
+            <input type="text" class="code-copy-input pam brs ba b--light-gray w-100 mw-fill" autofocus></input>
           </div>
           <div class="w-20 left">
             <div class="code-copy-button tc phs pvs pvm-ns f4 btn w-100 mw-fill">Copy</div>
           </div>
         </div>
-        <p class="mbx">Send this code to the person you want to share your screen with. They can use <a href="https://github.com/maxogden/screencat/releases/latest" class="open-externally">ScreenCat.app</a> or <a href="http://maxogden.github.io/screencat/remote" class="open-externally">http://maxogden.github.io/screencat/remote</a> in Chrome/Firefox. Please wait here until they connect.</p>
+        <p>Send this code to the person you want to share your screen with. They can use <a href="https://github.com/maxogden/screencat/releases/latest" class="open-externally">ScreenCat.app</a> or <a href="http://maxogden.github.io/screencat/remote" class="open-externally">http://maxogden.github.io/screencat/remote</a> in Chrome/Firefox. <strong>Please wait here until they connect.</strong></p>
       </div>
 
       <div class="join-container dn">
         <h2 class="f4 ttu book cl">join</h2>
         <div class="cr">
-          <div class="w-80 left">
-            <input class="code-paste-input pam brs ba b--light-gray w-100 mw-fill" value="Loading..."></input>
+          <div class="w-80 left prl">
+            <input type="text" class="code-paste-input pam brs ba b--light-gray w-100 mw-fill" value="Loading..." autofocus></input>
           </div>
           <div class="w-20 left">
             <div class="code-paste-button tc phs pvs pvm-ns f4 btn w-100 mw-fill">Connect</div>

diff --git a/fonts/icomoon.eot b/fonts/icomoon.eot
diff --git a/fonts/icomoon.svg b/fonts/icomoon.svg
diff --git a/fonts/icomoon.ttf b/fonts/icomoon.ttf
diff --git a/fonts/icomoon.woff b/fonts/icomoon.woff
diff --git a/index.html b/index.html
@@ -11,7 +11,7 @@
 <link rel="icon" type="image/png" src="img/Icon@2x.png">
 </head>
 <body class="wi-100">
-  <header class="bb b--light-gray pvm"> 
+  <header class="main-header bb b--light-gray pvs"> 
     <div class="center mw8 phm phl-ns">
       <h1 class="f3 book dib prm man">ScreenCat</h1>
     </div>

diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "start": "electron electron.js",
     "build": "electron-packager . ScreenCat --platform=darwin --arch=x64 --version=0.34.2 --protocol-name=\"ScreenCat URL\" --protocol=\"screencat\" --ignore=node_modules/electron-prebuilt --ignore=node_modules/electron-packager --ignore=node_modules/browserify --ignore=node_modules/wzrd --ignore=node_modules/standard && cp img/Icon.icns ScreenCat.app/Contents/Resources/atom.icns",
     "dev": "wzrd remote.js:remote-bundle.js",
-    "css": "node-sass stylesheets/sass/screencat.scss stylesheets/css/screencat.css",
+    "css": "node-sass stylesheets/sass/screencat.scss stylesheets/css/screencat.css --watch",
     "test": "standard"
   },
   "author": "max ogden",

diff --git a/remote.html b/remote.html
@@ -28,7 +28,7 @@
 <body class="wi-100">
 
   <div class="content-container">
-    <header class="bb b--light-gray pvm">
+    <header class="main-header bb b--light-gray pvs">
       <div class="center mw8 phm phl-ns">
         <h1 class="f3 book dib prm man">ScreenCat</h1>
         <div class="fr">
@@ -41,7 +41,7 @@ <h1 class="f3 book dib prm man">ScreenCat</h1>
         <h2 class="f4 ttu book cl">join</h2>
         <div class="cr">
           <div class="w-80 left prl">
-            <input class="code-paste-input pam brs ba b--light-gray w-100 mw-fill"></input>
+            <input type="text" class="code-paste-input brs ba b--light-gray w-100 mw-fill" autofocus></input>
           </div>
           <div class="w-20 left">
             <div class="code-paste-button tc phs pvs pvm-ns f4 btn w-100 mw-fill">Connect</div>

diff --git a/stylesheets/css/screencat.css b/stylesheets/css/screencat.css
@@ -1,4 +1,66 @@
-@charset "UTF-8";
+@font-face {
+  font-family: 'icomoon';
+  src: url("../../fonts/icomoon.eot?yai13c");
+  src: url("../../fonts/icomoon.eot?yai13c#iefix") format("embedded-opentype"), url("../../fonts/icomoon.ttf?yai13c") format("truetype"), url("../../fonts/icomoon.woff?yai13c") format("woff"), url("../../fonts/icomoon.svg?yai13c#icomoon") format("svg");
+  font-weight: normal;
+  font-style: normal; }
+
+[class^="icon-"], [class*=" icon-"] {
+  font-size: 1em;
+  font-family: 'icomoon';
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale; }
+
+.icon-join:before {
+  content: "\e901"; }
+
+.icon-quit:before {
+  content: "\e902"; }
+
+.icon-share:before {
+  content: "\e903"; }
+
+.icon-back:before {
+  content: "\e900"; }
+
+body {
+  background-color: #F7F7F7;
+  color: #222; }
+
+input {
+  outline: none;
+  padding: 15px 25px; }
+
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="email"],
+input[type="search"],
+input[type="number"],
+input[type="password"] {
+  border: 1px solid #DEDEDE;
+  border-radius: 4px; }
+  input[type="text"]:focus,
+  input[type="tel"]:focus,
+  input[type="url"]:focus,
+  input[type="email"]:focus,
+  input[type="search"]:focus,
+  input[type="number"]:focus,
+  input[type="password"]:focus {
+    border: 1px solid #539be2; }
+
+.main-header {
+  background: -webkit-linear-gradient(top, #FFFFFF 0%, #F2F2F2 100%);
+  border-bottom: 1px solid #D3D3D3;
+  box-shadow: 0 1px 2px rgba(235, 235, 235, 0.8); }
+
 .left {
   float: left;
   display: block; }
@@ -36,14 +98,61 @@
     color: #222;
     background-color: transparent; }
   .btn-plain:active {
-    color: #999; }
-
-.back-button:before {
-  position: absolute;
-  left: 0;
-  display: inline-block;
-  content: '◄';
-  padding-left: 5px; }
+    color: #ccc; }
+
+.back-button {
+  position: relative;
+  color: #666; }
+  .back-button:hover {
+    color: #666; }
+  .back-button:active {
+    color: #ccc; }
+  .back-button:before {
+    font-family: "icomoon";
+    font-size: 10px;
+    content: "\e900";
+    display: inline-block;
+    padding-right: 5px; }
+
+.quit-button {
+  position: relative;
+  color: #666; }
+  .quit-button:hover {
+    color: #666; }
+  .quit-button:active {
+    color: #ccc; }
+  .quit-button:before {
+    font-family: "icomoon";
+    font-size: 10px;
+    content: "\e902";
+    display: inline-block;
+    padding-right: 5px; }
+
+.share-button {
+  position: relative;
+  padding-left: 35px; }
+  .share-button:before {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 15px;
+    font-family: "icomoon";
+    font-size: 1.2em;
+    content: "\e903";
+    display: inline-block; }
+
+.join-button {
+  position: relative;
+  padding-left: 35px; }
+  .join-button:before {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 15px;
+    font-family: "icomoon";
+    font-size: 1.2em;
+    content: "\e901";
+    display: inline-block; }
 
 .cr {
   overflow: auto; }

diff --git a/stylesheets/sass/screencat.scss b/stylesheets/sass/screencat.scss
@@ -2,6 +2,76 @@ $button-color: #539be2;
 $button-active: #3085db;
 $button-border-color: #3f74a8;
 
+@font-face {
+  font-family: 'icomoon';
+  src:url('../../fonts/icomoon.eot?yai13c');
+  src:url('../../fonts/icomoon.eot?yai13c#iefix') format('embedded-opentype'),
+    url('../../fonts/icomoon.ttf?yai13c') format('truetype'),
+    url('../../fonts/icomoon.woff?yai13c') format('woff'),
+    url('../../fonts/icomoon.svg?yai13c#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+  font-size: 1em;
+  font-family: 'icomoon';
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-join:before {
+  content: "\e901";
+}
+.icon-quit:before {
+  content: "\e902";
+}
+.icon-share:before {
+  content: "\e903";
+}
+.icon-back:before {
+  content: "\e900";
+}
+
+body {
+  background-color: #F7F7F7;
+  color: #222;
+}
+
+input {
+  outline: none;
+  padding: 15px 25px;
+}
+
+input[type="text"],
+input[type="tel"],
+input[type="url"],
+input[type="email"],
+input[type="search"],
+input[type="number"],
+input[type="password"] {
+  border: 1px solid #DEDEDE;
+  border-radius: 4px;
+
+  &:focus {
+    border: 1px solid $button-color;
+  }
+}
+
+.main-header {
+  background: -webkit-linear-gradient(top, #FFFFFF 0%, #F2F2F2 100%);
+  border-bottom: 1px solid #D3D3D3;
+  box-shadow: 0 1px 2px rgba(#EBEBEB, .8);
+}
+
 .left {
   float: left;
   display: block;
@@ -49,17 +119,81 @@ $button-border-color: #3f74a8;
   }
 
   &:active {
-    color: #999;
+    color: #ccc;
   }
 }
 
 .back-button {
+  position: relative;
+  color: #666;
+
+  &:hover {
+    color: #666;
+  }
+
+  &:active {
+    color: #ccc;
+  }
+
+  &:before {
+    font-family: "icomoon";
+    font-size: 10px;
+    content: "\e900";
+    display: inline-block;
+    padding-right: 5px;
+  }
+}
+
+.quit-button {
+  position: relative;
+  color: #666;
+
+  &:hover {
+    color: #666;
+  }
+
+  &:active {
+    color: #ccc;
+  }
+
+  &:before {
+    font-family: "icomoon";
+    font-size: 10px;
+    content: "\e902";
+    display: inline-block;
+    padding-right: 5px;
+  }
+}
+
+.share-button {
+  position: relative;
+  padding-left: 35px;
+
+  &:before {
+    position: absolute;
+    top: 50%; 
+    transform: translateY(-50%);
+    left: 15px;
+    font-family: "icomoon";
+    font-size: 1.2em;
+    content: "\e903";
+    display: inline-block;
+  }
+}
+
+.join-button {
+  position: relative;
+  padding-left: 35px;
+
   &:before {
     position: absolute;
-    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 15px;
+    font-family: "icomoon";
+    font-size: 1.2em;
+    content: "\e901";
     display: inline-block;
-    content: '◄';
-    padding-left: 5px;
   }
 }