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 { .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 { .header-link {
@ -29,6 +38,7 @@
font-size: 2rem; font-size: 2rem;
font-weight: normal; font-weight: normal;
margin: 0; margin: 0;
text-align: center;
} }
.header .user-menu { .header .user-menu {
@ -60,10 +70,11 @@
} }
footer { footer {
margin-top: 1rem; margin-top: 1rem;
display: flex; .container {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0 6rem; display: flex;
}
} }
html, body { html, body {

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

@ -10,9 +10,9 @@
</head> </head>
<body> <body>
<header class="header bg-primary text-white py-3"> <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"> <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"> <div th:if="${#authentication.name != 'anonymousUser'}" class="dropdown">
<a class="user-menu text-white text-decoration-none dropdown-toggle" href="#" id="userMenu" role="button" <a class="user-menu text-white text-decoration-none dropdown-toggle" href="#" id="userMenu" role="button"
data-bs-toggle="dropdown" aria-expanded="false"> 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> <p>All processing is done locally, and no data is sent to the cloud, ensuring your privacy and data security.</p>
</main> </main>
<footer class="bg-primary text-white py-4"> <footer class="bg-primary text-white py-4">
<span>&copy; 2024 Seshat App</span> <div class="container">
<a href="/about" class="text-white text-decoration-none">About</a> <span>&copy; 2024 Seshat App</span>
<a href="/about" class="text-white text-decoration-none">About</a>
</div>
</footer> </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/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="@{/3p/htmx/2.0.4/dist/htmx.min.js}"></script>
<script type="text/javascript" th:src="@{/js/script.js}"></script>
</body> </body>
</html> </html>

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

@ -10,7 +10,7 @@
</head> </head>
<body> <body>
<header class="header bg-primary text-white py-3"> <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"> <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 mb-0"><a href="/files/manage" class="header-link">Seshat Audio Transcriber</a></h1>
<div th:if="${#authentication.name != 'anonymousUser'}" class="dropdown"> <div th:if="${#authentication.name != 'anonymousUser'}" class="dropdown">
@ -164,8 +164,10 @@
</section> </section>
</main> </main>
<footer class="bg-primary text-white text-center py-3"> <footer class="bg-primary text-white text-center py-3">
<p>&copy; 2024 Seshat App</p> <div class="container">
<a href="/about" class="text-white text-decoration-none">About</a> <span>&copy; 2024 Seshat App</span>
<a href="/about" class="text-white text-decoration-none">About</a>
</div>
</footer> </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/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="@{/3p/htmx/2.0.4/dist/htmx.min.js}"></script>