mahuntington
/
practice-tracker-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

using grid for layout

Browse Source
mic_level
Matt Huntington 3 years ago
parent d6ca7de7df
commit 12e75c34c3
6 changed files with 107 additions and 119 deletions
Show Stats Download Patch File Download Diff File

4
public/app.css
Unescape View File

@ -5,10 +5,6 @@ td,th {
th {
background:lightgrey;
}
h2 {
display:inline;
}
tbody tr:nth-child(even) td{
background:#eeeeee;
}

20
src/App.vue
Unescape View File

@ -7,9 +7,6 @@
</script>
<template>
<header>
<h1>Practice Tracker</h1>
</header>
<main>
<section>
<MinsLeftToPracticeToday/>
@ -17,6 +14,8 @@
</section>
<section>
<Summary/>
</section>
<section>
<ShowCategory/>
<Songs/>
</section>
@ -24,11 +23,12 @@
</template>
<style scoped>
section {
float:left;
width:25%;
}
section:nth-child(2) {
width:75%;
}
main {
display:grid;
grid-template-columns: repeat(3, minmax(10px, 1fr));
grid-template-rows: minmax(10px, 100vh);
}
section {
overflow:scroll;
}
</style>

70
src/components/show_category.vue
Unescape View File

@ -23,43 +23,41 @@
</script>
<template>
<details>
<summary><h2>Show Category</h2></summary>
<select @change="change">
<option v-for="category in categories" v-bind:value="category.id">
{{category.id}}.
{{category.instrument}}
:
{{category.category}}
</option>
</select>
<table>
<thead>
<tr>
<th>id</th>
<th>description</th>
<th>seconds</th>
<th>comments</th>
<th>created at</th>
<th>category id</th>
<th>category</th>
<th>instrument</th>
<h2>Show Category</h2>
<select @change="change">
<option v-for="category in categories" v-bind:value="category.id">
{{category.id}}.
{{category.instrument}}
:
{{category.category}}
</option>
</select>
<table>
<thead>
<tr>
<th>id</th>
<th>description</th>
<th>seconds</th>
<th>comments</th>
<th>created at</th>
<th>category id</th>
<th>category</th>
<th>instrument</th>
</tr>
</thead>
<tbody>
<tr v-for="session in categorySessions">
<td>{{session.id}}</td>
<td>{{session.description}}</td>
<td>{{session.seconds}}</td>
<td>{{session.comments}}</td>
<td>{{session.created_at}}</td>
<td>{{session.category_id}}</td>
<td>{{session.category}}</td>
<td>{{session.instrument}}</td>
</tr>
</thead>
<tbody>
<tr v-for="session in categorySessions">
<td>{{session.id}}</td>
<td>{{session.description}}</td>
<td>{{session.seconds}}</td>
<td>{{session.comments}}</td>
<td>{{session.created_at}}</td>
<td>{{session.category_id}}</td>
<td>{{session.category}}</td>
<td>{{session.instrument}}</td>
</tr>
</tbody>
</table>
</details>
</tbody>
</table>
</template>
<style scoped>

36
src/components/songs.vue
Unescape View File

@ -16,25 +16,23 @@
</script>
<template>
<details>
<summary><h2>Songs</h2></summary>
<table>
<thead>
<tr>
<th>id</th>
<th>title</th>
<th>notes</th>
</tr>
</thead>
<tbody>
<tr v-for="song in songs">
<td>{{song.id}}</td>
<td>{{song.title}}</td>
<td>{{song.notes}}</td>
</tr>
</tbody>
</table>
</details>
<h2>Songs</h2>
<table>
<thead>
<tr>
<th>id</th>
<th>title</th>
<th>notes</th>
</tr>
</thead>
<tbody>
<tr v-for="song in songs">
<td>{{song.id}}</td>
<td>{{song.title}}</td>
<td>{{song.notes}}</td>
</tr>
</tbody>
</table>
</template>
<style scoped>

44
src/components/summary.vue
Unescape View File

@ -23,29 +23,27 @@
</script>
<template>
<details>
<summary><h2 @click="refresh">Summary</h2></summary>
<table>
<thead>
<tr>
<th>category id</th>
<th>category</th>
<th>chunks practiced</th>
<th>instrument</th>
<th>weight</th>
</tr>
</thead>
<tbody>
<tr v-for="category in categories">
<td>{{category.category_id}}</td>
<td>{{category.category}}</td>
<td>{{category.chunks_practiced}}</td>
<td>{{category.instrument}}</td>
<td>{{category.weight}}</td>
</tr>
</tbody>
</table>
</details>
<h2 @click="refresh">Summary</h2>
<table>
<thead>
<tr>
<th>category id</th>
<th>category</th>
<th>chunks practiced</th>
<th>instrument</th>
<th>weight</th>
</tr>
</thead>
<tbody>
<tr v-for="category in categories">
<td>{{category.category_id}}</td>
<td>{{category.category}}</td>
<td>{{category.chunks_practiced}}</td>
<td>{{category.instrument}}</td>
<td>{{category.weight}}</td>
</tr>
</tbody>
</table>
</template>
<style scoped>

52
src/components/timer.vue
Unescape View File

@ -92,37 +92,35 @@
</script>
<template>
<details :class="{running:running}">
<summary><h2>Timer</h2></summary>
<em>
{{formatTime(totalSeconds)}}
</em>
<button :disabled="running" @click="start">Start Timer</button>
<button :disabled="!running" @click="stop">Stop Timer</button>
<button :disabled="running || totalSeconds === 0" @click="reset">Reset</button>
<form @submit="submit">
<label>Description</label>
<input v-model="description" type="text"/>
<h2>Timer</h2>
<em>
{{formatTime(totalSeconds)}}
</em>
<button :disabled="running" @click="start">Start Timer</button>
<button :disabled="!running" @click="stop">Stop Timer</button>
<button :disabled="running || totalSeconds === 0" @click="reset">Reset</button>
<form @submit="submit">
<label>Description</label>
<input v-model="description" type="text"/>
<label>Seconds</label>
<input @change="updateSavedPreviousSeconds" v-model="totalSeconds" type="number"/>
<label>Seconds</label>
<input @change="updateSavedPreviousSeconds" v-model="totalSeconds" type="number"/>
<label>Comments</label>
<textarea v-model="comments"/>
<label>Comments</label>
<textarea v-model="comments"/>
<label>Practice Category</label>
<select v-model="practice_category_id">
<option v-for="category in categories" v-bind:value="category.id">
{{category.id}}.
{{category.instrument}}
:
{{category.category}}
</option>
</select>
<label>Practice Category</label>
<select v-model="practice_category_id">
<option v-for="category in categories" v-bind:value="category.id">
{{category.id}}.
{{category.instrument}}
:
{{category.category}}
</option>
</select>
<input type="Submit"/>
</form>
</details>
<input type="Submit"/>
</form>
</template>
<style scoped>

Write Preview
Loading…
Cancel
Save