fix(embed): calendar header overlapping and adjust to compact design

Signed-off-by: Richard Steinmetz <[email protected]>
nextcloud · Sep 4, 2024 · 96fb2c7 · 96fb2c7
1 parent 38b658d
commit 96fb2c7
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 15 deletions.
diff --git a/css/app-navigation.scss b/css/app-navigation.scss
@@ -31,7 +31,7 @@
 		}
 
 		.button:only-child {
-			border-radius: var(--border-radius-pill);
+			border-radius: var(--border-radius-element);
 		}
 
 		.button:hover,

diff --git a/css/public.scss b/css/public.scss
@@ -8,18 +8,19 @@
 }
 
 .content.app-calendar.app-calendar-public-embedded {
+	flex-direction: column;
+
 	#embed-header {
-		position: fixed;
-		top: 0;
-		left: 0;
 		height: 50px;
 		width: 100%;
+		padding: calc(var(--default-grid-baseline) * 2);
 		box-sizing: border-box;
 		background-color: var(--color-main-background);
 		border-bottom: 1px solid var(--color-border);
 		overflow: visible;
 		z-index: 2000;
 		display: flex;
+		align-items: center;
 		justify-content: space-between;
 
 		.embed-header__date-section,
@@ -39,16 +40,20 @@
 				min-width: 150px;
 			}
 		}
+
+		.datepicker-button-section,
+		.today-button-section,
+		.view-button-section {
+			button {
+				// Header has only one row so the built-in spacing is not needed
+				margin: 0;
+			}
+		}
 	}
 
 	.app-content {
-		margin-top: 44px;
-		//position: absolute !important;
-		//top: 44px;
-		//left: 0;
-		//right: 0;
-		//bottom: 0;
-		//min-height: unset !important;
+		// Expand to full height (need to overwrite this because a flex column layout is used here)
+		flex-basis: auto;
 	}
 }
 

diff --git a/src/components/AppNavigation/EmbedTopNavigation.vue b/src/components/AppNavigation/EmbedTopNavigation.vue
@@ -3,16 +3,16 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<header :id="isWidget? 'widget-header' :'embed-header'" role="banner">
-		<div :class="isWidget?'widget-header__date-section' :'embed-header__date-section'">
+	<header :id="isWidget ? 'widget-header' : 'embed-header'" role="banner">
+		<div :class="isWidget ? 'widget-header__date-section' : 'embed-header__date-section'">
 			<AppNavigationHeaderDatePicker :is-widget="isWidget" />
 			<AppNavigationHeaderTodayButton v-if="!isWidget" />
 		</div>
-		<div :class="isWidget?'widget-header__views-section' :'embed-header__views-section'">
+		<div :class="isWidget ? 'widget-header__views-section' : 'embed-header__views-section'">
 			<AppNavigationHeaderViewButtons :is-widget="isWidget" />
 		</div>
 		<!-- TODO have one button per calendar -->
-		<div v-if="!isWidget" class="widget-header__share-section">
+		<div v-if="!isWidget" class="embed-header__share-section">
 			<Actions>
 				<template #icon>
 					<Download :size="20" decorative />