Merge pull request #317 from Ocelot-Social-Community/make-test-live-demo-componente

fix(content): make table in 'DemoLoginLocalized.vue' scrollable on mobile
This commit is contained in:
Ulf Gebhardt 2026-03-17 16:19:42 +01:00 committed by GitHub
commit 85b4ec1259
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 117 additions and 206 deletions

View File

@ -1,4 +1,5 @@
import { defineClientConfig } from "vuepress/client";
import DemoLoginLocalized from "./components/DemoLoginLocalized.vue";
import DonationBar from "./components/DonationBar.vue";
import MiniBlog from "./components/MiniBlog.vue";
import RoadmapProgress from "./components/RoadmapProgress.vue";
@ -6,6 +7,7 @@ import RedirectHome from "./components/RedirectHome.vue";
export default defineClientConfig({
enhance({ app }) {
app.component("DemoLoginLocalized", DemoLoginLocalized);
app.component("DonationBar", DonationBar);
app.component("MiniBlog", MiniBlog);
app.component("RoadmapProgress", RoadmapProgress);

View File

@ -0,0 +1,99 @@
<template>
<div :class="{ center: centered }">
<p>
{{ t.introBefore }}
<a href="https://stage.ocelot.social" target="_blank" rel="noopener noreferrer">https://stage.ocelot.social</a>
{{ t.introAfter }}
</p>
<div class="table-scroll">
<table>
<thead>
<tr>
<th style="text-align:left;">{{ t.email }}</th>
<th style="text-align:left;">{{ t.password }}</th>
<th style="text-align:left;">{{ t.role }}</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left;"><code>user@example.org</code></td>
<td style="text-align:left;">1234</td>
<td style="text-align:left;">{{ t.userRole }}</td>
</tr>
<tr>
<td style="text-align:left;"><code>moderator@example.org</code></td>
<td style="text-align:left;">1234</td>
<td style="text-align:left;">{{ t.moderatorRole }}</td>
</tr>
<tr>
<td style="text-align:left;"><code>admin@example.org</code></td>
<td style="text-align:left;">1234</td>
<td style="text-align:left;">{{ t.adminRole }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script setup>
import { computed } from "vue"
import { useRouteLocale } from "vuepress/client"
defineProps({
centered: { type: Boolean, default: true },
})
const i18n = {
"/de/": {
introBefore: "Teste die Live-Demo auf",
introAfter: "mit den folgenden Zugangsdaten:",
email: "E-Mail",
password: "Passwort",
role: "Benutzerrolle",
userRole: "normaler Nutzer",
moderatorRole: "Moderator",
adminRole: "Administrator",
},
"/en/": {
introBefore: "Test the live demo at",
introAfter: "with the following access data:",
email: "E-mail",
password: "Password",
role: "User role",
userRole: "normal user",
moderatorRole: "moderator",
adminRole: "administrator",
},
"/es/": {
introBefore: "Prueba la demo en vivo en",
introAfter: "con los siguientes datos de acceso:",
email: "E-mail",
password: "Contraseña",
role: "Rol de usuario",
userRole: "usuario normal",
moderatorRole: "moderador",
adminRole: "administrador",
},
"/fr/": {
introBefore: "Testes la démo en direct sur",
introAfter: "avec les données d\u0027accès suivantes :",
email: "Courriel",
password: "Mot de passe",
role: "Rôle de l\u0027utilisateur",
userRole: "utilisateur normal",
moderatorRole: "modérateur",
adminRole: "administrateur",
},
}
const locale = useRouteLocale()
const t = computed(() => i18n[locale.value] ?? i18n["/en/"])
</script>
<style scoped>
.table-scroll {
overflow-x: auto;
}
</style>

View File

@ -232,48 +232,7 @@ description: Eine freie Open-Source-Software, mit der du ein soziales Netzwerk f
<h2 class="large-header">Probier es aus</h2>
<!--
| E-Mail | Passwort | Benutzerrolle |
| :--- | :--- | :--- |
| `user@example.org` | 1234 | normaler Nutzer |
| `moderator@example.org` | 1234 | Moderator |
| `admin@example.org` | 1234 | Administrator |
-->
<div class="center">
<p>
Teste die Live-Demo auf
<a href="https://stage.ocelot.social" target="_blank">https://stage.ocelot.social</a>
mit den folgenden Zugangsdaten:
</p>
<table>
<thead>
<tr>
<th style="text-align:left;">E-Mail</th>
<th style="text-align:left;">Passwort</th>
<th style="text-align:left;">Benutzerrolle</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left;"><code>user@example.org</code></td>
<td style="text-align:left;">1234</td>
<td style="text-align:left;">normaler Nutzer</td>
</tr>
<tr>
<td style="text-align:left;"><code>moderator@example.org</code></td>
<td style="text-align:left;">1234</td>
<td style="text-align:left;">Moderator</td>
</tr>
<tr>
<td style="text-align:left;"><code>admin@example.org</code></td>
<td style="text-align:left;">1234</td>
<td style="text-align:left;">Administrator</td>
</tr>
</tbody>
</table>
</div>
<DemoLoginLocalized />
<h2 class="large-header">Loslegen</h2>

View File

@ -9,15 +9,9 @@ description: Bereit für dein eigenes soziales Netzwerk? Erfahre, wie du die oce
## Ausprobieren, dann installieren
Teste die Live-Demo auf
[https://stage.ocelot.social](https://stage.ocelot.social)
mit den folgenden Zugangsdaten:
| E-Mail | Passwort | Benutzerrolle |
| :--- | :--- | :--- |
| `user@example.org` | 1234 | normaler Nutzer |
| `moderator@example.org` | 1234 | Moderator |
| `admin@example.org` | 1234 | Administrator |
<!-- markdownlint-disable MD033 -->
<DemoLoginLocalized :centered="false" />
<!-- markdownlint-enable MD033 -->
## Hosting auf einem Server

View File

@ -233,48 +233,7 @@ description: A free and open source software with which you can operate a social
<h2 class="large-header">Try it out</h2>
<!--
| E-Mail | Passwort | Benutzerrolle |
| :--- | :--- | :--- |
| `user@example.org` | 1234 | normaler Nutzer |
| `moderator@example.org` | 1234 | Moderator |
| `admin@example.org` | 1234 | Administrator |
-->
<div class="center">
<p>
Test the live demo on
<a href="https://stage.ocelot.social" target="_blank">https://stage.ocelot.social</a>
with the following access data:
</p>
<table>
<thead>
<tr>
<th style="text-align:left;">E-mail</th>
<th style="text-align:left;">Password</th>
<th style="text-align:left;">User role</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left;"><code>user@example.org</code></td>
<td style="text-align:left;">1234</td>
<td style="text-align:left;">normal user</td>
</tr>
<tr>
<td style="text-align:left;"><code>moderator@example.org</code></td>
<td style="text-align:left;">1234</td>
<td style="text-align:left;">moderator</td>
</tr>
<tr>
<td style="text-align:left;"><code>admin@example.org</code></td>
<td style="text-align:left;">1234</td>
<td style="text-align:left;">administrator</td>
</tr>
</tbody>
</table>
</div>
<DemoLoginLocalized />
<h2 class="large-header">Get started</h2>

View File

@ -9,15 +9,9 @@ description: Ready to get started with your own social network? Learn how to ins
## Try it out, then install it
Test the live demo at
[https://stage.ocelot.social](https://stage.ocelot.social)
with the following access data:
| E-mail | Password | User role |
| :--- | :--- | :--- |
| `user@example.org` | 1234 | normal user |
| `moderator@example.org` | 1234 | moderator |
| `admin@example.org` | 1234 | administrator |
<!-- markdownlint-disable MD033 -->
<DemoLoginLocalized :centered="false" />
<!-- markdownlint-enable MD033 -->
## Hosting on a server

View File

@ -199,50 +199,7 @@ description: "Un software libre y de código abierto con el que puedes gestionar
<h2 class="large-header">Pruébalo</h2>
<!--
| E-Mail | Passwort | Benutzerrolle |
| :--- | :--- | :--- |
| `user@example.org` | 1234 | normaler Nutzer |
| `moderator@example.org` | 1234 | Moderator |
| `admin@example.org` | 1234 | Administrator |
-->
<div class="center">
<p>
Prueba la demostración en vivo en
<a href="https://stage.ocelot.social" target="_blank">https://stage.ocelot.social</a>
con los siguientes datos de acceso:
</p>
<table>
<thead>
<tr>
<th style="text-align:left;">E-mail</th>
<th style="text-align:left;">Contraseña</th>
<th style="text-align:left;">Rol de usuario</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left;"><code>user@example.org</code></td>
<td style="text-align:left;">1234
</td>
<td style="text-align:left;">usuario normal</td>
</tr>
<tr>
<td style="text-align:left;"><code>moderator@example.org</code></td>
<td style="text-align:left;">1234</td>
<td style="text-align:left;">moderador</td>
</tr>
<tr>
<td style="text-align:left;"><code>admin@example.org</code></td>
<td style="text-align:left;">1234</td>
<td style="text-align:left;">administrador</td>
</tr>
</tbody>
</table>
</div>
<DemoLoginLocalized />
<h2 class="large-header">Comienza</h2>

View File

@ -9,15 +9,9 @@ description: ¿Listo para crear tu propia red social? Descubre cómo instalar el
## Pruébalo, luego instálalo
Prueba la demo en vivo en
[https://stage.ocelot.social](https://stage.ocelot.social)
con los siguientes datos de acceso:
| Correo electrónico | Contraseña | Rol de usuario |
| :--- | :--- | :--- |
| `user@example.org` | 1234 | usuario normal |
| `moderator@example.org` | 1234 | moderador |
| `admin@example.org` | 1234 | administrador |
<!-- markdownlint-disable MD033 -->
<DemoLoginLocalized :centered="false" />
<!-- markdownlint-enable MD033 -->
## Hospedaje en un servidor

View File

@ -233,48 +233,7 @@ description: Un logiciel libre et open source avec lequel tu peux gérer un rés
<h2 class="large-header">Essayes-le</h2>
<!--
| E-Mail | Passwort | Benutzerrolle |
| :--- | :--- | :--- |
| `user@example.org` | 1234 | normaler Nutzer |
| `moderator@example.org` | 1234 | Moderator |
| `admin@example.org` | 1234 | Administrator |
-->
<div class="center">
<p>
Testes la démo en direct sur
<a href="https://stage.ocelot.social" target="_blank">https://stage.ocelot.social</a>
avec les données daccès suivantes :
</p>
<table>
<thead>
<tr>
<th style="text-align:left;">Courriel</th>
<th style="text-align:left;">Mot de passe</th>
<th style="text-align:left;">Rôle de lutilisateur</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left;"><code>user@example.org</code></td>
<td style="text-align:left;">1234</td>
<td style="text-align:left;">utilisateur normal</td>
</tr>
<tr>
<td style="text-align:left;"><code>moderator@example.org</code></td>
<td style="text-align:left;">1234</td>
<td style="text-align:left;">modérateur</td>
</tr>
<tr>
<td style="text-align:left;"><code>admin@example.org</code></td>
<td style="text-align:left;">1234</td>
<td style="text-align:left;">administrateur</td>
</tr>
</tbody>
</table>
</div>
<DemoLoginLocalized />
<h2 class="large-header">Commence</h2>

View File

@ -9,15 +9,9 @@ description: Prêt à démarrer ton propre réseau social ? Apprends à installe
## Essaies-le, puis installes-le
Testes la démo en direct à ladresse
[https://stage.ocelot.social](https://stage.ocelot.social)
avec les données daccès suivantes :
| Courriel | Mot de passe | Rôle de lutilisateur |
| :--- | :--- | :--- |
| `user@example.org` | 1234 | utilisateur normal |
| `moderator@example.org` | 1234 | modérateur |
| `admin@example.org` | 1234 | administrateur |
<!-- markdownlint-disable MD033 -->
<DemoLoginLocalized :centered="false" />
<!-- markdownlint-enable MD033 -->
## Hébergement sur un serveur