From 2bd206494f866b2d9e44cf2a3f8a084b4bbd7846 Mon Sep 17 00:00:00 2001 From: "Brandon G. Nguyen" Date: Fri, 19 Apr 2024 18:22:19 -0500 Subject: [PATCH] Update page styling and A&M branding (#90) * 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 --- rails_root/app/assets/stylesheets/logo.css | 56 +++++++++++++++ rails_root/app/javascript/tetrahedron.js | 2 +- rails_root/app/views/about/index.html.erb | 17 +++-- rails_root/app/views/home/index.html.erb | 12 ++-- .../app/views/invitations/show.html.erb | 2 +- rails_root/app/views/layouts/_header.html.erb | 65 ++++++++++------- .../app/views/survey_profiles/_form.html.erb | 70 +++++++++---------- .../survey_profiles/_survey_profile.html.erb | 50 +++++++------ .../app/views/survey_profiles/new.html.erb | 4 +- .../initial_ui_design_steps.rb | 2 +- .../role_based_survey_steps.rb | 6 +- 11 files changed, 185 insertions(+), 101 deletions(-) create mode 100644 rails_root/app/assets/stylesheets/logo.css diff --git a/rails_root/app/assets/stylesheets/logo.css b/rails_root/app/assets/stylesheets/logo.css new file mode 100644 index 0000000..147fb25 --- /dev/null +++ b/rails_root/app/assets/stylesheets/logo.css @@ -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; +} \ No newline at end of file diff --git a/rails_root/app/javascript/tetrahedron.js b/rails_root/app/javascript/tetrahedron.js index 8702b36..a0e2e3a 100644 --- a/rails_root/app/javascript/tetrahedron.js +++ b/rails_root/app/javascript/tetrahedron.js @@ -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); diff --git a/rails_root/app/views/about/index.html.erb b/rails_root/app/views/about/index.html.erb index 20dd12c..8358d8b 100644 --- a/rails_root/app/views/about/index.html.erb +++ b/rails_root/app/views/about/index.html.erb @@ -1,5 +1,5 @@ -
-

ABOUT SYNERGITSTIC LEADERSHIP THEORY

+
+

ABOUT SYNERGISTIC LEADERSHIP THEORY

Introduction

@@ -20,9 +20,18 @@

The Tetrahedron Model

+
+
+
+

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.

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.

- <%= image_tag("https://upload.wikimedia.org/wikipedia/commons/7/70/Tetrahedron.gif", style: "width:400px;" ) %> +
-
\ No newline at end of file +
+ \ No newline at end of file diff --git a/rails_root/app/views/home/index.html.erb b/rails_root/app/views/home/index.html.erb index 9f0d90b..320e280 100644 --- a/rails_root/app/views/home/index.html.erb +++ b/rails_root/app/views/home/index.html.erb @@ -3,13 +3,13 @@

Home

<% if session[:userinfo].present? %>

ORGANIZATIONAL AND LEADERSHIP EFFECTIVENESS INVENTORY

-

Welcome <%= session[:userinfo]['name'] %>

-
-

Your Profile

+

Welcome <%= session[:userinfo]['name'] %>

+
+

Profile

<% if @survey_profile.present? %> - <%= render @survey_profile%> + <%= render @survey_profile %> <%end%> -

Your Survey Responses

+

Survey Responses

@@ -37,7 +37,7 @@ <%= link_to "Take Survey", new_survey_response_path, class: "btn btn-outline-primary"%> <% else%> -

Welcome to Our Rails App

+

Welcome.

You are not logged in. Please login.

<% end %> diff --git a/rails_root/app/views/invitations/show.html.erb b/rails_root/app/views/invitations/show.html.erb index 30478aa..4181ce6 100644 --- a/rails_root/app/views/invitations/show.html.erb +++ b/rails_root/app/views/invitations/show.html.erb @@ -1,4 +1,4 @@ -

You've been invited to take a survey (...or have you?)

+

You've been invited to take a survey

You were invited by <%= @invitation.parent_response.profile.first_name %> <%= @invitation.parent_response.profile.last_name %>.

<% if session[:userinfo] && session[:invitation] %> diff --git a/rails_root/app/views/layouts/_header.html.erb b/rails_root/app/views/layouts/_header.html.erb index bbe7add..763a97a 100644 --- a/rails_root/app/views/layouts/_header.html.erb +++ b/rails_root/app/views/layouts/_header.html.erb @@ -1,24 +1,41 @@ -

- <%= 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" %> -
    -
  • - <%= link_to "Home", root_path, class: "nav-link #{'active' if current_page?(root_path)}", aria: { current: "page" } %> -
    • -
  • - <%= link_to "About", about_path, class: "nav-link #{'active' if current_page?(about_path)}" %> -
    • -
  • - <%# <%= link_to "Survey Responses", survey_responses_path, class: "nav-link #{'active' if current_page?(survey_responses_path)}" %> -
    • -
  • - <%# <%= link_to "Survey Profiles", survey_profiles_path, class: "nav-link #{'active' if current_page?(survey_profiles_path)}" %> -
    • -
  • - <% 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 %> -
    • -
-
+ diff --git a/rails_root/app/views/survey_profiles/_form.html.erb b/rails_root/app/views/survey_profiles/_form.html.erb index e398d32..9ffc066 100644 --- a/rails_root/app/views/survey_profiles/_form.html.erb +++ b/rails_root/app/views/survey_profiles/_form.html.erb @@ -1,38 +1,38 @@ -<%= form_with(model: survey_profile) do |form| %> - <% if survey_profile.errors.any? %> -
-

<%= pluralize(survey_profile.errors.count, "error") %> prohibited this survey_profile from being saved:

-
    - <% survey_profile.errors.each do |error| %> -
  • <%= error.full_message %>
    • - <% end %> -
+<%= form_with(model: survey_profile, html: {class: "col-4 offset-4"}) do |form| %> +
+ <% if survey_profile.errors.any? %> +
+

<%= pluralize(survey_profile.errors.count, "error") %> prohibited this survey_profile from being saved:

+
    + <% survey_profile.errors.each do |error| %> +
  • <%= error.full_message %>
    • + <% end %> +
+
+ <% end %> + +
+ <%= form.label :first_name, style: "display: block;text-transform: uppercase;" %> + <%= form.text_field :first_name, class: "form-control" %> +
+
+ <%= form.label :last_name, style: "display: block;text-transform: uppercase;" %> + <%= form.text_field :last_name, class: "form-control" %> +
+
+ <%= form.label :campus_name, style: "display: block;text-transform: uppercase;" %> + <%= form.text_field :campus_name, class: "form-control" %> +
+
+ <%= form.label :district_name, style: "display: block;text-transform: uppercase;" %> + <%= form.text_field :district_name, class: "form-control" %> +
+
+ <%= form.label :role, style: "display: block;text-transform: uppercase;" %> + <%= form.select :role,['Principal', 'Teacher', 'Superintendent'], {prompt: 'Select a role'}, class: "form-select" %> +
+
+ <%= form.submit class: "btn btn-outline-primary" %>
- <% end %> - -
- <%= form.label :first_name, style: "display: block" %> - <%= form.text_field :first_name %> -
-
- <%= form.label :last_name, style: "display: block" %> - <%= form.text_field :last_name %> -
-
- <%= form.label :campus_name, style: "display: block" %> - <%= form.text_field :campus_name %> -
-
- <%= form.label :district_name, style: "display: block" %> - <%= form.text_field :district_name %> -
-
- <%= form.label :role, style: "display: block" %> - <%= form.select :role,['Principal', 'Teacher', 'Superintendent'],{prompt: 'Select a role'}, style: "display: block" %> -
-
- <%= form.label :submit, style: "display: block" %> - - <%= form.submit %>
<% end %> diff --git a/rails_root/app/views/survey_profiles/_survey_profile.html.erb b/rails_root/app/views/survey_profiles/_survey_profile.html.erb index 7cd814d..27d6e09 100644 --- a/rails_root/app/views/survey_profiles/_survey_profile.html.erb +++ b/rails_root/app/views/survey_profiles/_survey_profile.html.erb @@ -1,28 +1,32 @@ -
+
+
+
+ + + + + -

- First name: - <%= survey_profile.first_name %> -

+ + + + -

- Last name: - <%= survey_profile.last_name %> -

+ + + + -

- Campus name: - <%= survey_profile.campus_name %> -

- -

- District name: - <%= survey_profile.district_name %> -

- -

- Role: - <%= survey_profile.role %> -

+ + + + + + + + + +
First Name<%= survey_profile.first_name %>
Last Name<%= survey_profile.last_name %>
Campus<%= survey_profile.campus_name %>
District<%= survey_profile.district_name %>
Role<%= survey_profile.role %>
+
diff --git a/rails_root/app/views/survey_profiles/new.html.erb b/rails_root/app/views/survey_profiles/new.html.erb index c4e1749..d6ebdea 100644 --- a/rails_root/app/views/survey_profiles/new.html.erb +++ b/rails_root/app/views/survey_profiles/new.html.erb @@ -1,8 +1,6 @@ -

User Profile

+

Profile

-

Input user information <%= render "form", survey_profile: @survey_profile %> -

diff --git a/rails_root/features/step_definitions/initial_ui_design_steps.rb b/rails_root/features/step_definitions/initial_ui_design_steps.rb index d3aea5a..ea6b09d 100644 --- a/rails_root/features/step_definitions/initial_ui_design_steps.rb +++ b/rails_root/features/step_definitions/initial_ui_design_steps.rb @@ -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 diff --git a/rails_root/features/step_definitions/role_based_survey_steps.rb b/rails_root/features/step_definitions/role_based_survey_steps.rb index c3d95c1..327d8fb 100644 --- a/rails_root/features/step_definitions/role_based_survey_steps.rb +++ b/rails_root/features/step_definitions/role_based_survey_steps.rb @@ -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 @@ -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 @@ -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