Link some pages from footer (#281)

* Link some pages from footer

- adds Website#footer_categories string array field populated with help
  of selectized js tags
- adds Page#footer_category to indicate that a page should be linked in
  a footer category
- wires up the footer category/links and other dynamic content and
  elements as well
- wires up the header navigation to more closely match the design
- fixes image resizing for svgs with resize_image_tag helper method
- ensures pages don't blow up with images are not attached
- adds link to register page when matching page slug exists

[Link some pages from footer](https://miro.com/app/board/uXjVO6C1LxA=/?moveToWidget=3458764523893158753&cot=14)

Author: jonsgreen

app/assets/images/themes/default/menu.svg

@@ -5,6 +5,17 @@ $(document).ready(function() {
   setTimeout(function() {
     $(".alert").not('.alert-confirm, .scheduling-error').alert('close');
   }, 5000);
+
+  $(".selectize-tags").selectize({
+    delimiter: ",",
+    persist: false,
+    create: function (input) {
+      return {
+        value: input,
+        text: input,
+      };
+    },
+  });
 });
 
 // Datatable extension for reseting sort order

app/assets/javascripts/base.js

@@ -8,8 +8,8 @@
 
 :root {
   --body_background_color: white;
-  --nav_background_color: white;
-  --nav_text_color: black;
+  --nav_background_color: black;
+  --nav_text_color: white;
   --nav_link_hover: black;
   --main_content_background: white;
   --sans-serif-font: 'Rubik';
@@ -39,7 +39,7 @@ body {
 
 header + #content {
   background-color: var(--main_content_background);
-  margin-top: 50px;
+  margin-top: 110px;
 }
 
 p {
@@ -83,4 +83,7 @@ h3.section-title {
 
 @media screen and (max-width: 900px) and (orientation: portrait),
   (max-width: 823px) and (orientation: landscape) {
+  header + #content {
+    margin-top: 90px;
+  }
 }

app/assets/stylesheets/themes/default/application.scss

@@ -1,68 +1,132 @@
 footer {
-  display: grid;
-  width: 100%;
-  border-top: 1px solid $divider-light;
-  grid-template-columns: 1fr 1fr;
-  padding: 20px 30px 35px;
-
-  .footer-event-details {
-    border-bottom: 1px solid $divider-light;
-    padding-bottom: 20px;
+  color: white;
+  .overlay {
+    background-color: black !important;
+    opacity: 0.9 !important;
+    padding: 20px 30px 35px;
+  }
+  .footer-header {
     .logo-container {
+      display: flex;
+      align-items: center;
       margin-bottom:  20px;
-
-      .website-event-logo {
-        height: 36px;
-        width: 36px;
-        background-color: $grey-logo;
-        border-radius: 3px;
-        margin-bottom: 0;
-      }
-      a {
-        text-decoration: none;
-        font-weight: 700;
+      .website-info {
+        margin-left: 10px;
+        a {
+          text-decoration: none;
+          font-weight: 700;
+          font-size: 18px;
+        }
       }
     }
+  }
 
-    .footer-social-links {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      a {
-        width: 30px;
-        height: 30px;
-        display: inline-block;
-        margin: 0 6px 0 0;
-        &:hover {
-          transform: translateX(2px);
+  .footer-content {
+    display: grid;
+    width: 100%;
+    grid-template-columns: 1fr 1fr;
+    gap: 40px;
+    border-bottom: 1px solid white;
+    @media screen and (max-width: 900px) and (orientation: portrait),
+      (max-width: 823px) and (orientation: landscape) {
+      grid-template-columns: 1fr;
+    }
+
+    .footer-event-details {
+      max-width: 470px;
+      padding-bottom: 20px;
+      .location-section {
+        display: flex;
+        div {
+          flex-grow: 1
+        }
+        .location-details {
+          padding-bottom: 20px;
+          .date {
+            font-weight: 700;
+            font-size: 16px;
+            padding-bottom: 5px;
+          }
+          .location {
+            p {
+              line-height: 10px;
+            }
+          }
+        }
+        .register-button {
+          color: #E14943;
+          background-color: white;
+          padding: 10px 20px;
+          border-radius: 4px;
+          &:hover {
+            transform: translateX(2px) translateY(-2px);
+          }
         }
       }
-      .twitter-link {
-        background: asset-url('themes/default/twitter-icon.svg') center center no-repeat;
-      }
-      .facebook-link {
-        background: asset-url('themes/default/fb-icon.svg') center center no-repeat;
+
+      .footer-about {
+        padding-bottom: 20px;
+        p {
+          font-weight: 400;
+        }
+        p:first-child {
+          font-weight: 700;
+        }
       }
-      .instagram-link {
-        background: asset-url('themes/default/instagram-icon.svg') center center no-repeat;
+
+      .footer-social-links {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        a {
+          width: 30px;
+          height: 30px;
+          display: inline-block;
+          margin: 0 6px 0 0;
+          &:hover {
+            transform: translateX(2px);
+          }
+        }
+        .twitter-link {
+          background: asset-url('themes/default/twitter-icon.svg') center center no-repeat;
+        }
+        .facebook-link {
+          background: asset-url('themes/default/fb-icon.svg') center center no-repeat;
+        }
+        .instagram-link {
+          background: asset-url('themes/default/instagram-icon.svg') center center no-repeat;
+        }
       }
     }
-  }
 
-  .footer-event-links {
-    align-self: end;
-    border-bottom: 1px solid $divider-light;
-    padding-bottom: 20px;
+    .footer-event-links {
+      display: flex;
+      flex-wrap: wrap;
+      .footer-category-links {
+        flex-grow: 1;
+        margin-right: 40px;
+        margin-bottom: 40px;
 
-    a {
-      display: inline-block;
-      margin-right: 10px;
-      text-decoration: none;
+        .footer-category-name {
+          font-weight: 700;
+        }
 
-      &:hover {
-        transform: translateX(2px) translateY(-2px);
+        a {
+          display: inline-block;
+          margin-right: 10px;
+          text-decoration: none;
+          padding-top: 20px;
+          &:hover {
+            transform: translateX(2px) translateY(-2px);
+          }
+        }
       }
     }
+  }
 
+  .footer-copyright {
+    text-align: center;
+    font-size: 14px;
+    margin-top: 20px;
   }
-}
+}

app/assets/stylesheets/themes/default/footer.scss

@@ -1,28 +1,31 @@
 #main-header {
   position: fixed;
   top: 0;
-  padding: 10px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
   width: 100%;
-  background: var(--nav_background_color);
   color: var(--nav_text_color);
   z-index: 11;
 
+  .overlay {
+    padding: 30px;
+    background: var(--nav_background_color);
+    opacity: 0.9;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
   #header-logo-container {
     display: flex;
     align-items: center;
     margin-left: 10px;
 
-    .website-event-logo {
-      display: block;
-      height: 36px;
-      width: 36px;
-      margin-right: 5px;
-      background: $grey-logo;
-      border-radius: 3px;
+    .website-info {
+      margin-left: 10px;
+      a {
+        text-decoration: none;
+        font-weight: 700;
+        font-size: 18px;
+      }
     }
   }
 
@@ -52,7 +55,8 @@
 
 @media screen and (max-width: 900px) and (orientation: portrait),
   (max-width: 823px) and (orientation: landscape) {
-    #main-header{
+    #main-header .overlay{
+      padding: 20px;
       z-index: 20;
       flex-direction: column;
       align-items: start;

app/assets/stylesheets/themes/default/nav.scss

@@ -95,6 +95,7 @@ def page_params
         :hide_page,
         :hide_header,
         :hide_footer,
+        :footer_category,
         :unpublished_body
       )
   end

app/controllers/staff/pages_controller.rb

@@ -9,7 +9,7 @@ def create
     @website.update(website_params)
 
     flash[:success] = "Website was successfully created."
-    redirect_to event_staff_path(current_event)
+    redirect_to edit_event_staff_website_path(current_event)
   end
 
   def edit; end
@@ -18,7 +18,7 @@ def update
     @website.update(website_params)
 
     flash[:success] = "Website was successfully updated."
-    redirect_to event_staff_path(current_event)
+    redirect_to edit_event_staff_website_path(current_event)
   end
 
   private
@@ -40,9 +40,14 @@ def website_params
         :city,
         :location,
         :directions,
-        :twitter_handle,
         :prospectus_link,
         :domains,
+        :footer_about_content,
+        :footer_copyright,
+        :twitter_handle,
+        :facebook_url,
+        :instagram_url,
+        :footer_categories,
       )
   end
 end

app/controllers/staff/websites_controller.rb

@@ -36,4 +36,25 @@ def sponsors_in_footer
   def navigation_page_names_and_slugs
     pages.navigatable.pluck(:name, :slug)
   end
+
+  def categorized_footer_pages
+    pages.in_footer
+      .select(:footer_category, :name, :slug)
+      .group_by(&:footer_category)
+      .sort_by { |category, _| footer_categories.index(category) }
+  end
+
+  def twitter_url
+    "https://twitter.com/#{object.twitter_handle}"
+  end
+
+  def register_page
+    pages.published.find_by(slug: 'register')
+  end
+
+  def background_style
+    return {} unless background.attached?
+
+    { style: "background-image: url('#{h.url_for(background)}');" }
+  end
 end

app/decorators/website_decorator.rb

@@ -0,0 +1,10 @@
+module ImageHelper
+  def resize_image_tag(image, width:, height: width)
+    return unless image.attached?
+    if image.content_type.match('svg')
+      image_tag(image, width: width)
+    else
+      image_tag(image.variant(resize_to_fit: [width, height]))
+    end
+  end
+end

app/helpers/image_helper.rb

@@ -16,9 +16,9 @@ def public?
 #
 # Table name: comments
 #
-#  id          :bigint(8)        not null, primary key
-#  proposal_id :bigint(8)
-#  user_id     :bigint(8)
+#  id          :integer          not null, primary key
+#  proposal_id :integer
+#  user_id     :integer
 #  parent_id   :integer
 #  body        :text
 #  type        :string