mirror of
https://github.com/rystaf/mlmym.git
synced 2024-11-08 08:04:26 +00:00
sidebar toggle. fixes #86
This commit is contained in:
parent
d9faec35f9
commit
aa16e13831
|
@ -15,3 +15,12 @@ div.pager {
|
|||
.savecomment input[type=file] {
|
||||
display: inline-block;
|
||||
}
|
||||
#sidetoggle button {
|
||||
visibility: unset !important;
|
||||
}
|
||||
#sidetoggle button::before {
|
||||
content: "" !important;
|
||||
}
|
||||
#sidetoggle {
|
||||
bottom: 4px;
|
||||
}
|
||||
|
|
|
@ -509,6 +509,9 @@ form.blockpost {
|
|||
.hidechildren span {
|
||||
pointer-events: none;
|
||||
}
|
||||
.hide {
|
||||
display: none !important;
|
||||
}
|
||||
.expando {
|
||||
display: none;
|
||||
max-width: 900px;
|
||||
|
@ -607,8 +610,36 @@ form.blockpost {
|
|||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#sideToggle {
|
||||
text-align: right;
|
||||
#sidetoggle button::before {
|
||||
content: '[+]';
|
||||
visibility: visible;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
top: 12px;
|
||||
}
|
||||
#sidetoggle.o button::before {
|
||||
content: '[-]';
|
||||
visibility: visible;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
top: 12px;
|
||||
}
|
||||
#sidetoggle button {
|
||||
visibility: hidden;
|
||||
width: 10px;
|
||||
margin-right: 16px;
|
||||
background: unset;
|
||||
border: unset;
|
||||
}
|
||||
#sidetoggle {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
right: 0;
|
||||
display: inline-flex;
|
||||
align-items: end;
|
||||
height: 20px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.side {
|
||||
display: none;
|
||||
|
@ -625,7 +656,22 @@ main {
|
|||
position: relative;
|
||||
margin: 0px 10px;
|
||||
}
|
||||
.wide .side {
|
||||
display: block !important;
|
||||
}
|
||||
@media (min-width: 900px) {
|
||||
.wide {
|
||||
padding-right: 15px;
|
||||
}
|
||||
.wide .side {
|
||||
display: none !important;
|
||||
}
|
||||
#sidetoggle button::before {
|
||||
content: '[-]';
|
||||
}
|
||||
#sidetoggle.o button::before {
|
||||
content: '[+]';
|
||||
}
|
||||
.expando {
|
||||
text-align: left;
|
||||
}
|
||||
|
@ -810,7 +856,7 @@ nav .host {
|
|||
}
|
||||
|
||||
nav div.spacer {
|
||||
height: 32px;
|
||||
height: 34px;
|
||||
position: relative;
|
||||
}
|
||||
nav span.spacer {
|
||||
|
|
|
@ -513,6 +513,38 @@ function setup() {
|
|||
links[i].addEventListener("click", xhrLink)
|
||||
}
|
||||
}
|
||||
var st = document.getElementById("sidetoggle")
|
||||
if (st) {
|
||||
st.addEventListener("click", sideToggle)
|
||||
}
|
||||
}
|
||||
function sideToggle(e) {
|
||||
e.preventDefault();
|
||||
var side = document.getElementsByClassName("side")[0]
|
||||
var main = document.getElementsByTagName("main")[0]
|
||||
if (!side) return;
|
||||
var form = e.target
|
||||
if (form.tagName != "FORM") {
|
||||
form = uptil(e.target, function(el){ return el.tagName == "FORM" })
|
||||
}
|
||||
var data = new FormData(form)
|
||||
data.append("xhr", "1")
|
||||
request(form.target, data)
|
||||
console.log(e)
|
||||
if (side.className == "side") {
|
||||
side.className = "side hide"
|
||||
form.classList.add("o")
|
||||
if (main) {
|
||||
main.className = "wide"
|
||||
}
|
||||
} else {
|
||||
side.className = "side"
|
||||
form.classList.remove("o")
|
||||
if (main) {
|
||||
main.className = ""
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
function xhrLink(e) {
|
||||
e = e || window.event;
|
||||
|
|
14
routes.go
14
routes.go
|
@ -323,6 +323,9 @@ func Initialize(Host string, r *http.Request) (State, error) {
|
|||
state.Listing = getCookie(r, "DefaultListingType")
|
||||
state.Sort = getCookie(r, "DefaultSortType")
|
||||
state.CommentSort = getCookie(r, "DefaultCommentSortType")
|
||||
if hideSidebar := getCookie(r, "HideSidebar"); hideSidebar == "1" {
|
||||
state.HideSidebar = true
|
||||
}
|
||||
if dark := getCookie(r, "Dark"); dark != "" {
|
||||
state.Dark = new(bool)
|
||||
*state.Dark = dark != "0"
|
||||
|
@ -492,7 +495,7 @@ func GetIcon(w http.ResponseWriter, r *http.Request, ps httprouter.Params) {
|
|||
}
|
||||
u := resp.SiteView.Site.Icon.String()
|
||||
if pictrs.MatchString(u) {
|
||||
u += "?format=jpg&thumbnail=60"
|
||||
u += "?format=png&thumbnail=60"
|
||||
}
|
||||
iresp, err := state.HTTPClient.Get(u)
|
||||
if err != nil {
|
||||
|
@ -1073,6 +1076,15 @@ func UserOp(w http.ResponseWriter, r *http.Request, ps httprouter.Params) {
|
|||
w.Write([]byte{})
|
||||
return
|
||||
}
|
||||
case "sidetoggle":
|
||||
if state.HideSidebar {
|
||||
deleteCookie(w, state.Host, "HideSidebar")
|
||||
} else {
|
||||
setCookie(w, state.Host, "HideSidebar", "1")
|
||||
}
|
||||
if r.FormValue("xhr") != "" {
|
||||
return
|
||||
}
|
||||
case "logout":
|
||||
deleteCookie(w, state.Host, "jwt")
|
||||
deleteCookie(w, state.Host, "user")
|
||||
|
|
1
state.go
1
state.go
|
@ -106,6 +106,7 @@ type State struct {
|
|||
ShowNSFW bool
|
||||
HideInstanceNames bool
|
||||
HideThumbnails bool
|
||||
HideSidebar bool
|
||||
LinksInNewWindow bool
|
||||
SubmitURL string
|
||||
SubmitTitle string
|
||||
|
|
|
@ -16,7 +16,8 @@
|
|||
{{- if and (not .ShowNSFW) .Community .Community.CommunityView.Community.NSFW }}
|
||||
{{ template "nsfw.html" }}
|
||||
{{- else }}
|
||||
<main>
|
||||
<main{{ if .HideSidebar }} class="wide"{{ end }}>
|
||||
{{ template "sidebar.html" . }}
|
||||
{{- if and (not .Community) .Tagline }}
|
||||
<h3>
|
||||
{{ markdown .Host .Tagline }}
|
||||
|
@ -46,7 +47,6 @@
|
|||
<input id="loadmore" type="submit" value="load more" data-page="2">
|
||||
{{ end }}
|
||||
|
||||
{{ template "sidebar.html" . }}
|
||||
</main>
|
||||
{{ end }}
|
||||
<script src="/_/static/utils.js?v={{ .Version }}"></script>
|
||||
|
|
|
@ -16,7 +16,8 @@
|
|||
{{- if and (not .ShowNSFW) .Community .Community.CommunityView.Community.NSFW }}
|
||||
{{ template "nsfw.html" }}
|
||||
{{- else }}
|
||||
<main>
|
||||
<main{{ if .HideSidebar }} class="wide"{{ end }}>
|
||||
{{- template "sidebar.html" . }}
|
||||
{{- if or (.Query) (.SearchType) (and (not .PostID) (not .User) (not .Activities) (eq .Op ""))}}
|
||||
{{ template "menu.html" . }}
|
||||
{{- end}}
|
||||
|
@ -137,7 +138,6 @@
|
|||
{{- if .Watch }}
|
||||
<script src="/_/static/ws.js"></script>
|
||||
{{- end }}
|
||||
{{- template "sidebar.html" . }}
|
||||
</main>
|
||||
{{- end }}
|
||||
</body>
|
||||
|
|
|
@ -87,6 +87,10 @@
|
|||
{{- if and .PostID }}{{ $post := (index .Posts 0) }}{{ if $post.CrossPosts }}
|
||||
<li><a href="/{{.Host}}/search?q={{ $post.Post.URL.String }}&searchtype=Url{{ if not $post.Post.Local }}&listingType=All{{end}}">other discussions ({{ $post.CrossPosts }})</a></li>
|
||||
{{- end }}{{ end }}
|
||||
<form id="sidetoggle" class="link-btn{{ if .HideSidebar }} o{{end}}" method="POST">
|
||||
<input type="hidden" name="op" value="sidetoggle">
|
||||
<button>{{ if .HideSidebar }}[+]{{ else }}[-]{{ end }}</button>
|
||||
</form>
|
||||
</ul>
|
||||
{{- end }}
|
||||
</nav>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
{{- $host := .Host }}
|
||||
<div class="{{ if .User }}user {{end}}side">
|
||||
<div class="{{ if .User }}user {{end}}side{{ if .HideSidebar }} hide{{ end }}">
|
||||
<form method="GET" action="/{{.Host}}/search">
|
||||
<input type="text" placeholder="search" name="q" value="">
|
||||
{{- if eq .Listing "Local" }}
|
||||
|
|
Loading…
Reference in a new issue