diff --git a/app/assets/stylesheets/site/flash.css.scss b/app/assets/stylesheets/site/flash.css.scss index ed4080df..0ffcc79c 100644 --- 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 index ea946f90..7ff85cd1 100644 --- a/app/assets/stylesheets/site/global.css.scss +++ b/app/assets/stylesheets/site/global.css.scss @@ -21,6 +21,7 @@ h5 { font-size: 1.5em; margin: 25px auto; } .main-container { padding: 1em 2em; + margin-top: 0px !important; } .lead { @@ -28,8 +29,9 @@ h5 { font-size: 1.5em; margin: 25px auto; } } .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 index 6b09c6f0..98f3acb9 100644 --- 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 index 416fd5ad..de534d52 100644 --- 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 index 75e79e41..1822b06c 100644 --- 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 index 99323959..e335e37a 100644 --- 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' \ No newline at end of file += render 'shared/marketing' + diff --git a/app/views/home/oops.html.haml b/app/views/home/oops.html.haml index 28a77349..6547f8dd 100644 --- 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 index a25c3311..43269405 100644 --- 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 — © 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 'ticket-support@fnf.org', '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 index fda2fba8..03b956f6 100644 --- 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 new file mode 100644 index 00000000..1b3f2e05 --- /dev/null +++ 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 — + © 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 'ticket-support@fnf.org', 'Ticket Booth Support', subject: 'Ticket Booth Support' + + + diff --git a/app/views/shared/_marketing.html.haml b/app/views/shared/_marketing.html.haml index 56723c09..4cfbcfee 100644 --- 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.