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

portal/static/portal/sass/partials/_grids.scss

@@ -45,6 +45,35 @@ $column--icon-width: 3%;
   background-color: $color-background-secondary;
   padding: 0;
 
+  &.activated-card {
+    border: 3px solid $color-tertiary;
+    position: relative;
+
+    .activated-text {
+      @include _font-size(20px);
+      @include _padding(10px, 20px, 10px, 20px);
+      background: $color-tertiary;
+      border-radius: 0 0 4px 4px;
+      color: $color-text-secondary;
+      display: inline-block;
+      position: absolute;
+      right: 36px;
+      line-height: 1;
+    }
+
+    .card__image {
+      border-radius: 1px 1px 0 0;
+      width: -moz-available;
+      width: -webkit-fill-available;
+      width: fill-available;
+      height: 220px;
+    }
+
+    .button-group > :not(:first-child) {
+      margin-left: calculate-rem(20px);
+    }
+  }
+
   .card__title {
     margin: 0;
     padding: 0;
@@ -88,19 +117,16 @@ $column--icon-width: 3%;
 }
 
 .grid-characters {
-  .card__title {
-    @include _padding($spacing * 4, $spacing * 4, $spacing * 4, $spacing * 4);
-    color: $color-teacher-blue;
-    margin: 0;
-    text-align: center;
-  }
-
-  .card__image {
+  .grid-character-image {
     @include _padding(0px, $spacing * 4, 0px, $spacing * 4);
     display: block;
     max-height: $character-card-image-max-height;
     margin: 0 auto;
   }
+
+  .grid-character-title {
+    margin-bottom: 0;
+  }
 }
 
 .grid-worksheets {
@@ -153,37 +179,6 @@ $column--icon-width: 3%;
     }
   }
 
-  .grid-kurono-sessions {
-    display: grid;
-    grid-auto-rows: auto;
-    grid-template-columns:
-      70%
-      auto;
-
-    .button {
-      @include _margin(0px, 0px, $spacing * 3, 0px);
-    }
-
-    div p {
-      width: 90%;
-    }
-
-    & > * {
-      align-items: center;
-      border-bottom: 1px solid $color-table-border;
-      display: grid;
-    }
-
-    .grid-icon {
-      max-height: 60%;
-      max-width: 60%;
-    }
-
-    h6 {
-      @include _margin(20px, 0px, 10px, 0px);
-    }
-  }
-
   .grid-resources {
     border-top: 1px solid $color-table-border;
     display: grid;
@@ -266,26 +261,4 @@ $column--icon-width: 3%;
       "button3";
     row-gap: 4 * $spacing;
   }
-
-  .grid-kurono-sessions {
-    .grid-kurono-sessions__item {
-      border-bottom: 1px solid $color-table-border;
-    }
-
-    .grid-kurono-sessions__accordion-button {
-      align-items: center;
-      display: flex;
-      justify-content: space-between;
-
-      .button-group__icon {
-        width: -webkit-fill-available;
-        width: -moz-available;
-      }
-    }
-
-    .button-group {
-      display: flex;
-      justify-content: center;
-    }
-  }
 }

portal/static/portal/sass/partials/_header.scss

@@ -27,8 +27,8 @@
 }
 
 .dropdown-menu {
-  @include _border-radius(0px, 0px, 0px, 0px);
   border: 2px solid $color-secondary-600;
+  border-radius: 0;
   border-top: 0;
   font-weight: 300;
   margin: 0;
@@ -60,6 +60,7 @@
       margin: 0;
 
       .dropdown-menu__option__text {
+        padding: 0;
         text-decoration: none;
       }
 
@@ -119,6 +120,11 @@
   width: 100%;
   z-index: $hover-content-level;
 
+  svg {
+    opacity: 0.5;
+    margin-left: 0.3rem;
+  }
+
   a {
     color: $color-text-tertiary;
     display: block;
@@ -175,7 +181,7 @@
 
   .menu--title {
     @include _font-size(27px);
-    @include _margin(0px, 40px, 0px, 10px);
+    @include _margin(0px, $spacing * 8, 0px, $spacing * 2);
     color: $color-text-tertiary;
     font-family: "Space Grotesk", sans-serif;
   }
@@ -203,9 +209,15 @@
 
 @media (min-width: $tablet-small-min-width) {
   .menu__right-side {
+    @include _margin-right($spacing * 3);
     align-items: center;
-    justify-content: flex-end;
     display: flex;
+    justify-content: flex-end;
+    width: 33%;
+  }
+
+  .logo {
+    height: 100px;
   }
 }
 
@@ -213,10 +225,6 @@
   .menu {
     height: $menu-height;
 
-    .logo {
-      height: 100%;
-    }
-
     .menu__brand {
       @include _margin(0px, $spacing * 7, 0px, 0px);
     }
@@ -234,7 +242,7 @@
     height: $menu-height-xs;
 
     .logo {
-      @include _padding($spacing * 3, $spacing * 9, $spacing * 3, $spacing * 3);
+      @include _padding($spacing * 3, $spacing * 3, $spacing * 3, $spacing * 3);
     }
 
     .menu__brand--ocado {
@@ -249,18 +257,15 @@
   .menu {
     background-color: $color-background-secondary;
     display: flex;
+    justify-content: space-between;
     position: fixed;
     top: 0;
     width: 100%;
     z-index: $nav-bar-level;
 
-    .button--menu {
-      border-radius: 0;
-
-      &:hover,
-      &:focus {
-        font-weight: normal;
-      }
+    .button--menu:hover,
+    .button--menu:focus, {
+      font-weight: normal;
     }
 
     .button--menu--secondary {
@@ -282,20 +287,23 @@
 
     .button--register,
     .button--header--login {
-      @include _padding(10px, 15px, 10px, 15px);
+      @include _padding($spacing * 2, $spacing * 3, $spacing * 2, $spacing * 3);
       width: 155px;
       height: 45px;
     }
   }
 
   .menu__brand {
-    align-items: center;
     display: flex;
-    justify-content: center;
+    width: 66%;
 
-    img {
-      max-width: none;
+    .menu__brand--ocado {
+      @include _margin-right($spacing * 7);
     }
+
+    //img {
+    //  max-width: none;
+    //}
   }
 
   .menu__left-side {

portal/static/portal/sass/partials/_images.scss

@@ -30,13 +30,6 @@ img {
   margin-top: 1.5em;
 }
 
-.background--swirl {
-  background-image: url("../img/ocado-swirl.svg");
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
-}
-
 .image-row {
   align-items: baseline;
   display: flex;
@@ -69,8 +62,288 @@ img {
 }
 
 .logo {
-  @include _padding($spacing * 3, $spacing * 14, $spacing * 3, $spacing * 3);
-  content: url("../img/logo_cfl.png");
+  @include _padding($spacing * 3, $spacing * 3, $spacing * 3, $spacing * 3);
+}
+
+.map-pin {
+  position: absolute;
+  background: 0 0;
+  min-width: 0px !important;
+}
+
+#map-container {
+  position: relative;
+}
+
+#hatfield {
+  left: 34.5%;
+  top: 26.7%;
+}
+
+#barcelona {
+  left: 38%;
+  top: 58.8%;
+}
+
+#krakow {
+  left: 61.7%;
+  top: 30.3%;
+}
+
+#sofia {
+  left: 68.5%;
+  top: 55.5%;
+}
+
+@media only screen and (max-width: 1400px) {
+  #sofia {
+    left: 68.8%;
+    top: 55.8%;
+  }
+}
+
+@media only screen and (max-width: 1200px) {
+  #hatfield {
+    left: 33.5%;
+    top: 25.1%;
+  }
+
+  #barcelona {
+    left: 36.7%;
+    top: 56.4%;
+  }
+
+  #krakow {
+    left: 60.7%;
+    top: 28.7%;
+  }
+
+  #sofia {
+    left: 68%;
+    top: 53.5%;
+  }
+}
+
+@media only screen and (max-width: 992px) {
+  #hatfield {
+    left: 32.7%;
+    top: 22.8%;
+  }
+
+  #barcelona {
+    left: 35.7%;
+    top: 54.6%;
+  }
+
+  #krakow {
+    left: 59.7%;
+    top: 26.3%;
+  }
+
+  #sofia {
+    left: 67%;
+    top: 50.2%;
+  }
+}
+
+@media only screen and (max-width: 767px) {
+  #barcelona {
+    left: 36.7%;
+    top: 54%;
+  }
+
+  #sofia {
+    left: 67.5%;
+    top: 51.2%;
+  }
+}
+
+@media only screen and (max-width: 700px) {
+  #hatfield {
+    left: 32.5%;
+    top: 20.8%;
+  }
+
+  #barcelona {
+    left: 35.4%;
+    top: 53.5%;
+  }
+
+  #krakow {
+    left: 59.7%;
+    top: 25.3%;
+  }
+
+  #sofia {
+    left: 67%;
+    top: 50.2%;
+  }
+}
+
+@media only screen and (max-width: 650px) {
+  #barcelona {
+    left: 35.4%;
+    top: 52.5%;
+  }
+
+  #sofia {
+    left: 66%;
+    top:48.2%;
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  #hatfield {
+    left: 31.5%;
+    top: 18.8%;
+  }
+
+  #barcelona {
+    left: 34.4%;
+    top: 50.5%;
+  }
+
+  #krakow {
+    left: 58.7%;
+    top: 23.3%;
+  }
+
+  #sofia {
+    left: 66%;
+    top: 48.2%;
+  }
+}
+
+@media only screen and (max-width: 550px) {
+  #hatfield {
+    left: 30.5%;
+    top: 17.3%;
+  }
+
+  #barcelona {
+    left: 33.4%;
+    top: 49%;
+  }
+
+  #krakow {
+    left: 57.7%;
+    top: 21.6%;
+  }
+
+  #sofia {
+    left: 65%;
+    top: 46%;
+  }
+}
+
+@media only screen and (max-width: 500px) {
+  #hatfield {
+    left: 29.8%;
+    top: 16.3%;
+  }
+
+  #barcelona {
+    left: 33%;
+    top: 47%;
+  }
+
+  #krakow {
+    left: 57%;
+    top: 20%;
+  }
+
+  #sofia {
+    left: 64%;
+    top: 44%;
+  }
+}
+
+@media only screen and (max-width: 450px) {
+  #hatfield {
+    left: 28.7%;
+    top: 17%;
+  }
+
+  #barcelona {
+    left: 32%;
+    top: 44.5%;
+  }
+
+  #krakow {
+    left: 56%;
+    top: 21.5%;
+  }
+
+  #sofia {
+    left: 63%;
+    top: 42%;
+  }
+}
+
+@media only screen and (max-width: 430px) {
+  #hatfield {
+    left: 28.5%;
+    top: 17%;
+  }
+
+  #barcelona {
+    left: 31.5%;
+    top: 42.5%;
+  }
+
+  #krakow {
+    left: 55%;
+    top: 19.5%;
+  }
+
+  #sofia {
+    left: 62%;
+    top: 40.5%;
+  }
+}
+
+@media only screen and (max-width: 390px) {
+  #hatfield {
+    left: 27.8%;
+    top: 15.5%;
+  }
+
+  #barcelona {
+    left: 31%;
+    top: 40.5%;
+  }
+
+  #krakow {
+    left: 52.5%;
+    top: 19%;
+  }
+
+  #sofia {
+    left: 61%;
+    top: 39%;
+  }
+}
+
+@media only screen and (max-width: 360px) {
+  #hatfield {
+    left: 27.5%;
+    top: 14.5%;
+  }
+
+  #barcelona {
+    left: 30.5%;
+    top: 40%;
+  }
+
+  #krakow {
+    left: 53%;
+    top: 18%;
+  }
+
+  #sofia {
+    left: 60%;
+    top: 35.5%;
+  }
 }
 
 .glyphicon {
@@ -105,53 +378,33 @@ img {
 }
 
 .educate-homepage {
-  content: url("../img/home_educate.png");
   width: 70%;
   object-fit: contain;
 }
 
 .play-homepage {
-  content: url("../img/home_play.png");
   width: 70%;
   object-fit: contain;
 }
 
-.oval-blue {
-  content: url("../img/oval_blue.svg");
-}
-
-.oval-pink {
-  content: url("../img/oval_pink.svg");
-}
-
-.oval-yellow {
-  content: url("../img/oval_yellow.svg");
-}
-
-.polygon-blue {
-  content: url("../img/polygon_blue.svg");
-}
-
-.polygon-pink {
-  content: url("../img/polygon_pink.svg");
-}
-
-.polygon-yellow {
-  content: url("../img/polygon_yellow.svg");
-}
-
 .login-shape-left {
-  @include _top(250px);
-  @include _margin(-250px, 0px, 0px, 0px);
+  @include _top(300px);
   position: relative;
   left: -17vw;
+
+  img {
+    @include _margin(-250px, 0px, 0px, 0px);
+  }
 }
 
 .login-shape-right {
-  @include _top(500px);
-  @include _margin(-500px, 0px, 0px, 0px);
+  @include _top(550px);
   position: relative;
   left: 17vw;
+
+  img {
+    @include _margin(-250px, 0px, 0px, 0px);
+  }
 }
 
 @media (max-width: $tablet-large-max-width) {

portal/static/portal/sass/partials/_popup.scss

@@ -20,9 +20,9 @@
   .popup-box {
     background-color: $color-background-secondary;
     box-shadow: 0 0 4 * $spacing $color-background-box-shadow;
-    margin: 20% auto 0;
+    margin: 10% auto;
     overflow: hidden;
-    width: 440px;
+    width: 520px;
 
     .popup-box__msg {
       @include _padding(0px, 5 * $spacing, 5 * $spacing, 5 * $spacing);
@@ -38,32 +38,36 @@
 
     .popup-box__buttons {
       @include _margin(5 * $spacing, 5 * $spacing, 5 * $spacing, 5 * $spacing);
-      display: flex;
-      justify-content: flex-end;
 
       .button {
         @include _margin(0px, 2 * $spacing, 2 * $spacing, 2 * $spacing);
-        @include _padding($spacing, 3 * $spacing, $spacing, 3 * $spacing);
-        border-style: solid;
       }
     }
 
     .popup-box__title {
       @include _padding(5 * $spacing, 5 * $spacing, 0px, 5 * $spacing);
       background-color: $color-background-secondary;
+      color: $color-text-primary;
       display: flex;
       justify-content: flex-start;
+      font-family: "Space Grotesk", sans-serif;
+      @include _font-size(21px);
+    }
 
-      h3 {
-        @include _font-size(20px);
-        @include _margin(0px, 0px, 0px, 0px);
-        @include _padding(0px, $spacing, 0px, $spacing);
-        color: $color-text-primary;
-        display: inline-block;
-        font-weight: bold;
-      }
+    .popup-box__close {
+      min-width:0;
+      @include _margin(8px, 8px, 8px, 8px);
+    }
+
+    label {
+      text-align: left;
     }
   }
+
+  &#screentime-popup,
+  &#session-popup {
+    z-index: $nav-bar-level + 1;
+  }
 }
 
 .popup--fade {
@@ -77,7 +81,6 @@
   transition: opacity $fade-time ease-out;
 }
 
-
 @media (max-width: $mobile-max-width) {
   .popup-wrapper {
     .popup-box {