support smol screens

Author: 9001

copyparty/httpsrv.py

@@ -6,7 +6,7 @@
 import socket
 import threading
 
-from .__init__ import E
+from .__init__ import E, MACOS
 from .httpconn import HttpConn
 from .authsrv import AuthSrv
 
@@ -75,9 +75,11 @@ def thr_client(self, sck, addr):
                 sck.shutdown(socket.SHUT_RDWR)
                 sck.close()
             except (OSError, socket.error) as ex:
-                self.log(
-                    "%s %s" % addr, "shut_rdwr err:\n  {}\n  {}".format(repr(sck), ex),
-                )
+                if not MACOS:
+                    self.log(
+                        "%s %s" % addr,
+                        "shut_rdwr err:\n  {}\n  {}".format(repr(sck), ex),
+                    )
                 if ex.errno not in [10038, 107, 57, 9]:
                     # 10038 No longer considered a socket
                     #   107 Transport endpoint not connected

copyparty/web/md.html

@@ -15,6 +15,8 @@
 		<a id="navtoggle" href="#">hide nav</a>
 		{%- if edit %}
 			<a id="save" href="?edit">save</a>
+			<a id="sbs" href="#">sbs</a>
+			<a id="nsbs" href="#">editor</a>
 			<a id="help" href="#">help</a>
 		{%- else %}
 			<a href="?edit">edit (basic)</a>
@@ -46,6 +48,16 @@
 * `Ctrl-H` / `Ctrl-Shift-H` to create a header
 * `TAB` / `Shift-TAB` to indent/dedent a selection
 
+### toolbar
+1. toggle dark mode
+2. show/hide navigation bar
+3. save changes on server
+4. side-by-side editing
+5. toggle editor/preview
+6. this thing :^)
+
+.
+
 		</textarea>
 	</div>
 	{%- endif %}
@@ -70,12 +82,10 @@
 		toggle();
 })();
 
-// TODO babel or es5 shims (fix Object.defineProperty too)
-// https://stackoverflow.com/questions/48803257/
 if (!String.startsWith) {
-	String.prototype.startsWith = function(search, rawPos) {
-		var pos = rawPos > 0 ? rawPos|0 : 0;
-		return this.substring(pos, pos + search.length) === search;
+	String.prototype.startsWith = function(s, i) {
+		i = i>0 ? i|0 : 0;
+		return this.substring(i, i + s.length) === s;
 	};
 }
 

copyparty/web/md2.css

@@ -11,12 +11,34 @@
 #mw {
     left: calc(100% - 57em);
 }
+
+
+/* single-screen */
+#mtw.preview,
+#mw.editor {
+    opacity: 0;
+    z-index: 1;
+}
+#mw.preview,
+#mtw.editor {
+    z-index: 3;
+}
+#mtw.single,
+#mw.single {
+    left: calc((100% - 58em) / 2);
+    margin: 0;
+}
+#mtw.single {
+    width: 57em;
+}
+
+
 #mp {
     position: relative;
 }
 #mt, #mtr {
     width: 100%;
-    height: 100%;
+    height: calc(100% - 5px);
     color: #444;
     background: #f7f7f7;
     border: 1px solid #999;
@@ -56,6 +78,8 @@ html.dark #mt {
     border-radius: .4em;
     padding: 2em;
     top: 4em;
+    overflow-y: auto;
+    height: calc(100% - 12em);
     left: calc(50% - 15em);
     right: 0;
     width: 30em;

copyparty/web/md2.js

@@ -4,6 +4,8 @@ var server_md = dom_src.value;
 
 // dom nodes
 var dom_swrap = document.getElementById('mtw');
+var dom_sbs = document.getElementById('sbs');
+var dom_nsbs = document.getElementById('nsbs');
 var dom_ref = (function () {
     var d = document.createElement('div');
     d.setAttribute('id', 'mtr');
@@ -98,11 +100,26 @@ redraw = (function () {
         map_src = genmap(dom_ref);
         map_pre = genmap(dom_pre);
         dbg(document.body.clientWidth + 'x' + document.body.clientHeight);
-    };
+    }
+    function setsbs() {
+        dom_wrap.setAttribute('class', '');
+        dom_swrap.setAttribute('class', '');
+        onresize();
+    }
+    function modetoggle() {
+        mode = dom_nsbs.innerHTML;
+        dom_nsbs.innerHTML = mode == 'editor' ? 'preview' : 'editor';
+        mode += ' single';
+        dom_wrap.setAttribute('class', mode);
+        dom_swrap.setAttribute('class', mode);
+        onresize();
+    }
 
     window.onresize = onresize;
     window.onscroll = null;
     dom_wrap.onscroll = null;
+    dom_sbs.onclick = setsbs;
+    dom_nsbs.onclick = modetoggle;
 
     onresize();
     return onresize;