Improve history view

Signed-off-by: Alexis Sellier <self@cloudhead.io>

src/base/projects/Commit/CommitTeaser.svelte

@@ -18,6 +18,8 @@
 <style>
   .hash {
     font-family: var(--font-family-monospace);
+    font-size: 0.75rem;
+    padding: 0 1.5rem;
   }
   .commit-teaser {
     background-color: var(--color-foreground-background);
@@ -41,9 +43,7 @@
   }
 
   .column-left {
-    padding: 0 1.5rem;
-  }
-  .column-center {
+    padding-left: 1rem;
     flex: min-content;
   }
   .commit-teaser .column-right {
@@ -58,20 +58,23 @@
     padding-right: 1rem;
   }
   .badge {
-    margin: 0 1rem 0 0;
+    margin: 0;
+  }
+  .browse {
+    display: flex;
+    z-index: 10;
+    width: 100%;
+    height: 100%;
   }
 
   @media (max-width: 720px) {
     .hash {
-      padding-right: 0.5rem;
+      padding-right: 0;
     }
-    .hash {
-      font-size: 0.75rem;
-    }
-    .column-center {
+    .column-left {
       overflow: hidden;
     }
-    .column-right {
+    .badge, .browse {
       display: none !important;
     }
     .summary {
@@ -85,9 +88,6 @@
 
 <div class="commit-teaser">
   <div class="column-left">
-    <span class="secondary hash">{formatCommit(commit.header.sha1)}</span>
-  </div>
-  <div class="column-center">
     <div class="header">
       <div class="summary">
         {commit.header.summary}
@@ -99,6 +99,9 @@
     {#if commit.context.committer}
       <span class="badge tertiary">Verified</span>
     {/if}
-    <Icon name="browse" width={17} inline fill on:click={() => browseCommit(commit.header.sha1)} />
+    <span class="secondary hash">{formatCommit(commit.header.sha1)}</span>
+    <div class="browse" on:click|stopPropagation={() => browseCommit(commit.header.sha1)}>
+      <Icon name="browse" width={17} inline fill />
+    </div>
   </div>
 </div>

src/base/projects/History.svelte

@@ -12,6 +12,10 @@
     project.navigateTo({ content, revision, path: null });
   };
 
+  const browseCommit = (event: { detail: string }) => {
+    project.navigateTo({ content: ProjectContent.Tree, revision: event.detail, path: null });
+  };
+
   const fetchCommits = async (parentCommit: string): Promise<GroupedCommitsHistory> => {
     const commitsQuery = await Project.getCommits(project.urn, project.seed.api, {
       parent: parentCommit, verified: true
@@ -70,7 +74,7 @@
         <div class="commit-group-headers">
           {#each group.commits as commit (commit.header.sha1)}
             <div class="commit" on:click={() => navigateHistory(commit.header.sha1, ProjectContent.Commit)}>
-              <CommitTeaser {commit} />
+              <CommitTeaser {commit} on:browseCommit={browseCommit} />
             </div>
           {/each}
         </div>