Archives/asciinema.org
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Ported layout

Browse Source
This commit is contained in:
Marcin Kulik 2016-08-29 23:40:18 -04:00
parent 5eeb278b90
commit 648d927ad7
34 changed files with 701 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
brunch-config.js
View File

@ -22,7 +22,19 @@ exports.config = {
stylesheets: {
joinTo: "css/app.css",
order: {
after: ["web/static/css/app.css"] // concat app.css last
before: [
"web/static/css/source-sans-pro.css",
"web/static/css/base.sass",
"web/static/css/header.sass",
"web/static/css/flash.sass",
"web/static/css/footer.sass",
"web/static/css/home.sass",
"web/static/css/asciicasts.sass",
"web/static/css/users.sass",
"web/static/css/preview.sass",
"web/static/css/player.sass",
"web/static/css/contributing.sass"
]
}
},
templates: {

1
package.json
View File

@ -14,6 +14,7 @@
"brunch": "2.7.4",
"clean-css-brunch": "~2.0.0",
"css-brunch": "~2.0.0",
"sass-brunch": "^2.6.3",
"javascript-brunch": "~2.0.0",
"uglify-js-brunch": "~2.0.1"
}

BIN
web/static/assets/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

BIN
web/static/assets/fonts/SourceSansPro-Bold.ttf Normal file
View File

Binary file not shown.

BIN
web/static/assets/fonts/SourceSansPro-BoldItalic.ttf Normal file
View File

Binary file not shown.

BIN
web/static/assets/fonts/SourceSansPro-Italic.ttf Normal file
View File

Binary file not shown.

BIN
web/static/assets/fonts/SourceSansPro-Light.ttf Normal file
View File

Binary file not shown.

BIN
web/static/assets/fonts/SourceSansPro-LightItalic.ttf Normal file
View File

Binary file not shown.

BIN
web/static/assets/fonts/SourceSansPro-Regular.ttf Normal file
View File

Binary file not shown.

BIN
web/static/assets/fonts/SourceSansPro-Semibold.ttf Normal file
View File

Binary file not shown.

BIN
web/static/assets/fonts/SourceSansPro-SemiboldItalic.ttf Normal file
View File

Binary file not shown.

BIN
web/static/assets/images/brightbox.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
web/static/assets/images/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 768 B

BIN
web/static/assets/images/home-bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 188 KiB

10
web/static/assets/images/logo-red.svg Normal file
View File

@ -0,0 +1,10 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 866.0254037844387 866.0254037844387">
<defs>
<mask id="small-triangle-mask">
<rect width="100%" height="100%" fill="white"/>
<polygon points="508.01270189221935 433.01270189221935, 208.0127018922194 259.8076211353316, 208.01270189221927 606.217782649107" fill="black"></polygon>
</mask>
</defs>
<polygon points="808.0127018922194 433.01270189221935, 58.01270189221947 -1.1368683772161603e-13, 58.01270189221913 866.0254037844386" mask="url(#small-triangle-mask)" fill="#d40000"></polygon>
<polyline points="481.2177826491071 333.0127018922194, 134.80762113533166 533.0127018922194" stroke="#d40000" stroke-width="90"></polyline>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 731 B

BIN
web/static/assets/images/phoenix.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 14 KiB

1
web/static/css/app.css
View File

@ -1 +0,0 @@
/* This file is for your main application css. */

121
web/static/css/asciicasts.sass Normal file
View File

@ -0,0 +1,121 @@
.asciicasts-list-page
.sorting
margin-top: 20px
span
margin-right: 5px
.asciicast-list
margin-top: 20px
.asciicast-page
section.cinema
.container
overflow: hidden
.player
margin: 0 auto
section.info
padding-top: 15px
padding-bottom: 15px
.addthis_toolbox
display: inline-block
.author-avatar
display: block
float: left
width: 42px
height: 42px
margin-right: 10px
h2
margin: 0
font-size: 22px
position: relative
small
display: block
font-size: 14px
margin-top: 4px
position: absolute
width: 200px
color: #666
abbr
border-bottom: 0
section.meta
padding: 0
color: #666
.meta-list
list-style: none
padding: 0
margin: 10px 0
li
margin: 0 20px 0 0
display: inline-block
&:last-child
margin-right: 0
.actions-dropdown
display: inline-block
height: 40px
button
height: 100%
border-radius: 0
-moz-border-radius: 0
-webkit-border-radius: 0
border: 0
.actions-list
display: inline-block
float: right
margin-right: 10px
section.description
padding: 0
border-top: 0
.content
margin: 20px 0
h1
font-size: 22px
h2
font-size: 20px
.modal-dialog
max-width: 900px
width: initial
h2:first-child
margin-top: 0
input[type="text"]
width: 100%
border: 1px solid #ddd
font-family: Menlo, Monaco, Consolas, "Bitstream Vera Sans Mono", monospace
font-size: 12px
margin-bottom: 5px
padding: 6px
pre
word-wrap: normal
overflow: auto
.special-label
font-size: 12px
background-color: rgb(255, 239, 198)
color: rgb(161, 136, 43)
margin-left: 6px
padding: 2px 5px
border-radius: 4px
vertical-align: middle
cursor: help

128
web/static/css/base.sass Normal file
View File

@ -0,0 +1,128 @@
$background-color: #f7f7f7
$link-color: #06989a
body
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif
font-size: 15px
background-color: $background-color
padding-top: 42px
&.modal-open
margin-right: 0
.navbar-fixed-top
margin-right: 0
.btn
font-size: 15px
.form-control, .btn, pre
border-radius: 3px
pre
background-color: #fff
border-color: #ddd
code, pre
font-family: Menlo, Monaco, Consolas, "Courier New", monospace
.main
background-color: $background-color
min-height: 500px
> div:first-child
margin-top: 20px
h1, h2, h3
font-family: "Source Sans Pro", sans-serif
h1
font-size: 30px
span.glyphicon
top: 5px
h2
font-size: 24px
h3
font-size: 18px
blockquote
p
font-size: inherit
font-weight: inherit
color: #666
section.cinema
color: #fff
background-color: #222
padding: 25px 0
margin-top: -20px
section.odd, section.even
padding: 20px 0
section.odd
background-color: #fff
border-top: 1px solid #e0e0e0
border-bottom: 1px solid #e0e0e0
a
color: $link-color
&:hover
color: $link-color
.btn-primary
background-color: $link-color
.form-control:focus
border-color: $link-color
.pagination
> .active
> a, a:hover
background-color: $link-color
border-color: $link-color
.nav-pills
> li
> a
border-radius: 3px
padding: 6px 15px
&.active
> a
background-color: $link-color
&:hover
background-color: $link-color
.dropdown-menu
> li
> a:hover, > a:focus
background-color: $link-color
.author-avatar
img
width: 100%
height: 100%
.help-block
font-size: 12px
kbd
font-size: 90%
background-color: #FFF
color: #333
padding: 3px
border-radius: 3px
border: 1px solid #CCC
margin: 0 1px
label.radio
font-weight: normal
pre code
white-space: pre

12
web/static/css/contributing.sass Normal file
View File

@ -0,0 +1,12 @@
.bitcoin-logo
width: 32px
margin-right: 10px
#paypal-form
.button
margin-right: 15px
vertical-align: middle
span
vertical-align: middle
margin-right: 10px

20
web/static/css/flash.sass Normal file
View File

@ -0,0 +1,20 @@
section.flash
.container
padding-top: 10px
padding-bottom: 10px
font-weight: bold
text-align: center
&.notice
color: white
background-color: #06989a
&.alert
color: black
background-color: #c4a000
// bootstrap overrides
margin-bottom: 0
padding: 0
border: 0
border-radius: 0

21
web/static/css/footer.sass Normal file
View File

@ -0,0 +1,21 @@
footer
background-color: #fff
padding: 20px 0
margin-top: 20px
border-top: 1px solid rgba(230,230,230,0.75)
.links
list-style: none
margin: 0
padding: 0
li
margin-right: 20px
.avatar
margin-left: 15px
height: 10px
.brightbox-logo
display: inline-block
margin-top: 5px

100
web/static/css/header.sass Normal file
View File

@ -0,0 +1,100 @@
header.navbar
background-color: #000
color: #fff
border-radius: 0
border: 0
min-height: 42px
margin-bottom: 0
border-bottom: 1px solid #222222
.navbar-nav
> li
a
color: #fff
padding-top: 12px
padding-bottom: 8px
.record
font-weight: bold
color: #3465a4
&.active
a
background-color: #000
color: #fff
font-weight: bold
a:focus
color: #fff
a:hover
background-color: #333
color: #fff
&.active a:hover
background-color: #000
color: #fff
> .dropdown
> a
&:focus
color: #fff
background-color: #333
.caret
border-top-color: #aaaaaa
border-bottom-color: #aaaaaa
> a:hover, > a:focus
.caret
border-top-color: #aaaaaa
border-bottom-color: #aaaaaa
&.open
> a
color: inherit
background-color: #333
.dropdown-menu
background-color: #333
li
a:hover
background-color: #444
.navbar-collapse
border-color: #444 !important
.navbar-toggle
border: 0
padding: 10px
margin: 3px 5px 0 0
border-radius: 0
.icon-bar
background-color: #888
&:hover, &:focus
border-color: #aaa
background-color: #333
.icon-bar
background-color: #aaa
.navbar-brand
padding: 10px 5px 10px 15px
img
height: 20px
.session-info
img
height: 20px
margin-right: 10px
.caret
margin-left: 10px
@media (max-width: 767px)
.navbar-default .navbar-nav .open .dropdown-menu > li > a
color: #fff

40
web/static/css/home.sass Normal file
View File

@ -0,0 +1,40 @@
.home-page
.cinema
padding-top: 0px
padding-bottom: 0px
background-image: image-url("home-bg.jpg")
background-position: 50%
.row
> div
margin-top: 50px
margin-bottom: 50px
.player-wrapper
.asciinema-player
box-shadow: 0 0 16px 5px rgba(255, 255, 255, 0.3)
> div:first-child
h1
margin-top: 0
font-size: 40px
h2
line-height: 1.2
h1, h2
text-shadow: black 3px 3px 5px
.popover
color: #333
max-width: 1000px
width: 480px
.features
h1
margin: 0 0 20px 0
text-align: center
.about
h3
margin-top: 10px

82
web/static/css/phoenix.css
View File

File diff suppressed because one or more lines are too long

2
web/static/css/player.sass Normal file
View File

@ -0,0 +1,2 @@
//= require asciinema-player
//= require powerline-symbols

77
web/static/css/preview.sass Normal file
View File

@ -0,0 +1,77 @@
.preview
margin-bottom: 30px
overflow: hidden
.thumbnail-link
display: block
position: relative
text-decoration: none
.play-button
display: none
z-index: 1
font-size: 80px
&:hover
.play-button
display: block
&:active
.play-button
font-size: 90px
.thumbnail
padding: 0
background-color: #000
border: 0
border-radius: 3px
border-bottom-left-radius: 0
border-bottom-right-radius: 0
.info
background-color: #fff
padding: 10px
border-bottom-left-radius: 3px
border-bottom-right-radius: 3px
border: 1px solid #eee
border-bottom: 1px solid #ddd
border-top-width: 0
.author-avatar
float: left
width: 20px
height: 20px
h2
margin: 0 0 6px 0
font-size: 20px
.duration
float: right
font-size: 14px
small
margin-left: 5px
font-size: 14px
color: #333
abbr
border-bottom: 0
.play-button
position: absolute
left: 0
top: 0
right: 0
bottom: 0
text-align: center
color: white
.arrow
width: 100%
height: 100%
display: table
span
vertical-align: middle
display: table-cell

30
web/static/css/source-sans-pro.css Normal file
View File

@ -0,0 +1,30 @@
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 300;
src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url('/fonts/SourceSansPro-Light.ttf') format('truetype');
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 400;
src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url('/fonts/SourceSansPro-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 600;
src: local('Source Sans Pro Semibold'), local('SourceSansPro-Semibold'), url('/fonts/SourceSansPro-Semibold.ttf') format('truetype');
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 700;
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url('/fonts/SourceSansPro-Bold.ttf') format('truetype');
}
@font-face {
font-family: 'Source Sans Pro';
font-style: italic;
font-weight: 400;
src: local('Source Sans Pro Italic'), local('SourceSansPro-It'), url('/fonts/SourceSansPro-Italic.ttf') format('truetype');
}

36
web/static/css/users.sass Normal file
View File

@ -0,0 +1,36 @@
.login-form
input.email
width: 250px
margin-right: 10px
.username-form
input#user_username
width: 200px
.profile-page
.cinema
.user-avatar
float: left
width: 64px
height: 64px
img
width: 100%
height: 100%
h1
display: inline-block
margin: 0 0 0 15px
font-size: 38px
small
display: block
font-size: 16px
margin-top: 6px
.actions
margin: 20px 0 0 0
.edit-page
> .row:last-child
margin-top: 30px

33
web/templates/layout/app.html.eex
View File

@ -4,32 +4,25 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Hello Asciinema!</title>
<title><%= page_title @conn %></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="<%= static_path(@conn, "/css/app.css") %>">
<link rel="shortcut icon" href="<%= static_path(@conn, "/images/favicon.png") %>">
<!-- google analytics -->
<!-- content for head (twitter, open graph tags) -->
</head>
<body>
<div class="container">
<header class="header">
<nav role="navigation">
<ul class="nav nav-pills pull-right">
<li><a href="http://www.phoenixframework.org/docs">Get Started</a></li>
</ul>
</nav>
<span class="logo"></span>
</header>
<%= render "header.html", conn: @conn %>
<%= render "flash.html", conn: @conn %>
<p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
<p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
<div class="main">
<%= render @view_module, @view_template, assigns %>
</div>
<main role="main">
<%= render @view_module, @view_template, assigns %>
</main>
<%= render "footer.html", conn: @conn %>
</div> <!-- /container -->
<script src="<%= static_path(@conn, "/js/app.js") %>"></script>
<%# <script src="<%= static_path(@conn, "/js/app.js") %1>"></script> %>
<!-- https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js -->
</body>
</html>

4
web/templates/layout/flash.html.eex Normal file
View File

@ -0,0 +1,4 @@
<!--
<p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
<p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
-->

39
web/templates/layout/footer.html.eex Normal file
View File

@ -0,0 +1,39 @@
<footer>
<div class="container">
<div class="row">
<div class="col-md-4 col-xs-4">
<ul class="links">
<li><a href="/about">About</a></li>
<li><a href="/contributing">Contributing</a></li>
<li><a href="/tos">Terms of Service</a></li>
<li><a href="/privacy">Privacy Policy</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</div>
<div class="col-md-4 col-xs-4 text-center">
<span>
Sponsored by
<br/>
<a class="brightbox-logo" href="http://brightbox.com/" rel="nofollow">
<img src="<%= static_path(@conn, "/images/brightbox.png") %>" />
</a>
</span>
</div>
<div class="col-md-4 col-xs-4">
<ul class="links pull-right">
<li>
<b>irc:</b> <a href="irc://freenode/asciinema">#asciinema</a> on Freenode
</li>
<li>
<b>twitter:</b> <a href="https://twitter.com/asciinema" title="Follow @asciinema on Twitter">@asciinema</a>
</li>
<li>
<b>e-mail:</b> support at this domain
</li>
</ul>
</div>
</div>
</div>
</footer>

27
web/templates/layout/header.html.eex Normal file
View File

@ -0,0 +1,27 @@
<header class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-target=".navbar-ex1-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">
<img src="<%= static_path(@conn, "/images/logo-red.svg") %>">
</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a href="/browse/featured">Browse</a></li>
<li><a href="/docs">Docs</a></li>
<li><a href="http://blog.asciinema.org">Blog</a></li>
</ul>
<ul class="nav navbar-nav navbar-right session-info">
<li><a href="/login/new" id="log-in">Log in</a></li>
</ul>
</div>
</div>
</header>

7
web/views/layout_view.ex
View File

@ -1,3 +1,10 @@
defmodule Asciinema.LayoutView do
use Asciinema.Web, :view
def page_title(conn) do
case conn.assigns[:page_title] do
nil -> "asciinema - Record and share your terminal sessions, the right way"
title -> title <> " - asciinema" # TODO return safe string here?
end
end
end