mirror of
https://codeberg.org/Ewen/rudibridge.git
synced 2024-10-22 09:11:21 +00:00
fix: minor frontend changes
This commit is contained in:
parent
1822bd2840
commit
4c7a90f7b2
|
|
@ -2,8 +2,8 @@
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex justify-center sm:bg-slate-100 sm:p-5">
|
||||
<div class="bg-white sm:rounded-lg sm:shadow-md sm:border-gray-200 sm:border sm:max-w-lg">
|
||||
<div class="flex justify-center min-h-screen sm:bg-slate-100 sm:p-5">
|
||||
<div class="flex flex-col bg-white sm:rounded-lg sm:shadow-md sm:border-gray-200 sm:border sm:max-w-lg">
|
||||
<header class="p-3 border-b">
|
||||
<h1 class="text-xl font-bold title"><router-link to="/">Rudibridge</router-link></h1>
|
||||
</header>
|
||||
|
|
@ -12,10 +12,10 @@
|
|||
<RouterView />
|
||||
</main>
|
||||
|
||||
<footer class="flex flex-row justify-end p-3 border-t">
|
||||
<footer class="flex flex-row justify-end p-3 mt-auto border-t">
|
||||
<ul class="flex flex-row gap-2">
|
||||
<li><router-link to="/about" class="underline text-slate-600">About</router-link></li>
|
||||
<li><a href="https://git.fedi.bzh/ewen/rudibridge" class="underline text-slate-600">Code</a></li>
|
||||
<li><a href="https://codeberg.org/Ewen/rudibridge" class="underline text-slate-600">Code</a></li>
|
||||
</ul>
|
||||
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -114,21 +114,21 @@ function copyLink() {
|
|||
<label for="url" :class="v$.url.$error ? 'text-red-500 font-bold' : ''">URL of the page</label>
|
||||
<span v-if="v$.url.$error" class="text-red-500"> · {{ v$.url.$errors[0].$message }}</span>
|
||||
<input type="text" name="url" id="url" class="px-4 mt-1 w-full h-8 bg-gray-50 rounded border"
|
||||
v-model="state.url" placeholder="" />
|
||||
v-model="state.url" placeholder="https://…" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="article" :class="v$.article.$error ? 'text-red-500 font-bold' : ''">HTML tag encapsulating a
|
||||
feed article</label>
|
||||
<span v-if="v$.article.$error" class="text-red-500"> · {{ v$.article.$errors[0].$message }}</span>
|
||||
<input type="text" name="article" id="article" class="px-4 mt-1 w-full h-8 bg-gray-50 rounded border"
|
||||
v-model="state.article" placeholder="" />
|
||||
v-model="state.article" placeholder="article" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="title" :class="v$.title.$error ? 'text-red-500 font-bold' : ''">HTML tag encapsulating the
|
||||
article title</label>
|
||||
<span v-if="v$.title.$error" class="text-red-500"> · {{ v$.title.$errors[0].$message }}</span>
|
||||
<input type="text" name="title" id="title" class="px-4 mt-1 w-full h-8 bg-gray-50 rounded border"
|
||||
v-model="state.title" placeholder="" />
|
||||
v-model="state.title" placeholder="h2" />
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
|
|
@ -138,65 +138,68 @@ function copyLink() {
|
|||
<label for="articleClass">Article class name</label>
|
||||
<input type="text" name="articleClass" id="articleClass"
|
||||
class="px-4 mt-1 w-full h-8 bg-gray-50 rounded border" v-model="state.articleClass"
|
||||
placeholder="" />
|
||||
placeholder="article" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="titleClass">Title class name</label>
|
||||
<input type="text" name="titleClass" id="titleClass"
|
||||
class="px-4 mt-1 w-full h-8 bg-gray-50 rounded border" v-model="state.titleClass" placeholder="" />
|
||||
class="px-4 mt-1 w-full h-8 bg-gray-50 rounded border" v-model="state.titleClass"
|
||||
placeholder="article-title" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="section">HTML tag encapsulating the group of items (section)</label>
|
||||
<input type="text" name="section" id="section" class="px-4 mt-1 w-full h-8 bg-gray-50 rounded border"
|
||||
v-model="state.section" placeholder="" />
|
||||
v-model="state.section" placeholder="section" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="sectionClass">Section class name</label>
|
||||
<input type="text" name="sectionClass" id="sectionClass"
|
||||
class="px-4 mt-1 w-full h-8 bg-gray-50 rounded border" v-model="state.sectionClass"
|
||||
placeholder="" />
|
||||
placeholder="articles" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="content">HTML tag encapsulating the content, or description, of the item</label>
|
||||
<input type="text" name="content" id="content" class="px-4 mt-1 w-full h-8 bg-gray-50 rounded border"
|
||||
v-model="state.content" placeholder="" />
|
||||
v-model="state.content" placeholder="p" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="contentClass">Content class name</label>
|
||||
<input type="text" name="contentClass" id="contentClass"
|
||||
class="px-4 mt-1 w-full h-8 bg-gray-50 rounded border" v-model="state.contentClass"
|
||||
placeholder="" />
|
||||
placeholder="description" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="link">HTML tag encapsulating the link to the item</label>
|
||||
<input type="text" name="link" id="link" class="px-4 mt-1 w-full h-8 bg-gray-50 rounded border"
|
||||
v-model="state.link" placeholder="" />
|
||||
v-model="state.link" placeholder="a" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="linkClass">Link class name</label>
|
||||
<input type="text" name="linkClass" id="linkClass"
|
||||
class="px-4 mt-1 w-full h-8 bg-gray-50 rounded border" v-model="state.linkClass" placeholder="" />
|
||||
class="px-4 mt-1 w-full h-8 bg-gray-50 rounded border" v-model="state.linkClass"
|
||||
placeholder="article-link" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="datetime">HTML tag encapsulating the date and time of the item</label>
|
||||
<input type="text" name="datetime" id="datetime" class="px-4 mt-1 w-full h-8 bg-gray-50 rounded border"
|
||||
v-model="state.datetime" placeholder="" />
|
||||
v-model="state.datetime" placeholder="time" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="datetimeClass">Datetime class name</label>
|
||||
<input type="text" name="datetimeClass" id="datetimeClass"
|
||||
class="px-4 mt-1 w-full h-8 bg-gray-50 rounded border" v-model="state.datetimeClass"
|
||||
placeholder="" />
|
||||
placeholder="article-time" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="author">HTML tag encapsulating the author of the item</label>
|
||||
<input type="text" name="author" id="author" class="px-4 mt-1 w-full h-8 bg-gray-50 rounded border"
|
||||
v-model="state.author" placeholder="" />
|
||||
v-model="state.author" placeholder="span" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="author">Author class name</label>
|
||||
<input type="text" name="authorClass" id="authorClass"
|
||||
class="px-4 mt-1 w-full h-8 bg-gray-50 rounded border" v-model="state.authorClass" placeholder="" />
|
||||
class="px-4 mt-1 w-full h-8 bg-gray-50 rounded border" v-model="state.authorClass"
|
||||
placeholder="author" />
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="flex justify-center">
|
||||
|
|
|
|||
|
|
@ -5,7 +5,10 @@ import FormComponent from "@/components/FormComponent.vue"
|
|||
|
||||
<template>
|
||||
<main>
|
||||
<h1 class="text-xl font-bold">Build an RSS feed from a webpage</h1>
|
||||
<p class="my-2">Rudibridge helps you building RSS feeds from web pages. Enter some parameters bellow (e.g. what HTML
|
||||
tag encapsulates the article, the title, the author…), and get an
|
||||
RSS feed!</p>
|
||||
<h1 class="mt-3 text-xl font-bold">Build an RSS feed from a webpage</h1>
|
||||
<FormComponent />
|
||||
</main>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in a new issue