haselkern/telegraph-manager
1
0
Fork 0
Code Activity

improved design

Browse source 
Based on the design from my website.
This commit is contained in:
haselkern 2017-01-10 19:39:44 +01:00
parent 3b360866df
commit 9af51caf46
3 changed files with 23 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

32
index.htm
View file

@ -11,6 +11,8 @@
<link rel="icon" type="image/png" href="g/ic_edit.png">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="http://haselkern.com/g/base.css">
<link rel="stylesheet" href="style.css">
</head>
@ -22,32 +24,30 @@
</div>
</div>
<div id="wrapper">
<div id="wrapper" class="wrap">
<div id="hero">
<div class="card blank">
<h1>Telegraph Manager</h1>
<p>
An easy way to manage your articles, profile and views for <a href="http://telegra.ph/">telegra.ph</a>.
</p>
</div>
<div id="hero" class=" article">
<h1>Telegraph Manager</h1>
<p>
An easy way to manage your articles, profile and views for <a href="http://telegra.ph/">telegra.ph</a>.
</p>
</div>
<div id="screen-nosupport">
<div class="card">
<div class="article">
Your browser doesn't support JavaScript and/or HTML5 LocalStorage. Please update your browser and enable JavaScript.
</div>
</div>
<div id="screen-login">
<div class="card">
<div class="article content">
<h1>create an account</h1>
<input type="text" name="author_name" placeholder="your name" required />
<input type="text" name="short_name" placeholder="short name (not published)" required />
<input type="url" name="author_url" placeholder="your website (optional)" />
<button onclick="createAccount()">create account</button>
</div>
<div class="card">
<div class="article content">
<h1>login with token</h1>
<input type="text" name="token" placeholder="your token (like this: b968da509bb768...)" required />
<button onclick="tokenLogin()">login</button>
@ -55,7 +55,7 @@
</div>
<div id="screen-login-telegraph">
<div class="card">
<div class="article content">
<p>
<a href="#" target="_blank" onclick="doneAuthorized()">click to login to telegra.ph</a>
</p>
@ -68,7 +68,7 @@
<div id="screen-main">
<a id="fab" href="http://telegra.ph/" target="_blank" title="new page"><img src="g/ic_add.png" /></a>
<div id="user-info">
<div id="user-info" class="article">
<div id="user-image-animator" title="edit profile" onclick="edit()">
<div id="user-image">
@ -93,17 +93,17 @@
</div>
<div id="screen-edit">
<div class="card blank">
<div class="article">
<a onclick="main()" href="#">back</a>
</div>
<div class="card">
<div class="article content">
<h1>change account information</h1>
<input type="text" name="author_name_edit" placeholder="your name" required />
<input type="text" name="short_name_edit" placeholder="short name (not published)" required />
<input type="url" name="author_url_edit" placeholder="your website (optional)" />
<button onclick="saveEdit()">save</button>
</div>
<div class="card">
<div class="article content">
<h1>logout</h1>
<p>
<strong>Warning!</strong> To be able log into this account again you <strong> will need</strong> this token:

4
main.js
View file

@ -21,7 +21,7 @@ $(document).ready(function(){
// Window scroll for loading more pages
window.onscroll = function(){
// Trigger loading of more pages when there are still cards to scroll
var triggerElement = $(".card:nth-last-child("+numberOfPagesToLoad+")");
var triggerElement = $(".article:nth-last-child("+numberOfPagesToLoad+")");
if(isScrolledIntoView(triggerElement)){
if(canLoadMore){
@ -237,7 +237,7 @@ function loadPages(){
// Should the text read 'view' or 'views'
var s = this.views == 1 ? "" : "s";
pageList.append("<a class='card' href='"+this.url+"' target='_blank'><h1>"+this.title+"</h1><p>"+this.views+" view"+s+"</p><p>"+this.description+"</p></a>");
pageList.append("<a class='article content' href='"+this.url+"' target='_blank'><h1>"+this.title+"</h1><p>"+this.views+" view"+s+"</p><p>"+this.description+"</p></a>");
});

60
style.css
View file

@ -1,48 +1,8 @@
* {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
a, a:visited{
color: #000;
}
body{
background-color: #eee;
}
p{
margin: 1em;
}
/* Initially hide all screens, except for screen-nosupport */
#screen-login, #screen-login-telegraph, #screen-main, #screen-edit {
display: none;
}
.card{
display: block;
background-color: #fff;
border-radius: 3px;
box-shadow: 0px 2px 4px #777;
padding: 1em;
margin-top: 1em;
margin-left: 1em;
margin-right: 1em;
}
a.card{
cursor: pointer;
}
#wrapper{
max-width: 600px;
margin: 1em auto;
}
.card.blank{
background: none;
box-shadow: none;
}
/* error popup */
.error{
z-index: 2;
@ -51,6 +11,11 @@ a.card{
transition: 200ms;
color: #B71C1C;
font-weight: bold;
background-color: #fff;
box-shadow: 0 2px 4px #777;
margin: 1em;
padding: 1em;
border-radius: 3px;
}
.error.active{
top: 0;
@ -60,7 +25,6 @@ a.card{
#user-info{
text-align: center;
margin: 3em;
}
#user-info > *{
display: block;
@ -81,22 +45,9 @@ a.card{
content: ")";
}
#page-list a{
display: block;
text-decoration: none;
transition: 300ms;
}
#page-list a:hover{
box-shadow: 0px 4px 8px #777;
transform: translateY(-2px);
}
#page-list h1{
margin-bottom: 0.4em;
font-size: 1.5em;
}
#page-list p{
margin-bottom: 0.5em;
}
#fab{
display: block;
@ -153,7 +104,6 @@ a.card{
input, button{
display: block;
width: 100%;
margin-top: 1em;
border-radius: 3px;
padding: 3px;
border: 1px solid #bbb;