Skip to content

Commit b5b67b3

Browse files
sebadersebader
authored
Merge pull request #293 from sebader/dev
Bigger layout updates
2 parents 416eeff + 0f28df5 commit b5b67b3

File tree

6 files changed

+498
-171
lines changed

6 files changed

+498
-171
lines changed

‎website/public/css/main.css‎

Lines changed: 48 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
#app {
2-
font-family: Tenorite, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
3-
/*margin: 5px;*/
4-
-webkit-font-smoothing: antialiased;
5-
-moz-osx-font-smoothing: grayscale;
6-
color: #2c3e50;
7-
margin-top: 0px;
8-
padding-top: 10px;
9-
overflow-x: hidden;
10-
2+
font-family: Tenorite, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
3+
/*margin: 5px;*/
4+
-webkit-font-smoothing: antialiased;
5+
-moz-osx-font-smoothing: grayscale;
6+
color: #2c3e50;
7+
margin-top: 0px;
8+
padding-top: 5px;
9+
overflow-x: hidden;
1110
}
1211

1312
.header {
@@ -19,13 +18,20 @@
1918
margin-left: 5px;
2019
}
2120

22-
h1,
23-
h2 {
24-
margin-top: 10pt;
21+
h1 {
22+
margin: 8px 0;
23+
font-size: 1.8em;
2524
}
2625

2726
h2 {
28-
font-weight: normal;
27+
margin: 8px 0;
28+
font-weight: normal;
29+
font-size: 1.5em;
30+
}
31+
32+
h3 {
33+
margin: 8px 0;
34+
font-size: 1.3em;
2935
}
3036

3137
hr {
@@ -202,5 +208,32 @@ button.action-button:hover {
202208
}
203209

204210
@media (hover: none) {
205-
.leaflet-tooltip-pane { display: none; }
206-
}
211+
.leaflet-tooltip-pane { display: none; }
212+
}
213+
214+
@media screen and (max-width: 576px) {
215+
table {
216+
width: 100%;
217+
table-layout: fixed;
218+
}
219+
220+
table td, table th {
221+
padding: 8px 5px;
222+
font-size: 14px;
223+
word-break: break-word;
224+
}
225+
226+
/* Ensure numeric cells (like bed counts) don't break and have proper width */
227+
td:nth-child(2) {
228+
white-space: nowrap;
229+
width: 80px;
230+
}
231+
232+
/* Make sure input fields take full width */
233+
input[type="number"],
234+
input[type="text"],
235+
input[type="url"] {
236+
width: 100%;
237+
box-sizing: border-box;
238+
}
239+
}

‎website/src/App.vue‎

Lines changed: 55 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,30 @@
11
<template>
2-
<div>
3-
<div class="header">
4-
<h4>{{ $t("message.siteTitle") }}</h4>
2+
<div :class="{ 'map-layout': $route.name === 'mapPage' }">
3+
<div class="header" :class="{ 'map-header': $route.name === 'mapPage' }">
4+
<h4>{{ pageTitle }}</h4>
55
<router-link :to="{ name: 'mapPage' }">{{ $t("message.map") }}</router-link> |
66
<router-link :to="{ name: 'hutListPage' }">{{ $t("message.list") }}</router-link> |
7-
<router-link :to="{ name: 'infoPage' }">{{ $t("message.info") }}</router-link> |
8-
<template v-if="isAdmin">
9-
<a href="/logout">{{ $t("message.logout") }}</a>
10-
</template>
11-
<template v-else>
12-
<a href="/login">{{ $t("message.login") }}</a>
13-
</template>
7+
<router-link :to="{ name: 'infoPage' }">{{ $t("message.info") }}</router-link>
148

159
<span style="float:right;">
1610
<span v-for="locale in $i18n.availableLocales" :key="`locale-${locale}`">
1711
<router-link
1812
:to="{ name: $route.name, params: $route.params, query: $route.query, hash: $route.hash, replace: true }"
1913
:class="{ 'disabled-link': $i18n.locale === locale }" v-if="$i18n.locale !== locale"
20-
@click.native="$i18n.locale = locale">{{ $t("message.locale" + locale) }}</router-link>
21-
<span v-else>{{ $t("message.locale" + locale) }}</span>
14+
@click.native="$i18n.locale = locale">{{ locale === 'de' ? '🇩🇪' : '🇬🇧' }}</router-link>
15+
<span v-else>{{ locale === 'de' ? '🇩🇪' : '🇬🇧' }}</span>
2216
<span v-if="locale !== $i18n.availableLocales[$i18n.availableLocales.length - 1]"> | </span>
2317
</span>
2418
</span>
25-
<hr />
19+
<hr v-if="$route.name !== 'mapPage'" />
2620

27-
<SystemMessage />
21+
<SystemMessage v-if="$route.name !== 'mapPage'" />
2822
</div>
2923
<router-view :key="$route.fullPath" :isAuthenticated="isAdmin"></router-view>
3024

31-
<hr />
25+
<hr v-if="$route.name !== 'mapPage'" />
3226

33-
<footer>{{ $t("message.footerText") }}. Commit version: {{ versionLabel }}
27+
<footer v-if="$route.name !== 'mapPage'">{{ $t("message.footerText") }}. Commit version: {{ versionLabel }}
3428
</footer>
3529
</div>
3630
</template>
@@ -59,15 +53,59 @@ export default {
5953
});
6054
},
6155
methods: {},
62-
computed: {},
56+
computed: {
57+
pageTitle() {
58+
const baseTitle = this.$t("message.siteTitle");
59+
if (this.$route.name === 'infoPage') return `${baseTitle} - ${this.$t('message.info')}`;
60+
if (this.$route.name === 'hutListPage') return `${baseTitle} - ${this.$t('message.list')}`;
61+
if (this.$route.name === 'mapPage') return `${baseTitle} - ${this.$t('message.map')}`;
62+
return baseTitle;
63+
}
64+
},
6365
components: {
6466
SystemMessage,
6567
},
6668
};
6769
</script>
6870
6971
<style>
72+
.map-layout {
73+
height: 100vh;
74+
overflow: hidden;
75+
position: relative;
76+
}
77+
78+
.map-layout .header {
79+
position: relative;
80+
z-index: 2500;
81+
background: #fff;
82+
padding: 5px 15px;
83+
margin: 0;
84+
border-bottom: 1px solid #eee;
85+
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
86+
}
87+
88+
.header {
89+
background: #fff;
90+
padding: 10px;
91+
margin-bottom: 20px;
92+
}
93+
7094
footer {
7195
font-style: italic;
7296
font-size: 0.8em;
97+
}
98+
99+
.disabled-link {
100+
opacity: 0.5;
101+
cursor: default;
102+
text-decoration: none;
103+
font-size: 1.2em;
104+
}
105+
106+
.header h4 {
107+
white-space: nowrap;
108+
overflow: hidden;
109+
text-overflow: ellipsis;
110+
margin-right: 10px;
73111
}</style>

‎website/src/components/HutListPage.vue‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
<template>
22
<section>
3-
<h1>{{ $t('hutListPage.allHuts') }}</h1>
4-
53
<p v-show="loading">{{ $t('message.loading') }}...</p>
64

75
<div v-show="!loading">
@@ -85,6 +83,11 @@
8583
</template>
8684

8785
<style scoped>
86+
section {
87+
padding: 0 16px;
88+
margin-top: -1rem;
89+
}
90+
8891
.table-container {
8992
margin-top: 2rem;
9093
}
@@ -101,6 +104,16 @@
101104
.badge {
102105
padding: 0.5em 0.75em;
103106
}
107+
108+
:deep(.vue3-easy-data-table) {
109+
width: 100%;
110+
overflow-x: auto;
111+
display: block;
112+
}
113+
114+
:deep(.vue3-easy-data-table__main) {
115+
min-width: 800px;
116+
}
104117
</style>
105118

106119
<script>

‎website/src/components/InfoPage.vue‎

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,44 @@
11
<template>
22
<div>
3-
<h3>{{ $t('infoPage.infoHeader')}}!</h3>
43
<p>{{ $t('infoPage.firstParagraph')}}</p>
54

65
<p>{{ $t('infoPage.secondParagraph')}}</p>
76

87
<p>{{ $t('infoPage.thirdParagraph')}} <a href="https://github.com/sebader/alpinehutproject" target="_blank">sebader/alpinehutproject</a></p>
8+
9+
<hr />
10+
<p>
11+
<template v-if="isAuthenticated">
12+
<a href="/logout">{{ $t("message.logout") }}</a>
13+
</template>
14+
<template v-else>
15+
<a href="/login">{{ $t("message.login") }}</a>
16+
</template>
17+
</p>
918
</div>
1019
</template>
1120

1221
<script>
1322
export default {
14-
async created() { },
23+
props: {
24+
isAuthenticated: {
25+
type: Boolean,
26+
default: false
27+
}
28+
},
1529
methods: {},
1630
computed: {},
1731
components: {}
1832
};
1933
</script>
2034

21-
<style>
35+
<style scoped>
36+
div {
37+
padding: 0 16px;
38+
margin-top: -1rem;
39+
}
2240
41+
p {
42+
margin: 16px 0;
43+
}
2344
</style>

0 commit comments

Comments
 (0)