Merge pull request #5287 from dodona-edu/enhance/support

Add new support method and improve support visibility
dodona-edu · Jan 16, 2024 · f9f8fd9 · f9f8fd9
2 parents a90830b + f21f64b
commit f9f8fd9
Show file tree

Hide file tree

Showing 8 changed files with 82 additions and 30 deletions.
diff --git a/app/assets/stylesheets/layout/footer.css.scss b/app/assets/stylesheets/layout/footer.css.scss
@@ -40,6 +40,18 @@
       text-decoration: none;
     }
   }
+
+  .support.btn.btn-outline {
+    color: $gray-80;
+    border-color: $gray-80;
+
+    &:hover {
+      opacity: 0.8;
+      color: $gray-80;
+      border-color: $gray-80;
+      background: none;
+    }
+  }
 }
 
 .footer-block > * {

diff --git a/app/assets/stylesheets/layout/navbar.css.scss b/app/assets/stylesheets/layout/navbar.css.scss
@@ -26,6 +26,10 @@
   a:not(.dropdown-item) {
     color: var(--d-on-primary);
     text-decoration: none;
+
+    &:hover {
+      opacity: 0.8;
+    }
   }
 
   li {
@@ -60,7 +64,7 @@
     flex-shrink: 1;
     flex-grow: 100;
 
-    @include media-breakpoint-up(sm) {
+    @include media-breakpoint-up(md) {
       max-width: calc(100vw - 240px);
     }
 
@@ -116,7 +120,7 @@
       i {
         line-height: var(--d-navbar-height);
 
-        @include media-breakpoint-up(sm) {
+        @include media-breakpoint-up(md) {
           display: none;
         }
       }
@@ -128,7 +132,7 @@
     flex-shrink: 1;
     flex-grow: 1;
 
-    @include media-breakpoint-up(sm) {
+    @include media-breakpoint-up(md) {
       max-width: calc(100vw - 240px);
     }
 
@@ -149,7 +153,7 @@
     }
 
     .actions {
-      @include media-breakpoint-down(sm) {
+      @include media-breakpoint-down(md) {
         display: none;
       }
 
@@ -165,7 +169,7 @@
         padding-left: 8px;
         padding-right: 8px;
 
-        @include media-breakpoint-up(sm) {
+        @include media-breakpoint-up(md) {
           padding-bottom: 11px;
 
           &.active {
@@ -180,10 +184,13 @@
   .right .content {
     flex-shrink: 0;
     align-self: flex-end;
+    margin-bottom: auto;
+    margin-top: auto;
 
     .dropdown-nav {
       padding-right: 20px;
       padding-left: 20px;
+      margin-bottom: 0;
 
       .notification-dropdown {
         .table > tbody > tr:first-of-type > td {
@@ -237,6 +244,14 @@
         }
       }
 
+      @include media-breakpoint-up(md) {
+        li {
+          margin-top: auto;
+          margin-bottom: auto;
+          margin-right: 2px;
+        }
+      }
+
       li a {
         padding-left: 8px;
       }
@@ -249,7 +264,7 @@
       }
 
       .action {
-        @include media-breakpoint-up(sm) {
+        @include media-breakpoint-up(md) {
           display: none;
         }
       }
@@ -266,7 +281,7 @@
         }
       }
 
-      @include media-breakpoint-down(sm) {
+      @include media-breakpoint-down(md) {
         .dropdown-toggle {
           .caret {
             @include media-breakpoint-down(lg) {
@@ -291,7 +306,7 @@
   }
 
   .dodona-navbar-toggle {
-    @include media-breakpoint-up(sm) {
+    @include media-breakpoint-up(md) {
       display: none;
     }
 
@@ -310,15 +325,28 @@
   .dropdown-nav {
     white-space: nowrap;
 
-    li.sign-in {
-      transform: translateY(-6px);
+    li.support {
+      a.btn.btn-outline {
+        padding-left: 24px !important;
+
+        &:hover {
+          border-color: var(--d-on-primary);
+        }
+
+        @include media-breakpoint-down(md) {
+          padding: 0 !important;
+          padding-left: 8px !important;
+          border: none;
+          height: initial;
+        }
+      }
     }
 
-    @include media-breakpoint-up(sm) {
-      display: inline-block;
+    @include media-breakpoint-up(md) {
+      display: inline-flex;
     }
 
-    @include media-breakpoint-down(sm) {
+    @include media-breakpoint-down(md) {
       @include shadow-z3;
 
       position: absolute;
@@ -336,15 +364,15 @@
     }
 
     .dropdown-title {
-      @include media-breakpoint-up(sm) {
+      @include media-breakpoint-up(md) {
         @include media-breakpoint-down(lg) {
           display: none;
         }
       }
 
       display: inline-block;
 
-      @include media-breakpoint-down(sm) {
+      @include media-breakpoint-down(md) {
         padding-left: 25px;
       }
 

diff --git a/app/views/layouts/_breadcrumbs.html.erb b/app/views/layouts/_breadcrumbs.html.erb
@@ -10,7 +10,6 @@
       <%= link_to(t("layout.menu.activities"), activities_path) %>
       <%= link_to(t("layout.menu.courses"), courses_path) %>
       <%= link_to(t("layout.menu.publications"), publications_path) %>
-      <%= link_to(t("layout.menu.support_us"), support_us_path) %>
       <%= link_to(t("layout.menu.manual"), "https://docs.dodona.be/#{I18n.locale}") %>
       <%= link_to(t("layout.menu.contact"), contact_path) %>
     </div>

diff --git a/app/views/layouts/_footer.html.erb b/app/views/layouts/_footer.html.erb
@@ -10,14 +10,14 @@
     <a href="https://facebook.com/DodonaEdu" target="_blank" rel="noopener">
       <i class="mdi mdi-facebook"></i>
     </a>
-    <%= link_to t("layout.footer.support_dodona"), support_us_path %>
+    <%= link_to t("layout.footer.support_dodona"), support_us_path, class: "btn btn-outline support" %>
     <%= link_to 'Contact', contact_path %>
-    <%= link_to 'Status', status_path, target: "_blank", rel: "noopener" %>
+    <%= link_to 'Status', status_path, target: "_blank", rel: "noopener", class: "d-none d-lg-inline" %>
     <%= link_to t("layout.footer.privacy_statement"), privacy_path %>
     <%= link_to t("layout.footer.your_data"), data_path %>
-    <%= link_to t("layout.footer.publications"), publications_path %>
+    <%= link_to t("layout.footer.publications"), publications_path, class: "d-none d-lg-inline" %>
     <% version_info = "Dodona #{Dodona::Application::VERSION}" %>
     <% version_info += " (ruby #{RUBY_VERSION} #{`which ruby`})" if Rails.env.development? || Rails.env.staging? %>
-    <%= link_to version_info, "https://github.com/orgs/dodona-edu/discussions/categories/release-notes" %>
+    <%= link_to version_info, "https://github.com/orgs/dodona-edu/discussions/categories/release-notes", class: "d-none d-lg-inline" %>
   </div>
 </footer>
diff --git a/app/views/layouts/_navbar.html.erb b/app/views/layouts/_navbar.html.erb
@@ -8,7 +8,7 @@
         </button>
       <% end %>
       <%= link_to root_path, class: "brand" do %>
-        <span class="d-sm-inline d-none">Dodona</span>
+        <span class="d-md-inline d-none">Dodona</span>
         <i class="visible-xs mdi mdi-home"></i>
       <% end %>
     </div>
@@ -88,6 +88,7 @@
             </ul>
           </li>
         <% else %>
+          <li class="support"><%= link_to t("layout.menu.support_us"), support_us_path, class: "btn btn-outline"  %></li>
           <li class="sign-in"><%= link_to t("layout.menu.log_in"), sign_in_path, class: "dropdown-toggle"  %></li>
         <% end %>
         <li class="dropdown">

diff --git a/app/views/pages/support.html.erb b/app/views/pages/support.html.erb
@@ -1,10 +1,14 @@
+<% link_lang = I18n.locale == :en ? "en-GB" : "nl-NL" %>
 <div class="home-cover-img">&nbsp;</div>
 <div class="row">
   <div class="col-xl-8 offset-xl-2 col-lg-10 offset-lg-1 col-12">
     <div class="row home-header">
       <div class="col-12 col-sm-6 col-md-7 col-lg-7 col-xl-7 col-xxl-8 home-lead">
         <h1><%= t ".support_dodona" %></h1>
         <p class='lead'><%= t ".title_l1" %><br><%= t ".title_l2" %></p>
+        <a href="https://actieplatform.ugent.be/<%= link_lang%>/p/dodona/step-1" class="btn btn-lg" target="_blank">
+          <%= t ".support_button" %>
+        </a>
       </div>
       <div class="d-none d-sm-block col-sm-6 col-md-5 col-lg-5 col-xl-5 col-xxl-4">
         <%= image_tag("home.png", class: 'img-fluid') %>
@@ -21,10 +25,14 @@
       </div>
       <div class="card-supporting-text card-border">
         <h3><%= t ".how_to_support" %></h3>
-        <p><%= t ".support_p1_html" %></p>
-        <div class="callout callout-info">
-          <%= t ".support_p2_html" %>
+        <p><%= t ".support_p0_html" %></p>
+        <div class="d-flex mb-4">
+          <a href="https://actieplatform.ugent.be/<%= link_lang%>/p/dodona/step-1" class="btn btn-filled m-auto" target="_blank">
+            <%= t ".support_button" %>
+          </a>
         </div>
+        <p><%= t ".support_p1_html" %></p>
+        <p><%= t ".support_p2_html" %></p>
         <p><%= t ".support_p3_html" %></p>
       </div>
     </div>

diff --git a/config/locales/views/pages/en.yml b/config/locales/views/pages/en.yml
@@ -148,11 +148,13 @@ en:
       exercises: Exercises
       schools: Schools
       intro_p1_html: "Dodona is an online exercise platform for <strong>learning to code</strong>. It wants to teach students how to program in the most meaningful and effective way possible. Dodona acts as an <strong>online co-teacher</strong>, designed to give every student access to high quality education. The focus is on automatic corrections and giving meaningful feedback on the <strong>submitted solutions</strong> from students."
-      intro_p2_html: "Dodona is <strong>free to use</strong> for schools and thanks to your support, we would like to keep it that way! Keeping this platform up and running takes a lot of time, just as supporting hundreds of schools and thousands of students. Your support would go <strong>entirely to personnel</strong> (e.g., paid internships) that help developing new features and supporting users."
+      intro_p2_html: "Dodona is <strong>free to use</strong> for schools and thanks to your support, we would like to keep it that way! Keeping this platform up and running takes a lot of time, just as supporting hundreds of schools and thousands of students. Your support helps to <strong>pay our personnel</strong>. They develop new features and provide support for users."
       intro_p3_html: "Please contact us at <a href='mailto:[email protected]'>[email protected]</a> for more information about this project."
       how_to_support: How can you support us?
-      support_p1_html: "Thanks to the <a href='https://www.ugent.be/en/ghentuniv/university-fund' target='_blank'>University Fund</a> of Ghent University, you can support us in a <strong>tax-friendly manner</strong>. Donations over 40 euros come with a tax certificate, which allows you to recover 45% through your personal income tax. There are no additional charges, so we receive your donation <strong>for the full 100%</strong>."
-      support_p2_html: "You can make a voluntary donation to our project by making a deposit to the account of the University Fund account at <code>BE26 3900 9658 0329</code> (BIC: <code>BBRUBEBB</code>) by mentioning <code>Dodona</code>."
+      support_p0_html: "The easiest way to make a donation is using the button below. You can choose the amount yourself."
+      support_p1_html: "Thanks to the <a href='https://www.ugent.be/en/ghentuniv/university-fund' target='_blank'>University Fund</a> of Ghent University, you can support us in a <strong>tax-friendly manner</strong>. Donations over 40 euros come with a tax certificate, which allows you to recover 45% through your personal income tax."
+      support_p2_html: "You can also make a deposit to the account of the University Fund account at <code>BE26 3900 9658 0329</code> (BIC: <code>BBRUBEBB</code>) by mentioning <code>Dodona</code>."
       support_p3_html: "If you would like to donate a larger amount or wish to sponsor us (by invoice), please contact us at <a href='mailto:[email protected]'>[email protected]</a> and we'd be happy to look at the possibilities."
       supported_by: Supported by
       supported_p1_html: "Dodona is run by a small team of researchers at <a href='https://www.ugent.be/en' target='_blank'>Ghent University</a>. The platform is open source and all code is available on <a href='https://github.com/dodona-edu/dodona' target='_blank'>GitHub</a>. The hosting is provided by Ghent University. In addition, Dodona is supported by educational innovation projects from Ghent University and the Faculty of Sciences. <a href='https://www.elixir-belgium.org/' target='_blank'>ELIXIR Belgium</a> also provides some funding."
+      support_button: Make a donation
diff --git a/config/locales/views/pages/nl.yml b/config/locales/views/pages/nl.yml
@@ -148,11 +148,13 @@ nl:
       exercises: Oefeningen
       schools: Scholen
       intro_p1_html: "Dodona is een online oefenplatform om te <strong>leren programmeren</strong>. Het wil studenten op een zo zinvolle en zo effectief mogelijke manier leren programmeren. Dodona gedraagt zich als een <strong>online co-teacher</strong> die ontworpen is om elke student toegang te geven tot onderwijs van hoge kwaliteit. De focus ligt op het automatisch verbeteren en het geven van <strong>zinvolle feedback</strong> op ingediende oplossingen van de studenten."
-      intro_p2_html: "Dodona wordt <strong>gratis</strong> aangeboden aan scholen en onderwijsinstellingen en met uw steun willen we dat graag zou houden! Het online houden van dit platform vergt heel wat tijd, net als de ondersteuning voor honderden scholen en duizenden studenten. Uw steun gaat <strong>integraal naar personeel</strong> (zoals bijvoorbeeld jobstudenten) die meehelpen met het ontwikkelen van nieuwe features en het ondersteunen van gebruikers."
+      intro_p2_html: "Dodona wordt <strong>gratis</strong> aangeboden aan scholen en onderwijsinstellingen en met uw steun willen we dat graag zou houden! Het online houden van dit platform vergt heel wat tijd, net als de ondersteuning voor honderden scholen en duizenden studenten. Uw steun helpt <strong>de lonen van onze medewerkers</strong> te betalen. Zij ontwikkelen nieuwe features en ondersteunen gebruikers."
       intro_p3_html: "Contacteer ons gerust op <a href='mailto:[email protected]'>[email protected]</a> voor meer info over dit project."
       how_to_support: Hoe kunt u ons steunen?
-      support_p1_html: "Dankzij het <a href='https://www.ugent.be/schenken/nl' target='_blank'>Universiteitsfonds</a> van de Universiteit Gent kunt u <strong>fiscaal voordelig schenken</strong> aan Dodona. Voor giften vanaf 40 euro ontvangt u een fiscaal attest waarmee u 45% van uw gift recupereert in uw belastingaangifte. Uw gift komt bovendien <strong>integraal bij ons</strong> terecht."
-      support_p2_html: "Giften kunnen worden overgemaakt op het rekeningnummer van het Universiteitsfonds zijnde <code>390-0965803-29</code> of IBAN <code>BE26 3900 9658 0329</code> (BIC: <code>BBRUBEBB</code>) met als mededeling <code>Dodona</code>."
+      support_p0_html: "De eenvoudigste manier om dodona te steunen is via onderstaande knop. U kunt zelf het bedrag kiezen dat u wilt schenken."
+      support_p1_html: "Dankzij het <a href='https://www.ugent.be/schenken/nl' target='_blank'>Universiteitsfonds</a> van de Universiteit Gent kunt u <strong>fiscaal voordelig schenken</strong> aan Dodona. Voor giften vanaf 40 euro ontvangt u een fiscaal attest waarmee u 45% van uw gift recupereert in uw belastingaangifte."
+      support_p2_html: "Indien je liever een overschrijving plaatst kan dit op het rekeningnummer van het Universiteitsfonds zijnde <code>BE26 3900 9658 0329</code> (BIC: <code>BBRUBEBB</code>) met als mededeling <code>Dodona</code>."
       support_p3_html: "Wenst u een groter bedrag te schenken of kiest u liever voor sponsoring op factuur? Contacteer ons op <a href='mailto:[email protected]'>[email protected]</a> en we bekijken samen graag de mogelijkheden."
       supported_by: Met de steun van
       supported_p1_html: "Dodona wordt ontwikkeld door een klein team onderzoekers aan de <a href='https://www.ugent.be' target='_blank'>Universiteit Gent</a>. Het platform is volledig open source en alle code is beschikbaar op <a href='https://github.com/dodona-edu/dodona' target='_blank'>GitHub</a>. De hosting wordt aangeboden door de Universiteit Gent. Daarnaast ontving Dodona al steun in de vorm van onderwijsinnovatieprojecten van de Universiteit Gent en de Faculteit Wetenschappen. Ook <a href='https://www.elixir-belgium.org/' target='_blank'>ELIXIR Belgium</a> ondersteunde dit project."
+      support_button: Doe een gift