From 44a8bb28fd1a3673b5d06dc5651c6459edbf5f2c Mon Sep 17 00:00:00 2001
From: Matias De lellis <mati86dl@gmail.com>
Date: Fri, 1 Nov 2019 09:30:51 -0300
Subject: [PATCH] Use fullscreen modal on small screen. Issue #23

---
 css/style.css |  2 +-
 js/script.js  | 13 ++++++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/css/style.css b/css/style.css
index e783ddd..95f73f3 100644
--- a/css/style.css
+++ b/css/style.css
@@ -148,7 +148,7 @@
 
 .modal-note-background {
     position: fixed; /* Stay in place */
-    z-index: 200; /* Sit on top */
+    z-index: 1051; /* Sit on top */
     padding-top: 100px; /* Location of the box */
     left: 0;
     top: 0;
diff --git a/js/script.js b/js/script.js
index 526f901..23c3f36 100644
--- a/js/script.js
+++ b/js/script.js
@@ -267,11 +267,18 @@ View.prototype = {
 
         note.css({"opacity": "0.1"});
 
+        var windowWidth = $(window).width();
+        var modalWidth = note.width()*2;
+        var modalTop = 150;
+        if (windowWidth < modalWidth) {
+            modalWidth = windowWidth;
+            modalTop = 50;
+        }
         $(".modal-content").animate (
             {
-               left: ($(window).width() / 2 - note.width()),
-               width: note.width()*2,
-               top: 150,
+               left: (windowWidth / 2 - modalWidth / 2),
+               width: modalWidth,
+               top: modalTop,
             },
             250,
             function () {