Small ui fixes

Author: nygrenh

app/assets/stylesheets/main.scss

@@ -435,9 +435,18 @@ td.hljs-ln-code {
 	padding-left: 10px !important;
 }
 
+.course-card-link:hover {
+  text-decoration: none;
+}
 
 .course-card {
   color: black;
+
+  &:hover {
+    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2);
+    filter: brightness(0.95);
+    transition: all .2s;
+  }
 }
 
 .nobullets {

app/assets/stylesheets/organizations.css renamed to app/assets/stylesheets/organizations.scss

@@ -2,20 +2,37 @@
   color: black !important;
 }
 
-.organization-card:hover {
+.organization-card-link:hover {
   text-decoration: none;
 }
 
-.organization-card .card-body {
+.organization-card .card-body, .small-organization-card .card-body {
   display: flex;
+  align-items: center;
 }
 
+.organization-card:hover, .small-organization-card:hover {
+  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2);
+  filter: brightness(0.95);
+  transition: all .2s;
+}
+
+$image-size: 6rem;
+
 .organization-card .card-body img {
   margin-right: 1rem;
+  width: $image-size;
+  height: $image-size;
+}
+
+.small-organization-card .card-body img {
+  margin-right: 1rem;
+  width: $image-size/2;
+  height: $image-size/2;
 }
 
 .cover-content {
-  padding: 11rem;
+  padding-bottom: 11rem;
   padding-top: 7rem;
   text-align: center;
 }

app/views/courses/_list.html.erb

@@ -1,5 +1,5 @@
 <% locals[:courses].each do |course| %>
-  <%= link_to organization_course_path(@organization, course) do %>
+  <%= link_to organization_course_path(@organization, course), class: "course-card-link" do %>
     <div class="card course-card<% unless course.hidden? || course.disabled? %> border-secondary<% end %>">
       <div class="card-body<% if course.hidden? || course.disabled? %> text-secondary<% end %>">
         <h4 class="card-title">

app/views/layouts/application.html.erb

@@ -43,6 +43,7 @@
           <% end %>
           <%= bootstrap_flash %>
           <%= yield %>
+          <br>
         </div>
       </div>
       <div class="everything-push">

app/views/layouts/landing.html.erb

@@ -29,6 +29,8 @@
     <div id="everything">
       <div class="container container-fluid well-large" id="content-area">
         <%= yield %>
+        <br>
+        <br>
       </div>
     </div>
     <%= render partial: 'layouts/footer' %>

app/views/organizations/_organization.html.erb

@@ -1,7 +1,7 @@
-<%= link_to organization do %>
+<%= link_to organization, class: "organization-card-link" do %>
   <div class="card organization-card <%= organization.hidden? ? 'border-secondary' : 'border-dark' %>">
     <div class="card-body <%= organization.hidden? ? 'text-secondary' : '' %>">
-    <%= image_tag organization.logo.url(:small_logo) if organization.logo? %>
+    <%= image_tag(organization.logo.url(:small_logo), class: "img-fluid") %>
       <div>
         <h4 class="card-title">
           <%= organization.name %>

app/views/organizations/index.html.erb

@@ -36,9 +36,11 @@
     <% @organizations.each do |organization| %>
       <% next if organization.hidden? && !can?(:view_hidden_organizations, nil) %>
       <li>
-        <%= link_to organization_path(organization) do %>
-          <div class="card">
+        <%= link_to organization_path(organization), class: "organization-card-link" do %>
+          <div class="card small-organization-card">
             <div class="card-body <%= organization.hidden? ? 'text-secondary' : '' %>">
+              <%= image_tag(organization.logo.url(:small_logo), class: "img-fluid") %>
+              <div>
               <h6 class="card-title">
                 <%= organization.name %>
                 <small class="text-muted <%= /[[:upper:]]/.match(organization.name[-1]) ? 'text-littlebitup' : '' %>">
@@ -48,6 +50,7 @@
               <%= organization.information %>
             </div>
           </div>
+          </div>
         <% end %>
         <br>
       </li>