From 0a68f06610f40abe9bc91ade27f73e4c937089c0 Mon Sep 17 00:00:00 2001 From: Jean-Tiare Le Bigot Date: Sat, 3 Mar 2012 16:04:29 +0100 Subject: [PATCH] moved the modal back to the middle, grey out all the edit zone while reconnecting --- static/css/pad.css | 56 ++++++++++++++++++++-------- static/js/pad.js | 5 +++ static/pad.html | 93 +++++++++++++++++++++++----------------------- 3 files changed, 92 insertions(+), 62 deletions(-) diff --git a/static/css/pad.css b/static/css/pad.css index 79dce0197..924299bff 100644 --- a/static/css/pad.css +++ b/static/css/pad.css @@ -156,16 +156,16 @@ a img margin: 0; } -#editorloadingbox { - padding-top: 100px; - padding-bottom: 100px; - font-size: 2.5em; +#editorloadingbox { + padding-top: 100px; + padding-bottom: 100px; + font-size: 2.5em; color: #aaa; - text-align: center; - position: absolute; - width: 100%; - height: 30px; - z-index: 100; + text-align: center; + position: absolute; + width: 100%; + height: 30px; + z-index: 100; background: url(../../static/img/connectingbar.gif) no-repeat center 130px; } @@ -482,7 +482,7 @@ table#otheruserstable { display: none; } border-right: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; } .usertdname input.editempty { color: #888; font-style: italic;} - + .modaldialog.cboxreconnecting .modaldialog-inner, .modaldialog.cboxconnecting .modaldialog-inner { background: url("../../static/img/connectingbar.gif") no-repeat scroll center bottom transparent; @@ -520,22 +520,20 @@ table#otheruserstable { display: none; } z-index: 11; } #connectionboxinner .connecting { + margin-top: 20px; font-size: 2.0em; color: #555; text-align: center; display: none; } .cboxconnecting #connectionboxinner .connecting { display: block; } -#connectionboxinner .disconnected{ - margin: 10px; -} - #connectionboxinner .disconnected h2 { font-size: 1.8em; color: #333; text-align: left; + margin-top: 10px; margin-left: 10px; margin-right: 10px; margin-bottom: 10px; } #connectionboxinner .disconnected p { - margin: 10px 0; + margin: 10px 10px; font-size: 1.2em; line-height: 1.1; color: #333; @@ -544,6 +542,7 @@ table#otheruserstable { display: none; } .cboxdisconnected #connectionboxinner .disconnected { display: block; } #connectionboxinner .reconnecting { + margin-top: 20px; font-size: 1.6em; color: #555; text-align: center; display: none; } @@ -602,7 +601,7 @@ table#otheruserstable { display: none; } .modaldialog { position: absolute; - top: 35px; + top: 100px; left:50%; margin-left:-243px; width: 485px; @@ -613,6 +612,7 @@ table#otheruserstable { display: none; } background: white; border: 1px solid #999; } +.modaldialog .modaldialog-inner { padding: 10pt; } .modaldialog .modaldialog-hide { float: right; background-repeat: no-repeat; @@ -693,6 +693,20 @@ table#otheruserstable { display: none; } top: 5px; right: 220px; } +#modaloverlay { + z-index: 500; display: none; + background-repeat: repeat-both; + width: 100%; position: absolute; + height: 100%; left: 0; top: 0; +} + +* html #modaloverlay { /* for IE 6+ */ + opacity: 1; /* in case this is looked at */ + background-image: none; + background-repeat: no-repeat; + /* scale the image */ +} + a#topbarmaximize { float: right; width: 16px; @@ -1180,6 +1194,16 @@ input[type=checkbox] { width: 185px !important; } +@media screen and (max-width: 960px) { + .modaldialog { + position: relative; + margin: 0 auto; + width: 80%; + top: 40px; + left: 0; + } +} + @media screen and (max-width: 600px) { #editbar ul li { padding: 4px 1px; diff --git a/static/js/pad.js b/static/js/pad.js index c9694c0fe..743ab3601 100644 --- a/static/js/pad.js +++ b/static/js/pad.js @@ -702,6 +702,11 @@ var pad = { else if (newState == "RECONNECTING") { padconnectionstatus.reconnecting(); + + padeditor.disable(); + padeditbar.disable(); + paddocbar.disable(); + padimpexp.disable(); } else if (newState == "DISCONNECTED") { diff --git a/static/pad.html b/static/pad.html index 693703fa8..11b8b558a 100644 --- a/static/pad.html +++ b/static/pad.html @@ -73,52 +73,6 @@
 
-
-
-
-
Connecting...
-
Reestablishing connection...
-
-

Disconnected.

-

Opened in another window.

-

No Authorization.

-
-

We're having trouble talking to the EtherPad lite synchronization server. You may be connecting through an incompatible firewall or proxy server.

-
-
-

We were unable to connect to the EtherPad lite synchronization server. This may be due to an incompatibility with your web browser or internet connection.

-
-
-

You seem to have opened this pad in another browser window. If you'd like to use this window instead, you can reconnect.

-
-
-

Lost connection with the EtherPad lite synchronization server. This may be due to a loss of network connectivity.

-
-
-

Server not responding. This may be due to network connectivity issues or high load on the server.

-
-
-

Your browser's credentials or permissions have changed while viewing this pad. Try reconnecting.

-
-
-

This pad was deleted.

-
-
-

If this continues to happen, please let us know

-
-
- -
-
-
- -
- -
@@ -252,6 +206,53 @@
 
+ +
+
+
+
Connecting...
+
Reestablishing connection...
+
+

Disconnected.

+

Opened in another window.

+

No Authorization.

+
+

We're having trouble talking to the EtherPad lite synchronization server. You may be connecting through an incompatible firewall or proxy server.

+
+
+

We were unable to connect to the EtherPad lite synchronization server. This may be due to an incompatibility with your web browser or internet connection.

+
+
+

You seem to have opened this pad in another browser window. If you'd like to use this window instead, you can reconnect.

+
+
+

Lost connection with the EtherPad lite synchronization server. This may be due to a loss of network connectivity.

+
+
+

Server not responding. This may be due to network connectivity issues or high load on the server.

+
+
+

Your browser's credentials or permissions have changed while viewing this pad. Try reconnecting.

+
+
+

This pad was deleted.

+
+
+

If this continues to happen, please let us know

+
+
+ +
+
+
+ +
+ +