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,
gitlab: config.gitlab,
dropbox: config.dropbox,
google: config.google
google: config.google,
signin: req.isAuthenticated()
});
res.write(content);
res.end();

36
public/css/cover.css
View file

@ -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%;
}
}

23
public/js/cover.js
View file

@ -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 {

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-status-bar-style" content="black">
<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">
<title>HackMD - Collaborative markdown notes</title>
<link rel="icon" type="image/png" href="<%- url %>/favicon.png">
@ -41,56 +41,78 @@
<h3 class="masthead-brand"></h3>
<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 class="ui-history"><a href="#">History</a>
<li class="ui-history<% if(signin) { %> active<% } %>"><a href="#">History</a>
</li>
</ul>
</nav>
</div>
</div>
<div id="home" class="section">
<div id="home" class="section"<% if(signin) { %> style="display:none;"<% } %>>
<div class="inner cover">
<h1 class="cover-heading"><i class="fa fa-file-text"></i> HackMD</h1>
<p class="lead">
Realtime collaborative markdown notes on all platforms.
Best way to write and share your knowledge in markdown.
</p>
<% 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>
<div class="ui-or" style="display:none;">Or</div>
<span class="ui-signin">
<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">
<a href="<%- url %>/new" class="btn btn-lg btn-default">New note</a>
</p>
<h5>Share directly with URL <i class="fa fa-link"></i></h5>
<a class="btn btn-primary" href="<%- url %>/features">More features <i class="fa fa-chevron-right"></i></a>
<span class="ui-signin">
<a href="<%- url %>/new" class="btn btn-lg btn-default" style="width: 170px;">New guest note</a>
<br>
<br>
</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>
<br>
</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) { %>
<div class="ui-signin">
<h4>
<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>
<p>Below is the history from browser</p>
</div>
<div class="ui-signout" style="display:none;">
<img class="ui-avatar">
<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>
</div>
<% }%>
<h4>
<a type="button" href="<%- url %>/features" class="btn btn-primary">Explore all features</a>
</h4>
<hr>
<form class="form-inline">
<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 class="form-group">
<input class="search form-control" placeholder="Search anything..." />
<input class="search form-control" placeholder="Search keyword..." />
</div>
<a href="#" class="sort btn btn-default" data-sort="text" title="Sort by title">
Title
@ -117,8 +139,8 @@
<div class="mastfoot">
<div class="inner">
<h6>
<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>
<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"></iframe>
</h6>
<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>