Skip to content

Commit

Permalink
* Remove Yorkify Styling
Browse files Browse the repository at this point in the history 
* Make Student Submission Responsive
* Update layouts for cleaner code
* Add styling only using Default BS5
* Things Observed:
  - Navbar not showing active page link highlight
  - Production states Next Steps name vs currently we sayd "continue"
  - Buttons are larger in production, which we can explore
  - Backend will be next to do to match styling.
  • Loading branch information
@asadaqain
asadaqain committed Jul 25, 2024
1 parent 7c22a62 commit 9868796
Show file tree
Hide file tree
Showing 11 changed files with 365 additions and 438 deletions.
145 changes: 29 additions & 116 deletions app/assets/stylesheets/bootstrap_and_overrides.css.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,139 +9,52 @@

@import "bootstrap/functions";

//YorkU Colors
/* 2021 YorkU colours */
/* http://toolbox.info.yorku.ca/visual-identity/colours/ */
$york-grey-dark: #686260;
$york-grey-medium: #B7AEA9;
$york-grey-pewter: #D6CFCA;
$york-grey-light: #E8E4DF;
$york-grey-lighter: #FAFAFA;
$york-red-pms-186: #E31837;
$york-red-medium: #B82025;
$york-red-dark: #8C0000;
$york-light-blue: #ACE6F8;
$york-bright-blue: #3AC2EF;

// Custom theme colors
$primary: $york-red-pms-186;
$secondary: $york-grey-dark;
$success: #2e8540 !default; //#35B01C !default; //$green !default; $success: #3AC2EF;
$info: darken($york-light-blue, 50%);
$warning: #ffc107;
$danger: $york-red-medium;
$light: $york-grey-lighter;
$dark: $york-grey-dark;

// Additional custom styles
$border-radius: .25rem;
$btn-border-radius: .25rem;
$btn-padding-y: .5rem;
$btn-padding-x: 1rem;
$btn-font-weight: 400;

$theme-colors: (
'primary': $primary,
'secondary': $secondary,
'success': $success,
'info': $info,
'warning': $warning,
'danger': $danger,
'light': $light,
'dark': $dark,
);

$yorku-colors: (
'york-grey-dark': $york-grey-dark,
'york-grey-medium': $york-grey-medium,
'york-grey-pewter': $york-grey-pewter,
'york-grey-light': $york-grey-light,
'york-grey-lighter': $york-grey-lighter,
'york-red-pms-186': $york-red-pms-186,
'york-red-medium': $york-red-medium,
'york-red-dark': $york-red-dark,
'york-light-blue': $york-light-blue,
'york-bright-blue': $york-bright-blue
);

// Merge the maps
$theme-colors: map-merge($theme-colors, $yorku-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");

/* Custom theme colors go here */
/* Set your own primary/secondary/info/success etc. colors here */
/* e.g. $primary: #e31837 */

@import "bootstrap/variables";
@import "bootstrap/mixins";
@import "bootstrap";

// Headings customization
.container {

h1, .h1 {
color: $black;
font-weight: 700;
}

h2, .h2 {
color: $primary;
font-weight: 600;
}

h3, .h3 {
color: darken($info, 30%);
font-weight: 500;
}

h4, .h4, h5, .h5, h6, .h6 {
color: $secondary;
font-weight: 400;
}

// Subheadings customization
.subheading {
color: $secondary;
font-weight: 300;
font-size: 1.25rem; // Adjust as needed
}
}
// Key-Value pairs in forms
.dl-horizontal dt {
font-weight: 500;
color: $primary;
}

.dl-horizontal dd {
color: $secondary;
}

.container { }
.page-header {
margin-bottom: 10px;
}
.student-view {
margin-top: 10px;
}

// Custom styles can go here, if needed
.record-data {
margin-top: 10px;
margin-bottom: 10px;
tr {
td:nth-child(1) {
@extend .lead;
// font-size: $small-font-size;
font-size: 1rem;
color: $secondary;
}
td:nth-child(2) {
// color: $secondary;
font-weight: 600;
}
//////////////////////////////////////////
// Custom styles can go here, if needed //
//////////////////////////////////////////

.settings-content div {
margin-top: 0;
margin-bottom: 1rem;
font-size: 1.25rem;
}

.thesis, .data-grid {
h4 {
font-size: 1.25rem;
font-weight: 300;
color: $secondary;
}
p {
font-weight: bold;
}
}

.navbar-brand {
font-weight: 700;
color: #e31837;
// color: #af0d1a;
}

/* Simple Form basic styles */
.simple_form {
// background-color: lighten($york-grey-pewter, 8%);
// background-color: $york-grey-pewter;
background-color: $light;
padding: 0.875rem;
}
.simple_form .form-control {
Expand Down
23 changes: 12 additions & 11 deletions app/views/documents/_document.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,37 @@
<div class="row border rounded mx-auto my-2">
<div class="col-md-8 p-3">
<div class="col-12 col-md-1 p-3">
<div class="d-flex align-items-center">
<div class="flex-shrink-0">
<%= link_to_unless_current edit_student_thesis_document_path(@student, @thesis, document) do %>
<i class="fa fa-file fa-2x me-2"></i>
<i class="fa fa-file fa-2x me-2 text-warning"></i>
<% end %>
</div>
<div class="flex-grow-1 ms-3">
<span class="name <%= "supplemental" if document.supplemental? %>" title="<%= File.basename(document.file_url) %>">
</div>
</div>

<div class="col-12 col-md-6 p-3">
<span class="name text-wrap text-break <%= "supplemental" if document.supplemental? %>" title="<%= File.basename(document.file_url) %>">
<%= URI.decode_www_form_component(File.basename(document.file_url)) %>
</span>
<% if document.name %>
<%= document.name %>
&nbsp; &nbsp;
<% end %>

</div>
</div>
</div>
<div class="col-md-4 d-flex justify-content-end align-items-center">

<div class="col-12 col-md-5 d-flex flex-column flex-md-row justify-content-md-end align-items-start align-items-md-center">
<% unless block_thesis_changes?(@thesis) %>
<% if document.usage != 'licence' %>
<%= link_to edit_student_thesis_document_path(@student, @thesis, document), class: "btn btn-sm btn-info mx-2", title: "Edit File" do %>
<%= link_to edit_student_thesis_document_path(@student, @thesis, document), class: "btn btn-info mx-2 my-2", title: "Edit File" do %>
<i class="fa fa-edit green"></i> Edit file
<% end %>
<% end %>
<%= link_to document.file_url, class: 'btn btn-sm btn-success mx-2', title: "Download file" do %>
<%= link_to document.file_url, class: 'btn btn-secondary mx-2 my-2', title: "Download file" do %>
<i class="fa fa-download"></i> Download
<span class="weak small">[<%=number_to_human_size document.file.file.size rescue nil%>]</span>
<% end %>
<% unless block_thesis_changes?(@thesis) %>
<%= link_to [@student, @thesis, document], data: { confirm: 'Are you sure?' }, class: "btn btn-sm btn-danger mx-2", :method => :delete do %>
<%= link_to [@student, @thesis, document], data: { confirm: 'Are you sure?' }, class: "btn btn-danger mx-2 my-2", :method => :delete do %>
<i class="fa fa-trash"></i> Delete
<% end %>
<% end %>
Expand Down
112 changes: 62 additions & 50 deletions app/views/layouts/application.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,64 +1,76 @@
<!DOCTYPE html>
<html lang="en">

<head>
<title><%= content_for?(:title) ? yield(:title) : "Untitled" %></title>
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tag %>
<%= yield(:head) %>
<title><%= content_for?(:title) ? yield(:title) : "Untitled" %></title>
<%= stylesheet_link_tag "application", media: "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tag %>
<%= yield(:head) %>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
<main>
<% if AppSettings.app_maintenance=="true" %>
<div class="container pt-4">
<div class="row">
<div class="alert alert-warning">
<h3>Attention!</h3>
<%= AppSettings.app_maintenance_message %>
</div>
</div>
<div class="container shadow-lg rounded-3 border p-4 p-md-5 my-md-3">
<% if AppSettings.app_maintenance == "true" %>
<div class="alert alert-warning text-center" role="alert">
<strong>Attention:</strong> <%= AppSettings.app_maintenance_message %>
</div>
<% end %>
<div class="container my-3">
<div class="row align-items-center shadow-lg rounded-3 border p-3">
<div class="container">
<div class="york_header">
<%= image_tag("yorklogo.gif", alt: "York University - Graduate Studies" )%>
<h4 class="float-end pt-2">Faculty of Graduate Studies</h4>
</div>
<header>
<div class="d-flex flex-column flex-md-row align-items-center">
<div class="p-2">
<%= image_tag("yorklogo.gif", alt: "York University - Graduate Studies", class: "img-fluid") %>
</div>
<div class="flex-grow-1 text-end p-2">
<div class="display-6 mb-1 text-secondary">Faculty of Graduate Studies</div>
<div class="fs-md-5 navbar-brand">Electronic Thesis Dissertation Application</div>
</div>
</div>
</header>

<%= render :template=> "layouts/navbar" %>

<div class="workspace pt-3 pb-3">
<% flash.each do |name, msg| %>
<div class="alert alert-dismissible fade show alert-<%= name.strip == "notice" ? "success" : "warning" %>" role="alert">
<strong><%= name.capitalize %>:</strong> <%= msg %>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<% end %>
<div class="page-header">
<%= content_tag :h1, yield(:title) if show_title? && !content_for?(:title_html) %>
<%= yield (:title_html) if content_for?(:title_html)%>

<main class="my-3">
<header>
<%= render :template => "layouts/navbar" %>
<% if AppSettings.app_maintenance == "true" %>
<div class="alert alert-warning" role="alert">
<h2>Attention!</h2>
<p><%= AppSettings.app_maintenance_message %></p>
</div>
<% end %>
<div class="row">
<div class="<%= content_for?(:sidebar) ? " span9" : "span12" %>">
<%= yield %>
</div>
<% if content_for?(:sidebar) %>
<div class="span3">
<%= yield (:sidebar) %>
</div>
<% end %>
<% flash.each do |name, msg| %>
<div class="alert alert-<%= name == 'notice' ? 'success' : 'warning' %> alert-dismissible fade show" role="alert">
<strong><%= name.capitalize %>:</strong> <%= msg %>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<% end %>

<div class="mt-3">
<%= content_tag :h1, yield(:title) if show_title? && !content_for?(:title_html) %>
<%= yield (:title_html) if content_for?(:title_html)%>
</div>
<footer class="bg-light text-dark py-2 rounded text-center">Electronic Thesis Dissertation Submission Program (ETD) - York University Libraries</footer>
</div>
</div>
</main>
</body>
</html>
</header>

<section>
<div class="row">
<div class="<%= content_for?(:sidebar) ? 'col-md-9' : 'col-12' %>">
<%= yield %>
</div>
<% if content_for?(:sidebar) %>
<aside class="col-md-3">
<%= yield(:sidebar) %>
</aside>
<% end %>
</div>
</section>
</main>

<footer class="bg-body-secondary text-dark py-2 text-center d-flex align-items-center justify-content-center" style="height: 100px;">
<p class="mb-0 p-2">Electronic Thesis Dissertation Submission Application (ETD) - York University Libraries</p>
</footer>

<%= yield(:scripts) %>
</div> <!-- wrapper container end -->
</body>
</html>
1 change: 1 addition & 0 deletions app/views/layouts/navbar.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<nav class="navbar navbar-expand-lg bg-body-tertiary rounded">
<div class="container-fluid">
<a class="navbar-brand" title="Electronic Thesis Dissertation Submission Application" href="<%= root_path %>">ETD</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
Expand Down
Loading

0 comments on commit 9868796

Please sign in to comment.