From 3f0c4070c19f71216a0a5ff91c8ba61c3432356b Mon Sep 17 00:00:00 2001
From: Ben Haynes <ben@rngr.org>
Date: Sat, 29 Aug 2020 08:44:49 -0400
Subject: [PATCH] responsive polish

---
 .../components/v-breadcrumb/v-breadcrumb.vue  |  7 +++++
 app/src/components/v-form/v-form.vue          | 20 +++++++++++---
 app/src/components/v-modal/v-modal.vue        |  6 +++--
 .../components/v-pagination/v-pagination.vue  | 25 ++++++++++++++++--
 app/src/layouts/cards/cards.vue               |  7 +++++
 app/src/layouts/tabular/tabular.vue           |  7 +++++
 .../collections/routes/detail/detail.vue      |  9 ++++++-
 .../field-detail/components/schema.vue        | 14 ++++++++++
 .../components/field-select/field-select.vue  | 18 +++++++++++++
 .../modules/users/routes/detail/detail.vue    | 20 +++++++++++---
 app/src/styles/mixins/type-styles.scss        |  8 +++++-
 .../header-bar-actions/header-bar-actions.vue | 26 +++++++++++--------
 .../components/header-bar/header-bar.vue      | 24 +++++++++++++----
 app/src/views/private/private-view.vue        |  3 +++
 14 files changed, 165 insertions(+), 29 deletions(-)

diff --git a/app/src/components/v-breadcrumb/v-breadcrumb.vue b/app/src/components/v-breadcrumb/v-breadcrumb.vue
index 2c7bda1ab3..85fd18037d 100644
--- a/app/src/components/v-breadcrumb/v-breadcrumb.vue
+++ b/app/src/components/v-breadcrumb/v-breadcrumb.vue
@@ -46,9 +46,12 @@ body {
 </style>
 
 <style lang="scss" scoped>
+@import '@/styles/mixins/breakpoint';
+
 .v-breadcrumb {
 	display: flex;
 	align-items: center;
+	font-size: 12px;
 
 	.section {
 		display: contents;
@@ -89,5 +92,9 @@ body {
 			}
 		}
 	}
+
+	@include breakpoint(small) {
+		font-size: inherit;
+	}
 }
 </style>
diff --git a/app/src/components/v-form/v-form.vue b/app/src/components/v-form/v-form.vue
index 205e592bdf..8b5c79952b 100644
--- a/app/src/components/v-form/v-form.vue
+++ b/app/src/components/v-form/v-form.vue
@@ -182,6 +182,8 @@ body {
 </style>
 
 <style lang="scss" scoped>
+@import '@/styles/mixins/breakpoint';
+
 .v-form {
 	&.grid {
 		display: grid;
@@ -198,15 +200,27 @@ body {
 	& > .half,
 	& > .half-left,
 	& > .half-space {
-		grid-column: start / half;
+		grid-column: start / fill;
+
+		@include breakpoint(medium) {
+			grid-column: start / half;
+		}
 	}
 
 	& > .half-right {
-		grid-column: half / full;
+		grid-column: start / fill;
+
+		@include breakpoint(medium) {
+			grid-column: half / full;
+		}
 	}
 
 	& > .full {
-		grid-column: start / full;
+		grid-column: start / fill;
+
+		@include breakpoint(medium) {
+			grid-column: start / full;
+		}
 	}
 
 	& > .fill {
diff --git a/app/src/components/v-modal/v-modal.vue b/app/src/components/v-modal/v-modal.vue
index e477688fc7..78258c6486 100644
--- a/app/src/components/v-modal/v-modal.vue
+++ b/app/src/components/v-modal/v-modal.vue
@@ -164,6 +164,7 @@ body {
 			background-color: var(--background-normal);
 			transform: translateX(-100%);
 			transition: transform var(--slow) var(--transition-out);
+			z-index: 2;
 
 			&.active {
 				transform: translateX(0);
@@ -177,16 +178,17 @@ body {
 		}
 
 		.v-overlay {
-			--v-overlay-z-index: none;
+			--v-overlay-z-index: 1;
 
 			@include breakpoint(medium) {
+				--v-overlay-z-index: none;
 				display: none;
 			}
 		}
 
 		.main {
 			flex-grow: 1;
-			padding: 8px 16px;
+			padding: 16px 16px 32px;
 			overflow: auto;
 
 			@include breakpoint(medium) {
diff --git a/app/src/components/v-pagination/v-pagination.vue b/app/src/components/v-pagination/v-pagination.vue
index 07692408c1..a471a9a8e8 100644
--- a/app/src/components/v-pagination/v-pagination.vue
+++ b/app/src/components/v-pagination/v-pagination.vue
@@ -1,11 +1,12 @@
 <template>
 	<div class="v-pagination">
-		<v-button v-if="value !== 1" :disabled="disabled" secondary icon small @click="toPrev">
+		<v-button v-if="value !== 1" class="previous" :disabled="disabled" secondary icon small @click="toPrev">
 			<v-icon name="chevron_left" />
 		</v-button>
 
 		<v-button
 			v-if="showFirstLast && value > Math.ceil(totalVisible / 2)"
+			class="page"
 			@click="toPage(1)"
 			secondary
 			small
@@ -20,6 +21,7 @@
 			v-for="page in visiblePages"
 			:key="page"
 			:class="{ active: value === page }"
+			class="page"
 			@click="toPage(page)"
 			secondary
 			small
@@ -35,6 +37,7 @@
 		<v-button
 			v-if="showFirstLast && value <= length - Math.ceil(totalVisible / 2)"
 			:class="{ active: value === length }"
+			class="page"
 			@click="toPage(length)"
 			secondary
 			small
@@ -43,7 +46,7 @@
 			{{ length }}
 		</v-button>
 
-		<v-button v-if="value !== length" :disabled="disabled" secondary icon small @click="toNext">
+		<v-button v-if="value !== length" class="next" :disabled="disabled" secondary icon small @click="toNext">
 			<v-icon name="chevron_right" />
 		</v-button>
 	</div>
@@ -130,10 +133,20 @@ body {
 </style>
 
 <style lang="scss" scoped>
+@import '@/styles/mixins/breakpoint';
+
 .v-pagination {
+	display: flex;
+
 	.gap {
 		margin: 0 4px;
 		color: var(--foreground-subdued);
+		display: none;
+		line-height: 2em;
+
+		@include breakpoint(small) {
+			display: inline;
+		}
 	}
 
 	.v-button {
@@ -144,6 +157,14 @@ body {
 		margin: 0 2px;
 		vertical-align: middle;
 
+		&.page:not(.active) {
+			display: none;
+
+			@include breakpoint(small) {
+				display: inline;
+			}
+		}
+
 		& ::v-deep {
 			.small {
 				--v-button-min-width: 32px;
diff --git a/app/src/layouts/cards/cards.vue b/app/src/layouts/cards/cards.vue
index fc8b836a73..360fa00a7e 100644
--- a/app/src/layouts/cards/cards.vue
+++ b/app/src/layouts/cards/cards.vue
@@ -401,6 +401,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@import '@/styles/mixins/breakpoint';
+
 .layout-cards {
 	padding: var(--content-padding);
 	padding-top: 0;
@@ -449,6 +451,11 @@ export default defineComponent({
 	margin: 0 8px;
 	color: var(--foreground-subdued);
 	white-space: nowrap;
+	display: none;
+
+	@include breakpoint(small) {
+		display: inline;
+	}
 }
 
 .fade-enter-active,
diff --git a/app/src/layouts/tabular/tabular.vue b/app/src/layouts/tabular/tabular.vue
index 9b0ed0c6ca..f63c92d217 100644
--- a/app/src/layouts/tabular/tabular.vue
+++ b/app/src/layouts/tabular/tabular.vue
@@ -500,6 +500,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@import '@/styles/mixins/breakpoint';
+
 .layout-tabular {
 	display: contents;
 	margin: var(--content-padding);
@@ -575,6 +577,11 @@ export default defineComponent({
 	margin: 0 8px;
 	color: var(--foreground-subdued);
 	white-space: nowrap;
+	display: none;
+
+	@include breakpoint(small) {
+		display: inline;
+	}
 }
 
 .fade-enter-active,
diff --git a/app/src/modules/collections/routes/detail/detail.vue b/app/src/modules/collections/routes/detail/detail.vue
index f115c726ca..d238114e29 100644
--- a/app/src/modules/collections/routes/detail/detail.vue
+++ b/app/src/modules/collections/routes/detail/detail.vue
@@ -362,6 +362,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@import '@/styles/mixins/breakpoint';
+
 .action-delete {
 	--v-button-background-color: var(--danger-25);
 	--v-button-color: var(--danger);
@@ -376,8 +378,13 @@ export default defineComponent({
 }
 
 .v-form {
-	padding: var(--content-padding);
+	padding: calc(var(--content-padding) * 3) var(--content-padding) var(--content-padding);
 	padding-bottom: var(--content-padding-bottom);
+
+	@include breakpoint(small) {
+		padding: var(--content-padding);
+		padding-bottom: var(--content-padding-bottom);
+	}
 }
 
 .title-loader {
diff --git a/app/src/modules/settings/routes/data-model/field-detail/components/schema.vue b/app/src/modules/settings/routes/data-model/field-detail/components/schema.vue
index 4d99ee4884..0f751d72e2 100644
--- a/app/src/modules/settings/routes/data-model/field-detail/components/schema.vue
+++ b/app/src/modules/settings/routes/data-model/field-detail/components/schema.vue
@@ -141,6 +141,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@import '@/styles/mixins/breakpoint';
+
 .type-title {
 	margin-bottom: 32px;
 }
@@ -151,8 +153,20 @@ export default defineComponent({
 	grid-template-columns: 1fr 1fr;
 }
 
+.field {
+	grid-column: 1 / span 2;
+
+	@include breakpoint(small) {
+		grid-column: 1;
+	}
+}
+
 .full {
 	grid-column: 1 / span 2;
+
+	@include breakpoint(small) {
+		grid-column: 1 / span 2;
+	}
 }
 
 .label {
diff --git a/app/src/modules/settings/routes/data-model/fields/components/field-select/field-select.vue b/app/src/modules/settings/routes/data-model/fields/components/field-select/field-select.vue
index e954ce3a79..1c1ca4698a 100644
--- a/app/src/modules/settings/routes/data-model/fields/components/field-select/field-select.vue
+++ b/app/src/modules/settings/routes/data-model/fields/components/field-select/field-select.vue
@@ -216,6 +216,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@import '@/styles/mixins/breakpoint';
+
 // The default display: contents doens't play nicely with drag and drop
 .v-menu {
 	display: block;
@@ -257,12 +259,28 @@ export default defineComponent({
 }
 
 .field {
+
 	.name {
 		flex-grow: 1;
 
 		.interface {
+			transition: opacity var(--fast) var(--transition);
 			margin-left: 4px;
 			color: var(--foreground-subdued);
+			display: none;
+			opacity: 0;
+
+			@include breakpoint(small) {
+				display: initial;
+			}
+		}
+	}
+
+	&:hover {
+		.name {
+			.interface {
+				opacity: 1;
+			}
 		}
 	}
 }
diff --git a/app/src/modules/users/routes/detail/detail.vue b/app/src/modules/users/routes/detail/detail.vue
index 0553e8265f..9543398fd6 100644
--- a/app/src/modules/users/routes/detail/detail.vue
+++ b/app/src/modules/users/routes/detail/detail.vue
@@ -350,6 +350,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
+@import '@/styles/mixins/breakpoint';
+
 .action-delete {
 	--v-button-background-color: var(--danger-25);
 	--v-button-color: var(--danger);
@@ -372,13 +374,17 @@ export default defineComponent({
 	display: flex;
 	align-items: center;
 	max-width: calc(var(--form-column-max-width) * 2 + var(--form-horizontal-gap));
-	height: 172px;
+	height: 112px;
 	margin-bottom: var(--form-vertical-gap);
 	padding: 12px;
 	background-color: var(--background-subdued);
 	border: 2px solid var(--border-normal);
 	border-radius: var(--border-radius);
 
+	@include breakpoint(small) {
+		height: 172px;
+	}
+
 	.avatar {
 		--v-icon-color: var(--foreground-subdued);
 
@@ -386,14 +392,20 @@ export default defineComponent({
 		flex-shrink: 0;
 		align-items: center;
 		justify-content: center;
-		width: 144px;
-		height: 144px;
-		margin-right: 22px;
+		width: 84px;
+		height: 84px;
+		margin-right: 16px;
 		overflow: hidden;
 		background-color: var(--background-normal);
 		border: solid var(--border-width) var(--border-normal);
 		border-radius: var(--border-radius);
 
+		@include breakpoint(small) {
+			width: 144px;
+			height: 144px;
+			margin-right: 22px;
+		}
+
 		.v-skeleton-loader {
 			width: 100%;
 			height: 100%;
diff --git a/app/src/styles/mixins/type-styles.scss b/app/src/styles/mixins/type-styles.scss
index c103d4ee76..ace29dbd3e 100644
--- a/app/src/styles/mixins/type-styles.scss
+++ b/app/src/styles/mixins/type-styles.scss
@@ -1,11 +1,17 @@
+@import '@/styles/mixins/breakpoint';
+
 @mixin type-title {
 	color: var(--foreground-normal);
 	font-weight: normal;
-	font-size: 24px;
+	font-size: 20px;
 	font-family: var(--family-sans-serif);
 	font-style: normal;
 	line-height: 29px;
 	letter-spacing: -0.8px;
+
+	@include breakpoint(small) {
+		font-size: 24px;
+	}
 }
 
 @mixin type-label {
diff --git a/app/src/views/private/components/header-bar-actions/header-bar-actions.vue b/app/src/views/private/components/header-bar-actions/header-bar-actions.vue
index 441e546e46..afef56f127 100644
--- a/app/src/views/private/components/header-bar-actions/header-bar-actions.vue
+++ b/app/src/views/private/components/header-bar-actions/header-bar-actions.vue
@@ -5,12 +5,12 @@
 		</v-button>
 
 		<div class="action-buttons">
+			<v-button class="drawer-toggle" icon rounded secondary outlined @click="$emit('toggle:drawer')">
+				<v-icon name="info" outline />
+			</v-button>
+
 			<slot />
 		</div>
-
-		<v-button class="drawer-toggle" icon rounded secondary outlined @click="$emit('toggle:drawer')">
-			<v-icon name="info" />
-		</v-button>
 	</div>
 </template>
 
@@ -39,6 +39,7 @@ export default defineComponent({
 	}
 
 	.expand {
+		--v-icon-color: var(--foreground-normal);
 		flex-shrink: 0;
 		margin-right: 8px;
 
@@ -51,18 +52,21 @@ export default defineComponent({
 		display: flex;
 		flex-shrink: 0;
 
+		.v-button.secondary {
+			--v-icon-color: var(--foreground-normal);
+		}
+
 		> *:not(:last-child) {
 			display: none;
 			margin-right: 8px;
 		}
-	}
 
-	.drawer-toggle {
-		flex-shrink: 0;
-		margin-left: 8px;
+		.drawer-toggle {
+			flex-shrink: 0;
 
-		@include breakpoint(medium) {
-			display: none;
+			@include breakpoint(medium) {
+				display: none;
+			}
 		}
 	}
 
@@ -90,7 +94,7 @@ export default defineComponent({
 
 	@include breakpoint(medium) {
 		.action-buttons ::v-deep {
-			> * {
+			> *:not(.drawer-toggle) {
 				display: inherit !important;
 			}
 		}
diff --git a/app/src/views/private/components/header-bar/header-bar.vue b/app/src/views/private/components/header-bar/header-bar.vue
index 6fb8277405..fea44c6f36 100644
--- a/app/src/views/private/components/header-bar/header-bar.vue
+++ b/app/src/views/private/components/header-bar/header-bar.vue
@@ -83,7 +83,7 @@ export default defineComponent({
 	justify-content: flex-start;
 	width: 100%;
 	height: 65px;
-	margin: 24px 0;
+	margin: 0;
 	padding: 0 12px;
 	background-color: var(--background-page);
 	box-shadow: 0;
@@ -107,23 +107,36 @@ export default defineComponent({
 		position: relative;
 		display: flex;
 		align-items: center;
-		max-width: 70%;
+		max-width: calc(100% - 12px - 44px - 120px - 12px - 8px);
 		height: 100%;
 		margin-left: 12px;
 
+		@include breakpoint(small) {
+			max-width: 70%;
+		}
+
 		&.full {
-			margin-right: 20px;
-			padding-right: 20px;
+			margin-right: 12px;
+			padding-right: 0;
+
+			@include breakpoint(small) {
+				margin-right: 20px;
+				padding-right: 20px;
+			}
 		}
 
 		.headline {
 			position: absolute;
-			top: 0;
+			top: 2px;
 			left: 0;
 			color: var(--foreground-subdued);
 			white-space: nowrap;
 			opacity: 1;
 			transition: opacity var(--fast) var(--transition);
+
+			@include breakpoint(small) {
+				top: 0;
+			}
 		}
 
 		.title {
@@ -166,6 +179,7 @@ export default defineComponent({
 	}
 
 	@include breakpoint(small) {
+		margin: 24px 0;
 		padding: 0 32px;
 	}
 }
diff --git a/app/src/views/private/private-view.vue b/app/src/views/private/private-view.vue
index f318beb47a..24d49b53fb 100644
--- a/app/src/views/private/private-view.vue
+++ b/app/src/views/private/private-view.vue
@@ -260,6 +260,9 @@ export default defineComponent({
 	height: 100%;
 	background-color: var(--background-page);
 
+	--content-padding: 12px;
+	--content-padding-bottom: 60px;
+
 	.nav-overlay {
 		--v-overlay-z-index: 49;