giteaadmin/ai-teacher
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved responsiveness on mobile phone

Browse Source
This commit is contained in:
Adrien
2026-04-10 13:41:26 +02:00
parent 0db31e91ab
commit 0711e40c66
16 changed files with 494 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/Dockerfile
+3 -1
View File
@@ -10,5 +10,7 @@ RUN npm run build
FROM docker.io/library/nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY docker-entrypoint.sh /docker-entrypoint.sh
RUN chmod +x /docker-entrypoint.sh
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
ENTRYPOINT ["/docker-entrypoint.sh"]
frontend/docker-entrypoint.sh
+16
View File
@@ -0,0 +1,16 @@
#!/bin/sh
set -e
# Write runtime env vars into a JS file loaded before the app bundle.
# Any VITE_* variable passed via `docker run -e` will be available as
# window.__env__.VITE_* inside the browser.
cat > /usr/share/nginx/html/env-config.js <<EOF
window.__env__ = {
VITE_API_URL: "${VITE_API_URL:-}",
VITE_APP_PASSWORD: "${VITE_APP_PASSWORD:-}",
VITE_UPLOAD_ENABLED: "${VITE_UPLOAD_ENABLED:-}",
VITE_DELETE_ENABLED: "${VITE_DELETE_ENABLED:-}"
};
EOF
exec nginx -g "daemon off;"
frontend/index.html
+1
View File
@@ -8,6 +8,7 @@
</head>
<body>
<div id="app"></div>
<script src="/env-config.js"></script>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
frontend/src/App.vue
+126 -20
View File
@@ -7,24 +7,29 @@
<span class="brand-subtitle">Neurosurgeon Learning Platform</span>
</div>
<template v-if="authStore.isAuthenticated">
<ul class="navbar-links">
<li>
<RouterLink to="/" :class="{ active: $route.path === '/' }">
<span class="nav-icon">📚</span> Library
</RouterLink>
</li>
<li>
<RouterLink to="/topics" :class="{ active: $route.path === '/topics' }">
<span class="nav-icon">🗂</span> Topics
</RouterLink>
</li>
<li>
<RouterLink to="/chat" :class="{ active: $route.path === '/chat' }">
<span class="nav-icon">💬</span> Chat
</RouterLink>
</li>
</ul>
<button class="btn btn-logout" @click="logout">Sign out</button>
<button class="burger" :class="{ open: menuOpen }" @click="menuOpen = !menuOpen" aria-label="Menu">
<span></span><span></span><span></span>
</button>
<div class="nav-drawer" :class="{ open: menuOpen }" @click="menuOpen = false">
<ul class="navbar-links">
<li>
<RouterLink to="/" :class="{ active: $route.path === '/' }">
<span class="nav-icon">📚</span> Library
</RouterLink>
</li>
<li>
<RouterLink to="/topics" :class="{ active: $route.path === '/topics' }">
<span class="nav-icon">🗂</span> Topics
</RouterLink>
</li>
<li>
<RouterLink to="/chat" :class="{ active: $route.path === '/chat' }">
<span class="nav-icon">💬</span> Chat
</RouterLink>
</li>
</ul>
<button class="btn btn-logout" @click.stop="logout">Sign out</button>
</div>
</template>
</nav>
@@ -38,16 +43,21 @@
</template>
<script setup lang="ts">
import { ref, provide } from 'vue'
import { RouterLink, RouterView, useRouter } from 'vue-router'
import { ref, provide, watch } from 'vue'
import { RouterLink, RouterView, useRouter, useRoute } from 'vue-router'
import { useAuthStore } from '@/stores/authStore'
const authStore = useAuthStore()
const router = useRouter()
const route = useRoute()
const menuOpen = ref(false)
const toastMessage = ref('')
const toastType = ref<'toast-error' | 'toast-success'>('toast-error')
// Close menu on navigation
watch(() => route.path, () => { menuOpen.value = false })
function logout() {
authStore.clearCredentials()
router.push({ name: 'login' })
@@ -94,6 +104,9 @@ body {
justify-content: space-between;
height: 64px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
position: sticky;
top: 0;
z-index: 100;
}
.navbar-brand {
@@ -118,6 +131,13 @@ body {
margin-left: 0.25rem;
}
/* Desktop: links inline */
.nav-drawer {
display: flex;
align-items: center;
gap: 0.5rem;
}
.navbar-links {
list-style: none;
display: flex;
@@ -143,6 +163,33 @@ body {
color: white;
}
/* Burger button — hidden on desktop */
.burger {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 36px;
height: 36px;
background: transparent;
border: none;
cursor: pointer;
padding: 4px;
border-radius: 6px;
}
.burger span {
display: block;
height: 2px;
background: #bee3f8;
border-radius: 2px;
transition: transform 0.2s, opacity 0.2s;
}
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.main-content {
flex: 1;
min-height: 0;
@@ -313,4 +360,63 @@ body {
font-size: 0.9rem;
margin-top: 0.5rem;
}
@media (max-width: 768px) {
.navbar {
padding: 0 1rem;
}
.brand-subtitle {
display: none;
}
/* Show burger, hide desktop drawer */
.burger {
display: flex;
}
.nav-drawer {
display: none;
position: absolute;
top: 64px;
right: 0;
left: 0;
background: #1a365d;
flex-direction: column;
align-items: stretch;
padding: 0.5rem 0 1rem;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
z-index: 99;
}
.nav-drawer.open {
display: flex;
}
.navbar-links {
flex-direction: column;
gap: 0;
}
.navbar-links a {
padding: 0.85rem 1.5rem;
border-radius: 0;
font-size: 1rem;
}
.navbar-links a:hover,
.navbar-links a.active {
background: #2b6cb0;
}
.btn-logout {
margin: 0.5rem 1.5rem 0;
width: calc(100% - 3rem);
justify-content: center;
}
.main-content {
padding: 1rem;
}
}
</style>
frontend/src/env.ts
+8
View File
@@ -0,0 +1,8 @@
/**
* Read a VITE_ env variable.
* At runtime in Docker, values come from window.__env__ (injected by docker-entrypoint.sh).
* At build time (dev / CI), values come from import.meta.env.
*/
export function env(key: string): string | undefined {
return (window as Record<string, any>).__env__?.[key] ?? (import.meta.env as Record<string, any>)[key]
}
frontend/src/services/api.ts
+2 -1
View File
@@ -1,8 +1,9 @@
import axios from 'axios'
import { useAuthStore } from '@/stores/authStore'
import { env } from '@/env'
export const api = axios.create({
baseURL: import.meta.env.VITE_API_URL ?? '/api/v1',
baseURL: env('VITE_API_URL') ?? '/api/v1',
headers: {
'Content-Type': 'application/json'
}
frontend/src/views/BookReaderView.vue
+10
View File
@@ -322,4 +322,14 @@ async function resolveImages(html: string): Promise<string> {
text-align: left;
}
.markdown-body :deep(th) { background: #f7fafc; font-weight: 600; }
@media (max-width: 768px) {
.reader-view {
max-width: 100%;
}
.reader-content {
padding: 1rem;
}
}
</style>
frontend/src/views/ChatView.vue
+22
View File
@@ -485,4 +485,26 @@ async function handleSend() {
font-size: 0.875rem;
margin-bottom: 0.75rem;
}
@media (max-width: 768px) {
.chat-layout {
height: auto;
min-height: unset;
}
.chat-reader-split {
flex-direction: column;
}
.chat-column {
min-height: 60vh;
}
.reader-panel {
width: 100%;
margin-left: 0;
margin-top: 1rem;
box-shadow: none;
}
}
</style>
frontend/src/views/LoginView.vue
+12
View File
@@ -168,4 +168,16 @@ async function handleSubmit() {
font-size: 0.95rem;
margin-top: 0.25rem;
}
@media (max-width: 768px) {
.login-wrapper {
align-items: flex-start;
padding-top: 2rem;
min-height: unset;
}
.login-card {
max-width: 100%;
}
}
</style>
frontend/src/views/UploadView.vue
+3 -2
View File
@@ -99,9 +99,10 @@
import { ref, onMounted, onUnmounted, inject } from 'vue'
import { useBookStore } from '@/stores/bookStore'
import BookCard from '@/components/BookCard.vue'
import { env } from '@/env'
const uploadEnabled = import.meta.env.VITE_UPLOAD_ENABLED !== 'false'
const deleteEnabled = import.meta.env.VITE_DELETE_ENABLED !== 'false'
const uploadEnabled = env('VITE_UPLOAD_ENABLED') !== 'false'
const deleteEnabled = env('VITE_DELETE_ENABLED') !== 'false'
const bookStore = useBookStore()
const showToast = inject<(msg: string, type?: 'error' | 'success') => void>('showToast')