th.guenther/mareike
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New Responsive design

Browse Source
This commit is contained in:
Thomas Günther
2026-05-23 18:55:41 +02:00
parent e7e7f039b8
commit 92976fbf27
2 changed files with 27 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/app.css
+7 -9
View File
@@ -41,31 +41,29 @@ h1, h2, h3, h4, h5, h6 {
height: 80px; height: 80px;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
width: calc(100% - 40px); width: 100%;
} }
.header .anonymous-actions { .header .anonymous-actions {
position: relative; position: relative;
right: calc(-100% + 330px); right: calc(-100% + 300px);
width: 350px; width: 450px;
overflow: hidden; overflow: hidden;
border-radius: 50px 0 0 50px; border-radius: 50px 0 0 50px;
background-color: #FAFAFB !important;
text-align: right; text-align: right;
padding: 10px; padding: 10px;
top: -75px; top: -20px;
} }
.header .user-info { .header .user-info {
position: relative; position: relative;
right: calc(-100% + 275px); right: calc(-100% + 190px);
width: 295px; width: 195px;
overflow: hidden; overflow: hidden;
border-radius: 50px 0 0 50px; border-radius: 50px 0 0 50px;
background-color: #FAFAFB !important;
text-align: right; text-align: right;
padding: 10px; padding: 10px;
top: -75px; top: -20px;
} }
.header .left-side { .header .left-side {
resources/js/layouts/AppLayout.vue
+20 -3
View File
@@ -84,8 +84,8 @@ const props = defineProps({
<label id="show_username" v-if="globalProps.user !== null">Willkommen, {{ globalProps.user.nicename }}</label> <label id="show_username" v-if="globalProps.user !== null">Willkommen, {{ globalProps.user.nicename }}</label>
</div> </div>
<div class="header-actions"> <div class="header-actions" v-if="globalProps.user !== null">
<div class="user-info" v-if="globalProps.user !== null"> <div class="user-info">
<a href="/messages" class="header-link-anonymous" title="Meine Nachrichten"> <a href="/messages" class="header-link-anonymous" title="Meine Nachrichten">
<Icon name="envelope" /> <Icon name="envelope" />
</a> </a>
@@ -96,11 +96,14 @@ const props = defineProps({
<Icon name="lock" /> <Icon name="lock" />
</a> </a>
</div> </div>
<div class="anonymous-actions" v-else> </div>
<div class="anonymous-header-actions-mark" v-else>
<div class="anonymous-actions">
<a href="/register" class="header-link-anonymous">Registrieren</a> <a href="/register" class="header-link-anonymous">Registrieren</a>
<a href="/login" class="header-link-anonymous">Anmelden</a> <a href="/login" class="header-link-anonymous">Anmelden</a>
</div> </div>
</div> </div>
</div> </div>
<!-- Flexbox: Sidebar + Content --> <!-- Flexbox: Sidebar + Content -->
@@ -208,10 +211,18 @@ const props = defineProps({
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.anonymous-header-actions-mark {
display: flex;
align-items: center;
flex-shrink: 0;
width: 300px;
}
.header-actions { .header-actions {
display: flex; display: flex;
align-items: center; align-items: center;
flex-shrink: 0; flex-shrink: 0;
width: 200px;
} }
.header-link-anonymous, .header-link-anonymous,
@@ -457,12 +468,18 @@ const props = defineProps({
flex-direction: column; flex-direction: column;
gap: 2px; gap: 2px;
font-size: 0.8rem; font-size: 0.8rem;
width: 250px !important;
}
.anonymous-header-actions-mark {
width: 100%;
} }
.header-link-anonymous, .header-link-anonymous,
.header-link-anonymous-logout { .header-link-anonymous-logout {
padding: 6px 8px; padding: 6px 8px;
font-size: 0.75rem; font-size: 0.75rem;
display: inline;
} }
.footer-hide-mobile { .footer-hide-mobile {