Add basic card styling to commits.

This commit is contained in:
Mihai Parparita 2014-10-20 23:22:32 -07:00
parent bb8c898f97
commit be01a8623f
5 changed files with 62 additions and 24 deletions

View file

@ -8,7 +8,7 @@
}, },
"link": { "link": {
"text-decoration": "none", "text-decoration": "none",
"color": "#4183c4" "color": "#e73b31"
}, },
"intro-paragraph": { "intro-paragraph": {
"font-size": "12pt", "font-size": "12pt",
@ -33,22 +33,46 @@
"margin": ".5em 0" "margin": ".5em 0"
}, },
"commit": { "commit": {
"background": "#fafafa", "background": "#fffbe8",
"border": "solid 1px #ccc", "border": "solid 1px #dddac8",
"margin": "1em 0", "box-shadow": "1px 1px 2px rgba(0, 0, 0, 0.11)",
"container": {
"margin": "1em 0"
},
"corner": {
"width": "0",
"max-height": "0",
"float": "left",
"cover": {
"width": "0",
"height": "0",
"border": "solid",
"border-width": "0 0 20px 10px",
"border-color": "transparent transparent #dddac8 white"
},
"border": {
"margin": "1px 0 0 1px",
"width": "0",
"height": "0",
"border": "solid",
"border-width": "0 0 20px 10px",
"border-color": "transparent transparent #fdf9e5 transparent"
}
},
"title": { "title": {
"padding": "8px", "padding": "10px",
"margin": "0" "margin": "0",
"z-index": "2"
}, },
"message": { "message": {
"margin": "0", "margin": "0",
"padding": "0 8px 8px", "padding": "0 10px 10px",
"white-space": "pre-wrap" "white-space": "pre-wrap"
}, },
"footer": { "footer": {
"background": "#fff", "border-top": "dashed 1px #cac7b7",
"border-top": "solid 1px #ddd", "margin": "0 10px",
"padding": "8px", "padding": "10px 0",
"date": { "date": {
"color": "#666" "color": "#666"
}, },

View file

@ -3,6 +3,7 @@ body {
font-size: 10pt; font-size: 10pt;
margin: 0; margin: 0;
padding: 0; padding: 0;
background: #eee;
} }
a { a {
@ -11,7 +12,6 @@ a {
} }
.header { .header {
background: #eee;
position: relative; position: relative;
height: 164px; height: 164px;
overflow: hidden; overflow: hidden;
@ -36,6 +36,10 @@ a {
margin-left: -557px; margin-left: -557px;
} }
.body-background {
background: #fff;
}
.body { .body {
padding: 10px; padding: 10px;
max-width: 1104px; max-width: 1104px;

View file

@ -12,10 +12,12 @@
<img src="/static/images/header.png" srcset="/static/images/header.png 1x, /static/images/header@2x.png 2x" width="1114" height="154" alt="GitHop"> <img src="/static/images/header.png" srcset="/static/images/header.png 1x, /static/images/header@2x.png 2x" width="1114" height="154" alt="GitHop">
</div> </div>
<div class="body"> <div class="body-background">
<h1>{{template "title" .}}</h1> <div class="body">
<h1>{{template "title" .}}</h1>
{{template "body" .}} {{template "body" .}}
</div>
</div> </div>
</body> </body>
</html> </html>

View file

@ -28,16 +28,24 @@
<div> <div>
{{range .Commits }} {{range .Commits }}
<div style="{{style "commit"}}"> <div style="{{style "commit.container"}}">
<h3 style="{{style "commit.title"}}">{{.Title}}</h3> <div style="{{style "commit.corner"}}">
{{if .Message}} <div style="{{style "commit.corner.cover"}}"></div>
<pre style="{{style "commit.message"}}">{{.Message}}</pre> </div>
{{end}} <div style="{{style "commit.corner"}}">
<div style="{{style "commit.footer"}}"> <div style="{{style "commit.corner.border"}}"></div>
<a href="{{.URL}}" </div>
style="{{style "link" "commit.footer.link"}}">{{.DisplaySHA}}</a> <div style="{{style "commit"}}">
<i title={{.DisplayDateTooltip}} <h3 style="{{style "commit.title"}}">{{.Title}}</h3>
style="{{style "commit.footer.date"}}">{{if $interval.Weekly}}{{.WeeklyDisplayDate}}{{else}}{{.DisplayDate}}{{end}}</i> {{if .Message}}
<pre style="{{style "commit.message"}}">{{.Message}}</pre>
{{end}}
<div style="{{style "commit.footer"}}">
<a href="{{.URL}}"
style="{{style "link" "commit.footer.link"}}">{{.DisplaySHA}}</a>
<i title={{.DisplayDateTooltip}}
style="{{style "commit.footer.date"}}">{{if $interval.Weekly}}{{.WeeklyDisplayDate}}{{else}}{{.DisplayDate}}{{end}}</i>
</div>
</div> </div>
</div> </div>
{{end}} {{end}}

Binary file not shown.