From 3bcb36b46cb391ff30589caa3bbaca1fcf41483f Mon Sep 17 00:00:00 2001 From: Wu Cheng-Han Date: Mon, 15 Aug 2016 10:56:14 +0800 Subject: Improve index layout and UX with UI adjustments and better wording --- lib/response.js | 3 ++- public/css/cover.css | 36 +++++++++++++++++++++++--- public/js/cover.js | 23 ++++++++--------- public/views/index.ejs | 68 +++++++++++++++++++++++++++++++++----------------- 4 files changed, 91 insertions(+), 39 deletions(-) diff --git a/lib/response.js b/lib/response.js index 5c5798c8..acd3c719 100644 --- a/lib/response.js +++ b/lib/response.js @@ -93,7 +93,8 @@ function showIndex(req, res, next) { github: config.github, gitlab: config.gitlab, dropbox: config.dropbox, - google: config.google + google: config.google, + signin: req.isAuthenticated() }); res.write(content); res.end(); diff --git a/public/css/cover.css b/public/css/cover.css index 40e6ed53..bde3ec7c 100644 --- a/public/css/cover.css +++ b/public/css/cover.css @@ -53,6 +53,8 @@ body { vertical-align: middle; } .cover-container { + width: 100%; + padding-top: 80px; margin-right: auto; margin-left: auto; } @@ -65,6 +67,13 @@ body { * Header */ +.masthead { + position: absolute; + top: 0; + left: 0; + width: 100%; +} + .masthead-brand { margin-top: 10px; margin-bottom: 10px; @@ -135,8 +144,10 @@ body { @media (min-width: 768px) { /* Pull out the header and footer */ .masthead { - position: relative; + position: absolute; top: 0; + left: 0; + width: 100% !important; } .mastfoot { position: fixed; @@ -279,8 +290,11 @@ input { color: #d43f3a; } .ui-or { - margin-top: 5px; - margin-bottom: 5px; + margin: 5px; +} +.ui-use-tags { + min-width: 172px; + max-width: 344px; } .modal-title { @@ -306,4 +320,20 @@ input { background: white; cursor: inherit; display: block; +} + +.social-foot { + line-height: 30px; +} +.social-foot > *, .social-foot > * > * { + vertical-align: middle !important; +} + +@media (max-width: 768px) { + span.ui-or { + display: block; + } + .ui-use-tags { + max-width: 100%; + } } \ No newline at end of file diff --git a/public/js/cover.js b/public/js/cover.js index 6f46ab88..c97bd256 100644 --- a/public/js/cover.js +++ b/public/js/cover.js @@ -40,8 +40,8 @@ function pageInit() { parseServerToHistory(historyList, parseHistoryCallback); }, function () { - $('.ui-signin').slideDown(); - $('.ui-or').slideDown(); + $('.ui-signin').show(); + $('.ui-or').show(); $('.ui-welcome').hide(); $('.ui-avatar').prop('src', '').hide(); $('.ui-name').html(''); @@ -57,18 +57,17 @@ $(".masthead-nav li").click(function () { }); $(".ui-home").click(function () { - $(".section").hide(); - $("#home").fadeIn(); + if (!$("#home").is(':visible')) { + $(".section:visible").hide(); + $("#home").fadeIn(); + } }); $(".ui-history").click(function () { - $(".section").hide(); - $("#history").fadeIn(); -}); - -$(".ui-releasenotes").click(function () { - $(".section").hide(); - $("#releasenotes").fadeIn(); + if (!$("#history").is(':visible')) { + $(".section:visible").hide(); + $("#history").fadeIn(); + } }); function checkHistoryList() { @@ -292,7 +291,7 @@ $(".ui-logout").click(function () { var filtertags = []; $(".ui-use-tags").select2({ - placeholder: 'Use tags...', + placeholder: 'Select tags...', multiple: true, data: function () { return { diff --git a/public/views/index.ejs b/public/views/index.ejs index eb3b121e..daf123b1 100644 --- a/public/views/index.ejs +++ b/public/views/index.ejs @@ -8,7 +8,7 @@ - +
- Realtime collaborative markdown notes on all platforms. + Best way to write and share your knowledge in markdown.
<% if(facebook || twitter || github || gitlab || dropbox || google) { %> - - + +- New note -
-