playsheet mainly restructured with templates, starting to tie in java…

…script elements

css/style.css

@@ -48,7 +48,6 @@ a:active { color: #660000; }
 input, select, textarea, option{ 
 	background-color: #000977;
 	background-color: rgba(1,1,2,.4);
-
 	color:white;
 	border-style: solid;
 	border-width: 0;
@@ -65,8 +64,10 @@ input, select, textarea, option{
 
 #wrapper {
     background-color: rgba(0,0,0,.2);
-    width: 800px;
-    height: 1000px;
+    width: 1024px;
+    min-height:80%;
+    overflow:auto;
+    max-height:100%;
     margin-right: auto;
     margin-left: auto;
     margin-top:10px;
@@ -81,14 +82,27 @@ input, select, textarea, option{
     border-left-color: #FFFFFF;
     border-top-width: 1px;
     border-top-style: solid;
+    border-bottom-width:1px;
+    border-bottom-style: solid;
+}
+#wrapper.socan{
+  width:1200px;
+}
+.vertical-center {
+  min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
+  min-height: 100vh; /* These two lines are counted as one :-)       */
+
+  display: flex;
+  align-items: center;
 }
 
 .wrapper{
     position: relative;
-    width:940px;
+    width:1024px;
     margin-left: auto;
     margin-right: auto;
     background-color: grey;
+    color: white;
     overflow: visible;
 }
 .inner{
@@ -106,16 +120,20 @@ input, select, textarea, option{
     width:100%;
     height:auto;
 }
-.wrapper:after{
-    background-color: grey;
+.small-input{
+  width:80px;
+}
+.wrapper:after{    background-color: grey;
 }
 
 .clean-list{
     list-style: none;
 }
 .inline-list *{
-	display:inline;
+	display:inline-block;
+
 }
+
 .text-left{
 	text-align:left;
 }
@@ -135,6 +153,15 @@ input, select, textarea, option{
    height: 0; 
    clear: both;
 }
+.border{
+  border-style:solid;
+  border-width:1px;
+  border-color: white;
+}
+.pad-top{
+  padding-top:2px;
+}
+
 .overflow_hidden{
 	overflow:hidden;
 }
@@ -155,12 +182,20 @@ input, select, textarea, option{
 	font-size:70%;
 }
 .largeinput{
-
 	width:750px;
 	max-width:83%;
 	height:50px;
 	max-height:75px;
 }
+.fill{
+  position:relative;
+  min-height:100px;
+  height:auto;
+  width:100%;
+  max-height:100%;
+  max-width: 100%;
+}
+
 .hidden{
 	display:none;
 }
@@ -521,42 +556,31 @@ display:none;
   }
 
   .lang {
-    width: 50px;
+    width: 60px;
     font-size: 0.8em;
   }
 
-  .music_row {
 
-    max-width: 990px;
-    /*
-          background-color:rgba(150,150,150,0.8);*/
+  .music_row, .music_row * {
+
+    /* font-size: 1.1em; */
   }
 
-  .music_row, .music_row * {
+tr.playitem > th > input.socan,tr.playitem > td > input.socan{
+  width:150px;
+}
 
-    font-size: 1.1em;
-  }
 
   .music_row_heading {
+    height:30px;
     background-color: lightgrey;
   }
 
-  .music_row_heading .crtc, .lang {
-    font-size: 0.7em;
-  }
-
-  .music_row_heading input, .music_row_heading span {
-    text-align: center;
+  .music_row_heading input{
+    margin-left:5px;
     background: none;
     border-width: 0;
   }
-
-  input {
-
-    display: inline;
-    width: auto;
-  }
-
   .playsheet_block, .spokenword_block, .podcast_block,.save_block {
     max-width: 1000px;
     width:100%;
@@ -599,99 +623,94 @@ display:none;
     margin-bottom: 2px;
   }
 
-  button.box.new:hover {
-    background-image: url('../images/pl.png');
+  button.box.playlist:hover {
+    background-image: url('../images/tags/playlist.png');
     opacity: 0.5;
   }
 
   button.box.cancon:hover {
-    background-image: url('../images/CAN.png');
+    background-image: url('../images/tags/can.png');
     opacity: 0.5;
   }
 
   button.box.femcon:hover {
-    background-image: url('../images/fe.png');
+    background-image: url('../images/tags/fe.png');
     opacity: 0.5;
   }
 
   button.box.instrumental:hover {
-    background-image: url('../images/inst.png');
+    background-image: url('../images/tags/inst.png');
     opacity: 0.5;
   }
 
   button.box.hit:hover {
-    background-image: url('../images/hit.png');
+    background-image: url('../images/tags/hit.png');
     opacity: 0.5;
   }
 
   button.box.partial:hover {
-    background-image: url('../images/part.png');
+    background-image: url('../images/tags/part.png');
     opacity: 0.5;
   }
 
 
   button.box.background:hover {
-    background-image: url('../images/BACKGROUND.png');
+    background-image: url('../images/tags/background.png');
     opacity: 0.5;
   }
 
   button.box.theme:hover {
-    background-image: url('../images/THEME.png');
+    background-image: url('../images/tags/theme.png');
     opacity: 0.5;
   }
 
-  button.box.new.filled {
-    background-image: url('../images/pl.png');
+  button.box.playlist.filled {
+    background-image: url('../images/tags/playlist.png');
     opacity: 1;
   }
 
   button.box.cancon.filled {
-    background-image: url('../images/cc.png');
+    background-image: url('../images/tags/can.png');
     opacity: 1;
   }
 
   button.box.femcon.filled {
-    background-image: url('../images/fe.png');
+    background-image: url('../images/tags/fe.png');
     opacity: 1;
   }
 
   button.box.instrumental.filled {
-    background-image: url('../images/inst.png');
+    background-image: url('../images/tags/inst.png');
     opacity: 1;
   }
 
   button.box.hit.filled {
-    background-image: url('../images/hit.png');
+    background-image: url('../images/tags/hit.png');
     opacity: 1;
   }
 
   button.box.partial.filled {
-    background-image: url('../images/part.png');
+    background-image: url('../images/tags/part.png');
     opacity: 1;
   }
 
   button.box.background.filled {
-    background-image: url('../images/BACKGROUND.png');
+    background-image: url('../images/tags/BACKGROUND.png');
     opacity: 1;
   }
 
   button.box.theme.filled {
-    background-image: url('../images/THEME.png');
+    background-image: url('../images/tags/THEME.png');
     opacity: 1;
   }
 
   button.box {
     background-color: transparent;
     background-image: none;;
   }
-
-  li.socan{
-width:1200px;
-  }
-
   .socan select, .socan button, .socan input, .music_row_socan input, .music_row_socan button{
     font-size:0.75em;
-    max-width:80px;
+    max-width:90px;
   }
 
   .socan_cue select{
@@ -704,14 +723,6 @@ width:1200px;
     padding-left:10px;
   }
 
-  input[type=checkbox] {
-    /* Double-sized Checkboxes */
-    -ms-transform: scale(2); /* IE */
-    -moz-transform: scale(2); /* FF */
-    -webkit-transform: scale(2); /* Safari and Chrome */
-    -o-transform: scale(2); /* Opera */
-    padding: 20px;
-  }
 
   .adPlay {
     /* Checkbox text */
@@ -1149,7 +1160,7 @@ button#submit_user.red{
 }
 
 .col1,.col2,.col3,.col4,.col5,.col6,.col7,.col8,.col15,.col20,.span5col6,.span3col4,.span3col5,.span4col5{
-	display:inline-block;
+  display:inline-block;
 	position:relative;
 	float:left;
 	height:auto;	

js/playsheet.js

@@ -1,16 +1,19 @@
 (function (){
-    var app = angular.module('playsheet',[]);
+    var app = angular.module('editplaysheet',[]);
 
     app.controller('PlaysheetController',function(){
     	this.playitems = playitems;
     	this.id = id;
+    	this.socan = socan;
     	this.name = name;
     	this.ads = ads;
+    	this.tags = tags;
+    	this.help = help;
     });
     //Declares <playitem> tag
     app.directive('playitem',function(){
     	return{
-    		restrict: 'E',
+    		restrict: 'A',
     		templateUrl: 'templates/playitem.html'
     	};
     });
@@ -20,7 +23,7 @@
     		templateUrl: 'templates/ad.html'
     	}
     });
-
+    var socan = true;
     var playitems = [
 	    		{
 		    		id:'10202',
@@ -45,8 +48,8 @@
 					artist:'some thing',
 					album:'swingin times',
 					composer:'random composer',
-					cancon_category:'20',
-					language:'english',
+					cancon_category:'30',
+					language:'french',
 					tags:{
 						playlist:'1',
 						cancon:'1',
@@ -75,4 +78,32 @@
 			played:'0'
 		}
 	];
+
+	var tags = ['cancon','femcon','hit','instrumental','partial','playlist'];
+	var help = {
+	albumHelp:			"Enter the title of the album, EP, or single that the track is released on."
+    +"If playing an mp3 or streaming from youtube, soundcloud etc, please take a moment to find the title of the album,"
+    +"EP, or single that the track is released on. If it is unreleased, enter 'unreleased'. "
+    +"If you are confused about what to enter here, please contact music@citr.ca This will help the artist chart "
+    +"and help provide listeners with information about the release."
+    ,artistHelp:		"Enter the name of the artist"
+    ,compHelp: 			"Enter the name of the composer or author"
+    ,timeHelp1:			"Hit the CUE button when the song starts playing . Or enter the start time. Time Format is HOUR:MIN"
+    ,timeHelp2:			"Hit the END button when the song stops playing. Enter the duration of the song.Time Format is MIN:SECOND"
+    ,plHelp:			"Playlist (New) Content: Was the song released in the last 6 months? "
+    ,ccHelp:			"Cancon: two of the following must apply: Music written by a Canadian, Artist performing it is Canadian, Performance takes place in Canada, Lyrics Are written by a Canadian"
+    ,feHelp:			"Femcon: two of the following must apply: Music is written by a female, Performers (at least one) are female, Words are written by a female, Recording is made by a female engineer."
+    ,instHelp:			"Is the song instrumental? (no vocals)"
+    ,partHelp:			"Partial songs: For a track to count as cancon, you need to play the whole thing and it must be at least 1 minute."
+    ,hitHelp:			"Has the song ever been a hit in Canada?  By law, the maximum is 10% Hits played, but we aim for 0% - you really shouldn't play hits!"
+    ,themeHelp:			"Is the song your themesong?"
+    ,backgroundHelp:	"Is the song playing in the background? Talking over the intro to a song does not count as background"
+    ,crtcHelp:			"Category 2: Rock, Pop, Dance, Country, Acoustic, Easy Listening.  Category 3: Concert, Folk, World Beat, Jazz, Blues, Religious, Experimental. <a href':'http://www.crtc.gc.ca/eng/archive/2010/2010-819.HTM' target':'_blank'>Click for more info</a>"
+    ,songHelp:			"Enter the name of the song"
+    ,langHelp:			"The language of the song"
+    ,adsHelp:			"Station IDs must be played or spoken in the first ten minutes of every hour"
+    ,guestsHelp:		"Any non-music features on your show.  This helps us to reach our 15% local spoken word minimum"
+    ,toolsHelp:			"Tools: [-] Delete the row  [+]Add a new row below"
+
+	} 
 })();