radicle/radicle-explorer
1
0
Fork 0
mirror of https://seed.radicle.dev/rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5.git synced 2026-11-10 07:50:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

Work on styles and visuals

Browse Source 
Signed-off-by: Alexis Sellier <self@cloudhead.io>
This commit is contained in:
Alexis Sellier
2022-02-05 21:09:37 +01:00
parent 02a0ed4664
commit 3a94e215ba
7 changed files with 69 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.css
+3 -2
View File
@@ -33,7 +33,7 @@
--color-yellow-background: #ffff9911;
--color-positive: #53db53;
--color-positive-background: #53db5311;
--color-positive-1: #21402f;
--color-positive-1: #11332b;
--color-positive-2: #2c6837;
--color-positive-6: #e3ffe3;
--color-caution: #ffc555;
@@ -42,11 +42,12 @@
--color-caution-6: #ffefcf;
--color-negative: #ff5555;
--color-negative-background: #ff555511;
--color-negative-1: #38282f;
--color-negative-1: #35202b;
--color-negative-2: #623237;
--color-negative-6: #ffd4d4;
--color-foreground: #ffffff;
--color-foreground-90: #dddddd;
--color-foreground-80: #aaaaaa;
--color-foreground-faded: #777788;
--color-foreground-subtle: #444455;
--color-foreground-subtler: #333344;
src/base/projects/Commit.svelte
+29 -13
View File
@@ -51,7 +51,25 @@
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
align-items: center;
}
.description {
margin: 0.5rem 0 1rem 0;
}
.meta {
color: var(--color-foreground-80);
}
.email {
font-family: var(--font-family-monospace);
font-size: 0.875rem;
}
.sha1 {
color: var(--color-foreground-80);
font-size: 0.875rem;
}
.time {
margin-left: 0.25rem;
color: var(--color-foreground-faded);
}
@media (max-width: 960px) {
.commit {
@@ -65,23 +83,22 @@
<header>
<div class="summary">
<h3>{commit.header.summary}</h3>
<div class="desktop font-mono faded">
<span>commit</span>
<div class="desktop font-mono sha1">
<span>{commit.header.sha1}</span>
</div>
<div class="mobile font-mono faded">
<div class="mobile font-mono sha1">
{formatCommit(commit.header.sha1)}
</div>
</div>
<pre>{commit.header.description}</pre>
<div>
<span>Committed by {commit.header.committer.name}</span>
<span class="font-mono faded desktop-inline">&lt;{commit.header.committer.email}&gt; </span>
<span class="desktop-inline">{formatCommitTime(commit.header.committerTime)}</span>
<pre class="description">{commit.header.description}</pre>
<div class="meta">
<span>Committed by <strong>{commit.header.committer.name}</strong></span>
<span class="font-mono email desktop-inline">&lt;{commit.header.committer.email}&gt; </span>
<span class="time desktop-inline">{formatCommitTime(commit.header.committerTime)}</span>
</div>
<div>
<span>Authored by {commit.header.author.name} </span>
<span class="font-mono faded desktop-inline">&lt;{commit.header.author.email}&gt;</span>
<div class="meta">
<span>Authored by <strong>{commit.header.author.name}</strong> </span>
<span class="font-mono email desktop-inline">&lt;{commit.header.author.email}&gt;</span>
</div>
</header>
<Changeset stats={commit.stats} diff={commit.diff} on:browse={(event) => navigateCommit(event.detail)} />
@@ -90,7 +107,6 @@
<div class="commit">
<div class="error error-message text-xsmall">
<div>API request to <code class="text-xsmall">{err.url}</code> failed.</div>
<div>API needs to be version ^0.2.</div>
</div>
</div>
{/await}
src/base/projects/Commit/CommitTeaser.svelte
+4 -5
View File
@@ -20,20 +20,19 @@
padding: 0 1rem 0 0;
}
.author {
margin-right: 8px
margin-right: 0.5rem;
}
.commit {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem 0 1rem;
height: 2.5rem;
cursor: pointer;
padding: 0.5rem 1rem;
}
.commit .right {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.5rem;
}
.time {
margin-right: 0.5rem;
@@ -67,7 +66,7 @@
</div>
<div class="right">
<span class="bold author">{commit.committer.name}</span>
<span class="desktop-inline time">{formatCommitTime(commit.committerTime)}</span>
<span class="desktop-inline font-mono text-small time">{formatCommitTime(commit.committerTime)}</span>
<Icon name="browse" width={17} inline fill on:click={() => browseCommit(commit.sha1)} />
</div>
</div>
src/base/projects/Header.svelte
+1 -1
View File
@@ -16,7 +16,7 @@
export let revision: string;
// If peerSelector should be showed.
export let peerSelector: boolean;
let { urn, peer, config, project, branches, peers, anchors } = source;
let dropdownState: { [key: string]: boolean } = { clone: false, seed: false, branch: false, peer: false };
src/base/projects/History.svelte
+12 -2
View File
@@ -54,7 +54,18 @@
background: var(--color-foreground-background);
}
.commit {
padding: 0.25rem 0;
cursor: pointer;
}
.commit:first-child {
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
}
.commit:last-child {
border-bottom-left-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
}
.commit:hover {
background: var(--color-foreground-background-lighter);
}
@media (max-width: 960px) {
.history {
@@ -86,7 +97,6 @@
<div class="history">
<div class="error error-message text-xsmall">
<div>API request to <code class="text-xsmall">{err.url}</code> failed.</div>
<div>API needs to be version ^0.2.</div>
</div>
</div>
{/await}
src/base/projects/SourceBrowser/Changeset.svelte
+4
View File
@@ -44,10 +44,14 @@
}
.file-header .diff-type.created {
color: var(--color-positive);
font-family: var(--font-family-monospace);
font-size: 0.75rem;
background-color: var(--color-positive-1);
}
.file-header .diff-type.deleted {
color: var(--color-negative);
font-family: var(--font-family-monospace);
font-size: 0.75rem;
background-color: var(--color-negative-1);
}
.file-header .file-data {
src/base/projects/SourceBrowser/FileDiff.svelte
+16 -12
View File
@@ -18,9 +18,10 @@
<style>
.changeset-file {
border: 1px solid var(--color-foreground-3);
border-radius: 0.5rem;
border-radius: 0.25rem;
min-width: var(--content-min-width);
margin-bottom: 2rem;
line-height: 1.5rem;
}
.changeset-file header {
cursor: pointer;
@@ -32,7 +33,7 @@
padding: 1rem;
}
main {
border-top: 1px solid var(--color-foreground-3);
border-top: 1px dashed var(--color-foreground-3);
}
.changeset-file main {
overflow-x: auto;
@@ -60,29 +61,32 @@
margin: 0.5rem 0;
}
tr.diff-line[data-type="+"] > * {
background: var(--color-positive-1);
color: var(--color-positive);
}
tr.diff-line[data-type="-"] > * {
background: var(--color-negative-1);
color: var(--color-negative);
}
td.diff-line-number {
text-align: right;
user-select: none;
line-height: 150%;
line-height: 1.5rem;
min-width: 3rem;
}
td.diff-line-number[data-type="+"],
td.diff-line-type[data-type="+"] {
background-color: var(--color-positive-background);
color: var(--color-positive-6);
}
td.diff-line-number[data-type="-"],
td.diff-line-type[data-type="-"] {
background-color: var(--color-negative-background);
color: var(--color-negative-6);
}
td.diff-line-number.left {
padding: 0 0.25rem 0 1rem;
padding: 0 0.5rem 0 0.75rem;
}
td.diff-line-number.right {
padding: 0 1rem 0 0.25rem;
padding: 0 0.75rem 0 0.5rem;
}
td.diff-line-content {
white-space: pre;
@@ -90,18 +94,19 @@
padding-right: 0.5rem;
}
td.diff-line-type {
padding-right: 1rem;
text-align: center;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
td.diff-expand-header {
background: var(--color-background);
padding-left: 0.5rem;
color: var(--color-foreground-4);
}
td.diff-line-number {
color: var(--color-foreground-4);
}
.file-path {
margin-left: 0.5rem;
font-size: 1rem;
}
</style>
@@ -109,8 +114,7 @@
<header
on:click={collapse}>
<div class="actions">
<Icon name="chevron" width={20} inline fill />
<p class="bold file-path">{file.path}</p>
<p class="file-path">{file.path}</p>
</div>
<Icon name="browse" width={20} inline fill on:click={() => dispatch("browse", file.path)} />
</header>