[35355] | 1 | <template>
|
---|
[35508] | 2 | <div class="app-bar theme-primary">
|
---|
[35431] | 3 | <div class="app-bar-content">
|
---|
| 4 | <span class="heading1">{{ translations.get("Title") }}</span>
|
---|
| 5 |
|
---|
[35508] | 6 | <a class="btn-primary theme-primary-l1" href="https://koreromaori.io" target="_blank">
|
---|
[35431] | 7 | <span class="material-icons mdi-m">open_in_new</span>
|
---|
| 8 | <u>koreromaori.io</u>
|
---|
| 9 | </a>
|
---|
| 10 |
|
---|
[35508] | 11 | <toggle-button class="theme-primary-l1" v-model="showInfo" :reverseState="true">
|
---|
[35431] | 12 | <span class="material-icons mdi-l">info</span>
|
---|
| 13 | </toggle-button>
|
---|
| 14 | </div>
|
---|
| 15 |
|
---|
[35454] | 16 | <div v-if="showInfo" class="paper" v-html="translations.get('Description')" />
|
---|
[35431] | 17 | </div>
|
---|
| 18 |
|
---|
| 19 | <div class="paper content">
|
---|
[35355] | 20 | <AudioUpload />
|
---|
| 21 | </div>
|
---|
| 22 |
|
---|
[35431] | 23 | <ul id="transcription-list" class="list-view content">
|
---|
[35406] | 24 | <transition-group name="transcription-list">
|
---|
| 25 | <li class="list-item transcription-list-item" v-for="[id, transcription] in transcriptions" :key="id">
|
---|
[35409] | 26 | <TranscriptionItem :transcription="transcription" />
|
---|
[35406] | 27 | </li>
|
---|
| 28 | </transition-group>
|
---|
[35355] | 29 | </ul>
|
---|
| 30 | </template>
|
---|
| 31 |
|
---|
| 32 | <style lang="scss">
|
---|
[35407] | 33 | #transcription-list {
|
---|
[35355] | 34 | margin-bottom: 1em;
|
---|
| 35 | }
|
---|
| 36 |
|
---|
[35431] | 37 | .app-bar {
|
---|
| 38 | display: flex;
|
---|
| 39 | flex-direction: column;
|
---|
| 40 | gap: 1em;
|
---|
| 41 |
|
---|
[35442] | 42 | background-color: var(--bg-color);
|
---|
| 43 | color: var(--fg-color);
|
---|
[35431] | 44 | box-shadow: 0px 0px 4px 3px #6d6d6d;
|
---|
| 45 |
|
---|
| 46 | padding: 1em;
|
---|
| 47 | margin-bottom: 1em;
|
---|
| 48 | }
|
---|
| 49 |
|
---|
| 50 | .app-bar-content {
|
---|
| 51 | display: flex;
|
---|
| 52 | align-items: center;
|
---|
| 53 | gap: 1em;
|
---|
| 54 |
|
---|
| 55 | width: 100%;
|
---|
| 56 |
|
---|
| 57 | & :first-child {
|
---|
| 58 | flex-grow: 1;
|
---|
| 59 | }
|
---|
| 60 | }
|
---|
| 61 |
|
---|
| 62 | .content {
|
---|
| 63 | margin: 1em;
|
---|
| 64 | }
|
---|
| 65 |
|
---|
[35406] | 66 | .transcription-list-item {
|
---|
| 67 | transition: all 0.8s ease;
|
---|
[35432] | 68 | margin-bottom: 1em;
|
---|
| 69 |
|
---|
| 70 | &:last-child {
|
---|
| 71 | margin-bottom: 0;
|
---|
| 72 | }
|
---|
[35406] | 73 | }
|
---|
| 74 |
|
---|
| 75 | .transcription-list-leave-to {
|
---|
| 76 | opacity: 0;
|
---|
| 77 | }
|
---|
| 78 |
|
---|
| 79 | .transcription-list-leave-active {
|
---|
| 80 | position: absolute;
|
---|
| 81 | }
|
---|
[35355] | 82 | </style>
|
---|
| 83 |
|
---|
| 84 | <script>
|
---|
[35408] | 85 | import { mapState } from "vuex";
|
---|
[35355] | 86 | import AudioUpload from "./components/AudioUpload.vue"
|
---|
[35431] | 87 | import ToggleButton from "./components/ToggleButton.vue";
|
---|
[35355] | 88 | import TranscriptionItem from "./components/TranscriptionItem.vue"
|
---|
| 89 |
|
---|
| 90 | export default {
|
---|
| 91 | name: "App",
|
---|
| 92 | components: {
|
---|
| 93 | AudioUpload,
|
---|
[35431] | 94 | TranscriptionItem,
|
---|
| 95 | ToggleButton
|
---|
[35355] | 96 | },
|
---|
| 97 | data() {
|
---|
| 98 | return {
|
---|
[35431] | 99 | showInfo: false
|
---|
[35355] | 100 | }
|
---|
| 101 | },
|
---|
[35408] | 102 | computed: mapState({
|
---|
| 103 | translations: state => state.translations,
|
---|
[35446] | 104 | transcriptions: state => state.rawTranscriptions
|
---|
| 105 | })
|
---|
[35355] | 106 | }
|
---|
| 107 | </script>
|
---|