fix: cleanup styles

- remove publicshare.css as redundant
- keep footer in place, adjust width if talk sidebar is open

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

css/publicshare.css

@@ -1,75 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-/* Special layout to include the Talk sidebar */
-
-/* The standard layout defined in the server includes a fixed header with a
- * sticky sidebar. This causes the scroll bar for the main area to appear to the
- * right of the sidebar, which looks confusing for the chat. Thus that layout is
- * overridden with a static header and a content with full height without header
- * to limit the vertical scroll bar only to it.
- * Note that the flex layout can not be cascaded from the body element, as a
- * flex display is not compatible with the absolute position set for the
- * autocompletion panel, which is reparented to the body when shown. */
-#body-user #header,
-#body-public #header {
-	/* Override fixed position from server to include it in the body layout */
-	position: static;
-}
-
-#content.full-height {
-	/* Always full height without header. */
-	height: calc(100% - 50px);
-}
-
-#content {
-	display: flex;
-	flex-direction: row;
-	overflow: hidden;
-
-	flex-grow: 1;
-
-	/* Override "min-height: 100%" and "padding-top: 50px" set in server, as the
-	 * header is part of the flex layout and thus the whole body is not
-	 * available for the content. */
-	min-height: 0;
-	padding-top: 0;
-
-	/* Override margin used in server, as the header is part of the flex layout
-	 * and thus the content does not need to be pushed down. */
-	margin-top: 0;
-}
-
-#app-content {
-	position: relative;
-
-	display: flex;
-	flex-direction: column;
-	overflow-y: auto;
-	overflow-x: hidden;
-
-	flex-grow: 1;
-
-	margin-right: 0;
-}
-
-#files-public-content {
-	flex-grow: 1;
-}
-
-#content footer {
-	position: relative;
-}
-
-#content footer p a {
-	/* The server sets an height to the footer of 65px, but its contents are
-	 * slightly larger, which causes a scroll bar to be added to the content
-	 * even if there is enough space for the app content and the footer.
-	 * The padding of links is 10px, so in practice reducing the bottom padding
-	 * only affects the bottom padding of the last element (as in adjacent
-	 * paragraphs the paddings would get merged and there will still be 10px
-	 * from the top padding of the second element). */
-	padding-bottom: 8px;
-}

lib/PublicShare/TemplateLoader.php

@@ -74,7 +74,6 @@ class TemplateLoader implements IEventListener {
 		}
 
 		Util::addStyle(Application::APP_ID, 'icons');
-		Util::addStyle(Application::APP_ID, 'publicshare');
 		Util::addScript(Application::APP_ID, 'talk-public-share-sidebar');
 
 		$this->publishInitialStateForGuest();

src/PublicShareSidebar.vue

@@ -256,6 +256,13 @@ export default {
 body .modal-wrapper * {
 	box-sizing: border-box;
 }
+
+footer {
+	transition: width var(--animation-quick);
+}
+#content-vue:has(#talk-sidebar) ~ footer {
+	width: calc(100% - 2 * var(--body-container-margin) - clamp(300px, 27vw, 500px));
+}
 </style>
 
 <style lang="scss" scoped>
@@ -263,9 +270,7 @@ body .modal-wrapper * {
 #talk-sidebar {
 	position: relative;
 	flex-shrink: 0;
-	width: 27vw;
+	width: clamp(300px, 27vw, 500px);
-	min-width: 300px;
-	max-width: 500px;
 
 	background: var(--color-main-background);
 	border-left: 1px solid var(--color-border);

src/mainPublicShareSidebar.js

@@ -43,18 +43,8 @@ Vue.use(Vuex)
 
 const pinia = createPinia()
 
-/**
- *
- */
-function adjustLayout() {
-	document.querySelector('#app-content').appendChild(document.querySelector('footer'))
-}
-
-adjustLayout()
-
 // An "isOpen" boolean should be passed to the component, but as it is a
 // primitive it would not be reactive; it needs to be wrapped in an object and
-
 // that object passed to the component to get reactivity.
 const sidebarState = reactive({
 	isOpen: false,