website: fixing some nits:
https://screenshot.googleplex.com/70zBTvkh5GK.png
https://screenshot.googleplex.com/pnpqOkvxZ8g.png
https://screenshot.googleplex.com/RYDpRHZDsj6.png
-Bolded heading text
-More padding around sections
-Fixing the sidebar when in "narrow-screen" mode
-Fixing logo jumping few pixels between landing and subsites
-Wording fix Alex proposed
Change-Id: I30e8366ba71944bb7108c0db4f88ae0857994bc8
diff --git a/browser/index.js b/browser/index.js
index aa7732d..54d9cc9 100644
--- a/browser/index.js
+++ b/browser/index.js
@@ -17,6 +17,7 @@
var sidebarEl = dom.find('.sidebar');
if (sidebarEl) {
ReactDOM.render(Sidebar({
+ subsite: sidebarEl.dataset.subsite,
items: parseSidebarProps(dom.find('.sidebar-data'))
}), sidebarEl);
diff --git a/browser/sidebar.js b/browser/sidebar.js
index 8485473..3c8bfea 100644
--- a/browser/sidebar.js
+++ b/browser/sidebar.js
@@ -80,18 +80,38 @@
});
}
+function renderLogo(subsite) {
+ var title;
+ var href;
+ if (subsite === 'syncbase') {
+ title = 'Syncbase';
+ href = '/syncbase';
+ } else {
+ title = 'Core';
+ href = '/core.html';
+ }
+
+ return h('div.logo-row', [
+ h('div.icon.v-icon', {},
+ h('a', {href: '/'},
+ h('img', {
+ src: '/images/v-icon-cyan-700.svg'
+ })
+ )
+ ),
+ h('div.logo', {},
+ h('a', {href: href}, title)
+ )
+ ]);
+}
+
// Expects props {items []Item}, where Item is either {text, items []Item} or
// {text, href}.
module.exports = React.createClass({
displayName: 'Sidebar',
render: function() {
return h('div', [
- h('div.logo-row', [
- h('div.icon.v-icon', {}, h('img', {
- src: '/images/v-icon-cyan-700.svg'
- })),
- h('div.logo', 'Vanadium')
- ]),
+ renderLogo(this.props.subsite),
h('div.items', renderItems(this.props.items))
]);
}
diff --git a/content/syncbase/example-apps.md b/content/syncbase/example-apps.md
index 360d5c6..6e96c7d 100644
--- a/content/syncbase/example-apps.md
+++ b/content/syncbase/example-apps.md
@@ -4,7 +4,7 @@
toc: true
= yaml =
-# Todos *(canonical example)*
+# Todos *(Canonical Example)*
* Repo: https://github.com/vanadium/todos
diff --git a/content/syncbase/first-app.md b/content/syncbase/first-app.md
index 183e6b1..2000244 100644
--- a/content/syncbase/first-app.md
+++ b/content/syncbase/first-app.md
@@ -56,7 +56,7 @@
instance, they are required by the Syncbase API during initialization.
{{# helpers.info }}
-## Please note
+## Note
Requiring a cloud Syncbase is temporary. We are planning to allow the API to be
used without a cloud Syncbase very soon.
{{/ helpers.info }}
@@ -298,12 +298,12 @@
tool that makes it easy to run Android apps on multiple devices.
{{# helpers.info }}
-## Please note
+## Note
Internet connectivity is required the first time the app is run to authenticate
the user and generate an offline auth certificate.
-Subsequence runs do not require Internet connectivity for 24 hours. (Auth protocol
-starts trying to refresh the certificate after 12 hours and it would expire in
-24 hours if all tries are unsuccessful).
+Subsequent runs generally do not require Internet connectivity. The auth
+protocol refreshes its certificate automatically after 12 hours, but the
+certificate will expire if a device is offline for more than 24 hours.
{{/ helpers.info }}
After running the application on 2 or more devices with Internet connectivity,
@@ -319,7 +319,7 @@
```
{{/ helpers.hidden }}
-# Want to dive deeper?
+# Want to Dive Deeper?
Checkout the [Tutorial] to build a full-fledged Todo app and learn more Syncbase
features such as sharing, batches and discovery.
diff --git a/content/syncbase/guides/synchronization.md b/content/syncbase/guides/synchronization.md
index eedb912..4a05c24 100644
--- a/content/syncbase/guides/synchronization.md
+++ b/content/syncbase/guides/synchronization.md
@@ -38,7 +38,7 @@
synced amongst the creator’s devices but other users can also be added to this
syncgroup to allow sharing.
-## Sharing collections
+## Sharing Collections
Sharing collections involves **inviting** other users to **join** a collection's
syncgroup. Upon inviting a user, the invitee **receives an invite event**. When
@@ -84,7 +84,7 @@
surfaced through the *Watch API*. See [Data Flow] guide for details on how
to model your app's data flow.
-## Unsharing collections
+## Unsharing Collections
Ejecting a user from a collection's syncgroup will unshare the collection. If
the target user has not accepted the invitation yet, the invite will simply
diff --git a/content/syncbase/index.md b/content/syncbase/index.md
index 40bc2e4..6c32dc4 100644
--- a/content/syncbase/index.md
+++ b/content/syncbase/index.md
@@ -12,7 +12,7 @@
<figcaption>Syncbase Overview</figcaption>
-# Why use Syncbase?
+# Why Use Syncbase?
<div class="intro-detail intro-detail-offline">
<p>
@@ -60,7 +60,7 @@
bunch of problems simultaneously whereas those other systems each solve a subset
of those problems.
-# Ready to get started?
+# Ready to Get Started?
The initial version of Syncbase is ready for testing and evaluation by early
adopters - it is suitable for prototyping, but not for production applications.
diff --git a/content/syncbase/my-cloud-syncbase.md b/content/syncbase/my-cloud-syncbase.md
index 38ffbfd..b979b90 100644
--- a/content/syncbase/my-cloud-syncbase.md
+++ b/content/syncbase/my-cloud-syncbase.md
@@ -14,7 +14,7 @@
instances. Access is restricted to the creator of the instance.
{{# helpers.warning }}
-## Please note
+## Note
The instances are meant to be used for development. There are no guarantees
about availability or performance. Data stored in the instances can be lost at
diff --git a/content/syncbase/quickstart.md b/content/syncbase/quickstart.md
index 5932a3b..1b77c59 100644
--- a/content/syncbase/quickstart.md
+++ b/content/syncbase/quickstart.md
@@ -49,7 +49,7 @@
instance, they are required by the Syncbase API during initialization.
{{# helpers.info }}
-## Please note
+## Note
Requiring a cloud Syncbase is temporary. We are planning to allow the API to be
used without a cloud Syncbase soon.
{{/ helpers.info }}
@@ -110,7 +110,7 @@
```
{{/ helpers.hidden }}
-# Got 10 more minutes?
+# Got 10 More Minutes?
Let's create a simple *Dice Roller* app and see it sync peer-to-peer in action!
<a href="/syncbase/first-app.html" class="button-passive">
diff --git a/stylesheets/home.less b/stylesheets/home.less
index de7b16c..860d796 100644
--- a/stylesheets/home.less
+++ b/stylesheets/home.less
@@ -36,7 +36,7 @@
section {
max-width: 100%;
width: 100%;
- padding: @gutter;
+ padding: (2 * @gutter) @gutter;
}
.menu {
@@ -44,7 +44,7 @@
}
.v-icon {
- display: block !important;
+ display: flex !important;
}
.section-container {
@@ -53,23 +53,25 @@
}
h1, h2, h3 {
- font-weight: 100;
margin: @gutter-half 0px;
}
h1 {
color: @color-white;
font-size: @intro-heading-font-size;
+ font-weight: 400;
}
h2 {
color: @color-primary-700;
font-size: @intro-subheading-font-size;
+ font-weight: 100;
}
h3 {
color: @color-blue-grey-500;
font-size: @intro-text-font-size;
+ font-weight: 100;
}
.intro {
diff --git a/stylesheets/sidebar.less b/stylesheets/sidebar.less
index 30f9b4a..cdf5695 100644
--- a/stylesheets/sidebar.less
+++ b/stylesheets/sidebar.less
@@ -29,31 +29,31 @@
.items {
padding: @gutter-half 0;
-}
-
-a {
- display: block;
- padding: @gutter-quarter @gutter-half;
- color: @color-text-primary;
- font-size: 14px;
- font-weight: 400;
-
- &.active {
- background-color: @color-blue-grey-100;
- font-weight: 500;
- }
-}
-
-nav {
- overflow: hidden;
a {
- padding: 6px;
- padding-left: @gutter;
- font-size: 13px;
+ display: block;
+ padding: @gutter-quarter @gutter-half;
+ color: @color-text-primary;
+ font-size: 14px;
+ font-weight: 400;
+
+ &.active {
+ background-color: @color-blue-grey-100;
+ font-weight: 500;
+ }
}
- nav a {
- padding-left: calc(@gutter + @gutter-half);
+ nav {
+ overflow: hidden;
+
+ a {
+ padding: 6px;
+ padding-left: @gutter;
+ font-size: 13px;
+ }
+
+ nav a {
+ padding-left: calc(@gutter + @gutter-half);
+ }
}
}
diff --git a/templates/partials/core_sidebar.mustache b/templates/partials/core_sidebar.mustache
index 540d8c1..949b2bc 100644
--- a/templates/partials/core_sidebar.mustache
+++ b/templates/partials/core_sidebar.mustache
@@ -2,7 +2,7 @@
Note to contributors: The sidebar items and ordering were tested extensively for
usability. Changes here should not be taken lightly.
}}
-<div class="sidebar"></div>
+<div data-subsite="core" class="sidebar"></div>
{{! TODO(sadovsky): Transmit data as JSON, not HTML. }}
<div class="sidebar-data">
<a href="/core.html">Overview</a>
diff --git a/templates/partials/syncbase_sidebar.mustache b/templates/partials/syncbase_sidebar.mustache
index e9d111f..6b24b46 100644
--- a/templates/partials/syncbase_sidebar.mustache
+++ b/templates/partials/syncbase_sidebar.mustache
@@ -2,7 +2,7 @@
Note to contributors: The sidebar items and ordering were tested extensively for
usability. Changes here should not be taken lightly.
}}
-<div class="sidebar"></div>
+<div data-subsite="syncbase" class="sidebar"></div>
{{! TODO(sadovsky): Transmit data as JSON, not HTML. }}
<div class="sidebar-data">
<a href="/syncbase/">Overview</a>
