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 { th {
background:lightgrey; background:lightgrey;
} }
h2 {
display:inline;
}
tbody tr:nth-child(even) td{ tbody tr:nth-child(even) td{
background:#eeeeee; background:#eeeeee;
} }

20
src/App.vue
Unescape View File

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

70
src/components/show_category.vue
Unescape View File

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

36
src/components/songs.vue
Unescape View File

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

44
src/components/summary.vue
Unescape View File

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

52
src/components/timer.vue
Unescape View File

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

Write Preview
Loading…
Cancel
Save