diff --git a/plugins/Sidebar/SidebarPlugin.py b/plugins/Sidebar/SidebarPlugin.py
index 68360f96..7eb39e74 100644
--- a/plugins/Sidebar/SidebarPlugin.py
+++ b/plugins/Sidebar/SidebarPlugin.py
@@ -440,6 +440,7 @@ class UiWebsocketPlugin(object):
body = []
body.append("
")
+ body.append("
×")
body.append("
%s
" % cgi.escape(site.content_manager.contents.get("content.json", {}).get("title", ""), True))
body.append("
")
diff --git a/plugins/Sidebar/media/Sidebar.coffee b/plugins/Sidebar/media/Sidebar.coffee
index e180c595..802d1cff 100644
--- a/plugins/Sidebar/media/Sidebar.coffee
+++ b/plugins/Sidebar/media/Sidebar.coffee
@@ -377,6 +377,12 @@ class Sidebar extends Class
wrapper.ws.cmd "sitePublish", {"inner_path": inner_path, "sign": false}, =>
@tag.find("#button-publish").removeClass "loading"
+ # Close
+ @tag.find(".close").off("click touchend").on "click touchend", (e) =>
+ @startDrag()
+ @stopDrag()
+ return false
+
@loadGlobe()
diff --git a/plugins/Sidebar/media/Sidebar.css b/plugins/Sidebar/media/Sidebar.css
index bf915baa..c76bde0c 100644
--- a/plugins/Sidebar/media/Sidebar.css
+++ b/plugins/Sidebar/media/Sidebar.css
@@ -14,6 +14,7 @@
.sidebar .content { margin: 30px; font-family: "Segoe UI Light", "Segoe UI", "Helvetica Neue"; color: white; width: 375px; height: 300px; font-weight: 200; transition: all 1s; opacity: 0 }
.sidebar-container.loaded .content { opacity: 1; transform: none }
.sidebar h1, .sidebar h2 { font-weight: lighter; }
+.sidebar .close { color: #999; float: right; text-decoration: none; margin-top: -5px; padding: 0px 5px; font-size: 33px; margin-right: 20px; display: none }
.sidebar .button { margin: 0px; display: inline-block; transition: all 0.3s; box-sizing: border-box; max-width: 260px }
.sidebar .button.hidden { padding: 0px; max-width: 0px; opacity: 0; pointer-events: none }
.sidebar #button-delete { background-color: transparent; border: 1px solid #333; color: #AAA; margin-left: 10px }
@@ -121,4 +122,9 @@
/* Sign publish */
.contents { background-color: #3B3B3B; color: white; padding: 7px 10px; font-family: Consolas; font-size: 11px; display: inline-block; margin-bottom: 6px; }
.contents a { color: white }
-.contents a:active { background-color: #6B6B6B }
\ No newline at end of file
+.contents a:active { background-color: #6B6B6B }
+
+/* Small screen */
+@media screen and (max-width: 600px) {
+ .sidebar .close { display: block }
+}
\ No newline at end of file
diff --git a/plugins/Sidebar/media/all.css b/plugins/Sidebar/media/all.css
index f28bd0d4..baf9b94c 100644
--- a/plugins/Sidebar/media/all.css
+++ b/plugins/Sidebar/media/all.css
@@ -68,6 +68,7 @@
.sidebar .content { margin: 30px; font-family: "Segoe UI Light", "Segoe UI", "Helvetica Neue"; color: white; width: 375px; height: 300px; font-weight: 200; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; -ms-transition: all 1s; transition: all 1s ; opacity: 0 }
.sidebar-container.loaded .content { opacity: 1; -webkit-transform: none ; -moz-transform: none ; -o-transform: none ; -ms-transform: none ; transform: none }
.sidebar h1, .sidebar h2 { font-weight: lighter; }
+.sidebar .close { color: #999; float: right; text-decoration: none; margin-top: -5px; padding: 0px 5px; font-size: 33px; margin-right: 20px; display: none }
.sidebar .button { margin: 0px; display: inline-block; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s ; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box ; max-width: 260px }
.sidebar .button.hidden { padding: 0px; max-width: 0px; opacity: 0; pointer-events: none }
.sidebar #button-delete { background-color: transparent; border: 1px solid #333; color: #AAA; margin-left: 10px }
@@ -175,4 +176,9 @@
/* Sign publish */
.contents { background-color: #3B3B3B; color: white; padding: 7px 10px; font-family: Consolas; font-size: 11px; display: inline-block; margin-bottom: 6px; }
.contents a { color: white }
-.contents a:active { background-color: #6B6B6B }
\ No newline at end of file
+.contents a:active { background-color: #6B6B6B }
+
+/* Small screen */
+@media screen and (max-width: 600px) {
+ .sidebar .close { display: block }
+}
\ No newline at end of file