codeforlife-portal 5.32.2__py2.py3-none-any.whl → 8.9.9__py2.py3-none-any.whl

portal/static/portal/sass/modules/_mixins.scss

@@ -24,6 +24,22 @@
     calculate-rem($margin-bottom) calculate-rem($margin-left);
 }
 
+@mixin _margin-top($margin-top) {
+  margin-top: calculate-rem($margin-top);
+}
+
+@mixin _margin-bottom($margin-bottom) {
+  margin-bottom: calculate-rem($margin-bottom);
+}
+
+@mixin _margin-right($margin-right) {
+  margin-right: calculate-rem($margin-right);
+}
+
+@mixin _margin-left($margin-left) {
+  margin-left: calculate-rem($margin-left);
+}
+
 @mixin _top($top) {
   top: calculate-rem($top);
 }
@@ -39,6 +55,11 @@
     calculate-rem($radius-bottom-left);
 }
 
+@mixin _border-radius-all($radius) {
+  border-radius: calculate-rem($radius) calculate-rem($radius)
+    calculate-rem($radius) calculate-rem($radius);
+}
+
 @mixin _box-shadow($h-offset, $v-offset, $blur, $spread, $color) {
   box-shadow: calculate-rem($h-offset) calculate-rem($v-offset)
     calculate-rem($blur) calculate-rem($spread) $color;

portal/static/portal/sass/partials/_banners.scss

@@ -34,25 +34,6 @@
   .banner--rapid-router--content {
     @include _padding(30px, 0px, 30px, 0px);
   }
-
-  .banner--aimmo--content {
-    @include _padding(20 * $spacing, 0px, 20 * $spacing, 0px);
-    display: flex;
-    justify-content: center;
-  }
-}
-
-.banner--aimmo-landing--content {
-  @include _padding(14 * $spacing, 0px, 14 * $spacing, 0px);
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-
-  .kurono-logo {
-    @include _padding(0px, 0px, 5 * $spacing, 0px);
-    width: 80vw;
-  }
 }
 
 .banner--picture {
@@ -85,6 +66,10 @@
   background-image: url("../img/home_educate_hero.jpg");
 }
 
+.banner--picture--coding-club {
+  background-image: url("../img/coding_club_hero.jpg")
+}
+
 .banner--picture--play {
   background-image: url("../img/home_play_hero.jpg");
 }
@@ -117,14 +102,6 @@
   background-image: url("../img/teaching_resources_hero.jpg");
 }
 
-.banner--picture--aimmo {
-  background-image: url("../img/kurono_hero.jpg");
-}
-
-.banner--picture--aimmo-resources {
-  background-image: url("../img/kurono_resources_hero.jpg");
-}
-
 .banner--homepage {
   display: flex;
   justify-content: center;
@@ -237,86 +214,6 @@
   }
 }
 
-.banner--aimmo-home {
-  .dropdown {
-    width: 50%;
-
-    button,
-    ul {
-      @include _margin(0px, 0px, 0px, 0px);
-      width: 100%;
-      z-index: $hover-content-level;
-    }
-
-    li {
-      border-bottom: 1px solid $color-table-border;
-    }
-
-    .dropdown-menu__option__text {
-      border-bottom: 1px solid transparent;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: normal;
-
-      &:hover {
-        border-bottom: 1px solid $color-text-gray;
-      }
-    }
-
-    .glyphicon {
-      @include _font-size(10px);
-      @include _padding(8px, 0px, 0px, 0px);
-    }
-  }
-}
-
-.banner--teacher--create-aimmo-game {
-  align-items: start;
-
-  .kurono-logo {
-    @include _padding(20px, 0px, 25px, 0px);
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    justify-content: center;
-
-    img {
-      width: 123 * $spacing;
-    }
-  }
-
-  .button-group {
-    display: flex;
-    align-items: flex-end;
-  }
-
-  #create-game-form {
-    padding: 0;
-
-    .errorlist {
-      display: none;
-    }
-
-    label {
-      color: white;
-    }
-
-    input,
-    select {
-      height: auto;
-      margin: 0;
-
-      &::placeholder {
-        color: $color-error;
-      }
-    }
-  }
-
-  img {
-    @include _margin(14px, 0px, 0px, 0px);
-  }
-}
-
 .banner--rapid-router {
   background-image: url("../img/rapid_router_landing_hero.png");
   background-position: center center;
@@ -332,46 +229,6 @@
   }
 }
 
-.banner--aimmo {
-  background-image: url("../img/kurono_landing_hero.png");
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-size: cover;
-
-  img {
-    @include _margin(60px, 0px, 60px, 0px);
-    width: 40%;
-  }
-
-  &.banner img {
-    width: 25%;
-  }
-}
-
-.banner--aimmo--video--container {
-  @include _padding(12 * $spacing, 0px, 12 * $spacing, 0px);
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  position: relative;
-}
-
-.banner--aimmo--video {
-  left: 0px;
-  height: 100%;
-  object-fit: cover;
-  overflow: hidden;
-  position: absolute;
-  top: 0px;
-  width: 100%;
-  z-index: $behind-content-level;
-}
-
-.banner--aimmo--video--text {
-  @include _padding(10 * $spacing, 10 * $spacing, 10 * $spacing, 10 * $spacing);
-  color: $color-text-secondary;
-}
-
 .banner--resources {
   @include _padding(0px, 0px, 30px, 0px);
   align-items: center;
@@ -424,14 +281,6 @@
   }
 }
 
-@media (min-width: $tablet-small-min-width) {
-  .banner--aimmo-landing--content {
-    .kurono-logo {
-      width: 615px;
-    }
-  }
-}
-
 @media (max-width: $tablet-small-min-width) {
   .banner--picture {
     margin: 0 auto 0 auto;
@@ -460,28 +309,6 @@
     }
   }
 
-  .banner--aimmo {
-    @include _padding(50px, 0px, 150px, 0px);
-    flex-direction: column;
-
-    .button {
-      margin-bottom: 50px;
-    }
-  }
-
-  .banner--aimmo-landing--content {
-    @include _padding(8 * $spacing, 8 * $spacing, 8 * $spacing, 8 * $spacing);
-  }
-
-  .banner--aimmo--video {
-    max-height: 300px;
-    object-fit: none;
-  }
-
-  .banner--aimmo--video--container {
-    @include _padding(0px, 0px, 0px, 0px);
-  }
-
   .banner--game {
     .banner--game__text {
       @include _padding(10px, 50px, 30px, 50px);

portal/static/portal/sass/partials/_buttons.scss

@@ -89,7 +89,6 @@ table {
     color: $color-text-primary;
     box-shadow: none;
   }
-
 }
 
 /* Outlined button */
@@ -150,6 +149,17 @@ table {
   }
 }
 
+.button-email {
+  &:after {
+    content: "\e0be";
+    font-family: "Material Icons Outlined";
+    position: relative;
+    top: 2px;
+    left: 5px;
+    line-height: 0.9em;
+  }
+}
+
 .button--regular,
 .ui-dialog-buttonset button {
   @include _padding(10px, 15px, 10px, 15px);
@@ -161,8 +171,6 @@ table {
 }
 
 .button--menu {
-  background-color: transparent;
-  border-radius: 0;
   text-decoration: none;
 }
 
@@ -233,6 +241,7 @@ td .button--primary {
 
 .button--dropdown {
   @extend .dropdown;
+  width: 20vw;
   align-items: center;
   background: transparent;
   border: 2px solid $color-secondary-600;
@@ -448,18 +457,6 @@ td .button--primary {
     }
   }
 
-  .grid-kurono-sessions__accordion-button {
-    .icon-drop-down:before {
-      content: "arrow_drop_down";
-    }
-
-    &[aria-expanded="true"] {
-      .icon-drop-down:before {
-        content: "arrow_drop_up";
-      }
-    }
-  }
-
   .button--menu__item--teacher {
     background-color: $color-background-teach;
   }

portal/static/portal/sass/partials/_carousel.scss

@@ -13,6 +13,7 @@
     &.next,
     &.prev {
       display: flex;
+      flex-wrap: wrap;
     }
 
     > .carousel-image-wrapper {
@@ -47,3 +48,131 @@
     margin: 1px;
   }
 }
+
+/* 3 cards visible on desktop, scroll one at a time */
+.carousel-cards {
+  .carousel-inner {
+    display: flex;
+
+    .next,
+    .prev {
+      display: flex;
+      width: 33.33333333%;
+    }
+
+    .item {
+      align-items: stretch;
+      background-color: transparent;
+      @include _padding(13px, 13px, 13px, 13px); // padding for card shadow
+
+      .card {
+        margin: 0;
+      }
+    }
+
+    /* show 3 items */
+    .active,
+    .active + .item,
+    .active + .item + .item {
+      display: flex;
+    }
+
+    .item.active:not(.right):not(.left),
+    .item.active:not(.right):not(.left) + .item,
+    .item.active:not(.right):not(.left) + .item + .item {
+      transition: none;
+    }
+
+    .item.next {
+      position: relative;
+      transform: translate3d(0, 0, 0);
+    }
+
+    /* next animation */
+    .active.left + .item.next.left,
+    .item.next.left + .item,
+    .item.next.left + .item + .item,
+    .item.next.left + .item + .item + .item {
+      position: relative;
+      transform: translate3d(-100%, 0, 0);
+      visibility: visible;
+    }
+
+    /* prev animation */
+    .active.right + .item.prev.right,
+    .item.prev.right + .item,
+    .item.prev.right + .item + .item,
+    .item.prev.right + .item + .item + .item {
+      display: flex;
+      position: relative;
+      transform: translate3d(100%, 0, 0);
+      visibility: visible;
+    }
+
+    /* position previous card outside carousel for animation */
+    .item.prev.right {
+      display: flex;
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: -1;
+      visibility: visible;
+      height: 100%;
+    }
+
+    /* position next card outside carousel for animation */
+    .active.item + .item + .item + .item {
+      display: flex;
+      position: absolute;
+      top: 0;
+      right: -33.33333333%;
+      z-index: -1;
+      visibility: visible;
+      height: 100%;
+    }
+  }
+
+  .carousel-nav {
+    .button {
+      @include _font-size(40px);
+      border-radius: calculate-rem(20px);
+      line-height: 0;
+      min-width: auto;
+
+      &.disabled {
+        opacity: 0.38;
+        pointer-events: none;
+        cursor: default;
+      }
+
+      &:hover:not(.disabled) {
+        background-color: rgba(0, 0, 0, 0.04);
+      }
+    }
+  }
+}
+
+.carousel-cards-container {
+  /* shrink padding because cards have their own */
+  @include _padding(0px, 2px, 0px, 2px);
+}
+
+.carousel-button {
+  margin-top: 2rem;
+}
+
+.carousel-image {
+  margin-top: 15px;
+}
+
+.carousel-image--column {
+  padding-right: 20px;
+}
+
+.carousel-column--images {
+  margin-top: -15px;
+}
+
+.carousel-header {
+  margin-top: 0rem !important;
+}

portal/static/portal/sass/partials/_footer.scss

@@ -54,23 +54,18 @@
     }
   }
 
-  .external-links {
-    @include _margin(20px, 0px, 20px, 0px);
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .social-media a,
-  .social-media a:hover {
-    color: $color-text-secondary;
-    display: flex;
-  }
-
   .social-media {
-    @include _font-size(58px);
+    @include _font-size(48px);
+    @include _margin(40px, 0px, 0px, 0px);
     align-items: center;
     display: flex;
+
+    a,
+    a:hover {
+      @include _margin(0px, 20px, 0px, 0px);
+      color: $color-text-secondary;
+      display: flex;
+    }
   }
 
   input[type="email"] {
@@ -87,7 +82,6 @@
 
   .footer-links {
     @include _margin(0px, -15px, 0px, -15px);
-
     text-align: left;
   }
 
@@ -97,10 +91,6 @@
     border: 0;
   }
 
-  .social-media a {
-    @include _margin(0px, 20px, 0px, 0px);
-  }
-
   .form--row__input {
     flex: 1;
   }
@@ -119,7 +109,6 @@
       display: grid;
     }
 
-    .external-links,
     .form--row {
       flex-direction: column;
     }
@@ -132,8 +121,7 @@
 
 @media (max-width: $tablet-small-max-width) and (min-width: $tablet-small-min-width) {
   .footer {
-    .button,
-    .external-links {
+    .button {
       margin: 0;
     }
 
@@ -146,11 +134,22 @@
 @media (max-width: $mobile-max-width) {
   .footer {
     .button {
+      height: 50px;
       width: 100%;
     }
 
+    .form__checkbox {
+      @include _margin(5px, 0px, 20px, 0px);
+    }
+
     .landscape-logo {
       max-width: 60%;
     }
+
+    .social-media {
+      @include _font-size(70px);
+      @include _margin(50px, 0px, 25px, 0px);
+      justify-content: space-between;
+    }
   }
 }

portal/static/portal/sass/partials/_forms.scss

@@ -4,6 +4,13 @@
   width: 100%;
 }
 
+.non-styled--form {
+  padding: 0;
+  & > button {
+    margin: 0;
+  }
+}
+
 /* Chrome, Safari, Edge, Opera */
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
@@ -77,6 +84,38 @@ form {
     padding: 0;
     text-align: left;
   }
+
+  #episodes {
+    p {
+      @include _padding(10px, 0px, 10px, 0px);
+    }
+  }
+
+  .panel {
+    @include _margin-bottom(5px);
+  }
+
+  .panel-intro,
+  .panel-header {
+    label {
+      @include _margin-right(9px);
+    }
+
+    input[type="checkbox"] {
+      height: 20px;
+      width: 20px;
+    }
+  }
+
+  .panel-body {
+    label {
+      @include _margin-right(11px);
+    }
+
+    input[type="checkbox"] {
+      height: 10px;
+    }
+  }
 }
 
 .form--login {
@@ -138,8 +177,9 @@ form {
   color: $color-text-secondary;
   background-color: $color-primary-400;
 
-  a,
-  a:hover {
+  a:not(.button--home),
+  a:not(.button--home):hover,
+  a:not(.button--home):focus {
     color: $color-text-secondary;
   }
 
@@ -158,7 +198,8 @@ form {
   background-color: $color-tertiary;
 
   a,
-  a:hover {
+  a:hover,
+  a:focus {
     color: $color-text-secondary;
   }
 
@@ -201,6 +242,17 @@ form {
   flex-direction: column;
 }
 
+.form__dob-input {
+  @include _margin(0px, -10px, 0px, -10px);
+  display: flex;
+  flex: 1;
+  justify-content: space-between;
+
+  select {
+    @include _margin(0px, 10px, 0px, 10px);
+  }
+}
+
 @media (min-width: $mobile-max-width) {
   .registration {
     display: flex;
@@ -220,7 +272,7 @@ form {
   display: flex;
   align-items: center;
   font-size: 75%;
-  padding: 1.2% 0% 2.5% 1.2%;
+  padding: 1.2% 0% 1.2% 1.2%;
 }
 
 .form-div {
@@ -245,7 +297,8 @@ form {
   }
 }
 
-.form--register--text p {
+.form--register--text p,
+.form--register--text small {
   text-align: left;
 }
 
@@ -286,6 +339,8 @@ form {
 }
 
 .form--row {
+  @include _margin-top(5px);
+  @include _margin-bottom(5px);
   align-items: center;
   display: flex;
   flex-wrap: wrap;