Skip to content

Commit

Permalink
Refactor about page
Browse files Browse the repository at this point in the history
  • Loading branch information
@JohnONolan @ErisDS
JohnONolan authored and ErisDS committed May 22, 2015
1 parent 7417b29 commit 13ec196
Show file tree
Hide file tree
Showing 4 changed files with 90 additions and 201 deletions.
12 changes: 6 additions & 6 deletions Gruntfile.js
View file
Expand Up @@ -794,7 +794,7 @@ var _ = require('lodash'),
var done = this.async(),
templatePath = 'core/client/app/templates/-contributors.hbs',
imagePath = 'core/client/public/assets/img/contributors/',
ninetyDaysAgo = Date.now() - (1000 * 60 * 60 * 24 * 90),
timeSpan = Date.now() - (1000 * 60 * 60 * 24 * 180),
oauthKey = process.env.GITHUB_OAUTH_KEY;

if (fs.existsSync(templatePath) && !grunt.option('force')) {
Expand All @@ -811,15 +811,15 @@ var _ = require('lodash'),
user: 'tryghost',
repo: 'ghost',
oauthKey: oauthKey,
releaseDate: ninetyDaysAgo,
count: 20,
releaseDate: timeSpan,
count: 18,
retry: true
})
).then(function (results) {
var contributors = results[1],
contributorTemplate = '<li>\n <a href="<%githubUrl%>" title="<%name%>">\n' +
' <img src="{{gh-path "admin" "/img/contributors"}}/<%name%>" alt="<%name%>">\n' +
' </a>\n</li>',
contributorTemplate = '<article>\n <a href="<%githubUrl%>" title="<%name%>">\n' +
' <img src="{{gh-path "admin" "/img/contributors"}}/<%name%>" alt="<%name%>" />\n' +
' </a>\n</article>',

downloadImagePromise = function (url, name) {
return new Promise(function (resolve, reject) {
Expand Down
209 changes: 54 additions & 155 deletions core/client/app/styles/layouts/about.css
View file
@@ -1,159 +1,101 @@
/* About /ghost/settings/about/
/* ---------------------------------------------------------- */

.settings-about h1 {
letter-spacing: 0;
}

@media (min-width: 901px) {
.settings-content .settings-about {
padding: 25px 40px 0;
}
}

.about-ghost-intro h1 {
margin-top: -6px;
margin-bottom: -21px;
}

.about-ghost-intro .ghost_logo {
content: "Ghost";
}

.about-ghost-intro .version {
.gh-logo {
position: relative;
top: -3px;
left: -9px;
color: var(--blue);
font-size: 1.8rem;
font-weight: 300;
}

.about-ghost-intro h1 + p {
margin-top: 1px;
color: var(--midgrey);
}

.about-environment-help {
margin-top: 35px;
width: 120px;
height: auto;
}

.about-environment dl {
margin: 2px 0 0 0;
color: var(--midgrey);
line-height: 1.6;
.gh-env-details {
display: flex;
align-items: center;
margin: 1em 0;
}

.about-environment dt,
.about-environment dd {
display: inline-block;
float: left;
.gh-env-list {
margin: 0;
width: auto;
}

.about-environment dt {
margin-right: 5px;
padding: 0 40px 0 0;
list-style: none;
}

.about-environment .about-environment-detail {
text-transform: capitalize;
.gh-env-help {
max-width: 200px;
}

.about-help {
padding-top: 8px;
.gh-env-help .btn {
margin: 5px 0;
}

@media (max-width: 500px) {
.about-help {
padding-top: 16px;
@media (max-width: 670px) {
.gh-env-details {
flex-direction: column;
align-items: flex-start;
}
.gh-env-help {
margin: 1em 0;
max-width: none;
}
}

.about-help .btn {
display: block;
padding-top: 9px;
padding-bottom: 9px;
min-height: 32px;
width: 100%;
background: #a1adb3;
color: #fff;
font-size: 1rem;
}

.about-help .btn:hover {
background: color(#a1adb3 lightness(-10%));
.gh-credits {
margin: 2em 0;
max-width: 650px;
color: var(--midgrey);
font-size: 1.8rem;
font-weight: 200;
}

.about-help .btn:nth-child(1) {
margin-bottom: 11px;
@media (max-width: 890px) {
.gh-credits {
max-width: 460px;
}
}

@media (min-width: 501px) {
.about-environment-help {
max-width: 430px;
}
.about-environment {
float: left;
width: calc(100% - 190px);
}
.about-help {
float: right;
width: 170px;
}
.gh-credits h2 {
font-size: 2.4rem;
}


/* Contributors
/* ---------------------------------------------------------- */

.top-contributors {
padding-left: 0;
max-width: 660px;
}

.top-contributors li {
float: left;
width: 10%;
list-style: none;
.gh-contributors {
display: flex;
flex-wrap: wrap;
margin: 1em 0;
}

.top-contributors li a {
.gh-contributors a {
position: relative;
display: block;
margin: 0 10px 10px 0;
width: 60px;
height: 60px;
}

@media (min-width: 601px) {
.top-contributors li a {
margin-right: 9px;
margin-bottom: 9px;
}
}

@media (max-width: 600px) {
.top-contributors li a {
margin-right: 6px;
margin-bottom: 6px;
}
.gh-contributors img {
border-radius: 100%;
}

.top-contributors li a:before {
.gh-contributors a:before {
content: attr(title);
position: absolute;
top: -27px;
top: -20px;
left: 50%;
padding: 2px 6px 3px;
padding: 2px 6px;
background: var(--darkgrey);
border-radius: var(--border-radius);
color: #fff;
font-size: 1rem;
line-height: 1.3em;
opacity: 0;
transition: opacity 0.15s ease-in-out;
transform: translateX(-50%);
pointer-events: none;
}

.top-contributors li a:after {
.gh-contributors a:after {
content: "";
position: absolute;
top: -6px;
Expand All @@ -163,58 +105,15 @@
transform: translateX(-50%);
}

.top-contributors li a:hover:before,
.top-contributors li a:hover:after {
.gh-contributors a:hover:before,
.gh-contributors a:hover:after {
opacity: 1;
}

.top-contributors li a img {
display: block;
width: 100%;
border-radius: 100%;
}


/* Footer
/* Copyright Info
/* ---------------------------------------------------------- */

.about-credits {
margin-top: 45px;
}

.about-credits h1 {
margin-bottom: 24px;
font-size: 2.4rem;
}

.about-contributors-info {
margin-top: -12px;
margin-bottom: 22px;
max-width: 620px;
font-size: 1.6rem;
}

.about-get-involved {
display: inline-block;
max-width: 290px;
width: 100%;
text-align: center;
text-transform: uppercase;
.gh-copyright-info {
color: var(--midgrey);
font-size: 1.2rem;
}

.about-copyright {
margin-top: 62px;
}

.about-copyright a:link,
.about-copyright a:visited {
color: inherit;
}

.about-copyright a:hover,
.about-copyright a:focus,
.about-copyright a:active {
color: var(--blue);
text-decoration: none;
}
70 changes: 30 additions & 40 deletions core/client/app/templates/settings/about.hbs
View file
@@ -1,51 +1,41 @@
<section class="view-content settings-about">
<section class="about-ghost-intro">
<h1>
<span class="ghost_logo">
<span class="hidden">Ghost</span>
</span>
<span class="version blue">v{{model.version}}</span>
</h1>
<section class="view-content">

<header class="gh-about-header">
<img class="gh-logo" src="{{gh-path 'admin' '/img/ghost-logo.png'}}" alt="Ghost" />
<!-- TODO: fix about notifications -->
{{gh-notifications location="settings-about-upgrade" notify="updateNotificationChange"}}
{{#unless updateNotificationCount}}
<p>A free, open, simple publishing platform</p>
{{/unless}}

<div class="about-environment-help clearfix">
<div class="about-environment">
<dl>
<dt>Version:</dt>
<dd class="about-environment-detail">{{model.version}}</dd>
<dt>Environment:</dt>
<dd class="about-environment-detail">{{model.environment}}</dd>
<dt>Database:</dt>
<dd class="about-environment-detail about-environment-database">{{model.database}}</dd>
<dt>Mail:</dt>
<dd class="about-environment-detail">{{#if model.mail}}{{model.mail}}{{else}}Native{{/if}}</dd>
</dl>
</div>
<div class="about-help">
<a href="http://support.ghost.org" class="btn">User Documentation</a>
<a href="https://ghost.org/slack/" class="btn">Get Help With Ghost</a>
</div>
</header>

<section class="gh-env-details">
<ul class="gh-env-list">
<li><strong>Version</strong> {{model.version}}</li>
<li><strong>Environment</strong> {{model.environment}}</li>
<li><strong>Database</strong> {{model.database}}</li>
<li><strong>Mail</strong> {{#if model.mail}}{{model.mail}}{{else}}Native{{/if}}</li>
</ul>
<div class="gh-env-help">
<a href="http://support.ghost.org" class="btn btn-minor" target="_blank">User Documentation</a>
<a href="https://ghost.org/slack/" class="btn btn-minor" target="_blank">Get Help With Ghost</a>
</div>
</section>

<section class="about-credits">
<h1>The People Who Made it Possible</h1>
<section class="gh-credits">
<h2>The People Who Made it Possible</h2>

<ul class="top-contributors clearfix">
<section class="gh-contributors">
{{partial "contributors"}}
</ul>
</section>

<p class="about-contributors-info">Ghost is built by an incredible group of contributors from all over the world. Here are just a few of the people who helped create the version you’re using right now.</p>
<p>Ghost is built by an incredible group of contributors from all over the world. Here are just a few of the people who helped create the version you’re using right now.</p>

<a href="https://ghost.org/about/contribute/" class="about-get-involved btn-blue btn-lg btn">Find out how you can get involved</a>
<a href="https://ghost.org/about/contribute/" class="btn btn-blue btn-lg">Find out how you can get involved</a>

<p class="about-copyright">
Copyright 2013 - 2015 Ghost Foundation, released under the <a href="https://github.com/TryGhost/Ghost/blob/master/LICENSE">MIT license</a>.
<br>
<a href="https://ghost.org/">Ghost</a> is a trademark of the <a href="https://ghost.org/about/">Ghost Foundation</a>.
</p>
</section>

<footer class="gh-copyright-info">
Copyright 2013 - 2015 Ghost Foundation, released under the <a href="https://github.com/TryGhost/Ghost/blob/master/LICENSE">MIT license</a>.
<br>
<a href="https://ghost.org/">Ghost</a> is a trademark of the <a href="https://ghost.org/about/">Ghost Foundation</a>.
</footer>

</section>
Binary file added core/client/public/assets/img/ghost-logo.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 13ec196

Please sign in to comment.