Skip to content

Commit

Permalink
[web] Remove unnecessary HTML elements
Browse files Browse the repository at this point in the history
  • Loading branch information
@hacketiwack
hacketiwack committed Mar 5, 2024
1 parent 3f4c6b2 commit 37b1c83
Show file tree
Hide file tree
Showing 17 changed files with 1,146 additions and 1,220 deletions.
76 changes: 37 additions & 39 deletions web-src/src/components/ModalDialog.vue
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,44 @@
<template>
<div>
<transition name="fade">
<div v-if="show" class="modal is-active">
<div class="modal-background" @click="$emit('close')" />
<div class="modal-content">
<div class="card">
<div class="card-content">
<p v-if="title" class="title is-4" v-text="title" />
<slot name="modal-content" />
</div>
<footer class="card-footer is-clipped">
<a class="card-footer-item has-text-dark" @click="$emit('close')">
<mdicon class="icon" name="cancel" size="16" />
<span class="is-size-7" v-text="close_action" />
</a>
<a
v-if="delete_action"
class="card-footer-item has-background-danger has-text-white has-text-weight-bold"
@click="$emit('delete')"
>
<mdicon class="icon" name="delete" size="16" />
<span class="is-size-7" v-text="delete_action" />
</a>
<a
v-if="ok_action"
class="card-footer-item has-background-info has-text-white has-text-weight-bold"
@click="$emit('ok')"
>
<mdicon class="icon" name="check" size="16" />
<span class="is-size-7" v-text="ok_action" />
</a>
</footer>
<transition name="fade">
<div v-if="show" class="modal is-active">
<div class="modal-background" @click="$emit('close')" />
<div class="modal-content">
<div class="card">
<div class="card-content">
<p v-if="title" class="title is-4" v-text="title" />
<slot name="modal-content" />
</div>
<footer class="card-footer is-clipped">
<a class="card-footer-item has-text-dark" @click="$emit('close')">
<mdicon class="icon" name="cancel" size="16" />
<span class="is-size-7" v-text="close_action" />
</a>
<a
v-if="delete_action"
class="card-footer-item has-background-danger has-text-white has-text-weight-bold"
@click="$emit('delete')"
>
<mdicon class="icon" name="delete" size="16" />
<span class="is-size-7" v-text="delete_action" />
</a>
<a
v-if="ok_action"
class="card-footer-item has-background-info has-text-white has-text-weight-bold"
@click="$emit('ok')"
>
<mdicon class="icon" name="check" size="16" />
<span class="is-size-7" v-text="ok_action" />
</a>
</footer>
</div>
<button
class="modal-close is-large"
aria-label="close"
@click="$emit('close')"
/>
</div>
</transition>
</div>
<button
class="modal-close is-large"
aria-label="close"
@click="$emit('close')"
/>
</div>
</transition>
</template>

<script>
Expand Down
108 changes: 53 additions & 55 deletions web-src/src/components/ModalDialogAddRss.vue
View file
Original file line number Diff line number Diff line change
@@ -1,61 +1,59 @@
<template>
<div>
<transition name="fade">
<div v-if="show" class="modal is-active">
<div class="modal-background" @click="$emit('close')" />
<div class="modal-content">
<form class="card" @submit.prevent="add_stream">
<div class="card-content">
<p class="title is-4" v-text="$t('dialog.add.rss.title')" />
<div class="field">
<p class="control has-icons-left">
<input
ref="url_field"
v-model="url"
class="input is-shadowless"
type="url"
pattern="http[s]?://.*"
required
:placeholder="$t('dialog.add.rss.placeholder')"
:disabled="loading"
/>
<mdicon class="icon is-left" name="rss" size="16" />
</p>
<p class="help" v-text="$t('dialog.add.rss.help')" />
</div>
</div>
<footer v-if="loading" class="card-footer">
<a class="card-footer-item has-text-dark">
<mdicon class="icon" name="web" size="16" />
<span
class="is-size-7"
v-text="$t('dialog.add.rss.processing')"
<transition name="fade">
<div v-if="show" class="modal is-active">
<div class="modal-background" @click="$emit('close')" />
<div class="modal-content">
<form class="card" @submit.prevent="add_stream">
<div class="card-content">
<p class="title is-4" v-text="$t('dialog.add.rss.title')" />
<div class="field">
<p class="control has-icons-left">
<input
ref="url_field"
v-model="url"
class="input is-shadowless"
type="url"
pattern="http[s]?://.*"
required
:placeholder="$t('dialog.add.rss.placeholder')"
:disabled="loading"
/>
</a>
</footer>
<footer v-else class="card-footer is-clipped">
<a class="card-footer-item has-text-dark" @click="$emit('close')">
<mdicon class="icon" name="cancel" size="16" />
<span class="is-size-7" v-text="$t('dialog.add.rss.cancel')" />
</a>
<a
class="card-footer-item has-background-info has-text-white has-text-weight-bold"
@click="add_stream"
>
<mdicon class="icon" name="playlist-plus" size="16" />
<span class="is-size-7" v-text="$t('dialog.add.rss.add')" />
</a>
</footer>
</form>
</div>
<button
class="modal-close is-large"
aria-label="close"
@click="$emit('close')"
/>
<mdicon class="icon is-left" name="rss" size="16" />
</p>
<p class="help" v-text="$t('dialog.add.rss.help')" />
</div>
</div>
<footer v-if="loading" class="card-footer">
<a class="card-footer-item has-text-dark">
<mdicon class="icon" name="web" size="16" />
<span
class="is-size-7"
v-text="$t('dialog.add.rss.processing')"
/>
</a>
</footer>
<footer v-else class="card-footer is-clipped">
<a class="card-footer-item has-text-dark" @click="$emit('close')">
<mdicon class="icon" name="cancel" size="16" />
<span class="is-size-7" v-text="$t('dialog.add.rss.cancel')" />
</a>
<a
class="card-footer-item has-background-info has-text-white has-text-weight-bold"
@click="add_stream"
>
<mdicon class="icon" name="playlist-plus" size="16" />
<span class="is-size-7" v-text="$t('dialog.add.rss.add')" />
</a>
</footer>
</form>
</div>
</transition>
</div>
<button
class="modal-close is-large"
aria-label="close"
@click="$emit('close')"
/>
</div>
</transition>
</template>

<script>
Expand Down
117 changes: 56 additions & 61 deletions web-src/src/components/ModalDialogAddUrlStream.vue
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,62 @@
<template>
<div>
<transition name="fade">
<div v-if="show" class="modal is-active">
<div class="modal-background" @click="$emit('close')" />
<div class="modal-content">
<form class="card" @submit.prevent="play">
<div class="card-content">
<p class="title is-4" v-text="$t('dialog.add.stream.title')" />
<div class="field">
<p class="control has-icons-left">
<input
ref="url_field"
v-model="url"
class="input is-shadowless"
type="url"
pattern="http[s]?://.*"
required
:placeholder="$t('dialog.add.stream.placeholder')"
:disabled="loading"
/>
<mdicon class="icon is-left" name="web" size="16" />
</p>
</div>
</div>
<footer v-if="loading" class="card-footer">
<a class="card-footer-item has-text-dark">
<mdicon class="icon" name="web" size="16" />
<span
class="is-size-7"
v-text="$t('dialog.add.stream.loading')"
/>
</a>
</footer>
<footer v-else class="card-footer is-clipped">
<a class="card-footer-item has-text-dark" @click="$emit('close')">
<mdicon class="icon" name="cancel" size="16" />
<span
class="is-size-7"
v-text="$t('dialog.add.stream.cancel')"
<transition name="fade">
<div v-if="show" class="modal is-active">
<div class="modal-background" @click="$emit('close')" />
<div class="modal-content">
<form class="card" @submit.prevent="play">
<div class="card-content">
<p class="title is-4" v-text="$t('dialog.add.stream.title')" />
<div class="field">
<p class="control has-icons-left">
<input
ref="url_field"
v-model="url"
class="input is-shadowless"
type="url"
pattern="http[s]?://.*"
required
:placeholder="$t('dialog.add.stream.placeholder')"
:disabled="loading"
/>
</a>
<a class="card-footer-item has-text-dark" @click="add_stream">
<mdicon class="icon" name="playlist-plus" size="16" />
<span class="is-size-7" v-text="$t('dialog.add.stream.add')" />
</a>
<a
class="card-footer-item has-background-info has-text-white has-text-weight-bold"
@click="play"
>
<mdicon class="icon" name="play" size="16" />
<span class="is-size-7" v-text="$t('dialog.add.stream.play')" />
</a>
</footer>
</form>
</div>
<button
class="modal-close is-large"
aria-label="close"
@click="$emit('close')"
/>
<mdicon class="icon is-left" name="web" size="16" />
</p>
</div>
</div>
<footer v-if="loading" class="card-footer">
<a class="card-footer-item has-text-dark">
<mdicon class="icon" name="web" size="16" />
<span
class="is-size-7"
v-text="$t('dialog.add.stream.loading')"
/>
</a>
</footer>
<footer v-else class="card-footer is-clipped">
<a class="card-footer-item has-text-dark" @click="$emit('close')">
<mdicon class="icon" name="cancel" size="16" />
<span class="is-size-7" v-text="$t('dialog.add.stream.cancel')" />
</a>
<a class="card-footer-item has-text-dark" @click="add_stream">
<mdicon class="icon" name="playlist-plus" size="16" />
<span class="is-size-7" v-text="$t('dialog.add.stream.add')" />
</a>
<a
class="card-footer-item has-background-info has-text-white has-text-weight-bold"
@click="play"
>
<mdicon class="icon" name="play" size="16" />
<span class="is-size-7" v-text="$t('dialog.add.stream.play')" />
</a>
</footer>
</form>
</div>
</transition>
</div>
<button
class="modal-close is-large"
aria-label="close"
@click="$emit('close')"
/>
</div>
</transition>
</template>

<script>
Expand Down
Loading

0 comments on commit 37b1c83

Please sign in to comment.