settings and sessions UI

Gemfile.lock

@@ -1,6 +1,8 @@
 GEM
   remote: https://rubygems.org/
   specs:
+    action_interceptor (1.1.0)
+      rails (>= 3.1)
     actioncable (5.0.7)
       actionpack (= 5.0.7)
       nio4r (>= 1.2, < 3.0)
@@ -77,6 +79,12 @@ GEM
     faraday (0.12.2)
       multipart-post (>= 1.2, < 3)
     ffi (1.9.23)
+    fine_print (3.1.0)
+      action_interceptor (>= 1.0)
+      jquery-rails
+      rails (>= 3.1)
+      responders
+      squeel
     font-awesome-sass (5.0.13)
       sassc (>= 1.11)
     globalid (0.4.1)
@@ -133,6 +141,8 @@ GEM
     omniauth-twitter (1.4.0)
       omniauth-oauth (~> 1.1)
       rack
+    polyamorous (1.1.0)
+      activerecord (>= 3.0)
     popper_js (1.12.9)
     puma (3.11.4)
     rack (2.0.5)
@@ -169,6 +179,9 @@ GEM
     rb-fsevent (0.10.3)
     rb-inotify (0.9.10)
       ffi (>= 0.5.0, < 2)
+    responders (2.4.0)
+      actionpack (>= 4.2.0, < 5.3)
+      railties (>= 4.2.0, < 5.3)
     rspec-core (3.7.1)
       rspec-support (~> 3.7.0)
     rspec-expectations (3.7.0)
@@ -214,6 +227,10 @@ GEM
       activesupport (>= 4.0)
       sprockets (>= 3.0.0)
     sqlite3 (1.3.13)
+    squeel (1.2.3)
+      activerecord (>= 3.0)
+      activesupport (>= 3.0)
+      polyamorous (~> 1.1.0)
     tabler-rubygem (0.1.2)
       autoprefixer-rails (>= 6.0.3)
     thor (0.20.0)
@@ -248,6 +265,7 @@ DEPENDENCIES
   dotenv-rails
   factory_bot_rails
   faker
+  fine_print
   font-awesome-sass (~> 5.0.13)
   jbuilder (~> 2.5)
   jquery-rails

app/assets/stylesheets/application.scss

@@ -41,14 +41,6 @@
 $background-color: #D1E2FF;
 $rule-color: lightblue;
 
-.header {
-  background-color: transparent;
-}
-
-.footer {
-  background-color: $background-color;
-}
-
 .video-container {
   position: relative;
   width: 100%;
@@ -77,8 +69,23 @@ iframe{
 html, body {
   width: 100%;
   height: 100%;
-  background: linear-gradient(180deg, $background-color 50%, white 50%);
+  //background: linear-gradient(180deg, $background-color 50%, white 50%);
-  background-repeat: no-repeat;
+  //background-repeat: no-repeat;
+  background-color: $background-color;
+}
+
+.wrapper {
+  min-height:100%;
+  position:relative;
+}
+
+.footer {
+  width: 100%;
+  height: 70px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  text-align: center;
 }
 
 .small-rule {
@@ -88,7 +95,7 @@ html, body {
 }
 
 .thumbnail {
-  height: 60%;
+  height: 40%;
   width: auto;
 }
 
@@ -125,19 +132,6 @@ body[data-controller=landing].app-background {
   z-index: 999;
 }
 
-.header {
-  padding: 20px 40px;
-  margin-bottom: 160px;
-  .logo {
-    max-width: 150px;
-    max-height: 50px;
-  }
-}
-
-.footer {
-  padding: 20px;
-}
-
 .center-block {
   float: none;
 }

app/controllers/main_controller.rb

@@ -1,6 +1,6 @@
 class MainController < ApplicationController
 
-  before_action :redirect_to_room
+  #before_action :redirect_to_room
 
   # GET /
   def index

app/helpers/sessions_helper.rb

@@ -2,7 +2,8 @@ module SessionsHelper
   # Logs a user into GreenLight.
   def login(user)
     session[:user_id] = user.id
-    redirect_to room_path(user.room.uid)
+    redirect_to root_path
+    #redirect_to room_path(user.room.uid)
   end
 
   # Logs current user out of GreenLight.

app/models/user.rb

@@ -81,6 +81,10 @@ class User < ApplicationRecord
     end
   end
 
+  def firstname
+    name.split(' ').first
+  end
+
   private
 
   # Initializes a room for the user.

app/views/layouts/application.html.erb

@@ -12,6 +12,8 @@
     data-resource="<%= params[:resource] %>"
     data-current-user="<%= current_user.try(:encrypted_id) %>">
 
+    <div class="wrapper">
+
       <!-- Messages -->
       <div id='alerts'>
         <div class='flash-alerts'>
@@ -31,5 +33,7 @@
       <%= yield %>
 
       <%= render "shared/footer" %>
+      
+    </div>
   </body>
 </html>

app/views/main/index.html.erb

@@ -1,16 +1,21 @@
 <div class="container">
+
+  <% if current_user %>
+	  <h1 id="user-text" class="display-3 text-center text-primary"><%= "Welcome, #{current_user.firstname}." %></h1>
+    <%= render "shared/modals/create_room_modal" %>
+  <% else %>
     <h1 id="main-text" class="display-3 text-center text-primary">Teach Students Online.</h1>
+    <%= render "shared/modals/video_modal" %>
+  <% end %>
   <hr class="small-rule">
 
-  <%= render "shared/start_meeting" %>
+  <!-- <%= render "shared/start_meeting" %> -->
 
   <br>
 
   <%= render "shared/features" %>
 </div>
 
-<%= render "shared/modals/video_modal" %>
-
 <script>
 $(window).on('load',function(){
   $('#welcomeModal').modal('show');

app/views/rooms/sessions.html.erb

@@ -1,34 +1,75 @@
 <div class="container">
-  <div class="col-lg-10">
+
+  <div class="row">
+    <div class="col-10 offset-1">
+      <p style="font-size: 25px;">Sessions</p>
+      <!-- <div class="input-icon float-right">
+        <input type="text" class="form-control" placeholder="Search for...">
+        <span class="input-icon-addon">
+          <i class="fe fe-search"></i>
+        </span>
+      </div> -->
+      <hr>
+    </div>
+  </div>
+
+  <div class="col-10 offset-1">
     <div class="card">
-      <table class="table card-table table-vcenter">
+      <div class="table-responsive">
+        <table class="table table-hover table-outline table-vcenter text-nowrap card-table">
+          <thead>
+            <tr>
+              <th>Name</th>
+              <th>Thumbnails</th>
+              <th class="text-left">Length</th>
+              <th class="text-left">Users</th>
+              <th class="text-left">Visibility</th>
+              <th class="text-center"><i class="icon-settings"></i></th>
+            </tr>
+          </thead>
           <tbody>
           <% 3.times do %>
             <tr>
               <td>
-              <!--<i class="fas fa-users fa-2x"></i>-->
+                <div>Example Meeting</div>
-              <img class="thumbnail" src="http://test-install.blindsidenetworks.com/presentation/b622495d927cd99e9898b0601c2b18a5424a0627-1527259102285/presentation/d2d9a672040fbde2a47a10bf6c37b6a4b5ae187f-1527259102298/thumbnails/thumb-1.png">
+                <div class="small text-muted">
-            </td>
+                  June 21, 2017 <i>(about 3 hours ago)</i>
-            <td class="text-left">
+                </div>
-              <h4>Introduction to Dinosaurs</h4>
-              <p><i>June 21, 2017 (about 3 hours ago)</i></p>
-            </td>
-            <td class="text-center d-none d-md-table-cell text-nowrap">
-              <h6 class="text-uppercase"><strong>Users</strong></h6>
-              <h5>3</h5>
-            </td>
-            <td class="text-center d-none d-md-table-cell text-nowrap">
-              <h6 class="text-uppercase"><strong>Length</strong></h6>
-              <h5>2 hours</h5>
-            </td>
-            <td class="text-center d-none d-md-table-cell text-nowrap">
-              <h6 class="text-uppercase"><strong>Visbility</strong></h6>
-              <h5>Unlisted</h5>
               </td>
               <td>
-              <button type="button" class="btn btn-icon btn-success"><i class="fas fa-video"></i></button>
+                <img class="thumbnail px-2" src="http://test-install.blindsidenetworks.com/presentation/b622495d927cd99e9898b0601c2b18a5424a0627-1527259102285/presentation/d2d9a672040fbde2a47a10bf6c37b6a4b5ae187f-1527259102298/thumbnails/thumb-1.png">
-              <button type="button" class="btn btn-icon btn-primary"><i class="fas fa-chart-bar"></i></button>          
+                <img class="thumbnail px-2" src="http://test-install.blindsidenetworks.com/presentation/b622495d927cd99e9898b0601c2b18a5424a0627-1527259102285/presentation/d2d9a672040fbde2a47a10bf6c37b6a4b5ae187f-1527259102298/thumbnails/thumb-1.png">
-              <button type="button" class="btn btn-icon btn-warning"><i class="fas fa-podcast"></i></button>
+                <img class="thumbnail px-2" src="http://test-install.blindsidenetworks.com/presentation/b622495d927cd99e9898b0601c2b18a5424a0627-1527259102285/presentation/d2d9a672040fbde2a47a10bf6c37b6a4b5ae187f-1527259102298/thumbnails/thumb-1.png">
+              </td>
+              <td class="text-left">
+                <div class="small text-muted text-uppercase">
+                  Length
+                </div>
+                1 hr
+              </td>
+              <td class="text-left">
+                <div class="small text-muted text-uppercase">
+                  Users
+                </div>
+                4
+              </td>
+              <td class="text-left">
+                <div class="small text-muted text-uppercase">
+                  Visibility
+                </div>
+                Unlisted
+              </td>
+              <td class="text-center">
+                <div class="item-action dropdown">
+                  <a href="javascript:void(0)" data-toggle="dropdown" class="icon"><i class="fe fe-more-vertical"></i></a>
+                  <div class="dropdown-menu dropdown-menu-right">
+                    <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-tag"></i> Action </a>
+                    <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-edit-2"></i> Another action </a>
+                    <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-message-square"></i> Something else here</a>
+                    <div class="dropdown-divider"></div>
+                    <a href="javascript:void(0)" class="dropdown-item"><i class="dropdown-icon fe fe-link"></i> Separated link</a>
+                  </div>
+                </div>
               </td>
             </tr>
           <% end %>
@@ -37,6 +78,7 @@
       </div>
     </div>    
   </div>
+</div>
 
 Sessions
 <br><br>

app/views/shared/_footer.html.erb

@@ -1,3 +1,3 @@
-<div class="footer mt-6">
+<div class="footer">
   <h5 class="text-center">Powered by <a target="_blank" href="http://bigbluebutton.org/">BigBlueButton</a>.</h5>
 </div>

app/views/shared/_header.html.erb

@@ -1,4 +1,4 @@
-<div class="header py-4">
+<div class="header py-4 mb-6">
 	<div class="container">
 		<div class="d-flex">
 			<a class="header-brand" href="{{ site.base }}/index.html">
@@ -7,6 +7,11 @@
 
 			<div class="d-flex order-lg-2 ml-auto">
 				<% if current_user %>
+					<a class="px-3" href="" data-toggle="modal" data-target="#createRoomModal">
+						<i class="fas fa-plus"></i> Create Room
+					</a>
+					<%= render "shared/modals/login_modal" %>
+					<a class="px-3" href="">Sessions</a>
 					<div class="dropdown">
 						<a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown">
 							<% if current_user.image.nil? %>
@@ -20,6 +25,9 @@
 							</span>
 						</a>
 					</div>
+					<%= link_to logout_path do %>
+						<i class="fas fa-sign-out-alt fa-2x px-5"></i>
+					<% end %>
 				<% else %>
 					<button type="submit" class="btn btn-pill btn-outline-primary ml-auto" data-toggle="modal" data-target="#loginModal">Login</button>
 					<%= render "shared/modals/login_modal" %>

app/views/shared/modals/_create_room_modal.html.erb

@@ -0,0 +1,31 @@
+<div class="modal fade" id="createRoomModal" tabindex="-1" role="dialog">
+  <div class="modal-dialog modal-dialog-centered" role="document">
+    <div class="modal-content text-center">
+      <div class="modal-body">
+        <div class="card-body p-6">
+          <div class="card-title text-primary">
+            <h3>Create New Room</h3>
+          </div>
+
+          <hr class="small-rule">
+          <hr>
+          <div class="form-group">
+            <div class="input-icon">
+              <span class="input-icon-addon">
+                <i class="fas fa-chalkboard-teacher"></i>
+              </span>
+              <input type="email" class="form-control" placeholder="Enter a room name...">
+            </div>
+          </div>
+          <div class="form-footer">
+            <button type="submit" class="btn btn-outline-primary btn-block btn-pill">Create Room</button>
+          </div>
+        </div>
+        <div class="card-footer">
+          <p>You will be free to delete this room at any time.</p>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</div>

app/views/users/settings.html.erb

@@ -1,93 +1,125 @@
 <div class="container">
 
-  <div class="form-group">
+  <div class="row">
-    <div class="selectgroup selectgroup-pills">
+    <div class="col-10 offset-1">
-      <label class="selectgroup-item">
+      <p style="font-size: 25px;">Settings</p>
-        <input type="radio" name="icon-input" value="1" class="selectgroup-input" checked="">
+      <hr>
-        <span class="selectgroup-button selectgroup-button-icon"><i class="fas fa-user"></i> Account</span>
-      </label>
-      <label class="selectgroup-item">
-        <input type="radio" name="icon-input" value="2" class="selectgroup-input">
-        <span class="selectgroup-button selectgroup-button-icon"><i class="fas fa-pencil-alt"></i> Design </span>
-      </label>
     </div>
   </div>
 
-  <div class="form-group">
+  <div class="row">
-    <label class="form-label">Background</label>
+    <div class="col-2 offset-1">
-    <div class="row gutters-xs">
+      <button id="account" class="setting-btn btn btn-primary btn-sm btn-block m-2">Account</button>
-      <div class="col-auto">
+      <button id="password" class="setting-btn btn btn-primary btn-sm btn-block m-2">Password</button>
-        <label class="colorinput">
+      <button id="design" class="setting-btn btn btn-primary btn-sm btn-block m-2">Design</button>
-          <input name="color" type="radio" value="azure" class="colorinput-input">
-          <span class="colorinput-color bg-azure"></span>
-        </label>
-      </div>
-      <div class="col-auto">
-        <label class="colorinput">
-          <input name="color" type="radio" value="indigo" class="colorinput-input" checked="">
-          <span class="colorinput-color bg-indigo"></span>
-        </label>
-      </div>
-      <div class="col-auto">
-        <label class="colorinput">
-          <input name="color" type="radio" value="purple" class="colorinput-input">
-          <span class="colorinput-color bg-purple"></span>
-        </label>
-      </div>
-      <div class="col-auto">
-        <label class="colorinput">
-          <input name="color" type="radio" value="pink" class="colorinput-input">
-          <span class="colorinput-color bg-pink"></span>
-        </label>
-      </div>
-      <div class="col-auto">
-        <label class="colorinput">
-          <input name="color" type="radio" value="red" class="colorinput-input">
-          <span class="colorinput-color bg-red"></span>
-        </label>
-      </div>
-      <div class="col-auto">
-        <label class="colorinput">
-          <input name="color" type="radio" value="orange" class="colorinput-input">
-          <span class="colorinput-color bg-orange"></span>
-        </label>
-      </div>
-      <div class="col-auto">
-        <label class="colorinput">
-          <input name="color" type="radio" value="yellow" class="colorinput-input">
-          <span class="colorinput-color bg-yellow"></span>
-        </label>
-      </div>
-      <div class="col-auto">
-        <label class="colorinput">
-          <input name="color" type="radio" value="lime" class="colorinput-input">
-          <span class="colorinput-color bg-lime"></span>
-        </label>
-      </div>
-      <div class="col-auto">
-        <label class="colorinput">
-          <input name="color" type="radio" value="green" class="colorinput-input">
-          <span class="colorinput-color bg-green"></span>
-        </label>
-      </div>
-      <div class="col-auto">
-        <label class="colorinput">
-          <input name="color" type="radio" value="teal" class="colorinput-input">
-          <span class="colorinput-color bg-teal"></span>
-        </label>
-      </div>
-    </div>
     </div>
 
+    <div class="col-8">
+      <div id="account" class="setting-view card">
+        <div class="card-body p-6">
+          <div class="card-title text-primary">
+            <h4>Update your Account</h4>
+          </div>
+          <hr>
           <div class="form-group">
-    <label class="form-label">Name</label>
+            <div class="row">
-    <input type="text" class="form-control" value="<%= current_user.name %>" readonly="">
+              <div class="col-6">
-
+                <label class="form-label">Fullname</label>
+                <div class="input-icon">
+                  <span class="input-icon-addon">
+                    <i class="fas fa-user"></i>
+                  </span>
+                  <input type="text" class="form-control" value="<%= current_user.name %>" placeholder="Fullname">
+                </div>
+              </div>
+              <div class="col-6">
                 <label class="form-label">Email</label>
-    <input type="text" class="form-control" value="<%= current_user.email %>" readonly="">
+                <div class="input-icon">
-
+                  <span class="input-icon-addon">
+                    <i class="fas fa-at"></i>
+                  </span>
+                  <input type="email" class="form-control" value="<%= current_user.email %>" placeholder="Email">
+                </div>
+              </div>
+            </div>
+            <br>
             <label class="form-label">Account Provider</label>
             <input type="text" class="form-control" value="<%= current_user.provider.capitalize %>" readonly="">
+            <br>
+            <label class="form-label">Profile Image</label>
+            <span class="avatar avatar-xl" style="background-image: url(<%= current_user.image %>)"></span>
+          </div>
+        </div>
+        <div class="card-footer">
+          <a href="#" class="btn btn-primary float-right">Update</a>
+        </div>
+      </div>
+
+      <div id="password" class="setting-view card">
+        <div class="card-body p-6">
+          <div class="card-title text-primary">
+            <h4>Change your Password</h4>
+          </div>
+          <hr>
+          <div class="form-group">
+            <div class="row">
+              <div class="col-9">
+                <label class="form-label">Old Password</label>
+                <input type="password" class="form-control">
+                <br>
+                <label class="form-label">New Password</label>
+                <input type="password" class="form-control"> 
+                <br>
+                <label class="form-label">New Password Confirmation</label>
+                <input type="password" class="form-control"> 
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="card-footer">
+          <a href="#" class="btn btn-primary float-right">Update</a>
+        </div>
+      </div>
+
+      <div id="design" class="setting-view card">
+        <div class="card-body p-6">
+          <div class="card-title text-primary">
+            <h4>Customize Greenlight</h4>
+          </div>
+          <hr>
+          <div class="form-group">
+            <div class="row">
+              <div class="col-6">
+
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="card-footer">
+          <a href="#" class="btn btn-primary float-right">Update</a>
+        </div>
+      </div>
     </div>
 
   </div>
+</div>
+
+<script>
+settingsButtons = $('.setting-btn');
+settingsViews = $('.setting-view');
+
+$(window).on('load', function(){
+  settingsButtons.each(function(i, btn) {
+    if(i != 0){ $(settingsViews[i]).hide(); }
+    $(btn).click(function(){
+      settingsViews.each(function(i, view){
+        if($(view).attr("id") == $(btn).attr("id")){
+          $(view).show();
+        } else {
+          $(view).hide();
+        }
+      });
+    });
+  });
+});
+</script>