eth-janishutz/fundamentals-of-webengineering
1
0
Fork 0
mirror of https://github.com/janishutz/fundamentals-of-webengineering.git synced 2025-11-25 13:54:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Some CSS work

Browse Source
This commit is contained in:
Janis Hutz
2025-10-22 08:40:03 +02:00
parent 11e99294c8
commit fde38a8869
5 changed files with 40 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
task_2_ts/css/layout.css
View File

@@ -58,6 +58,16 @@ body>main {
} }
} }
.table-container {
width: 100%;
}
.table-scroll-wrapper {
width: 100%;
max-height: 600px;
overflow: scroll;
}
/* Set a fixed scrollable wrapper */ /* Set a fixed scrollable wrapper */
#table-content { #table-content {
max-height: 400px; max-height: 400px;

24
task_2_ts/index.html
View File

@@ -48,6 +48,9 @@
<h4>Number of rows</h4> <h4>Number of rows</h4>
<p id="data-rowcount"></p> <p id="data-rowcount"></p>
</div> </div>
<div id="data-info-placeholder">
No file selected
</div>
</article> </article>
<article> <article>
@@ -66,6 +69,9 @@
<h4 id="title-column-max">Max</h4> <h4 id="title-column-max">Max</h4>
<p id="column-max"></p> <p id="column-max"></p>
</div> </div>
<div id="column-info-placeholder">
No column selected
</div>
</article> </article>
<article> <article>
@@ -76,15 +82,21 @@
<input type="search" id="filter" name="filter" placeholder="Filter" disabled> <input type="search" id="filter" name="filter" placeholder="Filter" disabled>
</article> </article>
<article style="width: 100%"> <article class="table-container">
<header> <header>
<h2>Data table</h2> <h2>Data table</h2>
</header> </header>
<table id="table-content"> <div class="table-scroll-wrapper">
<thead id="table-header"></thead> <table id="table-content">
<tbody id="table-body"> <thead>
</tbody> <tr id="table-header">
</table>
</tr>
</thead>
<tbody id="table-body">
</tbody>
</table>
</div>
</article> </article>
</main> </main>
</body> </body>

8
task_2_ts/ts/main.ts
View File

@@ -37,8 +37,8 @@ const headerList = listRef<string>(
[], [],
'table-header', 'table-header',
{ {
'type': 'td', 'type': 'th',
'cssClasses': [], 'cssClasses': [ 'sortable' ],
'children': [] 'children': []
} }
); );
@@ -75,6 +75,10 @@ columnDatatype.addConditionalElementBind( document.getElementById( 'title-column
columnDatatype.addConditionalElementBind( columnEntriesElement, stringOrNumberCheckPredicate ); columnDatatype.addConditionalElementBind( columnEntriesElement, stringOrNumberCheckPredicate );
columnDatatype.addConditionalElementBind( document.getElementById( 'title-column-entries' )!, columnDatatype.addConditionalElementBind( document.getElementById( 'title-column-entries' )!,
stringOrNumberCheckPredicate ); stringOrNumberCheckPredicate );
columnDatatype.addConditionalElementBind( document.getElementById( 'column-info' )!, val => val !== '' );
columnDatatype.addConditionalElementBind( document.getElementById( 'column-info-placeholder' )!, val => val === '' );
filename.addConditionalElementBind( document.getElementById( 'data-info' )!, val => val !== '' );
filename.addConditionalElementBind( document.getElementById( 'data-info-placeholder' )!, val => val === '' );

5
task_2_ts/ts/rendering/list-renderer.ts
View File

@@ -18,6 +18,11 @@ const renderList = <T extends StringIndexedObject>(
const renderer = <T extends StringIndexedObject>( data: T, template: RenderTemplate ): HTMLElement => { const renderer = <T extends StringIndexedObject>( data: T, template: RenderTemplate ): HTMLElement => {
const parent = document.createElement( template.type ); const parent = document.createElement( template.type );
for ( let i = 0; i < template.cssClasses.length; i++ ) {
console.log( 'Adding css class', template.cssClasses[i]! );
parent.classList.add( template.cssClasses[i]! );
}
for ( let i = 0; i < template.children.length; i++ ) { for ( let i = 0; i < template.children.length; i++ ) {
const element = template.children[i]!; const element = template.children[i]!;

1
task_2_ts/ts/rendering/primitives.ts
View File

@@ -64,6 +64,7 @@ export const ref = <T>( elements: HTMLElement[], data: T ): Ref<T> => {
} ); } );
conditionalClasses.forEach( el => { conditionalClasses.forEach( el => {
// FIXME: Use add and remove!
el.element.classList.value = el.predicate( data ) ? el.onTrue : el.onFalse; el.element.classList.value = el.predicate( data ) ? el.onTrue : el.onFalse;
} ); } );