diff --git a/index.htm b/index.htm index bee06e9..7bbe99d 100644 --- a/index.htm +++ b/index.htm @@ -16,93 +16,103 @@ -
-
-

Telegraph Manager

-

- An easy way to manage your articles, profile and views for telegra.ph. -

+
+
+
-
-
- Your browser doesn't support JavaScript and/or HTML5 LocalStorage. Please update your browser and enable JavaScript. +
+ +
+
+

Telegraph Manager

+

+ An easy way to manage your articles, profile and views for telegra.ph. +

+
-
-
-
-

create an account

- - - - +
+
+ Your browser doesn't support JavaScript and/or HTML5 LocalStorage. Please update your browser and enable JavaScript. +
-
-

login with token

- - + +
+
+

create an account

+ + + + +
+
+

login with token

+ + +
-
-
-
-

- click to login to telegra.ph -

-

- You have to do this in order to publish articles. After you've clicked the link, come back to this website. -

+
+
+

+ click to login to telegra.ph +

+

+ You have to do this in order to publish articles. After you've clicked the link, come back to this website. +

+
-
-
- +
+ -
+
-
-
- -
-
- +
+
+ +
+
+ +
+ + + + +
+ — —
- - - -
- — — -
+
-
+
-
+
+
+ back +
+
+

change account information

+ + + + +
+
+

logout

+

+ Warning! To be able log into this account again you will need this token: +

+

+ +
+
-
-
- back -
-
-

change account information

- - - - -
-
-

logout

-

- Warning! To be able log into this account again you will need this token: -

-

- -
diff --git a/main.js b/main.js index 91143fa..7bd78ae 100644 --- a/main.js +++ b/main.js @@ -7,6 +7,9 @@ var numberOfPagesToLoad = 10; // How many pixels should there be space around the FAB var fabSpace = 30; +// How many milliseconds should an error message be visible +var errorTime = 2000; + $(document).ready(function(){ // Check for localStorage @@ -28,20 +31,23 @@ $(document).ready(function(){ } } - // Window resize for positioning FAB + // Window resize for positioning elements window.onresize = resize; resize(); }); +// Position FAB and error popups when resizing function resize(){ var fab = $("#fab"); - var screenWidth = $(".screen:visible").width(); + var screenWidth = $("#wrapper").width(); - var left = ($(window).width() - screenWidth)/2 + screenWidth - fab.width() - fabSpace; + var fabLeft = ($(window).width() - screenWidth)/2 + screenWidth - fab.width() - fabSpace; fab.css("bottom", fabSpace); - fab.css("left", left); + fab.css("left", fabLeft); + + $(".error").css("right", $("#wrapper").offset().left) } // http://stackoverflow.com/a/488073/1456971 @@ -55,6 +61,33 @@ function isScrolledIntoView(elem) { return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); } +// Shows an error message +function error(msg){ + + // Prettify msg, replace all _ with blanks and set to lowercase + msg = msg.toLowerCase().replace(new RegExp("_", "g"), " "); + + // Create popup + var popup = $("#error").clone(); + popup.removeAttr("id"); + $("body").append(popup); + + // Set positions + resize(); + + // Set message and animate popup + popup.find("span").text(msg); + popup.addClass("active"); + setTimeout(function(){ + popup.removeClass("active"); + + // Destroy element + setTimeout(function(){ + popup.remove(); + }, errorTime); + }, errorTime); +} + function showScreen(name){ // Hide all other screens $("[id^=screen-]").hide(); @@ -97,7 +130,7 @@ function createAccount(){ // Check for valid data if(!data.ok){ - alert(data.error); + error(data.error); return; } @@ -121,7 +154,7 @@ function tokenLogin(){ // Check for valid data if(!data.ok){ - alert(data.error); + error(data.error); return; } @@ -194,7 +227,7 @@ function loadPages(){ // Check for valid data if(!data.ok){ - alert(data.error); + error(data.error); return; } @@ -229,7 +262,7 @@ function edit(){ // Check for valid data if(!data.ok){ - alert(data.error); + error(data.error); return; } @@ -255,7 +288,7 @@ function saveEdit(){ // Check for valid data if(!data.ok){ - alert(data.error); + error(data.error); return; } diff --git a/style.css b/style.css index dc4d01b..8a1d6d3 100644 --- a/style.css +++ b/style.css @@ -34,7 +34,7 @@ p{ a.card{ cursor: pointer; } -.screen{ +#wrapper{ max-width: 600px; margin: 1em auto; } @@ -43,6 +43,19 @@ a.card{ box-shadow: none; } +/* error popup */ +.error{ + z-index: 2; + position: fixed; + top: -100px; + transition: 200ms; + color: #B71C1C; + font-weight: bold; +} +.error.active{ + top: 0; +} + /* Main Screen */ #user-info{