jdb/new-life-songs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Started working on the front-end.

Browse Source
This commit is contained in:
Jonathan Bernard 2015-03-02 21:27:05 -06:00
parent 43ba9216e5
commit 6ed3bd399b
16 changed files with 531 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,3 +1,4 @@
build/
.gradle/
*.sw?
.sass-cache/

6
build.gradle
View File

@ -37,6 +37,12 @@ dependencies {
*/
}
war {
from "resources/webapp"
}
// ## Custom tasks for local deployment
task deployLocal(dependsOn: ['build']) << {
def warName = "${project.name}-${version}.war"
def jettyHome = System.getenv("JETTY_HOME")

33
resources/webapp/css/forSize.mixin.scss Normal file
View File

@ -0,0 +1,33 @@
$xSmallScreen: 320px;
$smallScreen: 640px;
$wideScreen: 1200px;
$ultraWideScreen: 1600px;
/** ### forSize
* This mixin allows us to apply some rules selectively based on the screen
* size. There are three primary sizes: `small`, `medium`, and `large`, which
* are mutually exclusive. Additionally there are two additional sizes:
* `notSmall` and `ultraLarge`. `notSmall`, as the name implies matches any
* value which is not the small screen size, so it overlaps with medium,
* large, and ultraLarge. `ultraLarge` defines a wider minimum screen size
* than large, but neither large nor ultraLarge specify maximum widths,
* so ultraLarge is a strict subset of large. A screen large enough to match
* ultraLarge will also match large (compare with medium and large: matching
* medium means it will not match large, and vice versa). */
@mixin forSize($size) {
@if $size == xsmall {
@media screen and (max-width: $xSmallScreen) { @content; } }
@else if $size == small {
@media screen and (max-width: $smallScreen) { @content; } }
@else if $size == notSmall {
@media screen and (min-width: $smallScreen + 1) { @content; } }
@else if $size == medium {
@media screen and (min-width: $smallScreen + 1) and (max-width: $wideScreen - 1) { @content; } }
@else if $size == large {
@media screen and (min-width: $wideScreen) { @content; } }
@else if $size == ultraLarge {
@media screen and (min-width: $ultraWideScreen) { @content; } }
}

62
resources/webapp/css/new-life-songs.css Normal file
View File

@ -0,0 +1,62 @@
/**
* # New Life Songs DB
* @author Jonathan Bernard <jdb@jdb-labs.com>
*/
/** ### forSize
* This mixin allows us to apply some rules selectively based on the screen
* size. There are three primary sizes: `small`, `medium`, and `large`, which
* are mutually exclusive. Additionally there are two additional sizes:
* `notSmall` and `ultraLarge`. `notSmall`, as the name implies matches any
* value which is not the small screen size, so it overlaps with medium,
* large, and ultraLarge. `ultraLarge` defines a wider minimum screen size
* than large, but neither large nor ultraLarge specify maximum widths,
* so ultraLarge is a strict subset of large. A screen large enough to match
* ultraLarge will also match large (compare with medium and large: matching
* medium means it will not match large, and vice versa). */
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0; }
/* HTML5 elements */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block; }
body {
color: #333;
font-family: Cantarell;
margin: 2rem auto;
width: 60rem; }
header {
position: relative; }
header > h1, header > h2 {
font-family: "Roboto Condensed";
margin-bottom: 1.5em; }
header nav {
position: absolute;
top: 0;
right: 0; }
header nav ul {
list-style: none; }
header nav ul li {
display: block;
float: right;
padding: 0.4rem 0.6rem; }
header nav ul li a {
color: #333;
display: block;
padding: 0.1rem 0.4rem;
text-decoration: none; }
header nav ul li a:hover {
background-color: #333;
border-radius: 3px;
color: white; }
th {
font-family: "Roboto Condensed"; }
/*# sourceMappingURL=new-life-songs.css.map */

7
resources/webapp/css/new-life-songs.css.map Normal file
View File

@ -0,0 +1,7 @@
{
"version": 3,
"mappings": ";;;;;;;;;;;;;;;AACA,CAAE;EACE,eAAe,EAAE,UAAU;EAC3B,kBAAkB,EAAE,UAAU;EAC9B,UAAU,EAAE,UAAU;EACtB,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;;;AAGd;0CACsC;EAClC,OAAO,EAAC,KAAK;;ACAjB,IAAK;EACD,KAAK,EANF,IAAI;EAOP,WAAW,EAAE,SAAS;EACzB,MAAM,EAAE,SAAS;EACjB,KAAK,EAAE,KAAK;;AAEb,MAAO;EACH,QAAQ,EAAE,QAAQ;EAElB,wBAAe;IACX,WAAW,EAAE,kBAAkB;IAC/B,aAAa,EAAE,KAAK;EAExB,UAAI;IACA,QAAQ,EAAE,QAAQ;IAClB,GAAG,EAAE,CAAC;IACN,KAAK,EAAE,CAAC;IAER,aAAG;MACC,UAAU,EAAE,IAAI;MAEhB,gBAAG;QACC,OAAO,EAAE,KAAK;QACd,KAAK,EAAE,KAAK;QACZ,OAAO,EAAE,aAAa;QAEtB,kBAAE;UACE,KAAK,EAhClB,IAAI;UAiCS,OAAO,EAAE,KAAK;UACd,OAAO,EAAE,aAAa;UACtB,eAAe,EAAE,IAAI;QAEzB,wBAAQ;UACJ,gBAAgB,EAtC7B,IAAI;UAuCS,aAAa,EAAE,GAAG;UAClB,KAAK,EAAE,KAAK;;AAIhC,EAAG;EAAE,WAAW,EAAE,kBAAkB",
"sources": ["reset.scss","new-life-songs.scss"],
"names": [],
"file": "new-life-songs.css"
}

51
resources/webapp/css/new-life-songs.scss Normal file
View File

@ -0,0 +1,51 @@
/**
* # New Life Songs DB
* @author Jonathan Bernard <jdb@jdb-labs.com>
*/
$dark: #333;
@import "forSize.mixin.scss";
@import "reset.scss";
body {
color: $dark;
font-family: Cantarell;
margin: 2rem auto;
width: 60rem; }
header {
position: relative;
& > h1, & > h2 {
font-family: "Roboto Condensed";
margin-bottom: 1.5em; }
nav {
position: absolute;
top: 0;
right: 0;
ul {
list-style: none;
li {
display: block;
float: right;
padding: 0.4rem 0.6rem;
a {
color: $dark;
display: block;
padding: 0.1rem 0.4rem;
text-decoration: none; }
a:hover {
background-color: $dark;
border-radius: 3px;
color: white;
}
} } } }
th { font-family: "Roboto Condensed"; }

14
resources/webapp/css/reset.scss Normal file
View File

@ -0,0 +1,14 @@
/// Global Rules
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0; }
/* HTML5 elements */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block; }

BIN
resources/webapp/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

BIN
resources/webapp/images/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

146
resources/webapp/images/favicon.svg Normal file
View File

@ -0,0 +1,146 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="64"
height="64"
id="svg2"
version="1.1"
inkscape:version="0.48.4 r9939"
sodipodi:docname="favicon.svg"
inkscape:export-filename="/home/jdbernard/projects/new-life-songs/src/main/webapp/images/favicon.png"
inkscape:export-xdpi="180"
inkscape:export-ydpi="180">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="5.6"
inkscape:cx="36.631424"
inkscape:cy="36.08398"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1920"
inkscape:window-height="1028"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-196,-232.71932)">
<g
id="g3972"
transform="matrix(1.1988541,0,0,1.1988541,-34.689684,-59.360988)">
<path
sodipodi:nodetypes="ccccc"
inkscape:connector-curvature="0"
id="path3066"
d="m 197.85715,270.75504 c 18.44039,-9.68553 31.88947,-7.2133 43.21428,0.17857 l 0.17857,23.39286 c -15.06612,-7.66829 -29.63623,-7.15253 -43.75,0.89285 z"
style="fill:none;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
<path
sodipodi:nodetypes="ccc"
inkscape:connector-curvature="0"
id="path3836"
d="m 218.57143,288.34432 c 5.66926,-15.13182 -22.94395,-29.42428 4.28571,-44.10714 -18.57938,17.81207 6.32776,26.01559 -4.28571,44.10714 z"
style="fill:#f47321;fill-opacity:1;stroke:#f47321;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
sodipodi:nodetypes="ccc"
inkscape:connector-curvature="0"
id="path3838"
d="m 220.89286,250.84432 c -7.46377,9.88399 15.90915,18.84168 0.89285,36.96429 5.71398,-18.35279 -10.64059,-29.80509 -0.89285,-36.96429 z"
style="fill:#f8981d;fill-opacity:1;stroke:#f8981d;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<g
style="stroke:#666666"
transform="translate(30.241442,19.824244)"
id="g3957">
<g
style="stroke:#666666"
id="g3954">
<path
sodipodi:nodetypes="cccc"
inkscape:connector-curvature="0"
id="path3928"
d="m 181.13839,263.45593 -0.40178,-9.53125 -6.07143,-0.26785 0.37948,9.66517"
style="fill:none;stroke:#666666;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</g>
<path
style="fill:none;stroke:#666666;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 174.64286,256.73718 6.11607,0.29018"
id="path3930"
inkscape:connector-curvature="0" />
<path
sodipodi:type="arc"
style="fill:none;stroke:#666666;stroke-width:3;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
id="path3932"
sodipodi:cx="172.16518"
sodipodi:cy="261.9046"
sodipodi:rx="1.1607143"
sodipodi:ry="0.390625"
d="m 173.32589,261.9046 c 0,0.21574 -0.51967,0.39063 -1.16071,0.39063 -0.64105,0 -1.16072,-0.17489 -1.16072,-0.39063 0,-0.21573 0.51967,-0.39062 1.16072,-0.39062 0.64104,0 1.16071,0.17489 1.16071,0.39062 z"
transform="matrix(0.80146427,0,0,0.86720805,35.41978,35.950686)" />
<path
sodipodi:type="arc"
style="fill:none;stroke:#666666;stroke-width:3;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
id="path3932-8"
sodipodi:cx="172.16518"
sodipodi:cy="261.9046"
sodipodi:rx="1.1607143"
sodipodi:ry="0.390625"
d="m 173.32589,261.9046 c 0,0.21574 -0.51967,0.39063 -1.16071,0.39063 -0.64105,0 -1.16072,-0.17489 -1.16072,-0.39063 0,-0.21573 0.51967,-0.39062 1.16072,-0.39062 0.64104,0 1.16071,0.17489 1.16071,0.39062 z"
transform="matrix(0.80146427,0,0,0.86720805,41.50237,36.374793)" />
</g>
<g
style="fill:#666666;fill-opacity:1;stroke:#666666;stroke-opacity:1"
transform="translate(45.892857,26.25)"
id="g3968">
<path
style="fill:#666666;fill-opacity:1;stroke:#666666;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 187.76786,245.59879 0.13393,10.87054"
id="path3964"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc" />
<path
sodipodi:type="arc"
style="fill:#666666;fill-opacity:1;stroke:#666666;stroke-width:3;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
id="path3966"
sodipodi:cx="184.96652"
sodipodi:cy="255.05191"
sodipodi:rx="0.8370536"
sodipodi:ry="0.41294643"
d="m 185.80358,255.05191 c 0,0.22806 -0.37477,0.41295 -0.83706,0.41295 -0.46229,0 -0.83705,-0.18489 -0.83705,-0.41295 0,-0.22806 0.37476,-0.41295 0.83705,-0.41295 0.46229,0 0.83706,0.18489 0.83706,0.41295 z"
transform="matrix(1.103543,0,0,0.80447905,-18.013595,51.017545)" />
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

BIN
resources/webapp/images/new-life-songs.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

80
resources/webapp/images/new-life-songs.svg Normal file
View File

@ -0,0 +1,80 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="319.93701"
height="41.225643"
id="svg2"
version="1.1"
inkscape:version="0.48.4 r9939"
sodipodi:docname="new-life-songs.svg"
inkscape:export-filename="/home/jdbernard/projects/new-life-songs/src/main/webapp/images/new-life-songs.png"
inkscape:export-xdpi="112.52"
inkscape:export-ydpi="112.52">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="3.959798"
inkscape:cx="84.054843"
inkscape:cy="-31.95016"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:window-width="1920"
inkscape:window-height="1028"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-102.563,-63.265607)">
<text
xml:space="preserve"
style="font-size:40px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Aldrich;-inkscape-font-specification:Aldrich"
x="110"
y="95.933609"
id="text2985"
sodipodi:linespacing="125%"><tspan
sodipodi:role="line"
id="tspan2987"
x="110"
y="95.933609">New Life Songs</tspan></text>
<path
style="fill:none;stroke:#000000;stroke-width:3.84500003;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
d="m 389.73551,102.40638 c -45.27776,0 -285.24751,0.0799 -285.24751,0.0799 0.18336,-10.359756 0,-26.719287 0,-37.295643"
id="path2989"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccc" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

15
src/main/webapp/WEB-INF/web.xml
View File

@ -29,9 +29,24 @@
<load-on-startup>1</load-on-startup>
</servlet>
<servlet>
<servlet-name>GroovyTemplate</servlet-name>
<servlet-class>groovy.servlet.TemplateServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>New Life Songs REST API</servlet-name>
<url-pattern>/api/*</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>GroovyTemplate</servlet-name>
<url-pattern>*.gsp</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.gsp</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
</web-app>

8
src/main/webapp/js/new-life-songs.js Normal file
View File

@ -0,0 +1,8 @@
(function() {
var NLS = window.NewLifeSongs = {};
/// ## Models
/// ## Views
})();

54
src/main/webapp/services/index.html Normal file
View File

@ -0,0 +1,54 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="../images/favicon.ico">
<title>Services - New Life Songs Database</title>
<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"></script>
<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/1.10.5/js/jquery.dataTables.js"></script>
<!--<script type="application/javascript" src="https://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>-->
<script type="application/javascript" src="../js/new-life-songs.js"></script>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed|Roboto|Lato|Cuprum|Dosis|Cantarell' rel='stylesheet' type='text/css'>
<link href='http://cdn.datatables.net/1.10.5/css/jquery.dataTables.css' rel='stylesheet' type='text/css'>
<link href='../css/new-life-songs.css' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<h1>New Life Songs</h1>
<h2>Services</h2>
<nav><ul>
<li><a href="../admin/">Admin</a></li>
<li><a href="../songs/">Songs</a></li>
<li><a href="../services/">Services</a></li>
</ul></nav>
</header>
<section class=songs>
<table id=songs-table class="row-border hover compact" cellspacing=0>
<thead><tr>
<th class="dt-left">Date</th>
<th class="dt-left">Service Type</th>
</tr></thead>
<tfoot><tr>
<th class="dt-left">Date</th>
<th class="dt-left">Service Type</th>
</tr></tfoot>
</table>
</section>
<script type="application/javascript">
window.onload = function() {
$("#songs-table").dataTable( {
"ajax": {
"url": "http://localhost:8080/new-life-songs-2.0/api/v1/services/",
"dataSrc": "" },
"columns": [
{ "data": "date" },
{ "data": "serviceType" } ] }); };
</script>
</body>
</html>

54
src/main/webapp/songs/index.html Normal file
View File

@ -0,0 +1,54 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="../images/favicon.ico">
<title>Songs - New Life Songs Database</title>
<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js"></script>
<script type="application/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/1.10.5/js/jquery.dataTables.js"></script>
<!--<script type="application/javascript" src="https://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>-->
<script type="application/javascript" src="../js/new-life-songs.js"></script>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed|Roboto|Lato|Cuprum|Dosis|Cantarell' rel='stylesheet' type='text/css'>
<link href='http://cdn.datatables.net/1.10.5/css/jquery.dataTables.css' rel='stylesheet' type='text/css'>
<link href='../css/new-life-songs.css' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<h1>New Life Songs</h1>
<h2>Songs</h2>
<nav><ul>
<li><a href="../admin/">Admin</a></li>
<li><a href="../songs/">Songs</a></li>
<li><a href="../services/">Services</a></li>
</ul></nav>
</header>
<section class=songs>
<table id=songs-table class="row-border hover compact" cellspacing=0>
<thead><tr>
<th class="dt-left">Name</th>
<th class="dt-left">Artists</th>
</tr></thead>
<tfoot><tr>
<th class="dt-left">Name</th>
<th class="dt-left">Artists</th>
</tr></tfoot>
</table>
</section>
<script type="application/javascript">
window.onload = function() {
$("#songs-table").dataTable( {
"ajax": {
"url": "http://localhost:8080/new-life-songs-2.0/api/v1/songs/",
"dataSrc": "" },
"columns": [
{ "data": "name" },
{ "data": "artists" } ] }); };
</script>
</body>
</html>