Scroll filename on overflow

This commit is contained in:
Andrew Morris
2023-03-27 19:40:09 +11:00
parent 9a5ff3597f
commit fc91ee168f
3 changed files with 14 additions and 5 deletions

View File

@@ -13,10 +13,9 @@
<div id="file-menu">
<div id="list-btn" class="icon-btn ph-list"></div>
<div id="file-location">
Loading...
<div id="file-location-text">Loading...</div>
<div id="rename-btn" class="icon-btn disabled ph-pencil-simple"></div>
</div>
<div id="rename-btn" class="icon-btn disabled ph-pencil-simple"></div>
<div class="grow-spacer"></div>
<div id="add-btn" class="icon-btn ph-file-plus"></div>
<div id="restore-btn" class="icon-btn ph-clock-counter-clockwise"></div>
<div id="delete-btn" class="icon-btn disabled ph-trash"></div>

View File

@@ -18,7 +18,7 @@ function domQuery<T = HTMLElement>(query: string): T {
const editorEl = domQuery('#editor');
const fileLocation = domQuery<HTMLSelectElement>('#file-location');
const fileLocationText = domQuery('#file-location-text');
const listBtn = domQuery('#list-btn');
const renameBtn = domQuery('#rename-btn');
@@ -106,7 +106,7 @@ editorEl.innerHTML = '';
}
location.hash = currentFile;
fileLocation.textContent = currentFile;
fileLocationText.textContent = currentFile;
const model = fileModels[currentFile];

View File

@@ -24,11 +24,21 @@ a, a:visited {
font-size: 1.5em;
display: flex;
width: 50vw;
max-width: 50vw;
border-bottom: 1px solid black;
user-select: none;
#file-location {
padding: 0.5em 0;
position: relative;
display: flex;
flex-direction: row;
flex-grow: 1;
overflow-x: auto;
#file-location-text {
white-space: nowrap;
}
}
#list-btn {