sidebar toggle. fixes #86

This commit is contained in:
Ryan Stafford 2024-06-02 19:08:22 -04:00
parent d9faec35f9
commit aa16e13831
9 changed files with 113 additions and 9 deletions

View file

@ -15,3 +15,12 @@ div.pager {
.savecomment input[type=file] { .savecomment input[type=file] {
display: inline-block; display: inline-block;
} }
#sidetoggle button {
visibility: unset !important;
}
#sidetoggle button::before {
content: "" !important;
}
#sidetoggle {
bottom: 4px;
}

View file

@ -509,6 +509,9 @@ form.blockpost {
.hidechildren span { .hidechildren span {
pointer-events: none; pointer-events: none;
} }
.hide {
display: none !important;
}
.expando { .expando {
display: none; display: none;
max-width: 900px; max-width: 900px;
@ -607,8 +610,36 @@ form.blockpost {
white-space: nowrap; white-space: nowrap;
} }
#sideToggle { #sidetoggle button::before {
text-align: right; 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 { .side {
display: none; display: none;
@ -625,7 +656,22 @@ main {
position: relative; position: relative;
margin: 0px 10px; margin: 0px 10px;
} }
.wide .side {
display: block !important;
}
@media (min-width: 900px) { @media (min-width: 900px) {
.wide {
padding-right: 15px;
}
.wide .side {
display: none !important;
}
#sidetoggle button::before {
content: '[-]';
}
#sidetoggle.o button::before {
content: '[+]';
}
.expando { .expando {
text-align: left; text-align: left;
} }
@ -810,7 +856,7 @@ nav .host {
} }
nav div.spacer { nav div.spacer {
height: 32px; height: 34px;
position: relative; position: relative;
} }
nav span.spacer { nav span.spacer {

View file

@ -513,6 +513,38 @@ function setup() {
links[i].addEventListener("click", xhrLink) 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) { function xhrLink(e) {
e = e || window.event; e = e || window.event;

View file

@ -323,6 +323,9 @@ func Initialize(Host string, r *http.Request) (State, error) {
state.Listing = getCookie(r, "DefaultListingType") state.Listing = getCookie(r, "DefaultListingType")
state.Sort = getCookie(r, "DefaultSortType") state.Sort = getCookie(r, "DefaultSortType")
state.CommentSort = getCookie(r, "DefaultCommentSortType") state.CommentSort = getCookie(r, "DefaultCommentSortType")
if hideSidebar := getCookie(r, "HideSidebar"); hideSidebar == "1" {
state.HideSidebar = true
}
if dark := getCookie(r, "Dark"); dark != "" { if dark := getCookie(r, "Dark"); dark != "" {
state.Dark = new(bool) state.Dark = new(bool)
*state.Dark = dark != "0" *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() u := resp.SiteView.Site.Icon.String()
if pictrs.MatchString(u) { if pictrs.MatchString(u) {
u += "?format=jpg&thumbnail=60" u += "?format=png&thumbnail=60"
} }
iresp, err := state.HTTPClient.Get(u) iresp, err := state.HTTPClient.Get(u)
if err != nil { if err != nil {
@ -1073,6 +1076,15 @@ func UserOp(w http.ResponseWriter, r *http.Request, ps httprouter.Params) {
w.Write([]byte{}) w.Write([]byte{})
return 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": case "logout":
deleteCookie(w, state.Host, "jwt") deleteCookie(w, state.Host, "jwt")
deleteCookie(w, state.Host, "user") deleteCookie(w, state.Host, "user")

View file

@ -106,6 +106,7 @@ type State struct {
ShowNSFW bool ShowNSFW bool
HideInstanceNames bool HideInstanceNames bool
HideThumbnails bool HideThumbnails bool
HideSidebar bool
LinksInNewWindow bool LinksInNewWindow bool
SubmitURL string SubmitURL string
SubmitTitle string SubmitTitle string

View file

@ -16,7 +16,8 @@
{{- if and (not .ShowNSFW) .Community .Community.CommunityView.Community.NSFW }} {{- if and (not .ShowNSFW) .Community .Community.CommunityView.Community.NSFW }}
{{ template "nsfw.html" }} {{ template "nsfw.html" }}
{{- else }} {{- else }}
<main> <main{{ if .HideSidebar }} class="wide"{{ end }}>
{{ template "sidebar.html" . }}
{{- if and (not .Community) .Tagline }} {{- if and (not .Community) .Tagline }}
<h3> <h3>
{{ markdown .Host .Tagline }} {{ markdown .Host .Tagline }}
@ -46,7 +47,6 @@
<input id="loadmore" type="submit" value="load more" data-page="2"> <input id="loadmore" type="submit" value="load more" data-page="2">
{{ end }} {{ end }}
{{ template "sidebar.html" . }}
</main> </main>
{{ end }} {{ end }}
<script src="/_/static/utils.js?v={{ .Version }}"></script> <script src="/_/static/utils.js?v={{ .Version }}"></script>

View file

@ -16,7 +16,8 @@
{{- if and (not .ShowNSFW) .Community .Community.CommunityView.Community.NSFW }} {{- if and (not .ShowNSFW) .Community .Community.CommunityView.Community.NSFW }}
{{ template "nsfw.html" }} {{ template "nsfw.html" }}
{{- else }} {{- else }}
<main> <main{{ if .HideSidebar }} class="wide"{{ end }}>
{{- template "sidebar.html" . }}
{{- if or (.Query) (.SearchType) (and (not .PostID) (not .User) (not .Activities) (eq .Op ""))}} {{- if or (.Query) (.SearchType) (and (not .PostID) (not .User) (not .Activities) (eq .Op ""))}}
{{ template "menu.html" . }} {{ template "menu.html" . }}
{{- end}} {{- end}}
@ -137,7 +138,6 @@
{{- if .Watch }} {{- if .Watch }}
<script src="/_/static/ws.js"></script> <script src="/_/static/ws.js"></script>
{{- end }} {{- end }}
{{- template "sidebar.html" . }}
</main> </main>
{{- end }} {{- end }}
</body> </body>

View file

@ -87,6 +87,10 @@
{{- if and .PostID }}{{ $post := (index .Posts 0) }}{{ if $post.CrossPosts }} {{- 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> <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 }} {{- 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> </ul>
{{- end }} {{- end }}
</nav> </nav>

View file

@ -1,5 +1,5 @@
{{- $host := .Host }} {{- $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"> <form method="GET" action="/{{.Host}}/search">
<input type="text" placeholder="search" name="q" value=""> <input type="text" placeholder="search" name="q" value="">
{{- if eq .Listing "Local" }} {{- if eq .Listing "Local" }}