Skip to content

replace with button #240

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jjsarton wants to merge 4 commits into
base: master
Choose a base branch
from
Open

replace with button #240

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
999ef3b
changes for keyboard and scrennreader users
Dec 14, 2024
22e7526
Merge branch 'jech:master' into master
jjsarton Dec 18, 2024
fd63d5e
use button instead of wrong elements
Dec 18, 2024
c7189ed
not shown area must have display none
Dec 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 19 additions & 16 deletions static/galene.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ button {
line-height: .7;
}

.sidenav .user-logout a:hover {
.sidenav .user-logout button:hover {
color: #ab0659;
}

Expand Down Expand Up @@ -318,7 +318,6 @@ button {
resize: none;
overflow: hidden;
padding: 5px;
outline: none;
border: none;
text-indent: 5px;
box-shadow: none;
Expand Down Expand Up @@ -473,7 +472,7 @@ textarea.form-reply {
}

.collapse-video {
left: 30px;
left: calc(-100vw);
Copy link
Copy Markdown
Owner

@jech jech Jan 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you please explain what that does?

Copy link
Copy Markdown

@ghz7l ghz7l Sep 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This ensures that the chat icon will remain on the left even if the viewport width changes. E.g., if you have a tiling window manager and open a new window, without it firefox will display the icon on the right of the window.

Given the changes from this PR to what it is now, you would use left: calc(-100vw + 10px); instead of left: inherit; (now that the parent has left: 10px;.

right: inherit;
}

Expand Down Expand Up @@ -870,14 +869,6 @@ h1 {
overflow-y: hidden;
}

#input:focus {
outline: none;
}

#inputbutton:focus {
outline: none;
}

#resizer {
width: 4px;
margin-left: -4px;
Expand Down Expand Up @@ -951,14 +942,18 @@ h1 {
position: fixed;
-webkit-transition: all .2s ease-out;
transition: all .2s ease-out;
width: 0px;
width: 250px;
/* on top of everything */
z-index: 2999;
top: 0;
right: 0;
height: calc(var(--vh, 1vh) * 100);
overflow-x: hidden;
overflow-y: hidden;

}
.sidenav.invisible {
Copy link
Copy Markdown
Owner

@jech jech Jan 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We already have .invisible, so isn't this redundant?

display: none;
}

.sidenav button {
Expand Down Expand Up @@ -1118,8 +1113,12 @@ header .collapse:hover {

/* Shrinking the sidebar from 200px to 0px */
#left-sidebar.active {
min-width: 0;
max-width: 0;
display: none;
}

#left-sidebar:not(.active) {
display: block;
width:200px;
}

#left-sidebar .sidebar-header strong {
Expand Down Expand Up @@ -1154,17 +1153,21 @@ header .collapse:hover {
cursor: pointer;
overflow: hidden;
white-space: pre;
display: block;
Copy link
Copy Markdown
Owner

@jech jech Jan 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does this do?

width: 100%;
text-align: left;
}

#left-sidebar.active #users > div {
#left-sidebar.active #users > button {
padding: 10px 5px !important;
}

#users > div:hover {
#users > button:hover {
background-color: #f2f2f2;
}
#users > button:focus, #users > button:focus-visible {
outline-offset: -2px;
}

#users > button::before {
content: "\f111";
Expand Down
2 changes: 1 addition & 1 deletion static/galene.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ <h1 id="title" class="header-title">Galène</h1>
</div>
</div>

<div id="sidebarnav" class="sidenav">
<div id="sidebarnav" class="sidenav invisible">
<div class="sidenav-header">
<h2>Settings</h2>
<button class="closebtn" id="clodeside"><i class="fas fa-times" aria-hidden="true"></i></button>
Expand Down
19 changes: 14 additions & 5 deletions static/galene.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4170,11 +4170,13 @@ document.getElementById('disconnectbutton').onclick = function(e) {
};

function openNav() {
document.getElementById("sidebarnav").style.width = "250px";
//document.getElementById("sidebarnav").style.width = "250px";
Copy link
Copy Markdown
Owner

@jech jech Jan 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please don't leave commented-out code. Why is this being removed?

document.getElementById("sidebarnav").classList.remove('invisible');
}

function closeNav() {
document.getElementById("sidebarnav").style.width = "0";
//document.getElementById("sidebarnav").style.width = "0";
Copy link
Copy Markdown
Owner

@jech jech Jan 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please don't leave commented-out code.

document.getElementById("sidebarnav").classList.add('invisible');
}

document.getElementById('sidebarCollapse').onclick = function(e) {
Expand All @@ -4183,9 +4185,16 @@ document.getElementById('sidebarCollapse').onclick = function(e) {
};

document.getElementById('openside').onclick = function(e) {
e.preventDefault();
let sidewidth = document.getElementById("sidebarnav").style.width;
if (sidewidth !== "0px" && sidewidth !== "") {
// e.preventDefault();
// let sidewidth = document.getElementById("sidebarnav").style.width;
// if (sidewidth !== "0px" && sidewidth !== "") {
// closeNav();
// return;
// } else {
// openNav();
// }
Copy link
Copy Markdown
Owner

@jech jech Jan 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please don't leave commented-out code.

let invisible = document.getElementById("sidebarnav").classList.contains('invisible');
if (! invisible) {
closeNav();
return;
} else {
Expand Down