Skip to content

Commit

Permalink
Update page styling and A&M branding (#90)
Browse files Browse the repository at this point in the history 
* rubocop: autocorrect offences

* Survey/Profiles: Update profile creation page

* Survey/Profile: Update styles on profile information

* Tests/Survey/Profile: Update tests for new profile page

* About: Fix typo

* Header: Update logo according to A&M brand guide

* About: Add interactive tetrahedron

* Tetrahedron: Change renderer background to white

* Invitation: Update heading
  • Loading branch information
@barnden
barnden authored Apr 19, 2024
1 parent 11869b3 commit 2bd2064
Show file tree
Hide file tree
Showing 11 changed files with 185 additions and 101 deletions.
56 changes: 56 additions & 0 deletions rails_root/app/assets/stylesheets/logo.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
/*-- Base logo lockup --*/
.c-logo-lockup {
padding: 0rem;
max-width: 400px;
}
.c-logo-lockup a {
text-decoration: none;
color: var(--color-black);
}
.c-logo-lockup a:hover {
text-decoration: underline dotted;
text-decoration-thickness: 1px;
text-underline-offset: 6px;
}
.c-logo-lockup .c-logo-lockup-logo {
padding: 0 0.7rem;
display: flex;
}
.c-logo-lockup .c-logo-lockup-logo img {
width: 64px;
height: 64px;
margin-right: auto;
margin-left: auto;
}
.c-logo-lockup .c-logo-lockup-wordmark {
font-family: "Open Sans", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
}
.c-logo-lockup .c-logo-lockup-wordmark .c-logo-lockup-wordmark-small {
font-size: 0.75rem;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 600;
}
.c-logo-lockup .c-logo-lockup-wordmark .c-logo-lockup-wordmark-large {
font-size: 1.2rem;
letter-spacing: 0.5px;
}

/*-- Logo Lockup Horizontal --*/
.c-logo-lockup_horizontal {
display: flex;
align-items: center;
}
.c-logo-lockup_horizontal .c-logo-lockup-wordmark {
display: flex;
flex-direction: column;
}
.c-logo-lockup_horizontal .c-logo-lockup-wordmark-small {
display: block;
margin: 0;
}
.c-logo-lockup_horizontal .c-logo-lockup-wordmark-large {
line-height: 1.5rem;
margin: 0px 0px;
letter-spacing: 0.25px;
}
2 changes: 1 addition & 1 deletion rails_root/app/javascript/tetrahedron.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ export function loadModel(containerID, tetrahedronType) {

function loadScene() {
scene = new THREE.Scene();
scene.background = new THREE.Color(0xf0f0f0);
scene.background = new THREE.Color(0xffffff);

const hemiLight = new THREE.HemisphereLight(0xffffff, 0x8d8d8d, 3);
hemiLight.position.set(0, 20, 0);
Expand Down
17 changes: 13 additions & 4 deletions rails_root/app/views/about/index.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div>
<h1>ABOUT SYNERGITSTIC LEADERSHIP THEORY</h1>
<div class="col-8 offset-2">
<h1>ABOUT SYNERGISTIC LEADERSHIP THEORY</h1>
<div>
<div>
<h2>Introduction</h2>
Expand All @@ -20,9 +20,18 @@
</div>
<div>
<h2>The Tetrahedron Model</h2>
<div class="row d-flex justify-content-center">
<div class="col-6" id="tetrahedron">
</div>
</div>
<p>The distinct feature of the Synergistic Leadership Theory is its depiction through a tetrahedron model, offering a visual framework to analyze the theory's four foundational elements and their interconnections. The tetrahedron model visually represents the SLT's four factors as vertices, emphasizing their equal importance and interactivity. The model's invariance, meaning it retains its shape regardless of which vertex is the base, symbolizes the non-hierarchical nature of the factors. The six edges represent the non-linear relationships between the factors, inferring dynamic interactions rather than linear cause-effect relationships. This model underscores the complex, interconnected nature of leadership within an organization, highlighting that changes in one factor can significantly influence the others.</p>
<p>In addition to demonstrating the relation between the four factors in the theory, the tetrahedron serves as a convenient tool for visualizing the evaluation of a leader's effectiveness, as assessed by the Organizational Leadership Effectiveness Inventory (OLEI). The tetrahedron model is used to visualize OLEI results, showcasing the balance (alignment) or imbalance (misalignment) between these factors. When factors align, the tetrahedron's edges are straight, signifying strong, harmonious interactions, suggesting effective leadership. Conversely, misalignment causes distortions in the tetrahedron's shape, indicating areas of tension or conflict that could undermine leadership effectiveness. This visualization aids in diagnosing organizational leadership dynamics, facilitating targeted improvements by identifying which factors or interactions need attention.</p>
<%= image_tag("https://upload.wikimedia.org/wikipedia/commons/7/70/Tetrahedron.gif", style: "width:400px;" ) %>

</div>
</div>
</div>
</div>
<script type="module">
import { loadModel } from "tetrahedron"

loadModel("tetrahedron", "0_0_0_0")
</script>
12 changes: 6 additions & 6 deletions rails_root/app/views/home/index.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@
<h1 class="visually-hidden">Home</h1>
<% if session[:userinfo].present? %>
<h1>ORGANIZATIONAL AND LEADERSHIP EFFECTIVENESS INVENTORY</h1>
<h2> Welcome <%= session[:userinfo]['name'] %></h2>
<br>
<h2>Your Profile</h2>
<h2>Welcome <%= session[:userinfo]['name'] %></h2>
<hr>
<h3>Profile</h3>
<% if @survey_profile.present? %>
<%= render @survey_profile%>
<%= render @survey_profile %>
<%end%>
<h2>Your Survey Responses</h2>
<h3>Survey Responses</h3>
<div class="table-responsive">
<table class="table">
<thead>
Expand Down Expand Up @@ -37,7 +37,7 @@
</div>
<%= link_to "Take Survey", new_survey_response_path, class: "btn btn-outline-primary"%>
<% else%>
<h1>Welcome to Our Rails App</h1>
<h1>Welcome.</h1>
<h1>You are not logged in. Please login.</h1>
<% end %>
</main>
2 changes: 1 addition & 1 deletion rails_root/app/views/invitations/show.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<h1>You've been invited to take a survey (...or have you?)</h1>
<h1>You've been invited to take a survey</h1>
<p>You were invited by <%= @invitation.parent_response.profile.first_name %> <%= @invitation.parent_response.profile.last_name %>.</p>
<p>
<% if session[:userinfo] && session[:invitation] %>
Expand Down
65 changes: 41 additions & 24 deletions rails_root/app/views/layouts/_header.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,41 @@
<header id="main-header" class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
<%= link_to "School of Education & Human Development", 'https://education.tamu.edu/', class: "d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none" %>
<ul class="nav">
<li class="nav-item">
<%= link_to "Home", root_path, class: "nav-link #{'active' if current_page?(root_path)}", aria: { current: "page" } %>
</li>
<li class="nav-item">
<%= link_to "About", about_path, class: "nav-link #{'active' if current_page?(about_path)}" %>
</li>
<li class="nav-item">
<%# <%= link_to "Survey Responses", survey_responses_path, class: "nav-link #{'active' if current_page?(survey_responses_path)}" %>
</li>
<li class="nav-item">
<%# <%= link_to "Survey Profiles", survey_profiles_path, class: "nav-link #{'active' if current_page?(survey_profiles_path)}" %>
</li>
<li class="nav-item">
<% if session[:userinfo] %>
<%= button_to 'Logout', root_url + '/auth/logout', method: :get, data: { turbo: false }, class: "nav-link" %>
<% else %>
<%= button_to 'Login', '/auth/auth0', method: :post, data: { turbo: false }, class: "nav-link" %>
<% end %>
</li>
</ul>
</header>
<nav id="main-header" class="navbar navbar-expand-lg navbar-light border-bottom" style="margin-bottom: 1rem;">
<%# <%= link_to "School of Education & Human Development", 'https://education.tamu.edu/', class: "d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none" %>
<div class="container-fluid">
<div class="navbar-brand">
<div class="c-logo-lockup c-logo-lockup_horizontal">
<div class="c-logo-lockup-logo">
<a href="https://www.tamu.edu/" aria-label="visit tamu.edu"><img src="https://dmc-assets.tamu.edu/pattern-library/logos/TAM-LogoBox.svg" alt="Texas A&amp;M University logo" /></a>
</div>
<div class="c-logo-lockup-wordmark">
<a href="https://education.tamu.edu/">
<p class="c-logo-lockup-wordmark-large">School of Education &amp; Development</p>
</a>
<a href="https://elrc.tamu.edu">
<p class="c-logo-lockup-wordmark-small">Education Leadership Research Center</p>
</a>
</div>
</div>
</div>
<ul class="nav">
<li class="nav-item">
<%= link_to "Home", root_path, class: "nav-link #{'active' if current_page?(root_path)}", aria: { current: "page" } %>
</li>
<li class="nav-item">
<%= link_to "About", about_path, class: "nav-link #{'active' if current_page?(about_path)}" %>
</li>
<li class="nav-item">
<%# <%= link_to "Survey Responses", survey_responses_path, class: "nav-link #{'active' if current_page?(survey_responses_path)}" %>
</li>
<li class="nav-item">
<%# <%= link_to "Survey Profiles", survey_profiles_path, class: "nav-link #{'active' if current_page?(survey_profiles_path)}" %>
</li>
<li class="nav-item">
<% if session[:userinfo] %>
<%= button_to 'Logout', root_url + '/auth/logout', method: :get, data: { turbo: false }, class: "nav-link" %>
<% else %>
<%= button_to 'Login', '/auth/auth0', method: :post, data: { turbo: false }, class: "nav-link" %>
<% end %>
</li>
</ul>
</div>
</nav>
70 changes: 35 additions & 35 deletions rails_root/app/views/survey_profiles/_form.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,38 @@
<%= form_with(model: survey_profile) do |form| %>
<% if survey_profile.errors.any? %>
<div style="color: red">
<h2><%= pluralize(survey_profile.errors.count, "error") %> prohibited this survey_profile from being saved:</h2>
<ul>
<% survey_profile.errors.each do |error| %>
<li><%= error.full_message %></li>
<% end %>
</ul>
<%= form_with(model: survey_profile, html: {class: "col-4 offset-4"}) do |form| %>
<div class="row d-flex justify-content-center">
<% if survey_profile.errors.any? %>
<div style="color: red">
<h2><%= pluralize(survey_profile.errors.count, "error") %> prohibited this survey_profile from being saved:</h2>
<ul>
<% survey_profile.errors.each do |error| %>
<li><%= error.full_message %></li>
<% end %>
</ul>
</div>
<% end %>

<div class="mb-3">
<%= form.label :first_name, style: "display: block;text-transform: uppercase;" %>
<%= form.text_field :first_name, class: "form-control" %>
</div>
<div class="mb-3">
<%= form.label :last_name, style: "display: block;text-transform: uppercase;" %>
<%= form.text_field :last_name, class: "form-control" %>
</div>
<div class="mb-3">
<%= form.label :campus_name, style: "display: block;text-transform: uppercase;" %>
<%= form.text_field :campus_name, class: "form-control" %>
</div>
<div class="mb-3">
<%= form.label :district_name, style: "display: block;text-transform: uppercase;" %>
<%= form.text_field :district_name, class: "form-control" %>
</div>
<div class="mb-3">
<%= form.label :role, style: "display: block;text-transform: uppercase;" %>
<%= form.select :role,['Principal', 'Teacher', 'Superintendent'], {prompt: 'Select a role'}, class: "form-select" %>
</div>
<div class="mb-3 text-center">
<%= form.submit class: "btn btn-outline-primary" %>
</div>
<% end %>

<div>
<%= form.label :first_name, style: "display: block" %>
<%= form.text_field :first_name %>
</div>
<div>
<%= form.label :last_name, style: "display: block" %>
<%= form.text_field :last_name %>
</div>
<div>
<%= form.label :campus_name, style: "display: block" %>
<%= form.text_field :campus_name %>
</div>
<div>
<%= form.label :district_name, style: "display: block" %>
<%= form.text_field :district_name %>
</div>
<div>
<%= form.label :role, style: "display: block" %>
<%= form.select :role,['Principal', 'Teacher', 'Superintendent'],{prompt: 'Select a role'}, style: "display: block" %>
</div>
<div>
<%= form.label :submit, style: "display: block" %>
<%= form.submit %>
</div>
<% end %>
50 changes: 27 additions & 23 deletions rails_root/app/views/survey_profiles/_survey_profile.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,32 @@
<div id="<%= dom_id survey_profile %>">
<div class="row d-flex" id="<%= dom_id survey_profile %>">
<div class="col-6">
<table class="table" style="--bs-border-width: 0">
<tbody>
<tr>
<td style="width: 25%"><strong style="text-transform: uppercase">First Name</strong></td>
<td><%= survey_profile.first_name %></td>
</tr>

<p>
<strong>First name:</strong>
<%= survey_profile.first_name %>
</p>
<tr>
<td style="width: 25%"><strong style="text-transform: uppercase">Last Name</strong></td>
<td><%= survey_profile.last_name %></td>
</tr>

<p>
<strong>Last name:</strong>
<%= survey_profile.last_name %>
</p>
<tr>
<td style="width: 25%"><strong style="text-transform: uppercase">Campus</strong></td>
<td><%= survey_profile.campus_name %></td>
</tr>

<p>
<strong>Campus name:</strong>
<%= survey_profile.campus_name %>
</p>

<p>
<strong>District name:</strong>
<%= survey_profile.district_name %>
</p>

<p>
<strong>Role:</strong>
<%= survey_profile.role %>
</p>
<tr>
<td style="width: 25%"><strong style="text-transform: uppercase">District</strong></td>
<td><%= survey_profile.district_name %></td>
</tr>

<tr>
<td style="width: 25%"><strong style="text-transform: uppercase">Role</strong></td>
<td><%= survey_profile.role %></td>
</tr>
</tbody>
</table>
</div>
</div>
4 changes: 1 addition & 3 deletions rails_root/app/views/survey_profiles/new.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
<h1>User Profile</h1>
<h1 class="text-center">Profile</h1>
<div>
<div>
<p>Input user information
<%= render "form", survey_profile: @survey_profile %>
<br>
</div>
</div>
2 changes: 1 addition & 1 deletion rails_root/features/step_definitions/initial_ui_design_steps.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
end

Then('I can see profile form') do
expect(page).to have_content('Input user information')
expect(page).to have_button('Create Survey profile')
end

Then('I can see survey sections') do
Expand Down
6 changes: 3 additions & 3 deletions rails_root/features/step_definitions/role_based_survey_steps.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@

Then('I am logged in as a principal') do
expect(page).to have_content('Welcome John Doe')
expect(page).to have_content('Role: Principal')
expect(page).to have_content('Role Principal')
end

When('I navigate to the survey page') do
Expand Down Expand Up @@ -45,7 +45,7 @@

Then('I am logged in as a teacher') do
expect(page).to have_content('Welcome John Doe')
expect(page).to have_content('Role: Teacher')
expect(page).to have_content('Role Teacher')
end

Then('I should see the survey questions specific to the teacher') do
Expand All @@ -69,7 +69,7 @@

Then('I am logged in as a superintendent') do
expect(page).to have_content('Welcome John Doe')
expect(page).to have_content('Role: Superintendent')
expect(page).to have_content('Role Superintendent')
end

Then('I should see the survey questions specific to the superintendent') do
Expand Down

0 comments on commit 2bd2064

Please sign in to comment.