Skip to content

Commit 89c3335

Browse files
Kurt Gawinowiczthemightychris
Kurt Gawinowicz
authored and
themightychris
committed
WIP: Recorganize CSS, improve page markup, style pages, and mockup homepage checkin elements
1 parent af6715d commit 89c3335

File tree

21 files changed

+267
-161
lines changed

21 files changed

+267
-161
lines changed

‎html-templates/blog/blogPost.tpl

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757

5858
{block "css"}
5959
{$dwoo.parent}
60-
{cssmin "pages/blog.css"}
60+
{cssmin "pages/article.css"}
6161
{/block}
6262

6363
{block "title"}{$data->Title} — {$dwoo.parent}{/block}
@@ -68,7 +68,7 @@
6868

6969
{$Post = $data}
7070

71-
<article class="blog-post">
71+
<article class="article">
7272
<header class="article-header">
7373
{if Emergence\CMS\BlogRequestHandler::checkWriteAccess($Post)}
7474
<div class="btn-toolbar pull-right">
@@ -105,7 +105,7 @@
105105
{$Post->RenderBody()}
106106
</div>
107107

108-
<section class="blog-comments">
108+
<section class="article-comments">
109109
{commentSection $Post}
110110
</section>
111111
</article>

‎html-templates/blog/blogPosts.tpl

Lines changed: 26 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,32 +2,38 @@
22

33
{block "css"}
44
{$dwoo.parent}
5-
{cssmin "pages/blog.css"}
5+
{cssmin "pages/article.css"}
66
{/block}
77

8+
{block title}Blog &mdash; {$dwoo.parent}{/block}
9+
810
{block "content"}
911
{load_templates "subtemplates/blog.tpl"}
1012
{load_templates "subtemplates/paging.tpl"}
11-
12-
<header class="page-header">
13-
<div class="btn-toolbar pull-right">
14-
<a href="/blog/create" class="btn btn-success">New Post</a>
15-
</div>
1613

17-
<h2>Blog Feed</h2>
18-
</header>
14+
<div class="row">
15+
<div class="col-md-8 col-md-offset-2">
1916

20-
<section class="page-section article-collection">
21-
{foreach item=BlogPost from=$data}
22-
{blogPost $BlogPost useSummary=true showBody=false}
23-
{foreachelse}
24-
<p class="empty-text">Stay tuned for the first post&hellip;</p>
25-
{/foreach}
26-
</section>
17+
<header class="page-header">
18+
<a href="/blog/create" class="btn btn-success pull-right">New Post</a>
2719

28-
{if $total > $limit}
29-
<footer class="page-footer">
30-
<strong>{$total|number_format} posts:</strong> {pagingLinks $total pageSize=$limit}
31-
</footer>
32-
{/if}
20+
<h1>Blog Feed</h1>
21+
</header>
22+
23+
<section class="page-section article-collection">
24+
{foreach item=BlogPost from=$data}
25+
{blogPost $BlogPost useSummary=true showBody=false headingLevel="h2"}
26+
{foreachelse}
27+
<p class="empty-text">Stay tuned for the first post&hellip;</p>
28+
{/foreach}
29+
</section>
30+
31+
{if $total > $limit}
32+
<footer class="page-footer">
33+
<strong>{$total|number_format} posts:</strong> {pagingLinks $total pageSize=$limit}
34+
</footer>
35+
{/if}
36+
37+
</div>
38+
</div>
3339
{/block}

‎html-templates/confirm.tpl

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{extends "designs/site.tpl"}
2+
3+
{block "content"}
4+
<div class="row">
5+
<div class="col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
6+
<div class="page-header">
7+
{if $data->getTitle()}
8+
<h1>Delete {$data->getTitle()}</h1>
9+
{else}
10+
<h1>Please confirm</h1>
11+
{/if}
12+
</div>
13+
<p class="confirm">{$question}</p>
14+
<form method="POST">
15+
<button type="button" class="btn btn-default margin-right" name="Sure" value="No" onclick="javascript:history.go(-1);">No</button>
16+
<button type="submit" class="btn btn-danger" name="Sure">Yes</button>
17+
</form>
18+
</div>
19+
</div>
20+
{/block}

‎html-templates/home.tpl

Lines changed: 61 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
11
{extends designs/site.tpl}
22

3-
{block "css"}
4-
{$dwoo.parent}
5-
{cssmin "pages/home.css"}
6-
{/block}
7-
83
{block js-bottom}
94
{$dwoo.parent}
105
{jsmin "features/sidebar-checkin.js"}
@@ -66,6 +61,8 @@
6661
<div class="checkins">
6762
<h3>{_ "Checked-in Members"}</h3>
6863

64+
{*
65+
6966
{$lastProjectID = false}
7067
<dl class="checkins-list">
7168
<dt class="checkins-list-title">{_ "No Current Project"}</dt>
@@ -74,9 +71,24 @@
7471
<dt class="checkins-list-title">{projectLink $Checkin->Project}</dt>
7572
{$lastProjectID = $Checkin->ProjectID}
7673
{/if}
77-
<dd class="checkins-list-person">{personLink $Checkin->Member photo=yes photoSize=32}</dd>
74+
<dd class="checkins-list-person">{personLink $Checkin->Member photo=yes photoSize=64 linkCls="thumbnail"}</dd>
7875
{/foreach}
7976
</dl>
77+
78+
*}
79+
80+
<h4>No Current Project</h4>
81+
82+
<h4><a href="/projects/example_project-4">Example Project</a></h4>
83+
<ul class="row list-unstyled">
84+
<li class="col-xs-6 col-sm-4 col-md-3"><a href="/people/chris" title="Chris Alfano" class="thumbnail text-center"><img src="//www.gravatar.com/avatar/36b6d909c0c65d4fcdfcc307b84fb06f?s=128&amp;r=g&amp;d=mm" class="avatar " width="64" height="64"><span class="name ">Chris Alfano</span></a></li>
85+
<li class="col-xs-6 col-sm-4 col-md-3"><a href="/people/chris" title="Chris Alfano" class="thumbnail text-center"><img src="//www.gravatar.com/avatar/36b6d909c0c65d4fcdfcc307b84fb06f?s=128&amp;r=g&amp;d=mm" class="avatar " width="64" height="64"><span class="name ">Chris Alfano</span></a></li>
86+
<li class="col-xs-6 col-sm-4 col-md-3"><a href="/people/kurt" title="Kurt Gawinowicz" class="thumbnail text-center"><img src="//www.gravatar.com/avatar/5d5ff5fd825a914d5057562aec05eb9b?s=128&amp;r=g&amp;d=mm" class="avatar " width="64" height="64"><span class="name ">Kurt Gawinowicz</span></a></li>
87+
<li class="col-xs-6 col-sm-4 col-md-3"><a href="/people/kurt" title="Kurt Gawinowicz" class="thumbnail text-center"><img src="//www.gravatar.com/avatar/5d5ff5fd825a914d5057562aec05eb9b?s=128&amp;r=g&amp;d=mm" class="avatar " width="64" height="64"><span class="name ">Kurt Gawinowicz</span></a></li>
88+
<li class="col-xs-6 col-sm-4 col-md-3"><a href="/people/chris" title="Chris Alfano" class="thumbnail text-center"><img src="//www.gravatar.com/avatar/36b6d909c0c65d4fcdfcc307b84fb06f?s=128&amp;r=g&amp;d=mm" class="avatar " width="64" height="64"><span class="name ">Chris Alfano</span></a></li>
89+
<li class="col-xs-6 col-sm-4 col-md-3"><a href="/people/kurt" title="Kurt Gawinowicz" class="thumbnail text-center"><img src="//www.gravatar.com/avatar/5d5ff5fd825a914d5057562aec05eb9b?s=128&amp;r=g&amp;d=mm" class="avatar " width="64" height="64"><span class="name ">Kurt Gawinowicz</span></a></li>
90+
</ul>
91+
8092
</div>
8193
</div>
8294
</div>
@@ -90,6 +102,49 @@
90102
<li><a href="/blog" class="btn btn-link">{glyph "file"} {_ "Browse all blog posts"}</a></li>
91103
</ul>
92104

105+
<article class="post panel panel-default ">
106+
<div class="panel-body">
107+
<header class="post-header">
108+
<h3 class="post-title">
109+
<a href="#">Code for Philly Hack Night</a><small class="text-muted margin-left">{glyph "console"}</small>
110+
</h3>
111+
</header>
112+
<div class="update-body">
113+
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
114+
115+
<h4>Projects</h4>
116+
<h5><a href="/projects/example_project-4">Example Project</a></h5>
117+
<ul class="row list-unstyled">
118+
<li class="col-xs-6 col-sm-4 col-md-3"><a href="/people/chris" title="Chris Alfano" class="thumbnail text-center"><img src="//www.gravatar.com/avatar/36b6d909c0c65d4fcdfcc307b84fb06f?s=128&amp;r=g&amp;d=mm" class="avatar " width="64" height="64"><span class="name ">Chris Alfano</span></a></li>
119+
<li class="col-xs-6 col-sm-4 col-md-3"><a href="/people/chris" title="Chris Alfano" class="thumbnail text-center"><img src="//www.gravatar.com/avatar/36b6d909c0c65d4fcdfcc307b84fb06f?s=128&amp;r=g&amp;d=mm" class="avatar " width="64" height="64"><span class="name ">Chris Alfano</span></a></li>
120+
<li class="col-xs-6 col-sm-4 col-md-3"><a href="/people/kurt" title="Kurt Gawinowicz" class="thumbnail text-center"><img src="//www.gravatar.com/avatar/5d5ff5fd825a914d5057562aec05eb9b?s=128&amp;r=g&amp;d=mm" class="avatar " width="64" height="64"><span class="name ">Kurt Gawinowicz</span></a></li>
121+
<li class="col-xs-6 col-sm-4 col-md-3"><a href="/people/kurt" title="Kurt Gawinowicz" class="thumbnail text-center"><img src="//www.gravatar.com/avatar/5d5ff5fd825a914d5057562aec05eb9b?s=128&amp;r=g&amp;d=mm" class="avatar " width="64" height="64"><span class="name ">Kurt Gawinowicz</span></a></li>
122+
<li class="col-xs-6 col-sm-4 col-md-3"><a href="/people/chris" title="Chris Alfano" class="thumbnail text-center"><img src="//www.gravatar.com/avatar/36b6d909c0c65d4fcdfcc307b84fb06f?s=128&amp;r=g&amp;d=mm" class="avatar " width="64" height="64"><span class="name ">Chris Alfano</span></a></li>
123+
<li class="col-xs-6 col-sm-4 col-md-3"><a href="/people/kurt" title="Kurt Gawinowicz" class="thumbnail text-center"><img src="//www.gravatar.com/avatar/5d5ff5fd825a914d5057562aec05eb9b?s=128&amp;r=g&amp;d=mm" class="avatar " width="64" height="64"><span class="name ">Kurt Gawinowicz</span></a></li>
124+
</ul>
125+
126+
<h4>New Projects</h4>
127+
<ul class="padding-bottom">
128+
<li><a href="#">Example Project 2</a></li>
129+
<li><a href="#">Example Project 3</a></li>
130+
<li><a href="#">Example Project 4</a></li>
131+
<li><a href="#">Example Project 5</a></li>
132+
</ul>
133+
134+
<h4>New Members</h4>
135+
<ul class="row list-unstyled">
136+
<li class="col-xs-6 col-sm-4 col-md-3"><a href="/people/chris" title="Chris Alfano" class="thumbnail text-center"><img src="//www.gravatar.com/avatar/36b6d909c0c65d4fcdfcc307b84fb06f?s=128&amp;r=g&amp;d=mm" class="avatar " width="64" height="64"><span class="name ">Chris Alfano</span></a></li>
137+
<li class="col-xs-6 col-sm-4 col-md-3"><a href="/people/chris" title="Chris Alfano" class="thumbnail text-center"><img src="//www.gravatar.com/avatar/36b6d909c0c65d4fcdfcc307b84fb06f?s=128&amp;r=g&amp;d=mm" class="avatar " width="64" height="64"><span class="name ">Chris Alfano</span></a></li>
138+
<li class="col-xs-6 col-sm-4 col-md-3"><a href="/people/kurt" title="Kurt Gawinowicz" class="thumbnail text-center"><img src="//www.gravatar.com/avatar/5d5ff5fd825a914d5057562aec05eb9b?s=128&amp;r=g&amp;d=mm" class="avatar " width="64" height="64"><span class="name ">Kurt Gawinowicz</span></a></li>
139+
</ul>
140+
141+
</div>
142+
</div>
143+
<footer class="post-footer panel-footer clearfix">
144+
<small class="text-muted"><span class="glyphicon glyphicon-time" aria-hidden="true"></span>&nbsp;<a href="/blog/lorem_ipsum_dolor_sit_amet"><time datetime="2016-10-05T19:21:00-04:00" title="Wed 05 Oct 2016 07:21:00 PM EDT">5 Oct 2016</time></a></small>
145+
</footer>
146+
</article>
147+
93148
{foreach item=Article from=$activity}
94149
{projectActivity $Article headingLevel=h3 showProject=true}
95150
{foreachelse}

‎html-templates/how-to-help.tpl

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,13 @@
33
{block title}{_ "How to Help"} &mdash; {$dwoo.parent}{/block}
44

55
{block content}
6-
<div class="page-header">
7-
<h1>{_ "How to Help"}</h1>
8-
</div>
6+
<div class="row">
7+
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
8+
<div class="page-header">
9+
<h1>{_ "How to Help"}</h1>
10+
</div>
911

10-
<p><a href="/projects/create" class="btn btn-primary">Create a project</a> or <a href="/projects">find an existing</a> one to get involved with in our projects directory.</p>
12+
<p><a href="/projects/create" class="btn btn-primary margin-right">Create a project</a> or <a href="/projects">find an existing</a> one to get involved with in our projects directory.</p>
13+
</div>
14+
</div>
1115
{/block}

‎html-templates/includes/site.css.tpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
'branding/*'
1111
)}
1212

13-
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
13+
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,700,700italic' rel='stylesheet' type='text/css'>
1414

1515
{if $.User->hasAccountLevel('Staff')}
1616
{cssmin "features/content-editable.css"}

‎html-templates/mission.tpl

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,13 @@
33
{block title}{_ "Our Mission"} &mdash; {$dwoo.parent}{/block}
44

55
{block content}
6-
<div class="page-header">
7-
<h1>{_ "Our Mission"}</h1>
8-
</div>
6+
7+
<div class="row">
8+
<div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
9+
10+
<div class="page-header">
11+
<h1>{_ "Our Mission"}</h1>
12+
</div>
913

1014
{capture assign=aboutMarkdown}
1115
[Code for America](http://www.codeforamerica.org/) is a 501(c)3
@@ -21,5 +25,8 @@ Our programs change how we participate in government by:
2125

2226
{_($aboutMarkdown)|markdown}
2327

24-
<iframe width="560" height="315" src="//www.youtube.com/embed/kDFhzNfd-bg?rel=0" frameborder="0" allowfullscreen></iframe>
28+
<iframe width="560" height="315" src="//www.youtube.com/embed/kDFhzNfd-bg?rel=0" frameborder="0" allowfullscreen></iframe>
29+
30+
</div>
31+
</div>
2532
{/block}

‎html-templates/pages/page.tpl

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
{extends "designs/site.tpl"}
2+
3+
{block "css"}
4+
{$dwoo.parent}
5+
{cssmin "pages/article.css"}
6+
{/block}
7+
8+
{block title}{$data->Title|escape} &mdash; {$dwoo.parent}{/block}
9+
10+
{block "content-wrapper"}
11+
<div class="container-fluid">
12+
13+
{block content}
14+
{$Page = $data}
15+
<article class="article cms-page reading-width">
16+
<header class="article-header">
17+
{if Emergence\CMS\PagesRequestHandler::checkWriteAccess($Page, true)}
18+
<div class="btn-toolbar pull-right">
19+
<div class="btn-group">
20+
<a href="{$Page->getURL()}/edit" class="btn btn-default">Edit</a>&nbsp;
21+
<a href="{$Page->getURL()}/delete"
22+
class="btn btn-danger confirm"
23+
data-confirm-yes="Delete Page"
24+
data-confirm-no="Don&rsquo;t Delete"
25+
data-confirm-title="Deleting Post"
26+
data-confirm-body="Are you sure you want to delete the page &ldquo;{$Page->Title|escape}?&rdquo;"
27+
data-confirm-destructive="true"
28+
data-confirm-success-target=".cms-page"
29+
data-confirm-success-message="Page deleted">Delete</a>
30+
</div>
31+
</div>
32+
{/if}
33+
<h1 class="header-title">
34+
<a href="{$Page->getURL()}">{$Page->Title}</a>
35+
</h1>
36+
</header>
37+
38+
<section class="article-body">
39+
{$Page->renderBody()}
40+
</section>
41+
</article>
42+
{/block}
43+
44+
</div>
45+
{/block}

‎html-templates/pages/pages.tpl

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{extends "designs/site.tpl"}
2+
3+
{block title}Pages &mdash; {$dwoo.parent}{/block}
4+
5+
{block content}
6+
<div class="row">
7+
<div class="col-md-8 col-md-offset-2">
8+
9+
<header class="page-header">
10+
<form action="/pages/create" method="GET" class="pull-right">
11+
{* field "Title" "Page Title" *}
12+
<button type="submit" class="btn btn-success">Create New Page</button>
13+
</form>
14+
<h1>Pages Directory</h1>
15+
</header>
16+
17+
<ul>
18+
{foreach item=Page from=$data}
19+
<li><a href="/pages/{$Page->Handle}">{$Page->Title|escape}</a></li>
20+
{/foreach}
21+
</ul>
22+
23+
</div>
24+
</div>
25+
{/block}

‎html-templates/people/people.tpl

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,6 @@
22

33
{block title}{_ 'Members'} &mdash; {$dwoo.parent}{/block}
44

5-
{block "css"}
6-
{$dwoo.parent}
7-
{cssmin "pages/members.css"}
8-
{/block}
9-
105
{block js-bottom}
116
{$dwoo.parent}
127
{jsmin "features/sidebar-tags.js"}
@@ -19,12 +14,11 @@
1914

2015
<div class="row">
2116
<div class="col-sm-4 col-md-3">
22-
<div class="tags-ct members">
23-
24-
<header class="btn-group btn-group-justified btn-group-xs" role="group">
17+
<div class="tags-ct">
18+
<div class="btn-group btn-group-justified btn-group-xs margin-bottom" role="group">
2519
<a href="#members-by-tech" class="tagFilter active btn btn-default" role="button" data-group="byTech">{_ "skills"}</a>
2620
<a href="#members-by-project" class="tagFilter btn btn-default" role="button" data-group="byTopic">{_ "topics"}</a>
27-
</header>
21+
</div>
2822

2923
{template tagLink tagData rootUrl linkCls=""}
3024
<a class="{$linkCls}" href="{$rootUrl}?tag={$tagData.Handle}">{$tagData.Title}{if $tagData.itemsCount} <span class="badge pull-right">{$tagData.itemsCount|number_format}</span>{/if}</a>
@@ -46,9 +40,9 @@
4640

4741
<div class="col-sm-8 col-md-9">
4842
{foreach item=Person from=$data}
49-
{if $.foreach.default.index % 6 == 0}<div class="row members-list">{/if}
43+
{if $.foreach.default.index % 6 == 0}<div class="row">{/if}
5044
<div class="col-sm-4 col-md-2">
51-
{personLink $Person photo=yes photoSize=150 linkCls="thumbnail"}
45+
{personLink $Person photo=yes photoSize=150 linkCls="thumbnail text-center"}
5246
</div>
5347
{if $.foreach.default.index % 6 == 5 || $.foreach.default.last}</div>{/if}
5448
{/foreach}

0 commit comments

Comments
 (0)