implement sticky header for parent task
Hunter
Sunday, January 12th, 2025 at 11:22 PM
142 .shake {
143 animation: shake 0.25s ease-out;
144 }
145 + html {
146 + scroll-behavior: smooth;
147 + overscroll-behavior: none;
148 + -ms-overflow-style: none;
149 + scrollbar-width: none;
150 + }
151 body {
152 font-family: Arial, sans-serif;
153 max-width: 800px;
154 margin: 0 auto;
- padding: 20px;
155 + padding: 0px 20px 20px 20px;
156 background-color: var(--background);
157 color: var(--text);
158 }
191 .active {
192 background-color: var(--highlight);
193 }
194 + .sticky-header {
195 + position: sticky;
196 + top: 0;
197 + background-color: var(--background);
198 + z-index: 1;
199 + padding-top: 20px;
200 + }
201 .parent-task {
202 font-size: 1.5em;
203 font-weight: bold;
921 appContainer.innerHTML = '';
922 currentTask = taskPath[taskPath.length - 1];
923
- updateBreadcrumbs(currentTask);
- updatePageTitle(currentTask);
924 + const stickyHeader = document.createElement('div');
925 + stickyHeader.className = 'sticky-header';
926 +
927 + const breadcrumbsElement = document.createElement('div');
928 + breadcrumbsElement.id = 'breadcrumbs';
929 + stickyHeader.appendChild(breadcrumbsElement);
930
931 const parentElement = createTaskElement(currentTask, true);
- appContainer.appendChild(parentElement);
932 + stickyHeader.appendChild(parentElement);
933 +
934 + appContainer.appendChild(stickyHeader);
935 +
936 + const subtasksContainer = document.createElement('div');
937 + subtasksContainer.id = 'subtasks-container';
938
939 const subtasksList = document.createElement('ul');
940 currentTask.subtasks.forEach(subtask => {
942 li.appendChild(createTaskElement(subtask));
943 subtasksList.appendChild(li);
944 });
- appContainer.appendChild(subtasksList);
945 + subtasksContainer.appendChild(subtasksList);
946 + appContainer.appendChild(subtasksContainer);
947 +
948 + updateBreadcrumbs(currentTask);
949 + updatePageTitle(currentTask);
950
951 const parentCheckbox = parentElement.querySelector('input[type="checkbox"]');
952 updateCheckboxState(parentCheckbox, currentTask.state);
1086 </script>
1087 </head>
1088 <body>
- <div id="breadcrumbs"></div>
1089 <div id="app-container"></div>
1090 </body>
1091 </html>