From c2694dc08907d2e20eea90dd97d829e8dfbfb65b Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 8 May 2022 11:13:19 +0200
Subject: [PATCH] fix: filter button alignments and backgrounds for link shares

---
 src/styles/components/list.scss  |  17 +++--
 src/styles/theme/link-share.scss |   4 +-
 src/views/list/ListGantt.vue     | 122 +++++++++++++++++--------------
 src/views/list/ListList.vue      |   5 ++
 src/views/list/ListTable.vue     |   5 ++
 5 files changed, 90 insertions(+), 63 deletions(-)

diff --git a/src/styles/components/list.scss b/src/styles/components/list.scss
index 5fbb0677..92403dd6 100644
--- a/src/styles/components/list.scss
+++ b/src/styles/components/list.scss
@@ -6,7 +6,7 @@
 // - Table.vue
 
 $filter-container-top-default: -59px;
-$filter-container-top-link-share-gantt: -138px;
+$filter-container-top-link-share-gantt: -133px;
 $filter-container-top-link-share-list: -47px;
 
 .filter-container {
@@ -91,14 +91,21 @@ $filter-container-top-link-share-list: -47px;
 .link-share-container .gantt-chart-container .filter-container,
 .gantt-chart-container .filter-container {
   right: 0;
-  margin-top: calc(#{$filter-container-top-link-share-gantt} - 2rem);
+  margin-top: calc(#{$filter-container-top-link-share-gantt - 2} - 7rem);
+}
+
+.link-share-container .gantt-chart-container .filter-container {
+  margin-top: calc(#{$filter-container-top-link-share-gantt} - 5rem);
 }
 
 .link-share-container .list-view .filter-container {
   margin-top: $filter-container-top-link-share-list - 10px;
 }
 
-.link-share-container .filter-container {
-  right: 9rem;
-  margin-top: $filter-container-top-default;
+.link-share-container.list\.table-view,
+.link-share-container.list\.list-view {
+  .filter-container {
+    right: 9rem;
+    margin-top: $filter-container-top-default;
+  }
 }
\ No newline at end of file
diff --git a/src/styles/theme/link-share.scss b/src/styles/theme/link-share.scss
index cafb41c9..bb57c9b3 100644
--- a/src/styles/theme/link-share.scss
+++ b/src/styles/theme/link-share.scss
@@ -17,8 +17,8 @@
 }
 
 .link-share-container {
-  &.has-background,
-	&.list\.kanban-view {
+	&.list\.gantt-view,
+  &.list\.kanban-view {
     .container {
       max-width: 100vw;
 
diff --git a/src/views/list/ListGantt.vue b/src/views/list/ListGantt.vue
index 82b765dd..dba346d4 100644
--- a/src/views/list/ListGantt.vue
+++ b/src/views/list/ListGantt.vue
@@ -1,75 +1,75 @@
 <template>
 	<ListWrapper class="list-gantt" :list-id="props.listId" viewName="gantt">
 		<template #header>
-		<div class="gantt-options p-4">
-			<fancycheckbox class="is-block" v-model="showTaskswithoutDates">
-				{{ $t('list.gantt.showTasksWithoutDates') }}
-			</fancycheckbox>
-			<div class="range-picker">
-				<div class="field">
-					<label class="label" for="dayWidth">{{ $t('list.gantt.size') }}</label>
-					<div class="control">
-						<div class="select">
-							<select id="dayWidth" v-model.number="dayWidth">
-								<option value="35">{{ $t('list.gantt.default') }}</option>
-								<option value="10">{{ $t('list.gantt.month') }}</option>
-								<option value="80">{{ $t('list.gantt.day') }}</option>
-							</select>
+			<card class="gantt-options">
+				<fancycheckbox class="is-block" v-model="showTaskswithoutDates">
+					{{ $t('list.gantt.showTasksWithoutDates') }}
+				</fancycheckbox>
+				<div class="range-picker">
+					<div class="field">
+						<label class="label" for="dayWidth">{{ $t('list.gantt.size') }}</label>
+						<div class="control">
+							<div class="select">
+								<select id="dayWidth" v-model.number="dayWidth">
+									<option value="35">{{ $t('list.gantt.default') }}</option>
+									<option value="10">{{ $t('list.gantt.month') }}</option>
+									<option value="80">{{ $t('list.gantt.day') }}</option>
+								</select>
+							</div>
+						</div>
+					</div>
+					<div class="field">
+						<label class="label" for="fromDate">{{ $t('list.gantt.from') }}</label>
+						<div class="control">
+							<flat-pickr
+								:config="flatPickerConfig"
+								class="input"
+								id="fromDate"
+								:placeholder="$t('list.gantt.from')"
+								v-model="dateFrom"
+							/>
+						</div>
+					</div>
+					<div class="field">
+						<label class="label" for="toDate">{{ $t('list.gantt.to') }}</label>
+						<div class="control">
+							<flat-pickr
+								:config="flatPickerConfig"
+								class="input"
+								id="toDate"
+								:placeholder="$t('list.gantt.to')"
+								v-model="dateTo"
+							/>
 						</div>
 					</div>
 				</div>
-				<div class="field">
-					<label class="label" for="fromDate">{{ $t('list.gantt.from') }}</label>
-					<div class="control">
-						<flat-pickr
-							:config="flatPickerConfig"
-							class="input"
-							id="fromDate"
-							:placeholder="$t('list.gantt.from')"
-							v-model="dateFrom"
-						/>
-					</div>
-				</div>
-				<div class="field">
-					<label class="label" for="toDate">{{ $t('list.gantt.to') }}</label>
-					<div class="control">
-						<flat-pickr
-							:config="flatPickerConfig"
-							class="input"
-							id="toDate"
-							:placeholder="$t('list.gantt.to')"
-							v-model="dateTo"
-						/>
-					</div>
-				</div>
-			</div>
-		</div>
+			</card>
 		</template>
-		
+
 		<template #default>
-		<div class="gantt-chart-container">
-		<card :padding="false" class="has-overflow">
+			<div class="gantt-chart-container">
+				<card :padding="false" class="has-overflow">
 
-		<gantt-chart
-			:date-from="dateFrom"
-			:date-to="dateTo"
-			:day-width="dayWidth"
-			:list-id="props.listId"
-			:show-taskswithout-dates="showTaskswithoutDates"
-		/>
+					<gantt-chart
+						:date-from="dateFrom"
+						:date-to="dateTo"
+						:day-width="dayWidth"
+						:list-id="props.listId"
+						:show-taskswithout-dates="showTaskswithoutDates"
+					/>
 
-		</card>
-		</div>
+				</card>
+			</div>
 		</template>
 	</ListWrapper>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import {ref, computed} from 'vue'
 import flatPickr from 'vue-flatpickr-component'
 
-import { useI18n } from 'vue-i18n'
-import { useStore } from 'vuex'
+import {useI18n} from 'vue-i18n'
+import {useStore} from 'vuex'
 
 import ListWrapper from './ListWrapper.vue'
 import GanttChart from '@/components/tasks/gantt-component.vue'
@@ -82,7 +82,7 @@ const props = defineProps({
 	},
 })
 
-const DEFAULT_DAY_COUNT = 35 
+const DEFAULT_DAY_COUNT = 35
 
 const showTaskswithoutDates = ref(false)
 const dayWidth = ref(DEFAULT_DAY_COUNT)
@@ -113,6 +113,7 @@ const flatPickerConfig = computed(() => ({
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
+	margin-bottom: 1rem;
 
 	@media screen and (max-width: $tablet) {
 		flex-direction: column;
@@ -166,4 +167,13 @@ const flatPickerConfig = computed(() => ({
 .vdr.active::before {
 	display: none;
 }
+
+.link-share-view:not(.has-background) .card.gantt-options {
+	border: none;
+	box-shadow: none;
+
+	.card-content {
+		padding: .5rem;
+	}
+}
 </style>
\ No newline at end of file
diff --git a/src/views/list/ListList.vue b/src/views/list/ListList.vue
index 3f267555..b81801de 100644
--- a/src/views/list/ListList.vue
+++ b/src/views/list/ListList.vue
@@ -373,4 +373,9 @@ export default defineComponent({
 .list-view .task-add {
 	padding: 1rem 1rem 0;
 }
+
+.link-share-view .card {
+  border: none;
+  box-shadow: none;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/list/ListTable.vue b/src/views/list/ListTable.vue
index 4fc9dd59..524bcaf4 100644
--- a/src/views/list/ListTable.vue
+++ b/src/views/list/ListTable.vue
@@ -308,4 +308,9 @@ const taskDetailRoutes = computed(() => Object.fromEntries(
 		margin: 2rem 0 1rem;
 	}
 }
+
+.link-share-view .card {
+  border: none;
+  box-shadow: none;
+}
 </style>
\ No newline at end of file