engineering/opencompletion.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

better for mobile

Browse source 
modified:   templates/base.html
This commit is contained in:
Russell Ballestrini 2024-11-16 10:17:56 -05:00
parent 7f332de648
commit f18d81e1ea
1 changed files with 117 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

117
templates/base.html
View file

@ -185,6 +185,84 @@
margin-bottom: 5px;
}
/* Hamburger button styling */
#hamburger-button {
display: none; /* Hidden by default */
position: fixed;
top: 20px;
left: 20px;
background-color: #333;
color: white;
border: none;
border-radius: 5px;
padding: 10px;
cursor: pointer;
z-index: 1001;
}
/* Modal styling */
#room-list-modal {
display: none; /* Hidden by default */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1002;
justify-content: center;
align-items: center;
}
#room-list-modal-content {
display: none; /* Hidden by default */
background-color: white;
padding: 20px;
border-radius: 5px;
width: 80%;
max-width: 400px;
max-height: 80vh;
overflow-y: auto; /* Make the room list scrollable */
position: relative;
}
/* Close button styling */
#close-modal-button {
display: none; /* Hidden by default */
position: fixed;
top: 10px;
right: 10px;
background-color: #333;
color: white;
border: none;
border-radius: 5px;
font-size: 20px;
cursor: pointer;
z-index: 1003; /* Ensure it is above the modal content */
padding: 5px 10px; /* Add padding for a button-like appearance */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Add a shadow for depth */
transition: background-color 0.3s; /* Smooth transition for hover effect */
}
#close-modal-button:hover {
background-color: #555; /* Darken on hover */
}
/* Media query for mobile devices */
@media (max-width: 768px) {
.main-container {
grid-template-columns: 1fr; /* Single column layout */
}
#rooms-list {
display: none; /* Hide the room list on mobile */
}
#hamburger-button {
display: block; /* Show the hamburger button on mobile */
}
}
</style>
</head>
<body>
@ -197,6 +275,19 @@
</form>
</div>
<!-- Hamburger button for mobile -->
<button id="hamburger-button">☰</button>
<!-- Modal for room list -->
<div id="room-list-modal">
<div id="room-list-modal-content">
<button id="close-modal-button" onclick="closeModal()">×</button>
<div id="rooms-list-modal-content">
<!-- Room list will be cloned here for mobile view -->
</div>
</div>
</div>
<!-- Chatroom list -->
<div class="main-container">
<div id="rooms-list">
@ -237,6 +328,32 @@
performSearch();
}
});
// Function to open the modal
function openModal() {
const modal = document.getElementById("room-list-modal");
const modalContent = document.getElementById("room-list-modal-content");
const closeButton = document.getElementById("close-modal-button");
const roomsList = document.getElementById("rooms-list-ul").cloneNode(true);
document.getElementById("rooms-list-modal-content").innerHTML = ''; // Clear previous content
document.getElementById("rooms-list-modal-content").appendChild(roomsList);
modal.style.display = "flex";
modalContent.style.display = "block";
closeButton.style.display = "block";
}
// Function to close the modal
function closeModal() {
const modal = document.getElementById("room-list-modal");
const modalContent = document.getElementById("room-list-modal-content");
const closeButton = document.getElementById("close-modal-button");
modal.style.display = "none";
modalContent.style.display = "none";
closeButton.style.display = "none";
}
// Add event listener to the hamburger button
document.getElementById("hamburger-button").addEventListener("click", openModal);
</script>
</body>
</html>