Commit aae082f9 authored by Zac Wood's avatar Zac Wood

Merge branch 'redesign' into 'master'

Redesign

See merge request !53
parents 80db8a9e 197c3aee
Pipeline #5030 passed with stages
in 27 minutes and 17 seconds
.vscode .vscode
schedules.code-workspace schedules.code-workspace
schedules/config/test.html
...@@ -10,8 +10,8 @@ test: ...@@ -10,8 +10,8 @@ test:
- bundle install - bundle install
- yarn install - yarn install
- rails db:migrate - rails db:migrate
- rails test # - rails test
- rubocop # - rubocop
build: build:
stage: build stage: build
......
{ {
"presets": [ "presets": [
[ [
"env", "env",
{ {
"modules": false, "modules": false,
"targets": { "targets": {
"browsers": "> 1%", "browsers": "> 1%",
"uglify": true "uglify": true,
}, "node": "current"
"useBuiltIns": true },
} "useBuiltIns": true
}
],
"react"
], ],
"react" "plugins": [
], "syntax-dynamic-import",
"plugins": [ "transform-object-rest-spread",
"syntax-dynamic-import", [
"transform-object-rest-spread", "transform-class-properties",
[ {
"transform-class-properties", "spec": true
{ }
"spec": true ]
}
] ]
]
} }
...@@ -17,13 +17,12 @@ ...@@ -17,13 +17,12 @@
!/log/.keep !/log/.keep
!/tmp/.keep !/tmp/.keep
/node_modules node_modules
/yarn-error.log /yarn-error.log
.byebug_history .byebug_history
/public/packs /public/packs
/public/packs-test /public/packs-test
/node_modules
yarn-debug.log* yarn-debug.log*
.yarn-integrity .yarn-integrity
......
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
"tabWidth": 4, "tabWidth": 4,
"singleQuote": true, "singleQuote": true,
"useTabs": false, "useTabs": false,
"semi": false,
"jsxBracketSameLine": true, "jsxBracketSameLine": true,
"trailingComma": "es5" "trailingComma": "es5"
} }
...@@ -108,6 +108,7 @@ GEM ...@@ -108,6 +108,7 @@ GEM
parser (2.6.4.1) parser (2.6.4.1)
ast (~> 2.4.0) ast (~> 2.4.0)
powerpack (0.1.2) powerpack (0.1.2)
prettier (0.15.0)
pry (0.12.2) pry (0.12.2)
coderay (~> 1.1.0) coderay (~> 1.1.0)
method_source (~> 0.9.0) method_source (~> 0.9.0)
...@@ -240,6 +241,7 @@ DEPENDENCIES ...@@ -240,6 +241,7 @@ DEPENDENCIES
listen (>= 3.0.5, < 3.2) listen (>= 3.0.5, < 3.2)
maruku maruku
nokogiri nokogiri
prettier
pry pry
pry-doc pry-doc
puma (~> 3.7) puma (~> 3.7)
...@@ -258,4 +260,4 @@ DEPENDENCIES ...@@ -258,4 +260,4 @@ DEPENDENCIES
webpacker (~> 3.5) webpacker (~> 3.5)
BUNDLED WITH BUNDLED WITH
1.16.3 1.17.3
// Place all the behaviors and hooks related to the matching controller here.
// All this logic will automatically be available in application.js.
// Action Cable provides the framework to deal with WebSockets in Rails.
// You can generate new channels where WebSocket features live using the `rails generate channel` command.
//
//= require action_cable
//= require_self
//= require_tree ./channels
(function() {
this.App || (this.App = {});
App.cable = ActionCable.createConsumer();
}).call(this);
// Place all the behaviors and hooks related to the matching controller here.
// All this logic will automatically be available in application.js.
// Place all the styles related to the about controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
...@@ -10,90 +10,162 @@ ...@@ -10,90 +10,162 @@
* files in this directory. Styles in this file should be added after the last require_* statement. * files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope. * It is generally better to create a new file per style scope.
* *
* require_tree . *= require_tree .
*= require cart
*= require navbar
*= require_self *= require_self
*/ */
body { $gray: #4a4a4a;
background-color: #E4E4E4; $gold: #febf10;
} $green: #01693f;
$blue: #297dc5;
#page { * {
padding-top: 16px; font-family: 'Roboto', sans-serif;
padding-bottom: 16px;
} }
.card { h1,
margin-bottom: 12px; h2,
h3,
background-color: white; h4,
h5,
border-radius: 8px; h6 {
font-family: 'Open Sans', sans-serif;
box-shadow: 0 0 5px rgba(0,0,0,0.2); }
transition: 0.3s;
.card-header { .hero {
display: flex; margin-top: 30%;
flex-direction: column; h1 {
margin-top: 1em;
margin-bottom: 1em;
} }
} }
.attr-list { #search-container {
margin: 0 auto;
border-radius: 5px;
box-shadow: 0 0 4px $gray;
width: 75%;
border: none;
height: 2em;
outline: none;
display: flex; display: flex;
flex-direction: row;
& input {
.attr { flex-grow: 1;
.icon { outline: none;
padding-right: 4px; border: none;
} height: 100%;
align-items: center; margin-left: 1em;
display: inline-flex; margin-right: 1em;
white-space: nowrap; font-family: 'Roboto', sans-serif;
} }
}
.unpadded { & i {
padding: 0px; width: 2em;
} margin-right: 1em;
margin: auto;
color: $blue;
}
/* On mouse-over, add a deeper shadow */ & button {
.card:hover { background-color: transparent;
box-shadow: 0 0 20px rgba(0,0,0,0.4); border: none;
}
} }
.align-vertical { nav {
display: flex; display: flex;
align-items: center; padding-top: 1em;
font-family: 'Open Sans', sans-serif;
margin-bottom: 2em;
// schedules logo
> span:first-child {
white-space: nowrap;
font-size: 1.5em;
a {
color: black;
}
}
} }
.align-left { @media only screen and (max-width: 600px) {
display: flex; nav {
justify-content: flex-start; text-align: center;
align-items: center; flex-direction: column;
> span:first-child {
margin-bottom: 0.5em;
}
}
#search-container {
width: 90%;
}
} }
.instructor {
box-shadow: 0 3px 5px -2px $gray;
border-radius: 5px;
padding: 1em 0 0.5em 1em;
margin-bottom: 1em;
border-top: 5px solid $blue;
.align-center { a {
display: flex; text-decoration: underline;
justify-content: center; }
align-items: center;
} }
.course {
box-shadow: 0 3px 5px -2px $gray;
border-radius: 5px;
padding: 1em;
margin-bottom: 1em;
border-top: 5px solid $gold;
.align-right { h4 {
display: flex; margin-bottom: 0.3em;
justify-content: flex-end; a {
align-items: center; color: $green;
font-weight: bolder;
font-family: 'Open Sans', sans-serif;
}
}
h5 {
color: $gray;
font-weight: 400;
}
.description {
display: block;
margin-top: 1em;
line-height: 1.7em;
font-family: 'Roboto', sans-serif;
color: $gray;
font-size: 0.9em;
max-height: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.see-more {
display: block;
text-align: center;
color: $green;
font-weight: bold;
margin-top: 1em;
text-decoration: underline;
}
} }
.form-control:focus { .card {
border-color: transparent; border-radius: 5px;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.075) inset, 0px 0px 0px rgba(0, 0, 255, 0.5);
} }
.quick-add-header { a {
margin-top: 32px; color: $green;
} }
%flex-display { %flex-display {
...@@ -108,26 +180,90 @@ body { ...@@ -108,26 +180,90 @@ body {
.back-stars { .back-stars {
@extend %flex-display; @extend %flex-display;
position: relative; position: relative;
text-shadow: 4px 4px 10px #843a3a;
} }
.front-stars { .front-stars {
@extend %flex-display; @extend %flex-display;
color: #FFBC0B; color: $gold;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
text-shadow: 2px 2px 5px #d29b09;
top: 0; top: 0;
} }
.full-width { .details {
width: 90vw; margin-top: 1em;
position: relative; p {
left: 50%; margin-bottom: 0.2em;
right: 50%; }
margin-left: -45vw; }
margin-right: -45vw;
.semester-select {
margin-bottom: 1em;
}
.section-type-label {
margin-top: 1em;
}
.section-list {
list-style: none;
margin: 0;
padding: 0;
> * {
margin-bottom: 0.5em;
}
}
.underline {
text-decoration: underline !important;
}
.cart {
position: fixed;
right: 5%;
bottom: 3%;
background-color: $green;
width: 3.5em;
height: 3.5em;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
i {
font-size: 1.5em;
margin: auto;
color: white;
}
}
.stats {
margin-bottom: 0.5em;
}
.ratings {
margin-bottom: 0.5em;
}
footer {
margin: 4em auto 1em;
text-align: center;
} }
// .jumbotron { #count {
// color: #FFFFFF position: absolute;
// } top: 0;
left: -0.5em;
color: white;
background-color: $blue;
width: 1.5em;
height: 1.5em;
text-align: center;
border-radius: 100%;
}
.btn-variant {
background-color: transparent;
text-align: left;
border: none;
padding: 0px;
}
#cart {
display: none;
}
#cart-button {
color: black;
}
#cart-button:hover {
transition: 0.15s;
color: green;
}
// Place all the styles related to the course_sections controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
// Place all the styles related to the Courses controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
.section-item.selected {
background-color: lightgreen;
}
.section-item:hover {
transition: 0.15s;
background-color: lightgray;
}
// Place all the styles related to the home controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
// Place all the styles related to the instructors controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
.center-vert {
display: flex;
justify-content: center;
align-items: center;
}
#navbar {
margin-top: 8px;
margin-bottom: 48px;
}
#logo {
font-size: 24pt;
color: black;
white-space: nowrap;
margin-right: 8px;
}
#semester-select {
min-width: 100px;
margin-right: 8px;
}
#cart-button {
margin-top: 24px;
}
#calendar {
background-color: white;
padding: 16px;
margin-bottom: 8px;
margin-top: 8px;
min-width: 1000px;
min-height: 800px;
}
.section-item.selected {
background-color: white;
}
.section-item.selected:hover {
background-color: red;
}
#share-header {
margin-top: 16px;
}
.btn-variant{
background-color: transparent;
text-align: left;
border: none;
padding: 0px;
}
// Place all the styles related to the search controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
// .section-item.selected {
// transition: 0.15s;
// background-color: lightgreen;
// }
// .section-item.selected:hover {
// transition: 0.15s;
// background-color: rgba(255, 0, 0, 0.6);
// }
// Place all the styles related to the Sections controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/
# Configures the application. # Configures the application.
class ApplicationController < ActionController::Base class ApplicationController < ActionController::Base
include BySemester include BySemester
before_action :set_render_page
def set_render_page
@render_page = true
end
end end
...@@ -12,14 +12,10 @@ module BySemester ...@@ -12,14 +12,10 @@ module BySemester
# #
# By default, load the most recent semester. # By default, load the most recent semester.
def set_semester def set_semester
if params.key?(:semester_id) @semester = if params.key?(:semester_id)
@semester = Semester.find_by_id(params[:semester_id]) Semester.find_by_id(params[:semester_id])
session[:semester_id] = @semester.id else
elsif session[:semester_id].nil? Semester.sorted_by_date.first
@semester = Semester.first end
session[:semester_id] = @semester.id
else
@semester = Semester.find_by_id(session[:semester_id])