mirror of
https://github.com/Ocelot-Social-Community/ocelot.social.git
synced 2026-04-06 01:25:18 +00:00
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:
commit
85b4ec1259
@ -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);
|
||||
|
||||
99
docs/.vuepress/components/DemoLoginLocalized.vue
Normal file
99
docs/.vuepress/components/DemoLoginLocalized.vue
Normal 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>
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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 d’accè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 l’utilisateur</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>
|
||||
|
||||
|
||||
@ -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 à l’adresse
|
||||
[https://stage.ocelot.social](https://stage.ocelot.social)
|
||||
avec les données d’accès suivantes :
|
||||
|
||||
| Courriel | Mot de passe | Rôle de l’utilisateur |
|
||||
| :--- | :--- | :--- |
|
||||
| `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
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user