Merge pull request #5784 from JohnONolan/stupidfuckingrebase

Search, styles, things.

core/client/app/routes/setup/one.js

@@ -3,7 +3,7 @@ import {request as ajax} from 'ic-ajax';
 
 var DownloadCountPoller = Ember.Object.extend({
     url: null,
-    count: 'many, many',
+    count: '',
     runId: null,
 
     init: function () {
@@ -12,7 +12,7 @@ var DownloadCountPoller = Ember.Object.extend({
     },
 
     poll: function () {
-        var interval = 3000,
+        var interval = 2000,
             runId;
 
         runId = Ember.run.later(this, function () {
@@ -36,7 +36,7 @@ var DownloadCountPoller = Ember.Object.extend({
 
             self.set('count', count);
         }).catch(function () {
-            self.set('count', 'many, many');
+            self.set('count', '');
         });
     }
 });

core/client/app/styles/components/selectize.css

@@ -205,13 +205,13 @@
     cursor: pointer;
 }
 .selectize-dropdown [data-selectable] .highlight {
-    background: rgba(125, 168, 208, 0.2);
+    background: #fff3b8;
     border-radius: 1px;
 }
 .selectize-dropdown [data-selectable],
 .selectize-dropdown .optgroup-header,
 .selectize-dropdown .dropdown-empty-message {
-    padding: 5px 8px;
+    padding: 7px 8px;
 }
 .selectize-dropdown .optgroup:first-child .optgroup-header {
     border-top: 0 none;
@@ -305,13 +305,24 @@
     border-color: #b8b8b8;
 }
 .selectize-dropdown .optgroup-header {
+    position: relative;
+    display: inline-block;
     padding-top: 7px;
+    background: #fff;
+    color: var(--midgrey);
     font-size: 0.85em;
-    font-weight: bold;
 }
-.selectize-dropdown .optgroup {
-    border-top: 1px solid #f0f0f0;
+.selectize-dropdown .optgroup-header:after {
+    content: "";
+    position: absolute;
+    top: 52%;
+    left: calc(100% + 3px);
+    display: block;
+    width: calc(187px - 100%);
+    height: 1px;
+    border-bottom: #dfe1e3 1px solid;
 }
-.selectize-dropdown .optgroup:first-child {
-    border-top: 0 none;
+
+.selectize-dropdown .option {
+    line-height: 1.35em;
 }

core/client/app/styles/layouts/main.css

@@ -104,6 +104,10 @@
     margin: 0 15px 10px;
 }
 
+.gh-nav-search .selectize-control {
+    display: flex;
+}
+
 .gh-nav-search-input .selectize-input {
     padding: 4px 8px;
     padding-right: 30px;
@@ -115,15 +119,21 @@
     font-size: 1.3rem;
 }
 
+.gh-nav-search .selectize-input.dropdown-active {
+    border-bottom: none;
+}
+
+.gh-nav-search .selectize-dropdown-content {
+    max-height: calc(100vh - 150px);
+}
+
 .gh-nav-search-button {
     position: absolute;
-    top: -5px;
+    top: 0;
     right: 0;
     bottom: 0;
     z-index: 1;
-    display: flex;
-    align-items: center;
-    padding: 0 10px 0 5px;
+    padding: 0 8px 0 5px;
 }
 
 .gh-nav-search-button i {
@@ -131,6 +141,7 @@
     height: 16px;
     color: var(--midgrey);
     font-size: 13px;
+    line-height: 13px;
     transition: color 0.2s ease;
     transform: rotate(90deg);
 }

core/client/app/styles/patterns/forms.css

@@ -109,7 +109,7 @@ input {
 .gh-select,
 select {
     display: block;
-    padding: 4px 10px;
+    padding: 8px 10px;
     width: 100%;
     border: 1px solid #dfe1e3;
     border-radius: var(--border-radius);

core/client/app/styles/patterns/global.css

@@ -236,12 +236,15 @@ tt {
 
 code,
 tt {
-    padding: 0.2em 0.4em;
-    background: color(#dfe1e3 lightness(+2%));
+    padding: 0.2rem 0.3rem 0.1rem;
+    border: color(#f5f7f8 lightness(-10%)) 1px solid;
+    background: #f5f7f8;
     border-radius: 2px;
-    vertical-align: top;
+    color: #c25;
+    vertical-align: middle;
     white-space: pre-wrap;
-    font-size: 0.85em;
+    font-size: 0.8em;
+    line-height: 1em;
 }
 
 pre {
@@ -249,7 +252,8 @@ pre {
     margin: 1.6em 0;
     padding: 10px;
     width: 100%;
-    background: color(#dfe1e3 lightness(+2%));
+    border: color(#f5f7f8 lightness(-10%)) 1px solid;
+    background: #f5f7f8;
     border-radius: 3px;
     white-space: pre;
     font-family: var(--font-family-mono);
@@ -261,6 +265,7 @@ pre tt {
     padding: 0;
     border: none;
     background: transparent;
+    color: inherit;
     white-space: pre-wrap;
     font-size: inherit;
 }

core/client/app/templates/setup/one.hbs

@@ -1,6 +1,6 @@
 <header>
     <h1>Welcome to <strong>Ghost</strong>!</h1>
-    <p>So far there have been <em>{{model.count}}</em> Ghost blogs made by people all over the world. Today we’re making yours.</p>
+    <p>All over the world, people have started <em>{{model.count}}</em> incredible blogs with Ghost. Today, we’re starting yours.</p>
 </header>
 
 <figure class="gh-flow-screenshot">