#181, #199

client/imports/ui/components/mdeditor/mdeditor.ts

@@ -29,7 +29,7 @@
     ngAfterViewInit(){
       var self = this;
       // Instantiate SimpleMDE
-      this.mde = new SimpleMDE({ element: this.elementRef.nativeElement.value });
+      this.mde = new SimpleMDE({ element: this.textarea.nativeElement });
       // Read initial data from task markdown
       this.mde.value(self.mdData);
       // Catch changes

client/imports/ui/pages/course/course.html

@@ -9,6 +9,7 @@
           <a md-button [routerLink]="['/course/' + courseId + '/labs']">Labs</a>
           <a md-button [routerLink]="['/course/' + courseId + '/grades']" *ngIf="!isInstruct()">Grades</a>
           <a md-button [routerLink]="['/course/' + courseId]" *ngIf="isInstruct()">Students</a> 
+          <a md-button [routerLink]="['/course/' + courseId + '/lab-create']" *ngIf="isInstruct()">Upload</a>
         </div>
       </div>
     </md-toolbar>
@@ -17,7 +18,8 @@
         <a md-button [routerLink]="['/course/' + courseId]">{{ courseNumber }} Home</a>
         <a md-button [routerLink]="['/course/' + courseId + '/labs']">Labs</a>
         <a md-button [routerLink]="['/course/' + courseId + '/grades']" *ngIf="!isInstruct()">Grades</a>
-        <a md-button [routerLink]="['/course/' + courseId]" *ngIf="isInstruct()">Students</a>  
+        <a md-button [routerLink]="['/course/' + courseId]" *ngIf="isInstruct()">Students</a>
+        <a md-button [routerLink]="['/course/' + courseId + '/lab-create']" *ngIf="isInstruct()">Upload</a>  
       </div>
       <md-icon fontIcon="tuxicon-right"></md-icon>
     </md-toolbar>

client/imports/ui/pages/course/course.ts

@@ -41,7 +41,9 @@
 
       this.subscribe('user-courses', () => {
         this.autorun(() => {
-          this.courseNumber = Collections.courses.findOne({ _id: this.courseId }).course_number;
+          if(typeof Collections.courses.findOne({ _id: this.courseId }) !== "undefined") {
+            this.courseNumber = Collections.courses.findOne({ _id: this.courseId }).course_number;
+          }  
         });
       }, true);
     }

client/imports/ui/pages/dashboard/dashboard.html

@@ -62,13 +62,51 @@
 </div>
 
 <!-- Non-Logged In Dashboard -->
-<div class="tuxlab-dashboard" *ngIf="!user">
-  <md-card>
-    <md-card-title>
-      <h1>Welcome to TuxLab!</h1>  
-    </md-card-title>
-    <md-card-content>
-
-    </md-card-content>  
-  </md-card>
-</div>
+<div class="tuxlab-dashboard-nonuser" *ngIf="!user">
+
+  <!-- Section with Login and Background Picture -->
+  <div class="login-section">
+    <div class="login-wrapper">
+      <div class="login-card">
+        <h1>Welcome to TuxLab!</h1>
+        <md-card>
+          <md-card-content>  
+            <tuxlab-login></tuxlab-login>
+          </md-card-content>
+        </md-card>
+      </div>
+    </div>
+  </div>
+
+  <!-- About Section -->
+  <div class="about-section">
+    <div class="set-max-width">
+      <h1>About TuxLab</h1>
+      <p>
+        TuxLab is an opensource platform for creating interactive Linux courses.
+        Click on the link below to read more about TuxLab!
+        Come back if you like what you see, go away if you do not.
+        Scroll down to browse some of the available courses on the site!
+      </p>
+      <div class="button-wrapper">
+        <a md-raised-button href="http://www.tuxlab.org">Go To TuxLab.org</a>
+      </div>
+    </div>
+  </div>
+
+  <!-- Courses Section -->
+  <div class="courses-section">
+    <div class="set-max-width">
+      <h1>Explore Courses</h1>
+      <p>
+        These are some courses that you will be able to enroll 
+        in once you have registered.
+      </p>
+      <div>
+        <tuxlab-exploreview></tuxlab-exploreview>
+      </div>
+
+    </div>
+  </div>
+
+</div>

client/imports/ui/pages/dashboard/dashboard.ts

@@ -15,30 +15,38 @@
   import { courses } from '../../../../../collections/courses.ts';
   import { course_records } from '../../../../../collections/course_records.ts';
 
+// Explore
+  import { ExploreView } from '../../components/explore/explore.ts';
+
+// Login
+  import Login from '../account/login.ts';
+
 // Define Dashboard Component
 @Component({
-	selector: 'tuxlab-dashboard',
-	templateUrl: '/client/imports/ui/pages/dashboard/dashboard.html',
-	directives: [
-		MATERIAL_DIRECTIVES,
-		MD_SIDENAV_DIRECTIVES,
-		ROUTER_DIRECTIVES
-	]
+  selector: 'tuxlab-dashboard',
+  templateUrl: '/client/imports/ui/pages/dashboard/dashboard.html',
+  directives: [
+    MATERIAL_DIRECTIVES,
+    MD_SIDENAV_DIRECTIVES,
+    ROUTER_DIRECTIVES,
+    Login,
+    ExploreView
+  ]
 })
 
 // Export Dashboard Class
 @InjectUser('user')
 export default class Dashboard extends MeteorComponent {
-	user : Meteor.User;
+  user : Meteor.User;
   private courses = [];
   private grades = [];
 
   constructor() {
     super();
 
-		this.subscribe('user-courses', () => {
-			this.courses = courses.find({}, { limit: 5 }).fetch();
-		}, true);
+    this.subscribe('user-courses', () => {
+      this.courses = courses.find({}, { limit: 5 }).fetch();
+    }, true);
     this.subscribe('course-records', () => {
       let records = course_records.find().fetch();
       for(let i = 0; i < records.length; i++) {

client/imports/ui/pages/lab/labcreate.ts

@@ -46,6 +46,8 @@ export default class LabCreate extends MeteorComponent {
     this.lab.file = "";
     this.uploaded = false;
     this.output = "Compiling...  Errors will display below.";
+
+    document.getElementById('course-content').style.maxWidth = "100%";
   }
 
   /* UPLOAD HANDLER */

client/imports/ui/routes/course.routes.ts

@@ -12,6 +12,7 @@ import { GradeList } from '../pages/course/gradelist.ts';
 import { LabList } from '../pages/course/lablist.ts';
 import { CourseDashboard } from '../pages/course/course_dashboard.ts';
 import { GradeView } from '../pages/course/gradeview.ts';
+import LabCreate from '../pages/lab/labcreate.ts'
 import LabView from '../pages/lab/labview.ts';
 
 export const courseRoutes: RouterConfig = [
@@ -23,7 +24,8 @@ export const courseRoutes: RouterConfig = [
       { path: 'grades', component: GradeList },
       { path: 'labs', component: LabList },
       { path: 'labs/:labid', canActivate: [ GuardAuth, CourseGuardRecord ], component: LabView },
-      { path: 'grades/:gradeid', canActivate: [ GuardAuth ], component: GradeView }
+      { path: 'grades/:gradeid', canActivate: [ GuardAuth ], component: GradeView },
+      { path: 'lab-create', component: LabCreate }
   //  { path: 'users', as: 'UserList', component: UserList },
   //  { path: 'user/:userid', as: 'UserView', component: UserView },
   //  { path: 'labs', as: 'LabList', component: LabList },

client/imports/ui/routes/routes.ts

@@ -14,9 +14,6 @@ import { provideRouter, RouterConfig } from '@angular/router';
   // Error
   import ErrorPage from '../pages/error/error.ts'
 
-  // Lab
-  import LabCreate from '../pages/lab/labcreate.ts'
-
   // Course
   import { courseRoutes } from './course.routes.ts';
   import { CourseGuardRecord } from './course.guard.record.ts';
@@ -40,7 +37,6 @@ const routes : RouterConfig = [
   { path: 'login', component: Login },
   { path: 'terms', component: Terms },
   { path: 'privacy', component: Privacy },
-  { path: 'lab-create', component: LabCreate },
   { path: 'explore', component: Explore },
   { path: 'courses', component: CourseList },
   { path: 'error/:code', component: ErrorPage },

client/style/dashboard/_dashboard.scss

@@ -63,3 +63,67 @@
     }
   }
 }
+
+.tuxlab-dashboard-nonuser {
+  .login-section {
+    background-image: $university-splash-image;
+    background-repeat: no-repeat;
+    background-size: cover;
+    box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.5);
+    height: 55vh;
+    padding-top: 15vh;
+    .login-wrapper {
+      max-width: $tuxlab-max-width;
+      margin: 0 auto;
+      .login-card {
+        width: 500px;
+        margin:0;
+        h1 {
+          color: #e5e5e6;
+          font-family: "Open Sans";
+          font-weight: 300;
+          font-size: 46px;
+          text-align: center;
+        }
+        md-card {
+          margin: 0;
+          background-color: rgba(255, 255, 255, 0.6);
+          md-card-content {
+            margin: 0;
+            padding: 0;
+          }
+        }
+        .tuxlab-login {
+          height: 250px;
+        }
+      }
+    }
+  }
+  .section-text {
+    h1 {
+      color: #444444;
+      font-family: "Open Sans";
+      font-weight: 300;
+      font-size: 46px;
+      padding: 15px;
+    }
+    .button-wrapper {
+      margin-top: 20px;
+      margin-bottom: 15px;
+      text-align: center;
+      a {
+        color: white;
+        background-color: #4fafef;
+      }
+    }
+  }
+  .about-section {
+    background-color: white;
+    padding: 15px;
+    @extend .section-text;
+  }
+  .courses-section {
+    padding: 15px;
+    @extend .section-text;
+  }
+}

client/style/explore/_explore.scss

@@ -2,21 +2,6 @@
   width:100%;
   max-width:$tuxlab-max-width;
   margin:0 auto;
-
-  md-tab-group {
-    background-color: white;
-    margin: 30px;
-    .md-active.md-tab-label {
-      background-color: #ffd54f;
-    }
-    md-ink-bar {
-      background-color: white;
-    }
-  }
-  .md-tab-header {
-    background-color: #ffc400;
-  }
-
   #search-view {
     display: none;
   }
@@ -143,4 +128,17 @@
       float: left;
     }
   }
+  md-tab-group {
+    background-color: white;
+    margin: 30px;
+    .md-active.md-tab-label {
+      background-color: #ffd54f;
+    }
+    md-ink-bar {
+      background-color: white;
+    }
+  }
+  .md-tab-header {
+    background-color: #ffc400;
+  }
 }

client/style/theme/_cmu.scss

@@ -7,4 +7,5 @@ $primary-color-dark: #960e24;
 // Images
 $university_logo : url("https://upload.wikimedia.org/wikipedia/commons/thumb/9/9b/Carnegie_Mellon_wordmark.svg/2000px-Carnegie_Mellon_wordmark.svg.png");
 $university_picture: url("http://engineering.cmu.edu/files/images/maker-wing/hamerschlag-large.jpg");
+$university_splash_image : url('http://www.asergeev.com/pictures/archives/2013/1212/jpeg/12.jpg');
 $err_image : url("http://i.imgur.com/qI1CIwp.gif");

client/tuxlab.html

@@ -16,7 +16,7 @@
           <md-icon fontIcon="tuxicon-speaker"></md-icon>
           Announcements
         </a>
-        <a md-button [routerLink]="['/lab-view']">
+        <a md-button (click)="toLastLab()">
           <md-icon fontIcon="tuxicon-console"></md-icon>
           Terminal
         </a>