Adds sticky style to top content in commit details

před 2 roky · 26cf19cbf3
--- a/src/webviews/apps/commitDetails/commitDetails.html
+++ b/src/webviews/apps/commitDetails/commitDetails.html
@ -6,8 +6,6 @@

 	<body class="preload">
 		<div class="commit-detail-panel">
 			<!-- commitDetails:header -->
 			<!-- commitDetails:choices -->
 			<div class="commit-detail-panel__none" id="empty" aria-hidden="true">
 				<!-- <p><code-icon icon="warning"></code-icon> <span>No commit selected</span></p> -->
 				<p>Open a file with commit history or pick a specific commit to see commit details.</p>
@ -28,47 +26,45 @@
 				</p> -->
 			</div>
 			<main class="commit-details commit-detail-panel__main" id="main" tabindex="-1">
 				<div class="commit-details__commit">
 					<div class="commit-details__top">
 						<ul class="commit-details__authors" aria-label="Authors">
 							<li class="commit-details__author" data-region="author">
 								<skeleton-loader></skeleton-loader>
 							</li>
 						</ul>
 						<a
 							class="commit-details__commit-action"
 							href="#"
 							data-action="commit-actions-pin"
 							aria-label="Pin Commit to View"
 							title="Pin Commit to View"
 							><code-icon icon="pin" data-region="commit-pin"></code-icon
 						></a>
 						<a
 							class="commit-details__commit-action"
 							href="#"
 							data-action="commit-actions-sha"
 							aria-label="Copy SHA
 				<div class="commit-details__top">
 					<ul class="commit-details__authors" aria-label="Authors">
 						<li class="commit-details__author" data-region="author">
 							<skeleton-loader></skeleton-loader>
 						</li>
 					</ul>
 					<a
 						class="commit-details__commit-action"
 						href="#"
 						data-action="commit-actions-pin"
 						aria-label="Pin Commit to View"
 						title="Pin Commit to View"
 						><code-icon icon="pin" data-region="commit-pin"></code-icon
 					></a>
 					<a
 						class="commit-details__commit-action"
 						href="#"
 						data-action="commit-actions-sha"
 						aria-label="Copy SHA
 [⌥] Pick Commit..."
 							title="Copy SHA
 						title="Copy SHA
 [⌥] Pick Commit..."
 						>
 							<code-icon icon="git-commit"></code-icon>
 							<span class="commit-details__sha" data-region="shortsha"></span
 						></a>
 						<a
 							class="commit-details__commit-action"
 							href="#"
 							data-action="commit-actions-more"
 							aria-label="Show Commit Actions"
 							title="Show Commit Actions"
 							><code-icon icon="kebab-vertical"></code-icon
 						></a>
 					</div>
 					<div class="commit-details__message">
 						<p class="commit-details__message-text" data-region="message">
 							<skeleton-loader></skeleton-loader>
 						</p>
 					</div>
 					>
 						<code-icon icon="git-commit"></code-icon>
 						<span class="commit-details__sha" data-region="shortsha"></span
 					></a>
 					<a
 						class="commit-details__commit-action"
 						href="#"
 						data-action="commit-actions-more"
 						aria-label="Show Commit Actions"
 						title="Show Commit Actions"
 						><code-icon icon="kebab-vertical"></code-icon
 					></a>
 				</div>
 				<div class="commit-details__message">
 					<p class="commit-details__message-text" data-region="message">
 						<skeleton-loader></skeleton-loader>
 					</p>
 				</div>

 				<webview-pane collapsable expanded data-region="rich-pane">
--- a/src/webviews/apps/commitDetails/commitDetails.scss
+++ b/src/webviews/apps/commitDetails/commitDetails.scss
@ -1,16 +1,10 @@
 // @import '../shared/base';
 // @import '../shared/buttons';
 // @import '../shared/icons';

 :root {
 	--gitlens-gutter-width: 20px;
 	--gitlens-scrollbar-gutter-width: 10px;
 	--gitlens-view-background-color: #fafafa;
 }

 // generic resets
 html {
 	// height: 100%;
 	font-size: 62.5%;
 	box-sizing: border-box;
 	font-family: var(--font-family);
@ -25,7 +19,6 @@ html {
 }

 body {
 	// height: 100%;
 	font-family: var(--font-family);
 	font-size: var(--font-size);
 	color: var(--color-foreground);
@ -152,26 +145,21 @@ ul {
 }

 .commit-details {
 	&__commit {
 		padding: {
 			// 1.5rem
 			left: var(--gitlens-gutter-width);
 			right: var(--gitlens-scrollbar-gutter-width);
 		}
 		// background-color: var(--color-background--lighten-05);
 		margin-bottom: 1.75rem;

 		display: flex;
 		flex-direction: column;
 		gap: 1.5rem;
 	}

 	&__top {
 		position: sticky;
 		top: 0;
 		z-index: 1;
 		display: flex;
 		flex-direction: row;
 		align-items: flex-start;
 		justify-content: space-between;
 		// gap: 0.5rem;
 		padding: {
 			top: 1rem;
 			left: var(--gitlens-gutter-width);
 			right: var(--gitlens-scrollbar-gutter-width);
 			bottom: 0.5rem;
 		}
 		background-color: var(--vscode-sideBar-background);
 	}

 	&__message {
@ -179,6 +167,12 @@ ul {
 		border: 1px solid var(--vscode-input-border);
 		background: var(--vscode-input-background);
 		padding: 0.5rem;
 		margin: {
 			top: 1rem;
 			left: var(--gitlens-gutter-width);
 			right: var(--gitlens-scrollbar-gutter-width);
 			bottom: 1.75rem;
 		}
 	}

 	&__message-text {
@ -190,13 +184,6 @@ ul {
 		overflow-x: hidden;
 		max-height: 9rem;

 		// @supports (-webkit-line-clamp: 6) {
 		// 	display: -webkit-box;
 		// 	-webkit-line-clamp: 6;
 		// 	-webkit-box-orient: vertical;
 		// 	overflow: hidden;
 		// }

 		strong {
 			font-weight: 600;
 			font-size: 1.4rem;
@ -207,7 +194,6 @@ ul {
 		display: inline-flex;
 		justify-content: center;
 		align-items: center;
 		// width: 20px;
 		height: 21px;
 		border-radius: 0.25em;
 		color: inherit;
@ -226,7 +212,6 @@ ul {
 	}

 	&__sha {
 		// padding-top: 0.2rem;
 		margin: 0 0.5rem 0 0.25rem;
 	}

@ -258,12 +243,6 @@ ul {
 		}
 	}

 	// &__files {
 	//     border-top: 1px solid var(--color-background--lighten-075);
 	//     padding: {
 	//         top: 1.75rem;
 	//     }
 	// }
 	&__file {
 		padding: {
 			left: var(--gitlens-gutter-width);
@ -302,67 +281,8 @@ ul {
 		}
 	}

 	&__header {
 		margin: {
 			top: 1rem;
 			bottom: 1.5rem;
 		}
 	}
 	&__title {
 		font-size: 2.4rem;

 		// FIXME: specificity hack
 		&-icon {
 			// color: var(--vscode-banner-iconForeground);
 			font-size: inherit !important;
 		}
 	}
 	&__nav {
 		border: 1px solid var(--color-button-secondary-background);
 		padding: 0.5rem;
 		margin: {
 			top: 1rem;
 			bottom: 1.5rem;
 		}
 	}
 	&__commit-count {
 		margin: {
 			top: 0;
 			bottom: 0.5rem;
 		}
 	}
 	&__commits {
 	}
 	&__commit {
 		& + & {
 			margin-top: 0.5rem;
 		}
 	}
 	&__commit-button {
 		appearance: none;
 		text-decoration: none;
 		border: none;
 		color: var(--color-button-foreground);
 		background-color: var(--color-button-secondary-background);
 		padding: 0.5rem;
 		display: flex;
 		align-items: center;
 		width: 100%;
 		gap: 0.5rem;

 		> :last-child {
 			margin-left: auto;
 		}

 		&[aria-current='true'] {
 			background-color: var(--color-button-background);
 		}
 	}
 	&__main {
 		padding: {
 			top: 1rem;
 			bottom: 1rem;
 		}
 		padding-bottom: 1rem;
 	}
 }