DMC/seshat
1
0
Fork 0
Code Issues2 Pull Requests Actions Packages Projects Releases Wiki Activity

Restiled to work with mobile units

Browse Source 
Previously when using a mobile unit there was a vertical and horizontal scroll outside the content.

Now there is no vertical or horizontal scrolling outuside the content area, and no horizontal scrolling when using a mobile device.
This commit is contained in:
Nico Athanassiadis 2025-03-24 13:23:50 +01:00
parent e39c5daaa5
commit 3ca8101796
3 changed files with 27 additions and 13 deletions
src/main/resources
static/css
styles.css
templates
about.htmlfile-management.html

21
src/main/resources/static/css/styles.css

@ -4,7 +4,16 @@
}
.header {
padding: 6rem;
padding: 6rem 0;
.container-header {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
@media (min-width: 768px) {
flex-direction: row;
}
}
}
.header-link {
@ -29,6 +38,7 @@
font-size: 2rem;
font-weight: normal;
margin: 0;
text-align: center;
}
.header .user-menu {
@ -60,10 +70,11 @@
}
footer {
margin-top: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 6rem;
.container {
justify-content: space-between;
align-items: center;
display: flex;
}
}
html, body {

11
src/main/resources/templates/about.html

@ -10,9 +10,9 @@
</head>
<body>
<header class="header bg-primary text-white py-3">
<div class="container d-flex justify-content-between align-items-center">
<div class="container container-header">
<img th:src="@{/images/SU_logotyp_Landscape_Invert.svg}" alt="Stockholm University Logotype" class="logo">
<h1 class="app-title mb-0"><a href="/files/manage" class="header-link">Seshat Audio Transcriber</a></h1>
<h1 class="app-title"><a href="/files/manage" class="header-link">Seshat Audio Transcriber</a></h1>
<div th:if="${#authentication.name != 'anonymousUser'}" class="dropdown">
<a class="user-menu text-white text-decoration-none dropdown-toggle" href="#" id="userMenu" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
@ -37,11 +37,12 @@
<p>All processing is done locally, and no data is sent to the cloud, ensuring your privacy and data security.</p>
</main>
<footer class="bg-primary text-white py-4">
<span>&copy; 2024 Seshat App</span>
<a href="/about" class="text-white text-decoration-none">About</a>
<div class="container">
<span>&copy; 2024 Seshat App</span>
<a href="/about" class="text-white text-decoration-none">About</a>
</div>
</footer>
<script type="text/javascript" th:src="@{/3p/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js}"></script>
<script type="text/javascript" th:src="@{/3p/htmx/2.0.4/dist/htmx.min.js}"></script>
<script type="text/javascript" th:src="@{/js/script.js}"></script>
</body>
</html>

8
src/main/resources/templates/file-management.html

@ -10,7 +10,7 @@
</head>
<body>
<header class="header bg-primary text-white py-3">
<div class="container d-flex justify-content-between align-items-center">
<div class="container container-header">
<img th:src="@{/images/SU_logotyp_Landscape_Invert.svg}" alt="Stockholm University Logotype" class="logo">
<h1 class="app-title mb-0"><a href="/files/manage" class="header-link">Seshat Audio Transcriber</a></h1>
<div th:if="${#authentication.name != 'anonymousUser'}" class="dropdown">
@ -164,8 +164,10 @@
</section>
</main>
<footer class="bg-primary text-white text-center py-3">
<p>&copy; 2024 Seshat App</p>
<a href="/about" class="text-white text-decoration-none">About</a>
<div class="container">
<span>&copy; 2024 Seshat App</span>
<a href="/about" class="text-white text-decoration-none">About</a>
</div>
</footer>
<script type="text/javascript" th:src="@{/3p/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js}"></script>
<script type="text/javascript" th:src="@{/3p/htmx/2.0.4/dist/htmx.min.js}"></script>