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> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/favicon.ico"> <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> <title>Notebrook</title>
<meta name="description" content="Light note taking app in messenger style"> <meta name="description" content="Light note taking app in messenger style">
</head> </head>

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

@@ -65,6 +65,12 @@ const handleKeydown = (event: KeyboardEvent) => {
transition: all 0.2s ease; transition: all 0.2s ease;
outline: none; outline: none;
text-decoration: 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 { .base-button:focus-visible {
@@ -81,16 +87,22 @@ const handleKeydown = (event: KeyboardEvent) => {
.base-button--sm { .base-button--sm {
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
font-size: 0.875rem; font-size: 0.875rem;
min-height: 2.75rem; /* 44px minimum for iOS touch targets */
min-width: 2.75rem;
} }
.base-button--md { .base-button--md {
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
font-size: 1rem; font-size: 1rem;
min-height: 2.75rem;
min-width: 2.75rem;
} }
.base-button--lg { .base-button--lg {
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
font-size: 1.125rem; font-size: 1.125rem;
min-height: 3rem;
min-width: 3rem;
} }
/* Variants */ /* Variants */

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

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

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

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

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

@@ -189,6 +189,12 @@ defineExpose({
overflow-y: auto; overflow-y: auto;
padding: 1rem; padding: 1rem;
background: #fafafa; 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 { .messages-container:focus {

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

@@ -160,6 +160,10 @@ defineExpose({
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
padding: 0.5rem 0; 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> <template>
<aside class="sidebar"> <aside class="sidebar">
<div class="sidebar__header"> <div class="sidebar__header">
<h1 class="sidebar__title">Notebrook</h1> <div class="sidebar__header-left">
<BaseButton <h1 class="sidebar__title">Notebrook</h1>
variant="ghost" </div>
size="sm" <div class="sidebar__header-right">
@click="$emit('create-channel')" <BaseButton
aria-label="Create new channel" variant="ghost"
> size="sm"
+ @click="$emit('create-channel')"
</BaseButton> 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>
<div class="sidebar__content"> <div class="sidebar__content">
@@ -53,6 +66,7 @@ defineEmits<{
'select-channel': [channelId: number] 'select-channel': [channelId: number]
'channel-info': [channel: Channel] 'channel-info': [channel: Channel]
'settings': [] 'settings': []
'close': []
}>() }>()
</script> </script>
@@ -76,6 +90,17 @@ defineEmits<{
flex-shrink: 0; flex-shrink: 0;
} }
.sidebar__header-left {
display: flex;
align-items: center;
}
.sidebar__header-right {
display: flex;
align-items: center;
gap: 0.5rem;
}
.sidebar__title { .sidebar__title {
margin: 0; margin: 0;
font-size: 1.25rem; font-size: 1.25rem;
@@ -99,6 +124,10 @@ defineEmits<{
flex-shrink: 0; flex-shrink: 0;
} }
.sidebar__close-button {
display: none; /* Hidden by default on desktop */
}
/* Dark mode */ /* Dark mode */
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.sidebar { .sidebar {
@@ -129,10 +158,15 @@ defineEmits<{
.sidebar__header { .sidebar__header {
padding: 1rem; padding: 1rem;
padding-top: calc(1rem + var(--safe-area-inset-top));
} }
.sidebar__title { .sidebar__title {
font-size: 1.125rem; font-size: 1.125rem;
} }
.sidebar__close-button {
display: inline-flex; /* Show on mobile */
}
} }
</style> </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 */ /* Minimal reset styles only */
* { * {
box-sizing: border-box; box-sizing: border-box;
@@ -7,7 +21,7 @@ body {
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 100vw; width: 100vw;
height: 100vh; height: var(--vh-dynamic, 100vh);
overflow: hidden; overflow: hidden;
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5; line-height: 1.5;
@@ -16,6 +30,9 @@ body {
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
/* iOS-specific optimizations */
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
} }
#app { #app {
@@ -26,6 +43,25 @@ body {
overflow: hidden; 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 */ /* Accessibility helpers */
.sr-only { .sr-only {
position: absolute; position: absolute;

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

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