Merge pull request #181 from AntennaPod/donation-model

Implement donation modal

Author: keunes

_i18n/da.yml

@@ -106,8 +106,6 @@ contribute:
       wireframes? Hjælp med at løse disse problemer.
   introduction: AntennaPod er under aktiv udvikling af frivillige. Du kan også bidrage
     med kode eller andet!
-  donate: Hvis du ikke kan bidrage på nogen af de ovennævnte måder, kan du også give
-    et <a href="https://opencollective.com/antennapod" target="_blank"> bidrag</a>.
 documentation:
   general:
     search-placeholder: Søg i dokumentation

_i18n/en.yml

@@ -109,7 +109,12 @@ contribute:
   design:
     title: "Design"
     text: "You turn complex requests in understandable user stories or wireframes? Help tackle these issues."
-  donate: "Or, if you can't contribute in any of the ways listed above, you can also make a <a href=\"https://opencollective.com/antennapod\" target=\"_blank\">donation</a>."
+  donate:
+    link: "I want to make a <a href=\"https://opencollective.com/antennapod\" target=\"_blank\" data-toggle=\"modal\" data-target=\"#donationModal\">donation</a>."
+    modal-title: "Are you sure you want to donate?"
+    modal-button-donate: "Donate anyway"
+    modal-button-chat: "Discuss with us how you can help"
+    modal-button-contribute: "Check contribution options again"
 
 ## Documentation
 documentation:

_i18n/en/general/donation-modal.md

@@ -0,0 +1,3 @@
+AntennaPod doesn't need a lot of money. **Our (annual) costs are already covered** by our existing donation funds. Therefore, we'd much prefer it if you
+* donate to your favorite podcast(er), or
+* help us with a non-monetary contribution.

_i18n/es.yml

@@ -109,8 +109,6 @@ contribute:
       "wireframes"? Ayuda a solucionar estos problemas.
   introduction: AntennaPod está siendo desarrollado activamente por gente voluntaria.
     ¡Tú también puedes contribuir, mediante código o de otra manera!
-  donate: O, si no puedes contribuir de ninguna de las formas arriba listadas, también
-    puedes hacer una <a href="https://opencollective.com/antennapod" target="_blank">donación</a>.
 documentation:
   general:
     introduction: Bienvenido a la sección de documentación de AntennaPod. Esta sección

_i18n/fr.yml

@@ -110,9 +110,6 @@ contribute:
   test:
     text: Vous êtes doué pour casser des trucs ? Devenez bêta-testeur.
     title: Tester
-  donate: Ou, si vous ne pouvez pas contribuer de l'une des manières énumérées ci-dessus,
-    vous pouvez également faire un <a href="https://opencollective.com/antennapod"
-    target="_blank">don</a>.
 documentation:
   general:
     search-placeholder: Rechercher dans la documentation

_i18n/it.yml

@@ -26,8 +26,6 @@ contribute:
   translate:
     title: Traduzione
     text: Parli altre lingue oltre all'inglese? Aiutaci a tradurre AntennaPod.
-  donate: Oppure, se non puoi contribuire in nessuno dei modi elencati qui sopra,
-    puoi anche fare una <a href="https://opencollective.com/antennapod" target="_blank">donazione</a>.
   test:
     title: Test
     text: Rompere le cose ti riesce bene? Diventa beta tester.

_i18n/nl.yml

@@ -100,9 +100,6 @@ contribute:
     title: Promoten
     text: Schrijf je pakkende tweets en interessante blogs, of maak je prachtige graphics?
       Help ons AntennaPod wereldberoemd maken.
-  donate: Of, als je niet op een van bovenstaande manieren kunt bijdragen, kun je
-    ook een <a href="https://opencollective.com/antennapod" target="_blank">donatie</a>
-    doen.
 documentation:
   categories:
     podcasters-hosters:

_sass/_custom.scss

@@ -496,10 +496,6 @@ button {
   border-radius: 50%;
 }
 
-.modal-content {
-  border-radius: 5px;
-}
-
 // Texts
 
 textarea {
@@ -531,20 +527,26 @@ blockquote {
 // Posts
 
 .post-content {
-  & p {
+  & p, li {
     font-size: 14px;
     color: $gray-900;
-    margin-bottom: 25px;
+    margin-bottom: 0px;
     line-height: 24px;
   }
 
-  & a {
-    color: $gray-900;
-    font-weight: 600;
-    text-decoration: underline;
+  & p + p {
+    margin-top: 20px;
+  }
 
-    &:hover {
-      text-decoration: none;
+  & p, li, h1, h2, h3, h4, h5, h6, #breadcrumbs {
+    & a {
+      color: $gray-900;
+      font-weight: 600;
+      text-decoration: underline;
+
+      &:hover {
+        text-decoration: none;
+      }
     }
   }
 
@@ -582,16 +584,6 @@ blockquote {
     font-weight: 700;
   }
 
-  & li {
-    list-style-position: outside;
-    margin: 0 0 20px 20px;
-    font-size: 14px;
-  }
-
-  & ul li {
-    list-style-type: disc;
-  }
-
   & img[alt$=" > "] {
     float: right;
     margin: 0 0 20px 20px;
@@ -620,6 +612,10 @@ blockquote {
 
 }
 
+.post-content + .row, p + .row {
+    margin-top: 20px;
+  }
+
 .post .cover {
   max-height: 350px;
   object-fit: cover;
@@ -896,6 +892,44 @@ i.member-img {
   }
 }
 
+// Lists
+
+.post-content, .modal-body {
+  & ul {
+    padding: 0;
+    margin-bottom: 0;
+  }
+
+  & li {
+    list-style-position: outside;
+    margin: 0 0 5px 20px;
+  }
+
+  & ul li {
+    list-style-type: disc;
+  }
+
+  & ul + p {
+    margin-bottom: 5px;
+  }
+
+  & p + ul {
+    margin-top: 5px;
+  }
+}
+
+// Modals
+
+.modal-body p, .modal-body li {
+  padding: 0;
+  font-size: 1rem;
+}
+
+.modal-footer {
+  border-top: 0;
+  padding-top: 0;
+}
+
 // Backgrounds
 
 .background {

_sass/_dark.scss

@@ -1,17 +1,37 @@
 @media (prefers-color-scheme: dark) {
+
+/*!
+ * Bootstrap v4.6.0 (https://getbootstrap.com/)
+ * Copyright 2011-2021 The Bootstrap Authors
+ * Copyright 2011-2021 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ *
+ * Bootstrap-Dark (https://vinorodrigues.github.io/bootstrap-dark/)
+ * Copyright 2020 Vino Rodrigues
+ * This version is a dual color theme, with the default light mode and the dark
+ * elements optioned in by a `prefers-color-scheme: dark` media query
+ */
+
+  @import "./bootstrap-dark/functions";
+  @import "./bootstrap-dark/variables-alt";
+  @import "./bootstrap-dark/buttons";
+  @import "./bootstrap-dark/modal";
+
     :root {
         scrollbar-color: #333 #000;
     }
 
     body {
-        color: #bbb;
+        color: #ddd;
         background-color: #111;
     }
 
     .content h1,
     .content h2,
     .content h3,
-    .content h4 {
+    .content h4,
+    .content h5,
+    .content h6 {
         color: #ddd;
     }
 
@@ -44,10 +64,13 @@
         border-color: #333;
     }
 
-    .post-content {
+    .post-content, .modal-body {
+        & p, li {
+          color: #ddd;
 
-        & p {
-            color: #ddd;
+          & a {
+            color: #bbf;
+          }
         }
 
         & #donate {
@@ -82,11 +105,6 @@
         color: #fff;
     }
 
-    .post-header a,
-    .post-content a {
-        color: #bbf;
-    }
-
     .overlay {
         background-color: #333;
     }
@@ -108,4 +126,8 @@
         color: #ddd !important;
     }
 
+    .modal-footer {
+      border-top: 0;
+    }
+
 }

_sass/bootstrap-dark/_buttons.scss

@@ -0,0 +1,66 @@
+
+// Base styles
+
+.btn {
+  color: $body-color-alt;
+
+  @include hover() {
+    color: $body-color-alt;
+  }
+
+  &:focus,
+  &.focus {
+    box-shadow: $btn-focus-box-shadow-alt;
+  }
+
+  // Disabled comes first so active can properly restyle
+  &.disabled,
+  &:disabled {
+    opacity: $btn-disabled-opacity-alt;
+    @include box-shadow(none);
+  }
+
+  &:not(:disabled):not(.disabled) {
+
+    &:active,
+    &.active {
+      @include box-shadow($btn-active-box-shadow-alt);
+
+      &:focus {
+        @include box-shadow($btn-focus-box-shadow-alt, $btn-active-box-shadow-alt);
+      }
+    }
+  }
+}
+
+// Alternate buttons
+
+@each $color, $value in $theme-colors-alt {
+  .btn-#{$color} {
+    @include button-variant($value, $value);
+  }
+}
+
+@each $color, $value in $theme-colors-alt {
+  .btn-outline-#{$color} {
+    @include button-outline-variant($value);
+  }
+}
+
+
+// Link buttons
+
+// Make a button look and behave like a link
+.btn-link {
+  color: $link-color-alt;
+
+  @include hover() {
+    color: $link-hover-color-alt;
+  }
+
+  &:disabled,
+  &.disabled {
+    color: $btn-link-disabled-color-alt;
+    pointer-events: none;
+  }
+}