depau/HackMD
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Improve index layout and UX with UI adjustments and better wording

Browse source
This commit is contained in:
Wu Cheng-Han 2016-08-15 10:56:14 +08:00
parent cf290e86e1
commit 3bcb36b46c
4 changed files with 91 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
lib/response.js
View file

@ -93,7 +93,8 @@ function showIndex(req, res, next) {
github: config.github, github: config.github,
gitlab: config.gitlab, gitlab: config.gitlab,
dropbox: config.dropbox, dropbox: config.dropbox,
google: config.google google: config.google,
signin: req.isAuthenticated()
}); });
res.write(content); res.write(content);
res.end(); res.end();

36
public/css/cover.css
View file

@ -53,6 +53,8 @@ body {
vertical-align: middle; vertical-align: middle;
} }
.cover-container { .cover-container {
width: 100%;
padding-top: 80px;
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
} }
@ -65,6 +67,13 @@ body {
* Header * Header
*/ */
.masthead {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.masthead-brand { .masthead-brand {
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
@ -135,8 +144,10 @@ body {
@media (min-width: 768px) { @media (min-width: 768px) {
/* Pull out the header and footer */ /* Pull out the header and footer */
.masthead { .masthead {
position: relative; position: absolute;
top: 0; top: 0;
left: 0;
width: 100% !important;
} }
.mastfoot { .mastfoot {
position: fixed; position: fixed;
@ -279,8 +290,11 @@ input {
color: #d43f3a; color: #d43f3a;
} }
.ui-or { .ui-or {
margin-top: 5px; margin: 5px;
margin-bottom: 5px; }
.ui-use-tags {
min-width: 172px;
max-width: 344px;
} }
.modal-title { .modal-title {
@ -306,4 +320,20 @@ input {
background: white; background: white;
cursor: inherit; cursor: inherit;
display: block; 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%;
}
} }

23
public/js/cover.js
View file

@ -40,8 +40,8 @@ function pageInit() {
parseServerToHistory(historyList, parseHistoryCallback); parseServerToHistory(historyList, parseHistoryCallback);
}, },
function () { function () {
$('.ui-signin').slideDown(); $('.ui-signin').show();
$('.ui-or').slideDown(); $('.ui-or').show();
$('.ui-welcome').hide(); $('.ui-welcome').hide();
$('.ui-avatar').prop('src', '').hide(); $('.ui-avatar').prop('src', '').hide();
$('.ui-name').html(''); $('.ui-name').html('');
@ -57,18 +57,17 @@ $(".masthead-nav li").click(function () {
}); });
$(".ui-home").click(function () { $(".ui-home").click(function () {
$(".section").hide(); if (!$("#home").is(':visible')) {
$("#home").fadeIn(); $(".section:visible").hide();
$("#home").fadeIn();
}
}); });
$(".ui-history").click(function () { $(".ui-history").click(function () {
$(".section").hide(); if (!$("#history").is(':visible')) {
$("#history").fadeIn(); $(".section:visible").hide();
}); $("#history").fadeIn();
}
$(".ui-releasenotes").click(function () {
$(".section").hide();
$("#releasenotes").fadeIn();
}); });
function checkHistoryList() { function checkHistoryList() {
@ -292,7 +291,7 @@ $(".ui-logout").click(function () {
var filtertags = []; var filtertags = [];
$(".ui-use-tags").select2({ $(".ui-use-tags").select2({
placeholder: 'Use tags...', placeholder: 'Select tags...',
multiple: true, multiple: true,
data: function () { data: function () {
return { return {

68
public/views/index.ejs
View file

@ -8,7 +8,7 @@
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
<meta name="description" content="Realtime collaborative markdown notes on all platforms."> <meta name="description" content="Best way to write and share your knowledge in markdown.">
<meta name="keywords" content="Collaborative, Markdown, Notes"> <meta name="keywords" content="Collaborative, Markdown, Notes">
<title>HackMD - Collaborative markdown notes</title> <title>HackMD - Collaborative markdown notes</title>
<link rel="icon" type="image/png" href="<%- url %>/favicon.png"> <link rel="icon" type="image/png" href="<%- url %>/favicon.png">
@ -41,56 +41,78 @@
<h3 class="masthead-brand"></h3> <h3 class="masthead-brand"></h3>
<nav> <nav>
<ul class="nav masthead-nav"> <ul class="nav masthead-nav">
<li class="ui-home active"><a href="#">Home</a> <li class="ui-home<% if(!signin) { %> active<% } %>"><a href="#">Intro</a>
</li> </li>
<li class="ui-history"><a href="#">History</a> <li class="ui-history<% if(signin) { %> active<% } %>"><a href="#">History</a>
</li> </li>
</ul> </ul>
</nav> </nav>
</div> </div>
</div> </div>
<div id="home" class="section"> <div id="home" class="section"<% if(signin) { %> style="display:none;"<% } %>>
<div class="inner cover"> <div class="inner cover">
<h1 class="cover-heading"><i class="fa fa-file-text"></i> HackMD</h1> <h1 class="cover-heading"><i class="fa fa-file-text"></i> HackMD</h1>
<p class="lead"> <p class="lead">
Realtime collaborative markdown notes on all platforms. Best way to write and share your knowledge in markdown.
</p> </p>
<% if(facebook || twitter || github || gitlab || dropbox || google) { %> <% if(facebook || twitter || github || gitlab || dropbox || google) { %>
<a type="button" class="btn btn-lg btn-success ui-signin" data-toggle="modal" data-target=".signin-modal" style="display:none;">Sign In</a> <span class="ui-signin">
<div class="ui-or" style="display:none;">Or</div> <br>
<a type="button" class="btn btn-lg btn-success ui-signin" data-toggle="modal" data-target=".signin-modal" style="width: 170px;">Sign In</a>
</span>
<span class="ui-or">or</span>
<% }%> <% }%>
<p class="lead"> <span class="ui-signin">
<a href="<%- url %>/new" class="btn btn-lg btn-default">New note</a> <a href="<%- url %>/new" class="btn btn-lg btn-default" style="width: 170px;">New guest note</a>
</p> <br>
<h5>Share directly with URL <i class="fa fa-link"></i></h5> <br>
<a class="btn btn-primary" href="<%- url %>/features">More features <i class="fa fa-chevron-right"></i></a> </span>
<div class="lead row" style="width: 90%; margin: 0 auto;">
<div class="col-md-4 inner">
<a href="<%- url %>/features#share-note">
<i class="fa fa-bolt fa-3x"></i>
<h4>Collaborate with URL</h4>
</a>
</div>
<div class="col-md-4 inner">
<a href="<%- url %>/features#mathjax">
<i class="fa fa-bar-chart fa-3x"></i>
<h4>Support charts and MathJax</h4>
</a>
</div>
<div class="col-md-4 inner">
<a href="<%- url %>/features#slide-mode">
<i class="fa fa-tv fa-3x"></i>
<h4>Support slide mode</h4>
</a>
</div>
</div>
</div> </div>
<br>
</div> </div>
<div id="history" class="section" style="display:none;"> <div id="history" class="section"<% if(!signin) { %> style="display:none;"<% } %>>
<% if(facebook || twitter || github || gitlab || dropbox || google) { %> <% if(facebook || twitter || github || gitlab || dropbox || google) { %>
<div class="ui-signin"> <div class="ui-signin">
<h4> <p>Below is the history from browser</p>
<a type="button" class="btn btn-success" data-toggle="modal" data-target=".signin-modal">Sign In</a> to get own history!
</h4>
<p>Below are history from browser</p>
</div> </div>
<div class="ui-signout" style="display:none;"> <div class="ui-signout" style="display:none;">
<img class="ui-avatar"> <img class="ui-avatar">
<h4 class="ui-welcome">Welcome! <span class="ui-name"></span></h4> <h4 class="ui-welcome">Welcome! <span class="ui-name"></span></h4>
<a href="<%- url %>/new" class="btn btn-default">New note</a> Or <a href="<%- url %>/new" class="btn btn-md btn-default">New note</a> or
<a href="#" class="btn btn-danger ui-logout">Sign Out</a> <a href="#" class="btn btn-danger ui-logout">Sign Out</a>
</div> </div>
<% }%> <% }%>
<h4>
<a type="button" href="<%- url %>/features" class="btn btn-primary">Explore all features</a>
</h4>
<hr> <hr>
<form class="form-inline"> <form class="form-inline">
<div class="form-group" style="vertical-align: bottom;"> <div class="form-group" style="vertical-align: bottom;">
<input class="form-control ui-use-tags" style="min-width:172px;max-width:344px;" /> <input class="form-control ui-use-tags" />
</div> </div>
<div class="form-group"> <div class="form-group">
<input class="search form-control" placeholder="Search anything..." /> <input class="search form-control" placeholder="Search keyword..." />
</div> </div>
<a href="#" class="sort btn btn-default" data-sort="text" title="Sort by title"> <a href="#" class="sort btn btn-default" data-sort="text" title="Sort by title">
Title Title
@ -117,8 +139,8 @@
<div class="mastfoot"> <div class="mastfoot">
<div class="inner"> <div class="inner">
<h6> <h6 class="social-foot">
<iframe src="//ghbtns.com/github-btn.html?user=hackmdio&repo=hackmd&type=star&count=true" frameborder="0" scrolling="0" width="90px" height="20px" style="vertical-align:middle;"></iframe> <iframe src="//ghbtns.com/github-btn.html?user=hackmdio&repo=hackmd&type=star&count=true" frameborder="0" scrolling="0" width="90px" height="20px"></iframe>
</h6> </h6>
<p> <p>
&copy; 2016 <a href="https://www.facebook.com/TakeHackMD" target="_blank"><i class="fa fa-facebook-square"></i> HackMD</a> | <a href="<%- url %>/s/release-notes" target="_blank">Releases</a> &copy; 2016 <a href="https://www.facebook.com/TakeHackMD" target="_blank"><i class="fa fa-facebook-square"></i> HackMD</a> | <a href="<%- url %>/s/release-notes" target="_blank">Releases</a>