WIP: Attempting to fix the CSS issues on the site

fnf-org · Sep 24, 2024 · ff48ad4 · ff48ad4
1 parent b8407a9
commit ff48ad4
Show file tree

Hide file tree

Showing 11 changed files with 107 additions and 73 deletions.
diff --git a/app/assets/stylesheets/site/flash.css.scss b/app/assets/stylesheets/site/flash.css.scss
@@ -2,12 +2,11 @@
 
 #flash_container {
   background-color: $success-bg-subtle;
-  position: fixed;
+  position: relative;
   z-index: 1000;
   padding: 0;
-  top: 30px;
-  left: 20%;
-  right: 20%;
+  top: 0px;
+  border: 2px solid #222 !important;
   box-shadow: 0px 10px 10px 0 rgba(45, 45, 45, 0.4);
   border-radius: 20px;
 

diff --git a/app/assets/stylesheets/site/global.css.scss b/app/assets/stylesheets/site/global.css.scss
@@ -21,15 +21,17 @@ h5 { font-size: 1.5em; margin: 25px auto; }
 
 .main-container {
   padding: 1em 2em;
+  margin-top: 0px !important;
 }
 
 .lead {
   font-size: 16pt !important;
 }
 
 .container-fluid, .container {
+  margin-top: 0px !important;
   .card {
-    margin-top: 20px !important;
+    margin-top: 0px !important;
   }
 
   #ticket-request-form {
@@ -164,16 +166,29 @@ html {
 body {
   height: 100%;
   margin-bottom: $footer-height;
+  margin-top: 0 !important;
 }
 
 #footer {
   background-color: #f5f5f5;
-  bottom: 0;
-  height: $footer-height;
-  left: 0;
-  position: absolute;
-  right: 0;
+  position: relative;
   width: 100%;
+  margin: 0;
+  padding: 0px;
+
+  table#footer-table {
+    width: 100%;
+    tbody {
+      tr {
+        td {
+          height: 12px !important;
+          line-height: 0.9 !important;
+          padding: 0 !important;
+          margin: 0 !important;
+        }
+      }
+    }
+  }
 }
 
 #footer-text {

diff --git a/app/assets/stylesheets/site/home.css.scss b/app/assets/stylesheets/site/home.css.scss
@@ -1,5 +1,8 @@
 .hero-unit {
   text-align: center;
+  width: 100%;
+  position: relative;
+  overflow-y: hidden;
 }
 
 .marketing {

diff --git a/app/assets/stylesheets/site/nav.css.scss b/app/assets/stylesheets/site/nav.css.scss
@@ -2,11 +2,14 @@
 nav.navbar {
   z-index: 100 !important;
   width: 100%;
-  padding-top: 4px;
-  padding-bottom: 4px;
-  padding-left: 20px;
-  background-color: rgba(80, 133, 197, 0.58);
+  top: 0px !important;
+  left: 0px !important;
+  position: absolute !important;
+  padding: 0px !important;
+  margin: 0px !important;
+  ackground-color: rgba(80, 133, 197, 0.58);
   border-bottom: 2px solid rgba(6, 74, 124, 0.58);
+
   .navbar-toggler {
     margin-right: 10px;
     margin-top: 10px;

diff --git a/app/assets/stylesheets/site/width_0000_0600.css.scss b/app/assets/stylesheets/site/width_0000_0600.css.scss
@@ -2,6 +2,15 @@
 // Hide navbar text for small screens
 @media (min-width: 0px) and (max-width: 600px) {
   body {
+    padding: 0px !important;
+    margin: 0px !important;
+
+    %nav {
+      top: 0px !important;
+      margin-top: -20px !important;
+    }
+
+    width: 100% !important;
     font-size: 1em;
 
     td.ticket-user {
@@ -77,7 +86,6 @@
         width: 95%;
         margin-left: 0;
         margin-right: 0;
-        margin-top: 20px !important;
         overflow-y: scroll;
       }
 
@@ -121,9 +129,6 @@
     padding: 0;
   }
 
-  .nav.navbar {
-    padding-left: 0 !important;
-  }
 
   #footer {
     font-size: 0.7em;

diff --git a/app/views/home/index.html.haml b/app/views/home/index.html.haml
@@ -2,4 +2,5 @@
   %h1
     Helping build culture through...
 
-= render 'shared/marketing'
+= render 'shared/marketing'
+
diff --git a/app/views/home/oops.html.haml b/app/views/home/oops.html.haml
@@ -1,8 +1,6 @@
-.hero-unit
+.hero-unit.w-75.m-auto
   %h1
-    #{@error_description}
-  - if @error_description.nil?
-    %h2
-      Please ask your administrator to do so if you'd like to party soon.
+    #{@error_description || "Please ask your administrator to do so if you'd like to party soon." }
 
-= render 'shared/marketing'
+.hero-unit.w-75.m-auto
+  = render 'shared/marketing'
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
@@ -28,34 +28,19 @@
     = stylesheet_link_tag "application", "data-turbo-track": "reload"
     = javascript_include_tag "application", "data-turbo-track": "reload", type: "module"
 
-  %body
-    = render partial: "shared/nav_main"
+  %body.m-0.p-0
+    .container-fluid.main-container.w-100.align-content-center.m-0.p-0
+      .row
+        .col-sm-12.col-md-12.col-lg-12.p-0
+          = render partial: "shared/nav_main"
 
-    %turbo-frame#flash_container{"data-controller": "flash", "data-flash-target": "flash"}
+    %turbo-frame.m-0#flash_container{"data-controller": "flash", "data-flash-target": "flash"}
       = render "shared/flash"
 
-    .container-fluid.m-auto.main-container
+    .container-fluid.main-container.w-100.align-content-center
       .row
-        .col-sm-0.col-md-.col-lg-0
         .col-sm-12.col-md-12.col-lg-12
           = yield
-        .col-sm-0.col-md-0.col-lg-0
-
-    #footer.m-0.pt-5.mt-5
-      .card.p-0.mt-5
-        .card-footer.bg-primary-subtle.text-center
-          %small
-            Crafted with ♡ in San Francisco &mdash; &copy; CFAEA 2010-#{Date.current.strftime('%Y')}
-            All rights reserved.
-            %br
-            App Version #{TicketBooth::Application::VERSION}
-            | Revision
-            %a{href: "https://github.com/fnf-org/TicketBooth/commit/#{TicketBooth::Application::REVISION}", target: "_blank" }
-              = TicketBooth::Application::REVISION
-            | Rails #{Rails.version}
-            | Ruby #{RUBY_VERSION}
-            | #{Rails.env.to_s.capitalize} Env
-            |
-            = mail_to '[email protected]', 'Ticket Booth Support', subject: 'Ticket Booth Support'
-
 
+    .container-fluid
+      = render partial: "shared/footer"
diff --git a/app/views/shared/_flash.html.haml b/app/views/shared/_flash.html.haml
@@ -2,7 +2,7 @@
   - flash.each do |type, msg|
     .alert{ class: alert_class(type), role: "alert"}
       - main, rest = msg.split(/:/)
-      %h3.flash-header
+      %h3.flash-header.w-75.align-content-center
         = main
       - if rest != main && rest.present?
         %hr

diff --git a/app/views/shared/_footer.html.haml b/app/views/shared/_footer.html.haml
@@ -0,0 +1,33 @@
+%div.w-100#footer
+  .card-body.bg-primary-subtle.text-center.small
+    %table#footer-table.w-100.m-0
+      %tbody.w-100.m-0
+        %tr.w-100.m-0
+          %td.w-100.p-2.m-0.align-content-center.text-center.bg-body-secondary{colspan: 2}
+            Crafted with ♡ in San Francisco &mdash;
+            &copy; CFAEA 2010-#{Date.current.strftime('%Y')}
+            All rights reserved.
+        %tr
+          %td.text-end.bg-transparent.w-50 App Version
+          %td.text-start.bg-transparent.w-50.px-2 #{TicketBooth::Application::VERSION}
+        %tr
+          %td.text-end.bg-transparent.w-50 Rails Version
+          %td.text-start.bg-transparent.w-50.px-2 #{Rails.version}
+        %tr
+          %td.text-end.bg-transparent.w-50 Ruby Version
+          %td.text-start.bg-transparent.w-50.px-2 #{RUBY_VERSION}
+        %tr
+          %td.text-end.bg-transparent.w-50 Rails Env
+          %td.text-start.bg-transparent.w-50.px-2 #{Rails.env.to_s.capitalize}
+        %tr
+          %td.text-end.bg-transparent.w-50 Revision
+          %td.text-start.bg-transparent.w-50.px-2
+            %a{href: "https://github.com/fnf-org/TicketBooth/commit/#{TicketBooth::Application::REVISION}", target: "_blank" }
+              = TicketBooth::Application::REVISION
+        %tr
+          %td.text-end.bg-transparent.w-50 Support
+          %td.text-start.bg-transparent.w-50.px-2
+            = mail_to '[email protected]', 'Ticket Booth Support', subject: 'Ticket Booth Support'
+
+
+
diff --git a/app/views/shared/_marketing.html.haml b/app/views/shared/_marketing.html.haml
@@ -1,24 +1,16 @@
 
-.container.marketing
-  .row
-    .span4.feature
-      %img{ src: image_path('home/design-tools.png') }
-      %h2
-        Tools
-      %p.lead
-        Use tools specifically designed for organizing community and
-        volunteer-driven events.
-    .span4.feature
-      %img{ src: image_path('home/payment-savings.png') }
-      %h2
-        Payments
-      %p.lead
-        Accept credit card payments for your event, avoiding more-expensive
-        alternatives like PayPal.
-    .span4.feature
-      %img{ src: image_path('home/communications.png') }
-      %h2
-        Communications
-      %p.lead
-        Reach out to your event attendees with email tools and listserve
-        integration.
+.container.marketing.p-0.w-auto
+  .span4.feature
+    %img{ src: image_path('home/payment-savings.png') }
+    %h2
+      Payments
+    %p.lead
+      Accept credit card payments for your event, avoiding more-expensive
+      alternatives like PayPal.
+  .span4.feature
+    %img{ src: image_path('home/communications.png') }
+    %h2
+      Communications
+    %p.lead
+      Reach out to your event attendees with email tools and listserve
+      integration.