Merge pull request #8706 from gitcoinco/gpg/jtbd-landings

gpg/jtbd-landings

app/app/urls.py

@@ -472,6 +472,10 @@
     re_path(r'^homeold/?$', retail.views.index_old, name='homeold'),
     re_path(r'^home/?$', retail.views.index, name='home'),
     re_path(r'^landing/?$', retail.views.index, name='landing'),
+    re_path(r'^earn/?$', retail.views.jtbd_earn, name='jtbd_earn'),
+    re_path(r'^learn/?$', retail.views.jtbd_learn, name='jtbd_learn'),
+    re_path(r'^connect/?$', retail.views.jtbd_connect, name='jtbd_connect'),
+    re_path(r'^fund/?$', retail.views.jtbd_fund, name='jtbd_fund'),
     re_path(r'^about/?', retail.views.about, name='about'),
     re_path(r'^mission/?', retail.views.mission, name='mission'),
     re_path(r'^jobs/?', retail.views.jobs, name='jobs'),

app/assets/v2/scss/gc-mixins.scss

@@ -23,3 +23,33 @@
   }
 }
 
+// define line-height (n: *em)
+@mixin line-height($heights...) {
+  @each $i in $heights {
+    .line-height-#{nth($i, 1)} {
+      line-height: #{nth($i, 2)}em;
+    }
+  }
+}
+
+// define line-clamp (number of lines)
+@mixin line-clamp($minClamp, $maxClamp) {
+  @for $i from $minClamp through $maxClamp {
+    .line-clamp-#{$i} {
+      display: -webkit-box;
+      -webkit-line-clamp: #{$i};
+      -webkit-box-orient: vertical;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+}
+
+// define gap for use with flex
+@mixin gap($minGap, $maxGap) {
+  @for $i from $minGap through $maxGap {
+    .gap-#{$i} {
+      gap: #{$i}em;
+    }
+  }
+}

app/assets/v2/scss/gc-utilities.scss

@@ -7,6 +7,12 @@
 // .border-left-[1-5]
 @include border('left', 1, 5);
 
+// .border-bottom-[1-5]
+@include border('bottom', 1, 5);
+
+// .border-right-[1-5]
+@include border('right', 1, 5);
+
 // .border-[grey, primary, secondary, danger, info, dark, light]
 @include border-colors(
   'grey' lightgray,
@@ -18,7 +24,53 @@
   'light' $light
 );
 
-// Hover effects
+// .line-height-[1-5]
+@include line-height(
+  1 1.4,
+  2 1.6,
+  3 1.8,
+  4 2.2,
+  5 2.5
+);
+
+// .line-height-md-[1-5]
+@media (min-width: 768px) {
+  @include line-height(
+    'md-1' 1.4,
+    'md-2' 1.6,
+    'md-3' 1.8,
+    'md-4' 2.2,
+    'md-5' 2.5
+  );
+}
+
+// .line-height-lg-[1-5]
+@media (min-width: 992px) {
+  @include line-height(
+    'lg-1' 1.4,
+    'lg-2' 1.6,
+    'lg-3' 1.8,
+    'lg-4' 2.2,
+    'lg-5' 2.5
+  );
+}
+
+// .line-clamp-[1-5]
+@include line-clamp(1, 5);
+
+// .gap-[1-5]
+@include gap(1, 5);
+
+// lighter grey styling
+.bg-lighter {
+  background-color: $gc-grey-100;
+}
+
+.text-lighter {
+  color: $gc-grey-100;
+}
+
+// hover effects
 .hover-underline:not(:disabled):not(.disabled):not(.active):hover {
   text-decoration: underline!important
 }
@@ -27,7 +79,7 @@
   color: $gc-violet-500!important;
 }
 
-// Invalid form state
+// invalid form state
 .invalid {
 
   input.invalid, input:invalid, .form__checkbox input:invalid + .form__label::before,
@@ -48,11 +100,76 @@
   }
 }
 
-// Helpers to fix top and bottom positions
+// helpers to fix top and bottom positions
 .bottom-0 {
   bottom: 0px;
 }
 
 .top-0 {
   top: 0px;
 }
+
+// background-image helpers
+.bg-img-cover {
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.bg-img-contain {
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+// flex rules (columns at break-points)
+.flex-basis-auto {
+  flex-basis: auto;
+}
+.flex-basis-25 {
+  flex-basis: 25%;
+}
+.flex-basis-33 {
+  flex-basis: 33%;
+}
+.flex-basis-50 {
+  flex-basis: 50%;
+}
+.flex-basis-100 {
+  flex-basis: 100%;
+}
+
+@media (min-width: 768px) {
+  .flex-basis-md-auto {
+    flex-basis: auto;
+  }
+  .flex-basis-md-25 {
+    flex-basis: 25%;
+  }
+  .flex-basis-md-33 {
+    flex-basis: 33%;
+  }
+  .flex-basis-md-50 {
+    flex-basis: 50%;
+  }
+  .flex-basis-md-100 {
+    flex-basis: 100%;
+  }
+}
+
+@media (min-width: 992px) {
+  .flex-basis-lg-auto {
+    flex-basis: auto;
+  }
+  .flex-basis-lg-25 {
+    flex-basis: 25%;
+  }
+  .flex-basis-lg-33 {
+    flex-basis: 33%;
+  }
+  .flex-basis-lg-50 {
+    flex-basis: 50%;
+  }
+  .flex-basis-lg-100 {
+    flex-basis: 100%;
+  }
+}
+

app/assets/v2/scss/gc-variables.scss

@@ -3,6 +3,12 @@ $gc-purple: #0D0764;
 $gc-grey: #EEEEEE;
 
 // GC colors and shades
+$gc-gray-500: #0E0333;
+$gc-gray-400: #757087;
+$gc-gray-300: #A7A2B6;
+$gc-gray-200: #C4C1CF;
+$gc-grey-100: #F8F8F8;
+
 $gc-violet-500: #5932C4;
 $gc-violet-400: #6F3FF5;
 $gc-violet-300: #8C65F7;

app/assets/v2/scss/gitcoin.scss

@@ -487,16 +487,14 @@
 }
 
 .gc-accordion {
-  margin-left: -38px;
-
 
   &:after {
     content: "";
     display: block;
     border-bottom: 1px solid #eee;
     position: relative;
     left: 26px;
-    width: calc(100% - 16px);
+    width: calc(100% - 26px);
   }
 
   .accordion {
@@ -506,6 +504,12 @@
     border-left: 4px solid transparent;
   }
 
+  &.gc-accordion-border {
+    .accordion, .accordion-panel {
+      border-left: 4px solid #DDDDDD
+    }
+  }
+
   .accordion-title {
     display: inline-block;
     width: calc(100% - 50px);
@@ -519,8 +523,13 @@
     }
   }
 
-  .accordion-panel  {
+  .accordion-panel {
     padding-left: 28px;
+
+    p {
+      margin-bottom: 0;
+      padding-bottom: 1rem;
+    }
   }
 
   .accordion:after {
@@ -535,7 +544,7 @@
     content: "";
     display: block;
     min-height: 4px;
-    width: calc(100% + 10px);
+    width: 100%;
     position: relative;
     top: -22px;
     border-top: 1px solid #eee;

app/assets/v2/scss/jtbd.scss

@@ -0,0 +1,15 @@
+// JTBD specific stylings
+.img-accordion .collapsing {
+  transition: none !important;
+}
+
+.accordion:not(.collapsed) {
+  pointer-events: none;
+}
+
+@media screen and (min-width: 768px) {
+  .btn-cta {
+    width: 13rem;
+    max-width: 100%;
+  }
+}

app/assets/v2/scss/notifications.scss

@@ -1,5 +1,5 @@
 // import variables and mixins
-@import './gc-utilities';
+@import './gc-mixins';
 
 html {
   --color-notification: 37, 232, 153;

app/dashboard/utils.py

@@ -411,6 +411,7 @@ def get_poap_contract(network, sockets):
     poap_contract = web3.eth.contract(poap_addr, abi=poap_abi)
     return poap_contract
 
+
 def get_poap_earliest_owned_token_timestamp(network, sockets, address):
     web3 = get_web3(network, sockets)
     poap_contract = get_poap_contract(network, sockets)
@@ -1211,6 +1212,7 @@ def set_hackathon_event(type, event):
             {
                 'absolute_url': sponsor.absolute_url,
                 'avatar_url': sponsor.avatar_url,
+                'handle': sponsor.handle,
             }
             for sponsor in event.sponsor_profiles.all()
         ],