Talon/notebrook-notes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Try some style fixes

Browse Source
This commit is contained in:
Talon
2025-08-26 14:38:57 +02:00
parent 5c76c35d81
commit 28f6fad818
9 changed files with 130 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend-vue/index.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>Notebrook</title>
<meta name="description" content="Light note taking app in messenger style">
</head>

12
frontend-vue/src/components/base/BaseButton.vue
View File

@@ -65,6 +65,12 @@ const handleKeydown = (event: KeyboardEvent) => {
transition: all 0.2s ease;
outline: none;
text-decoration: none;
/* iOS-specific optimizations */
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
.base-button:focus-visible {
@@ -81,16 +87,22 @@ const handleKeydown = (event: KeyboardEvent) => {
.base-button--sm {
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
min-height: 2.75rem; /* 44px minimum for iOS touch targets */
min-width: 2.75rem;
}
.base-button--md {
padding: 0.75rem 1rem;
font-size: 1rem;
min-height: 2.75rem;
min-width: 2.75rem;
}
.base-button--lg {
padding: 1rem 1.5rem;
font-size: 1.125rem;
min-height: 3rem;
min-width: 3rem;
}
/* Variants */

3
frontend-vue/src/components/base/BaseTextarea.vue
View File

@@ -157,6 +157,9 @@ defineExpose({
outline: none;
resize: vertical;
min-height: 3rem;
/* iOS-specific optimizations */
-webkit-appearance: none;
-webkit-border-radius: 8px;
}
.base-textarea__field:focus {

1
frontend-vue/src/components/chat/MessageInput.vue
View File

@@ -76,6 +76,7 @@ defineExpose({
<style scoped>
.message-input-container {
padding: 1rem;
padding-bottom: calc(1rem + var(--safe-area-inset-bottom));
background: white;
border-top: 1px solid #e5e7eb;
}

6
frontend-vue/src/components/chat/MessagesContainer.vue
View File

@@ -189,6 +189,12 @@ defineExpose({
overflow-y: auto;
padding: 1rem;
background: #fafafa;
/* iOS-specific scroll optimizations */
-webkit-overflow-scrolling: touch;
-webkit-scroll-behavior: smooth;
scroll-behavior: smooth;
scroll-padding-top: 1rem;
scroll-padding-bottom: 1rem;
}
.messages-container:focus {

4
frontend-vue/src/components/sidebar/ChannelList.vue
View File

@@ -160,6 +160,10 @@ defineExpose({
flex: 1;
overflow-y: auto;
padding: 0.5rem 0;
/* iOS-specific scroll optimizations */
-webkit-overflow-scrolling: touch;
-webkit-scroll-behavior: smooth;
scroll-behavior: smooth;
}

52
frontend-vue/src/components/sidebar/Sidebar.vue
View File

@@ -1,15 +1,28 @@
<template>
<aside class="sidebar">
<div class="sidebar__header">
<h1 class="sidebar__title">Notebrook</h1>
<BaseButton
variant="ghost"
size="sm"
@click="$emit('create-channel')"
aria-label="Create new channel"
>
+
</BaseButton>
<div class="sidebar__header-left">
<h1 class="sidebar__title">Notebrook</h1>
</div>
<div class="sidebar__header-right">
<BaseButton
variant="ghost"
size="sm"
@click="$emit('create-channel')"
aria-label="Create new channel"
>
+
</BaseButton>
<BaseButton
variant="ghost"
size="sm"
class="sidebar__close-button"
@click="$emit('close')"
aria-label="Close sidebar"
>
✕
</BaseButton>
</div>
</div>
<div class="sidebar__content">
@@ -53,6 +66,7 @@ defineEmits<{
'select-channel': [channelId: number]
'channel-info': [channel: Channel]
'settings': []
'close': []
}>()
</script>
@@ -76,6 +90,17 @@ defineEmits<{
flex-shrink: 0;
}
.sidebar__header-left {
display: flex;
align-items: center;
}
.sidebar__header-right {
display: flex;
align-items: center;
gap: 0.5rem;
}
.sidebar__title {
margin: 0;
font-size: 1.25rem;
@@ -99,6 +124,10 @@ defineEmits<{
flex-shrink: 0;
}
.sidebar__close-button {
display: none; /* Hidden by default on desktop */
}
/* Dark mode */
@media (prefers-color-scheme: dark) {
.sidebar {
@@ -129,10 +158,15 @@ defineEmits<{
.sidebar__header {
padding: 1rem;
padding-top: calc(1rem + var(--safe-area-inset-top));
}
.sidebar__title {
font-size: 1.125rem;
}
.sidebar__close-button {
display: inline-flex; /* Show on mobile */
}
}
</style>

38
frontend-vue/src/style.css
View File

@@ -1,3 +1,17 @@
/* CSS Custom Properties for iOS Safe Areas and Dynamic Viewport */
:root {
--safe-area-inset-top: env(safe-area-inset-top, 0);
--safe-area-inset-right: env(safe-area-inset-right, 0);
--safe-area-inset-bottom: env(safe-area-inset-bottom, 0);
--safe-area-inset-left: env(safe-area-inset-left, 0);
/* Dynamic viewport height that accounts for iOS Safari UI changes */
--vh-actual: 100vh;
--vh-small: 100svh; /* Small viewport height - excludes browser UI */
--vh-large: 100lvh; /* Large viewport height - includes browser UI */
--vh-dynamic: 100dvh; /* Dynamic viewport height - changes with browser UI */
}
/* Minimal reset styles only */
* {
box-sizing: border-box;
@@ -7,7 +21,7 @@ body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
height: var(--vh-dynamic, 100vh);
overflow: hidden;
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
@@ -16,6 +30,9 @@ body {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* iOS-specific optimizations */
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
#app {
@@ -26,6 +43,25 @@ body {
overflow: hidden;
}
/* iOS-specific touch and interaction optimizations */
* {
/* Disable callouts and text selection on iOS for better touch interactions */
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
/* Allow text selection for content areas */
input, textarea, [contenteditable="true"], .allow-select {
-webkit-user-select: text;
user-select: text;
}
/* Enable momentum scrolling globally for iOS */
* {
-webkit-overflow-scrolling: touch;
}
/* Accessibility helpers */
.sr-only {
position: absolute;

30
frontend-vue/src/views/MainView.vue
View File

@@ -36,6 +36,7 @@
@select-channel="(id) => { selectChannel(id); sidebarOpen = false }"
@channel-info="handleChannelInfo"
@settings="showSettings = true"
@close="sidebarOpen = false"
/>
<!-- Main Content -->
@@ -600,7 +601,7 @@ onMounted(async () => {
<style scoped>
.main-view {
display: flex;
height: 100vh;
height: var(--vh-dynamic, 100vh);
background: #ffffff;
}
@@ -642,20 +643,34 @@ onMounted(async () => {
align-items: center;
justify-content: space-between;
padding: 1rem;
padding-top: calc(1rem + var(--safe-area-inset-top));
padding-left: calc(1rem + var(--safe-area-inset-left));
padding-right: calc(1rem + var(--safe-area-inset-right));
background: #f9fafb;
border-bottom: 1px solid #e5e7eb;
position: sticky;
position: fixed;
top: 0;
z-index: 100;
left: 0;
right: 0;
z-index: 500; /* Higher than sidebar to prevent conflicts */
}
.mobile-menu-button,
.mobile-search-button {
background: none;
border: none;
padding: 0.5rem;
padding: 0.75rem;
cursor: pointer;
color: #6b7280;
min-height: 2.75rem; /* 44px minimum for iOS */
min-width: 2.75rem;
display: flex;
align-items: center;
justify-content: center;
/* iOS-specific optimizations */
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
.mobile-menu-button:hover,
@@ -685,7 +700,7 @@ onMounted(async () => {
@media (max-width: 768px) {
.main-view {
flex-direction: column;
height: 100vh;
height: var(--vh-dynamic, 100vh);
}
.mobile-header {
@@ -697,10 +712,10 @@ onMounted(async () => {
position: fixed;
top: 0;
left: 0;
height: 100vh;
height: var(--vh-dynamic, 100vh);
transform: translateX(-100%);
transition: transform 0.3s ease;
z-index: 300;
z-index: 400; /* Lower than mobile header but higher than overlay */
}
.sidebar.sidebar-open {
@@ -714,6 +729,7 @@ onMounted(async () => {
.main-content {
flex: 1;
overflow: hidden;
padding-top: calc(4rem + var(--safe-area-inset-top)); /* Account for fixed header height */
}
.chat-container {