Sidebar close button for small screens

This commit is contained in:
shortcutme 2017-07-29 13:44:54 +02:00
parent 467cd480cf
commit 527c2b4f54
No known key found for this signature in database
GPG key ID: 5B63BAE6CB9613AE
4 changed files with 21 additions and 2 deletions

View file

@ -440,6 +440,7 @@ class UiWebsocketPlugin(object):
body = []
body.append("<div>")
body.append("<a href='#Close' class='close'>&times;</a>")
body.append("<h1>%s</h1>" % cgi.escape(site.content_manager.contents.get("content.json", {}).get("title", ""), True))
body.append("<div class='globe loading'></div>")

View file

@ -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()

View file

@ -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 }
.contents a:active { background-color: #6B6B6B }
/* Small screen */
@media screen and (max-width: 600px) {
.sidebar .close { display: block }
}

View file

@ -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 }
.contents a:active { background-color: #6B6B6B }
/* Small screen */
@media screen and (max-width: 600px) {
.sidebar .close { display: block }
}