Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS updates for signature list page #7

Merged
merged 2 commits into from
Nov 27, 2018
Merged

CSS updates for signature list page #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d700a17
All requested design tweaks to Manifesto site.
Nov 26, 2018
79a6d7b
Update footer styles
cdupuis Nov 27, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/public/css/main.css
View file
Open in desktop

Large diffs are not rendered by default.

13 changes: 13 additions & 0 deletions app/sass/base/_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,16 @@
*, *:before, *:after {
box-sizing: border-box;
}

html, body {
height: 100%;
margin: 0;
padding: 0;
-webkit-overflow-scrolling: touch;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}

body {
font-family: $base-font-family;
font-size: rem-calc(18px);
Expand Down
9 changes: 9 additions & 0 deletions app/sass/base/_typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,15 @@ h6 { font-size: rem-calc(14px); line-height: rem-calc(20px); }
h6 { font-size: rem-calc(14px); line-height: rem-calc(20px); }
}

a {
color: $brand-primary;
text-decoration: none;

&:visited {
color: $brand-primary;
}
}

p {
margin-top: 0;
}
Expand Down
3 changes: 2 additions & 1 deletion app/sass/globals/_footer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ footer.footer {
background-color: $brand-primary;
color: #9CA3C3;
font-size: rem-calc(14px);
padding: 40px 30px 60px 30px;
padding: 40px 30px 40px 30px;
text-align: center;

@media (#{$larger-than-tablet}) {
Expand All @@ -11,6 +11,7 @@ footer.footer {

a {
color: #9CA3C3;
text-decoration: none;
}

.footer-links {
Expand Down
72 changes: 59 additions & 13 deletions app/sass/pages/_signatures.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,64 @@
.totop {
}
.totop a {
display: none;
ul#signatures {
float: left;
display: block;
width: 100%;
list-style: none;
margin: 15px 0;
padding: 0;

li {
border-bottom: 1px solid $gray-200;
float: left;
display: block;
margin-bottom: 15px;
padding: 0 10px 10px 45px;
position: relative;
width: 100%;

.list-avatar {
border-radius: 2px;
height: 25px;
position: absolute;
top: 0px;
left: 10px;
width: 25px;

@media (#{$larger-than-tablet}) {

}
}

.signer-name {
display: inline-block;
float: left;
font-size: rem-calc(16px);
line-height: rem-calc(25px);
width: 100%;

@media (#{$larger-than-tablet}) {
width: auto;
}
}

.list-ago {
color: $gray-600;
display: block;
float: left;
font-size: rem-calc(11px);
line-height: 1;

@media (#{$larger-than-tablet}) {
display: inline-block;
float: right;
line-height: rem-calc(25px);
}
}
}
}

.list_avatar {
border-radius: 2px;
margin: 0 10px 10px 0;
height: 25px;
width: 25px;
vertical-align: middle;
.totop {
}

.list_ago {
color: $gray-800;
font-size: 11px;
.totop a {
display: none;
}
172 changes: 85 additions & 87 deletions app/views/layouts/main.handlebars
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,115 +1,113 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>The Software Defined Delivery Manifesto</title>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>The Software Defined Delivery Manifesto</title>

<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="icon" href="favicon.ico" type="image/x-icon"/>

<!-- Open Graph data -->
<meta property="og:type" content="website"/>
<meta property="og:site_name" content="The Software Defined Delivery Manifesto"/>
<meta property="og:title" content="The Software Defined Delivery Manifesto"/>
<meta property="og:description"
content="We recognize that delivering useful software shapes our world. We recognize that code is the best way to specify precise action. We recognize that code is only useful when we deliver it."/>
<meta property="og:url" content="https://sdd-manifesto.org"/>
<meta property="og:image" content="https://sdd-manifesto.org/img/sdd_seal_150x150.jpg"/>
<!-- Twitter Card data -->
<meta name="twitter:card" content="summary"/>
<meta name="twitter:site" content="@SDDManifesto"/>
<meta name="twitter:creator" content="@SDDManifesto"/>
<meta name="twitter:title" content="The Software Defined Delivery Manifesto"/>
<meta name="twitter:description"
content="We recognize that delivering useful software shapes our world. We recognize that code is the best way to specify precise action. We recognize that code is only useful when we deliver it."/>
<meta name="twitter:image" content="https://sdd-manifesto.org/img/sdd_seal_150x150.jpg"/>
<!-- Open Graph data -->
<meta property="og:type" content="website"/>
<meta property="og:site_name" content="The Software Defined Delivery Manifesto"/>
<meta property="og:title" content="The Software Defined Delivery Manifesto"/>
<meta property="og:description"
content="We recognize that delivering useful software shapes our world. We recognize that code is the best way to specify precise action. We recognize that code is only useful when we deliver it."/>
<meta property="og:url" content="https://sdd-manifesto.org"/>
<meta property="og:image" content="https://sdd-manifesto.org/img/sdd_seal_150x150.jpg"/>
<!-- Twitter Card data -->
<meta name="twitter:card" content="summary"/>
<meta name="twitter:site" content="@SDDManifesto"/>
<meta name="twitter:creator" content="@SDDManifesto"/>
<meta name="twitter:title" content="The Software Defined Delivery Manifesto"/>
<meta name="twitter:description"
content="We recognize that delivering useful software shapes our world. We recognize that code is the best way to specify precise action. We recognize that code is only useful when we deliver it."/>
<meta name="twitter:image" content="https://sdd-manifesto.org/img/sdd_seal_150x150.jpg"/>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

<!-- Google Tag Manager -->
<script>(function (w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({
'gtm.start':
new Date().getTime(), event: 'gtm.js'
});
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-PCN8GWQ');</script>
<!-- End Google Tag Manager -->
<!-- Google Tag Manager -->
<script>(function (w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({
'gtm.start':
new Date().getTime(), event: 'gtm.js'
});
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-PCN8GWQ');</script>
<!-- End Google Tag Manager -->

<link rel="stylesheet" href="css/main.css"/>
<link rel="stylesheet" href="https://use.typekit.net/htr8isk.css"/>
<link rel="stylesheet" href="css/main.css"/>
<link rel="stylesheet" href="https://use.typekit.net/htr8isk.css"/>

<script src="js/vendor/modernizr-3.6.0.min.js"></script>
<script src="js/vendor/jquery-3.3.1.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script src="js/vendor/modernizr-3.6.0.min.js"></script>
<script src="js/vendor/jquery-3.3.1.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>

</head>
<body>

<!-- Google Tag Manager (noscript) -->
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PCN8GWQ"
height="0" width="0" style="display:none;visibility:hidden"></iframe>
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PCN8GWQ"
height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->

<header class="site-header">
<div class="container">
<div class="ten offset-one text-center">
<a href="/"><img src="img/sdd_seal.png" alt="Software Defined Delivery Manifesto Seal"></a>
<h1>The Software Defined Delivery Manifesto</h1>
{{#if date}}
<div class="last-updated">Last Updated: {{date}} - v{{version}}</div>
{{/if}}
</div>
</div>
<div class="container">
<div class="ten offset-one text-center">
<a href="/"><img src="img/sdd_seal.png" alt="Software Defined Delivery Manifesto Seal"></a>
<h1>The Software Defined Delivery Manifesto</h1>
{{#if date}}
<div class="last-updated">Last Updated: {{date}} - v{{version}}</div>
{{/if}}
</div>
</div>
</header>

<section class="content-section">
<div class="container">
<div class="row">
<div class="eight offset-two">
{{{body}}}
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="eight offset-two">
{{{body}}}
</div>
</div>
</div>
</section>

<footer class="footer">
<div class="container">
<div class="row">
<div class="ten offset-one">
<div class="row">
<div class="six">&copy; Copyight 2018. All Rights Reserved.</div>
<div class="six footer-links">
<a href="/cookie-policy.html">Cookie Policy</a> |
<a href="/privacy-policy.html">Privacy Policy</a>
{{#if user}}
{{#unless user.signed}}
| <a href="/signout"> Remove your Signature</a>
{{/unless}}
| <a href="/logout">Log out</a>
{{/if}}
</div>
</div>
<div class="row">
<div class="twelve" style="text-align: center">
<img src="img/twitter.png" width="22" alt="@SDDManifesto on Twitter"
style="vertical-align: text-bottom;padding-right: 5px"><a
href="http://twitter.com/SDDManifesto">@SDDManifesto</a>
| <a href="https://twitter.com/search?q=%23DeliverInCode">#DeliverInCode</a>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="eight offset-two">
<div class="row">
<div class="five">
<img src="img/twitter.png" width="22" alt="@SDDManifesto on Twitter"
style="vertical-align: text-bottom;padding-right: 5px"><a
href="http://twitter.com/SDDManifesto">@SDDManifesto</a>
&nbsp;|&nbsp; <a href="https://twitter.com/search?q=%23DeliverInCode">#DeliverInCode</a>
</div>
<div class="seven footer-links">
<a href="/cookie-policy.html">Cookie Policy</a>&nbsp;|&nbsp;
<a href="/privacy-policy.html">Privacy Policy</a>
{{#if user}}
{{#unless user.signed}}
&nbsp;|&nbsp;<a href="/signout"> Remove Signature</a>
{{/unless}}
&nbsp;|&nbsp;<a href="/logout">Log out</a>
{{/if}}
<br>&copy; Copyight 2018. All Rights Reserved.
</div>
</div>
</div>
</div>
</div>
</footer>

</body>
Expand Down
8 changes: 4 additions & 4 deletions app/views/signatures.handlebars
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
{{count}} people already signed (Go back to the <a href="/">Manifesto</a>)
<p>{{count}} people already signed (Go back to the <a href="/">Manifesto</a>)</p>

<ul id="signatures" style="list-style: none">
<ul id="signatures">
</ul>

<button class="button primary" id="load_more">Load More</button>

<p class="totop">
<a href="#top" id="top">Back to top</a>
<a href="#top" id="top">&uarr; Back to top</a>
</p>

<script>
Expand All @@ -19,7 +19,7 @@
const items = [];
$.each(data.signatures, function (key, val) {
items.push(`<li style="display: none">
<img src="${val.avatar}" class="list_avatar" />${val.name} <span class="list_ago">signed ${val.ago} via ${val.connection} - v${val.version}</span>
<img src="${val.avatar}" class="list-avatar" /><div class="signer-name">${val.name}</div> <div class="list-ago">signed ${val.ago} via ${val.connection} - v${val.version}</div>
</li>`);
});
$("#signatures").append(items);
Expand Down
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,8 @@
"lint": "tslint --config tslint.json --format verbose --project .",
"lint:fix": "npm run lint -- --fix",
"heroku-postbuild": "npm run build",
"start": "node app/index.js"
"start": "node app/index.js",
"watch:sass": "node-sass --watch app/sass/main.scss -o app/public/css"
},
"engines": {
"node": ">=8.1.0",
Expand Down