Skip to content

Commit

Permalink
some style fixes for the table on smaller screens
Browse files Browse the repository at this point in the history
  • Loading branch information
@aviaviavi
aviaviavi committed Nov 28, 2018
1 parent cb834a4 commit a3f8a53
Show file tree
Hide file tree
Showing 2 changed files with 59 additions and 53 deletions.
16 changes: 9 additions & 7 deletions web/css/toodles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,15 +67,21 @@

.tag-block{
margin-top: .3em;
}

.tag-column {
max-width: 200px;
}

.todo-item-customAttributes {
max-width: 200px;
}

.tag-item {
/* background-color: #E9F1F7; */
background-color: #4F6D7A;
line-height: 2;
color: white;
font-size: .75em;
font-size: .66em;
margin-right: .2em;
padding: .3em;
text-align: center;
Expand All @@ -101,7 +107,7 @@ td, th {
margin-right: .2em;
padding: .3em;
line-height: 2;
font-size: .75em;
font-size: .66em;
}

.priority-column {
Expand Down Expand Up @@ -133,10 +139,6 @@ td, th {
background-color: #dbdbdb;
}

.top-div {
overflow-x: scroll;
}

.toodles-nav-title-text {
padding-left: 5px;
}
Expand Down
96 changes: 50 additions & 46 deletions web/html/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
</div>
<div class="navbar-item deselect-all" v-on:click="deselectAll" v-show="todos.length && todos.every(t => t.selected)">
<span class="icon">
<i class="fa fa-square"></i>
<i class="fa fa-square"></i>
</span>
<span>Deselect All</span>
</div>
Expand Down Expand Up @@ -120,52 +120,56 @@
</div>
<div class="main-container container content column is-three-quarters">
<div class="loading-spinner" v-show="loading"><a class="button is-loading">Loading</a> Loading
TODO's. If your project is large, this can take a few moments.
Try configuring toodles to ignore large, autogenerated, or
third-party files.
<a target="_blank" href="https://github.com/aviaviavi/toodles/blob/master/.toodles.yaml">More info on configuring toodles</a>
TODO's. If your project is large, this can take a few moments.
Try configuring toodles to ignore large, autogenerated, or
third-party files.
<a target="_blank" href="https://github.com/aviaviavi/toodles/blob/master/.toodles.yaml">More info on configuring toodles</a>
</div>
<div class="box">
<div class="table-container">
<table class="table is-striped is-narrow is-hoverable is-fullwidth table-container todo-list">
<thead>
<tr>
<td></td>
<th v-on:click="sortTodos('priority')" class="sortable priority-column">
Priority
<span class="icon">
<i class="fa fa-sort"></i>
</span>
</th>
<th>Flag</th>
<th class="todo-item-body">Body</th>
<th>Assignee</th>
<th class="todo-item-tags">Tags</th>
</tr>
</thead>
<tr class="todo-item" v-for="todo in todos" v-if="todo.body.indexOf(todoSearch) !== -1 || (todo.assignee || '').indexOf(todoSearch) !== -1 || (todo.tags || []).toString().indexOf(todoSearch) !== -1 || (todo.flag || '').indexOf(todoSearch) !== -1" @change="updateTodo('top level')" @click="toggleTodo(todo)">
<td><input type="checkbox" v-model="todo.selected"></td>
<td class="todo-item-priority" >
<div v-show="todo.priority !== undefined">{{ todo.priority }}</div>
</td>
<td class="todo-item-flag" >{{ todo.flag }}</td>
<td class='todo-item-body'>
<div class="todo-source-link" @click="stopPropagation"><a :href="'/source_file/' + todo.id + '#line-' + todo.lineNumber" target="_blank">{{ todo.sourceFile }}:{{ todo.lineNumber}}</a></div>
<div>{{ todo.body }}</div>
</td>
<td class="todo-item-assignee" >{{ todo.assignee }}</td>
<td class="todo-item-customAttributes">
<div v-show="Object.keys(todo.customAttributes).length" class="attribute-block">
<span v-for="entry in Object.entries(todo.customAttributes)" class="attribute-item" @change="updateTodo('here')">
<span >{{entry[0]}}</span>=<span >{{entry[1]}}</span>
</span>
</div>
<div class="tag-block" v-show="Object.keys(todo.tags).length">
<span v-for="tag in todo.tags" class="tag-item">
<span >{{tag}}</span>
</span>
</div>
</td>
</tr>
</table>
</div>
</div>
<table class="table todo-list is-striped is-hoverable">
<thead>
<tr>
<td></td>
<th v-on:click="sortTodos('priority')" class="sortable priority-column">
Priority
<span class="icon">
<i class="fa fa-sort"></i>
</span>
</th>
<th>Flag</th>
<th class="todo-item-body">Body</th>
<th>Assignee</th>
<th>Tags</th>
</tr>
</thead>
<tr class="todo-item" v-for="todo in todos" v-if="todo.body.indexOf(todoSearch) !== -1 || (todo.assignee || '').indexOf(todoSearch) !== -1 || (todo.tags || []).toString().indexOf(todoSearch) !== -1 || (todo.flag || '').indexOf(todoSearch) !== -1" @change="updateTodo('top level')" @click="toggleTodo(todo)">
<td><input type="checkbox" v-model="todo.selected"></td>
<td class="todo-item-priority" >
<div v-show="todo.priority !== undefined">{{ todo.priority }}</div>
</td>
<td class="todo-item-flag" >{{ todo.flag }}</td>
<td class='todo-item-body'>
<div class="todo-source-link" @click="stopPropagation"><a :href="'/source_file/' + todo.id + '#line-' + todo.lineNumber" target="_blank">{{ todo.sourceFile }}:{{ todo.lineNumber}}</a></div>
<div>{{ todo.body }}</div>
</td>
<td class="todo-item-assignee" >{{ todo.assignee }}</td>
<td class="todo-item-customAttributes">
<div v-show="Object.keys(todo.customAttributes).length" class="attribute-block">
<span v-for="entry in Object.entries(todo.customAttributes)" class="attribute-item" @change="updateTodo('here')">
<span >{{entry[0]}}</span>=<span >{{entry[1]}}</span>
</span>
</div>
<div class="tag-block" v-show="Object.keys(todo.tags).length">
<span v-for="tag in todo.tags" class="tag-item">
<span >{{tag}}</span>
</span>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
Expand Down

0 comments on commit a3f8a53

Please sign in to comment.