marcorealacci/WASAPhoto
1
0
Fork 0
mirror of https://github.com/notherealmarco/WASAPhoto.git synced 2025-05-05 20:32:35 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve frontend readability, move modal to root component, add interceptors, fix usercard on XS displays

Browse source
This commit is contained in:
Marco Realacci 2022-12-13 01:48:28 +01:00
parent 6840c34d7b
commit 4881fecbca
10 changed files with 220 additions and 287 deletions
Download patch file Download diff file Expand all files Collapse all files

114
webui/src/App.vue
View file

@ -1,76 +1,80 @@
<script setup>
import { RouterLink, RouterView } from 'vue-router'
import getCurrentSession from './services/authentication';
import { updateToken } from './services/axios';
<script>
export default {
props: ["user_id", "name", "date", "comments", "likes", "photo_id", "liked"],
data: function () {
return {
modalTitle: "Modal Title",
modalMsg: "Modal Message",
}
},
methods: {
showModal(title, message) {
this.modalTitle = title;
this.modalMsg = message;
// Simulate a click on the hidden modal button to open it
this.$refs.openModal.click();
},
},
mounted() {
// Configure axios interceptors
this.$axios.interceptors.response.use(response => {
// Leave response as is
return response;
}, error => {
if (error.response != undefined) {
// If the response is 401, redirect to /login
if (error.response.status === 401) {
this.$router.push({ path: '/login' })
return
}
// Show the error message from the server in a modal
this.showModal("Error " + error.response.status, error.response.data['status'])
return
}
// Show the error message from axios in a modal
this.showModal("Error", error.toString());
return error;
});
}
}
</script>
<template>
<!--<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6" href="#/">WASAPhoto</a>
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</header>-->
<!-- Invisible button to open the modal -->
<button ref="openModal" type="button" class="btn btn-primary" style="display: none" data-bs-toggle="modal" data-bs-target="#modal" />
<!-- Modal to show error messages -->
<Modal :title="modalTitle" :message="modalMsg" />
<div class="container-fluid">
<div class="row">
<!--<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="position-sticky pt-3 sidebar-sticky">
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted text-uppercase">
<span>WASAPhoto</span>
</h6>
<ul class="nav flex-column">
<li class="nav-item">
<RouterLink to="/" class="nav-link">
<svg class="feather"><use href="/feather-sprite-v4.29.0.svg#home"/></svg>
Stream
</RouterLink>
</li>
<li class="nav-item">
<RouterLink to="/link1" class="nav-link">
<svg class="feather"><use href="/feather-sprite-v4.29.0.svg#layout"/></svg>
Search
</RouterLink>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted text-uppercase">
<span>Account</span>
</h6>
<ul class="nav flex-column">
<li class="nav-item">
<RouterLink :to="'/some/' + 'variable_here' + '/path'" class="nav-link">
<svg class="feather"><use href="/feather-sprite-v4.29.0.svg#file-text"/></svg>
Your profile
</RouterLink>
</li>
</ul>
</div>
</nav>-->
<!---<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">-->
<main class="mb-5">
<!-- The view is rendered here -->
<RouterView />
</main>
<!-- Bottom navigation buttons -->
<nav id="global-nav" class="navbar fixed-bottom navbar-light bg-light row">
<div class="collapse navbar-collapse" id="navbarNav"></div>
<RouterLink to="/" class="col-4 text-center">
<i class="bi bi-house text-dark" style="font-size: 2em"></i>
</RouterLink>
<RouterLink to="/search" class="col-4 text-center">
<i class="bi bi-search text-dark" style="font-size: 2em"></i>
</RouterLink>
<RouterLink to="/profile/me" class="col-4 text-center">
<i class="bi bi-person text-dark" style="font-size: 2em"></i>
</RouterLink>
<RouterLink to="/" class="col-4 text-center">
<i class="bi bi-house text-dark" style="font-size: 2em"></i>
</RouterLink>
<RouterLink to="/search" class="col-4 text-center">
<i class="bi bi-search text-dark" style="font-size: 2em"></i>
</RouterLink>
<RouterLink to="/profile/me" class="col-4 text-center">
<i class="bi bi-person text-dark" style="font-size: 2em"></i>
</RouterLink>
</nav>
</div>
</div>
</template>
<style>
/* Make the active navigation button a little bit bigger */
#global-nav a.router-link-active {
font-size: 1.2em
}