refactor, redesign
This commit is contained in:
hazycora
parent
83a9e85d3d
commit
ff48d782c3
5 changed files with 46 additions and 20 deletions
|
|
@ -3,8 +3,7 @@ p {
|
|||
}
|
||||
|
||||
.wrapper {
|
||||
background-color: #171926;
|
||||
background-image: linear-gradient(to bottom, #171926, #10121d);
|
||||
background-color: #10121d;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
|
@ -30,21 +29,21 @@ p {
|
|||
.contents {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
width: 80%;
|
||||
width: 900px;
|
||||
}
|
||||
|
||||
.graphics {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
width: 20%;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.graphics > img {
|
||||
|
|
@ -54,14 +53,31 @@ p {
|
|||
}
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
font-weight: 800;
|
||||
font-size: 4.5rem;
|
||||
line-height: 1em;
|
||||
display: flex;
|
||||
column-gap: 0.25em;
|
||||
row-gap: -0.1em;
|
||||
line-height: 1em;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.1em;
|
||||
}
|
||||
|
||||
.repo .title {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.title span.word {
|
||||
max-width: 100%;
|
||||
padding: 2rem 0;
|
||||
margin: -2rem 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.title span.word:last-child {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.issue .number {
|
||||
|
|
@ -97,6 +113,10 @@ p {
|
|||
font-size: 42px;
|
||||
font-weight: 500;
|
||||
color: #8c91af;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
text-overflow: ellipsis;
|
||||
line-clamp: 2'...';
|
||||
}
|
||||
|
||||
.languages {
|
||||
|
|
|
|||
|
|
@ -1,15 +1,10 @@
|
|||
<% layout('layout') %>
|
||||
<%
|
||||
let title = it.issue.title
|
||||
const titleCharLimit = 50
|
||||
const titleCharLimit = 30
|
||||
if (title.length > titleCharLimit) {
|
||||
title = title.slice(0, titleCharLimit).trim() + '...'
|
||||
}
|
||||
let body = it.issue.body
|
||||
const bodyCharLimit = 50
|
||||
if (body.length > bodyCharLimit) {
|
||||
body = body.slice(0, bodyCharLimit).trim() + '...'
|
||||
}
|
||||
%>
|
||||
<div class="main issue">
|
||||
<div class="contents">
|
||||
|
|
@ -19,7 +14,7 @@
|
|||
%></p>
|
||||
<% if (it.issue.body) { %>
|
||||
<p class="description">
|
||||
<%= body %>
|
||||
<%= it.issue.body %>
|
||||
</p>
|
||||
<% } %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,6 +17,12 @@
|
|||
place-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
/* we're using unprefixed line-clamp, but we want that to look correct in dev mode */
|
||||
*[style*="line-clamp: 2"] {
|
||||
display: -webkit-box !important;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
</style>
|
||||
<title>OpenGraph Debug Preview</title>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<% layout('layout') %>
|
||||
<%
|
||||
let description = it.repo.description?.replace(/https?:\/\/([\S]+)/g, '$1')
|
||||
function prettyNumber(number) {
|
||||
if (number < 1000) return number
|
||||
return Math.floor(number / 1000)+'k'
|
||||
|
|
@ -8,18 +9,18 @@
|
|||
<div class="main repo">
|
||||
<div class="contents">
|
||||
<div class="info">
|
||||
<p class="author"><span><%= it.repo.owner.full_name %></span><span class="username">@<%= it.repo.owner.login %></span></p>
|
||||
<p class="author"><span><%= it.repo.owner.full_name || it.repo.owner.login %></span><span class="username">@<%= it.repo.owner.login %></span></p>
|
||||
<p class="title"><%= it.repo.name %></p>
|
||||
<% if (it.repo.description) { %>
|
||||
<p class="description"><%= it.repo.description %></p>
|
||||
<% if (description) { %>
|
||||
<p class="description"><%= description %></p>
|
||||
<% } %>
|
||||
</div>
|
||||
<div class="graphics">
|
||||
<img width="120" height="120" src="<%= it.repo.avatar_url || it.repo.owner.avatar_url %>"></img>
|
||||
</div>
|
||||
</div>
|
||||
<% if (it.repo.open_issues_count > 0 || it.repo.stars_count > 0 || it.repo.forks_count > 0) { %>
|
||||
<div class="info-line">
|
||||
<div class="info-line">
|
||||
<% if (it.repo.open_issues_count > 0 || it.repo.stars_count > 0 || it.repo.forks_count > 0) { %>
|
||||
<div class="fact">
|
||||
<p class="fact-heading"><%= prettyNumber(it.repo.open_issues_count) %></p>
|
||||
<p class="fact-subtitle"><%= (it.repo.open_issues_count) != 1 ? 'Issues' : 'Issue' %></p>
|
||||
|
|
@ -32,6 +33,10 @@
|
|||
<p class="fact-heading"><%= prettyNumber(it.repo.forks_count) %></p>
|
||||
<p class="fact-subtitle"><%= (it.repo.forks_count) != 1 ? 'Forks' : 'Fork' %></p>
|
||||
</div>
|
||||
<% } %>
|
||||
<div class="fact">
|
||||
<p class="fact-subtitle">Last updated</p>
|
||||
<p class="fact-heading"><%= new Intl.DateTimeFormat('en-US', { dateStyle: 'long' }).format(new Date(it.repo.updated_at)) %></p>
|
||||
</div>
|
||||
<% } %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -2,4 +2,4 @@
|
|||
satori, the HTML-to-SVG engine we use, has no concept of "inline" or "inline-block"
|
||||
CSS display values. So, we must emulate them with flex-wrap and making each word a <span>...
|
||||
*/ %>
|
||||
<% for (const word of it.text.split(/\s+/)) { %><span><%= word %></span><% } %>
|
||||
<% for (const word of it.text.split(/\s+/)) { %><span class="word"><%= word %></span><% } %>
|
||||
Loading…
Reference in a new issue