Implement CRUD UI for appointment configs

Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>

3 files changed, 84 insertions, 0 deletions

diff --git a/css/app-modal.scss b/css/app-modal.scss
new file mode 100644
index 00000000..b4ea5bd8
--- /dev/null
+++ b/css/app-modal.scss
@@ -0,0 +1,76 @@
+/**
+ * Calendar App
+ *
+ * @copyright 2021 Richard Steinmetz <richard@steinmetz.cloud>
+ *
+ * @author Richard Steinmetz <richard@steinmetz.cloud>
+ *
+ * This library is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or any later version.
+ *
+ * This library is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU AFFERO GENERAL PUBLIC LICENSE for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public
+ * License along with this library.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+.appointment-config-modal {
+	overflow: auto;
+	padding: 2vw;
+	max-width: 900px;
+
+	// Subtract padding twice from max height of modal
+	max-height: calc(90vh - 4vw);
+
+	&__form {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+
+		fieldset {
+			padding: 20px 0;
+
+			header {
+				font-size: 16px;
+				margin-bottom: 3px;
+			}
+		}
+
+		.availability-select, .calendar-select {
+			display: flex;
+			flex-direction: column;
+		}
+
+		&__row {
+			&--wrapped {
+				display: flex;
+				flex-wrap: wrap;
+				gap: 10px 50px;
+
+				> div {
+					flex: 1 200px;
+				}
+			}
+		}
+
+		&__row + &__row {
+			margin-top: 10px;
+		}
+
+		// Fix calendar picker styling
+		.multiselect__tags {
+			height: unset !important;
+			margin: 0 !important;
+		}
+	}
+
+	&__submit-button {
+		margin-top: 20px;
+	}
+}
diff --git a/css/app-navigation.scss b/css/app-navigation.scss
index fe546e0d..aabdc2f5 100644
--- a/css/app-navigation.scss
+++ b/css/app-navigation.scss
@@ -8,6 +8,7 @@
  * @author Raghu Nayyar
  * @author Georg Ehrke
  * @author John Molakvoæ
+ * @author Richard Steinmetz <richard@steinmetz.cloud>
  *
  * This library is free software; you can redistribute it and/or
  * modify it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE
@@ -308,5 +309,11 @@
 				}
 			}
 		}
+
+		.appointment-config-list {
+			.app-navigation-caption {
+				margin-top: 22px;
+			}
+		}
 	}
 }
diff --git a/css/calendar.scss b/css/calendar.scss
index f8ebf8d1..ae201473 100644
--- a/css/calendar.scss
+++ b/css/calendar.scss
@@ -22,6 +22,7 @@
 @import 'app-navigation.scss';
 @import 'app-sidebar.scss';
 @import 'app-settings.scss';
+@import 'app-modal.scss';
 @import 'freebusy.scss';
 @import 'fullcalendar.scss';
 @import 'global.scss';