diff --git a/portal/static/portal/img/aimmo_hero.jpg b/portal/static/portal/img/aimmo_hero.jpg new file mode 100644 index 000000000..e4ef3bd42 Binary files /dev/null and b/portal/static/portal/img/aimmo_hero.jpg differ diff --git a/portal/static/portal/js/join_create_game_toggle.js b/portal/static/portal/js/join_create_game_toggle.js new file mode 100644 index 000000000..0fa0d7f7f --- /dev/null +++ b/portal/static/portal/js/join_create_game_toggle.js @@ -0,0 +1,90 @@ +/* +Code for Life + +Copyright (C) 2018, Ocado Innovation Limited + +This program is free software: you can redistribute it and/or modify +it under the terms of the GNU Affero General Public License as +published by the Free Software Foundation, either version 3 of the +License, or (at your option) any later version. + +This program is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +GNU Affero General Public License for more details. + +You should have received a copy of the GNU Affero General Public License +along with this program. If not, see . + +ADDITIONAL TERMS – Section 7 GNU General Public Licence + +This licence does not grant any right, title or interest in any “Ocado” logos, +trade names or the trademark “Ocado” or any other trademarks or domain names +owned by Ocado Innovation Limited or the Ocado group of companies or any other +distinctive brand features of “Ocado” as may be secured from time to time. You +must not distribute any modification of this program using the trademark +“Ocado” or claim any affiliation or association with Ocado or its employees. + +You are not authorised to use the name Ocado (or any of its trade names) or +the names of any author or contributor in advertising or for publicity purposes +pertaining to the distribution of this program, without the prior written +authorisation of Ocado. + +Any propagation, distribution or conveyance of this program must include this +copyright notice and these terms. You must not misrepresent the origins of this +program; modified versions of the program must be marked as such and not +identified as the original program. +*/ + +$(document).ready(function() { + var game_name_input = $('#id_name'); + var create_game_form = $('#create-game-form'); + var join_game_section = $('#join_game'); + var create_game_section = $('#create_game'); + var create_game_button = $('#create_game_button'); + var create_new_game_button = $('#create_new_game_button'); + var back_button = $('#back_button'); + + if(game_name_input.val()) { + showCreateGameForm(); + game_name_input.val(""); + showInputError("Sorry, a game with this name already exists..."); + } + + create_new_game_button.click(function() { + showCreateGameForm(); + }); + + back_button.click(function() { + showJoinGameForm(); + }); + + create_game_button.click(function() { + if(!game_name_input.val() || game_name_input.val() === "") { + showInputError("Give your new game a name..."); + } + else { + create_game_form.submit(); + } + }); + + game_name_input.click(function () { + game_name_input.attr("placeholder", ""); + game_name_input.removeClass('input-invalid'); + }); + + function showCreateGameForm() { + join_game_section.addClass("hidden"); + create_game_section.removeClass("hidden"); + } + + function showJoinGameForm() { + create_game_section.addClass("hidden"); + join_game_section.removeClass("hidden"); + } + + function showInputError(error_message) { + game_name_input.attr("placeholder", error_message); + game_name_input.addClass('input-invalid'); + } +}); diff --git a/portal/static/portal/sass/modules/_all.scss b/portal/static/portal/sass/modules/_all.scss index d2eeb61b9..46dbf7121 100644 --- a/portal/static/portal/sass/modules/_all.scss +++ b/portal/static/portal/sass/modules/_all.scss @@ -1,2 +1,3 @@ @import 'colours'; +@import 'levels'; @import 'mixins'; diff --git a/portal/static/portal/sass/modules/_colours.scss b/portal/static/portal/sass/modules/_colours.scss index 56ff9eba3..1915bf0aa 100644 --- a/portal/static/portal/sass/modules/_colours.scss +++ b/portal/static/portal/sass/modules/_colours.scss @@ -1,17 +1,17 @@ // General Palette $color-teacher-blue: #0c52a3; $color-student-orange: #f37300; -$color-text-grey: #4a4a4a; +$color-text-gray: #4a4a4a; +$color-error: #ff0000; // Text $color-text-primary: #000000; $color-text-secondary: #ffffff; -$color-text-tertiary: $color-text-grey; -$color-text-form-error: #ff0000; +$color-text-tertiary: $color-text-gray; $color-text-login-error: #ffff00; $color-text-materials-tag: #808080; // Quotes $color-quote-text: $color-teacher-blue; -$color-quote-name: $color-text-grey; +$color-quote-name: $color-text-gray; // Buttons $color-button-primary-action-general-play: $color-teacher-blue; $color-button-primary-action-general-play-hover: #002284; @@ -23,12 +23,12 @@ $color-button-primary-action-negative: #ff637d; $color-button-primary-action-negative-hover: #fd3d6a; $color-button-primary-action-danger: #ff0000; $color-button-primary-action-danger-hover: #df0531; -$color-button-primary-action-navigation: $color-text-grey; +$color-button-primary-action-navigation: $color-text-gray; $color-button-primary-action-navigation-hover: #000000; $color-button-primary-action-setup: #fab300; $color-button-primary-action-setup-hover: #ff9500; $color-button-secondary-border-light: #ffffff; -$color-button-secondary-border-dark: $color-text-grey; +$color-button-secondary-border-dark: $color-text-gray; $color-button-border-teacher: $color-teacher-blue; $color-button-border-student: $color-student-orange; $color-button-disabled: #d8d8d8; @@ -43,17 +43,17 @@ $color-tab-unselected-background: #ffffff; $color-onboarding-step-done-background: $color-teacher-blue; $color-onboarding-step-done-text: #ffffff; $color-onboarding-step-in-progress-background: #ffffff; -$color-onboarding-step-in-progress-text: $color-text-grey; -$color-onboarding-step-todo-background: $color-text-grey; +$color-onboarding-step-in-progress-text: $color-text-gray; +$color-onboarding-step-todo-background: $color-text-gray; $color-onboarding-step-todo-text: #ffffff; // Tables $color-table-header-primary: $color-teacher-blue; -$color-table-header-secondary: $color-text-grey; +$color-table-header-secondary: $color-text-gray; $color-table-border: #9b9b9b; // Backgrounds $color-background-primary: #000000; $color-background-secondary: #ffffff; -$color-background-tertiary: $color-text-grey; +$color-background-tertiary: $color-text-gray; $color-background-materials-tag: #cccccc; $color-background-teach: $color-teacher-blue; $color-background-play: $color-student-orange; diff --git a/portal/static/portal/sass/modules/_levels.scss b/portal/static/portal/sass/modules/_levels.scss new file mode 100644 index 000000000..0ea9a570b --- /dev/null +++ b/portal/static/portal/sass/modules/_levels.scss @@ -0,0 +1,2 @@ +$hover-content-level: 100; +$nav-bar-level: 200; diff --git a/portal/static/portal/sass/partials/_banners.scss b/portal/static/portal/sass/partials/_banners.scss index 0ace9023c..3740abef8 100644 --- a/portal/static/portal/sass/partials/_banners.scss +++ b/portal/static/portal/sass/partials/_banners.scss @@ -20,7 +20,12 @@ } - * { + h1, + h2, + h3, + h4, + p, + a { color: $color-text-secondary; } @@ -36,10 +41,6 @@ @include _padding(70px, 0px, 70px, 0px); } - small { - @include _padding(20px, 0px, 8px, 0px); - } - div[class^='col-sm'] { padding: 0; } @@ -92,6 +93,10 @@ background-image: url('../img/teaching_resources.jpg'); } +.banner--picture--aimmo { + background-image: url('../img/aimmo_hero.jpg'); +} + .banner--homepage { @include _padding(100px, 0px, 100px, 10px); display: flex; @@ -104,7 +109,6 @@ } } - .banner--homepage__text { @include _font-size(140px); @include _line-height(120px); @@ -174,6 +178,74 @@ } +.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; + + .button-group { + display: flex; + + } + + #create-game-form { + padding: 0; + + label, + .errorlist { + display: none; + } + + input { + height: auto; + margin: 0; + width: 65%; + + &::placeholder { + color: $color-error; + } + + } + + } + + img { + @include _margin(14px, 0px, 0px, 0px); + } + +} + .banner--rapid-router--background { background-image: url('../img/rapid_router_landing_hero.png'); background-position: center center; diff --git a/portal/static/portal/sass/partials/_buttons.scss b/portal/static/portal/sass/partials/_buttons.scss index 5a66b0f4d..43b613038 100644 --- a/portal/static/portal/sass/partials/_buttons.scss +++ b/portal/static/portal/sass/partials/_buttons.scss @@ -110,30 +110,6 @@ button, } } -.logout { - @include _border-radius(8px, 8px, 8px, 8px); - @extend .dropdown; - background: $color-background-secondary; - border: 1px solid $color-text-tertiary; - color: $color-text-tertiary; - display: flex; - flex-wrap: nowrap; - justify-content: space-between; - outline: none; - - .glyphicon { - @include _font-size(20px); - @include _padding(0px, 0px, 0px, 10px); - display: inline-flex; - } -} - -.logout[aria-expanded='true'] { - @include _border-radius(8px, 8px, 0px, 0px); - background: $color-background-tertiary; - color: $color-text-secondary; -} - .button--primary--general-play { background: $color-button-primary-action-general-play; color: $color-text-secondary; @@ -238,6 +214,30 @@ button, } } +.button--dropdown { + @include _border-radius(8px, 8px, 8px, 8px); + @extend .dropdown; + background: $color-background-secondary; + border: 1px solid $color-text-tertiary; + color: $color-text-tertiary; + display: flex; + flex-wrap: nowrap; + justify-content: space-between; + outline: none; + + .glyphicon { + @include _font-size(20px); + @include _padding(0px, 0px, 0px, 10px); + display: inline-flex; + } +} + +.button--dropdown[aria-expanded='true'] { + @include _border-radius(8px, 8px, 0px, 0px); + background: $color-background-tertiary; + color: $color-text-secondary; +} + .button--secondary--no-border { border-color: transparent; color: $color-text-tertiary; @@ -255,9 +255,8 @@ button, .button-group { - .button, - button { - @include _margin(0px, 20px, 0px, 0px); + > :not(:first-child) { + @include _margin(0px, 0px, 0px, 20px); } } diff --git a/portal/static/portal/sass/partials/_forms.scss b/portal/static/portal/sass/partials/_forms.scss index a1e25e10c..a4ec6ddfe 100644 --- a/portal/static/portal/sass/partials/_forms.scss +++ b/portal/static/portal/sass/partials/_forms.scss @@ -1,5 +1,20 @@ @import 'base'; +input[type=text], +input[type=email], +input[type=password], +select { + @include _border-radius(8px, 8px, 8px, 8px); + @include _padding(0px, 0px, 0px, 10px); + border: 1px solid $color-message-border; + + &:focus { + border: 1px solid $color-message-border; + outline: none; + } + +} + form { @include _font-size(20px); @include _line-height(25px); @@ -15,7 +30,6 @@ form { select { @include _font-size(20px); @include _margin(10px, 0px, 10px, 0px); - @include _padding(0px, 0px, 0px, 10px); background-color: $color-background-secondary; height: 50px; width: 100%; @@ -37,7 +51,7 @@ form { } ul { - color: $color-text-form-error; + color: $color-error; font-style: italic; list-style: none; padding: 0; diff --git a/portal/static/portal/sass/partials/_header.scss b/portal/static/portal/sass/partials/_header.scss index 496814ef4..a6e6b1c25 100644 --- a/portal/static/portal/sass/partials/_header.scss +++ b/portal/static/portal/sass/partials/_header.scss @@ -21,12 +21,14 @@ } .dropdown-menu { + @include _border-radius(0px, 0px, 10px, 10px); border: none; - border-radius: 1rem; + font-weight: 300; margin: 0; + max-height: 300px; min-width: 0; + overflow: auto; padding: 0; - font-weight: 300; width: 80%; .dropdown-menu__option { @@ -43,7 +45,7 @@ display: flex; .dropdown-menu__option__text { - border-bottom: 1px dotted $color-text-secondary; + border-bottom: 1px dotted transparent; text-decoration: none; } @@ -67,7 +69,7 @@ &:last-of-type { .button--regular { - @include _border-radius(0px, 0px, 8px, 8px); + border: none; } } @@ -83,7 +85,7 @@ display: none; position: absolute; width: 100%; - z-index: 1; + z-index: $hover-content-level; a { color: $color-text-tertiary; @@ -154,7 +156,7 @@ position: fixed; top: 0; width: 100%; - z-index: 1; + z-index: $nav-bar-level; .button--menu { border-radius: 0; @@ -220,7 +222,7 @@ content: url('../img/logo_c4l_horizontal.png'); position: relative; width: 80%; - z-index: 1; + z-index: $hover-content-level; } button { diff --git a/portal/static/portal/sass/partials/_images-backgrounds.scss b/portal/static/portal/sass/partials/_images-backgrounds.scss index 5de5ef79d..84d64f2b2 100644 --- a/portal/static/portal/sass/partials/_images-backgrounds.scss +++ b/portal/static/portal/sass/partials/_images-backgrounds.scss @@ -69,7 +69,7 @@ img { content: url('../img/logo_c4l_hexa.png'); position: fixed; top: 10px; - z-index: 3; + z-index: $nav-bar-level + 1; } .glyphicon { @@ -111,7 +111,7 @@ img { content: url('../img/logo_c4l_hexa.png'); position: fixed; top: 10px; - z-index: 3; + z-index: $nav-bar-level + 1; } .logo-horizontal { diff --git a/portal/static/portal/sass/partials/_onboarding.scss b/portal/static/portal/sass/partials/_onboarding.scss index 4259a3e93..4a8c9ed89 100644 --- a/portal/static/portal/sass/partials/_onboarding.scss +++ b/portal/static/portal/sass/partials/_onboarding.scss @@ -107,7 +107,7 @@ .onboarding-step__text { @include _margin(0px, 0px, 0px, 45px); - z-index: 1; + z-index: $hover-content-level; } .onboarding-step--done { diff --git a/portal/static/portal/sass/partials/_subnavs.scss b/portal/static/portal/sass/partials/_subnavs.scss index 00323e2af..3a7b4f449 100644 --- a/portal/static/portal/sass/partials/_subnavs.scss +++ b/portal/static/portal/sass/partials/_subnavs.scss @@ -8,7 +8,7 @@ justify-content: center; text-align: center; width: 100%; - z-index: 2; + z-index: $nav-bar-level; .button--regular { @include _margin(0px, 16px, 0px, 16px); @@ -72,7 +72,7 @@ position: fixed; top: 80px; width: 100%; - z-index: 2; + z-index: $nav-bar-level; } .sub-nav--filler { diff --git a/portal/static/portal/sass/partials/_utils.scss b/portal/static/portal/sass/partials/_utils.scss index 65e8bbb38..eb8a7e8b8 100644 --- a/portal/static/portal/sass/partials/_utils.scss +++ b/portal/static/portal/sass/partials/_utils.scss @@ -205,6 +205,25 @@ iframe { height: 800px; } +.pdf-list { + p:not(:first-of-type) { + &:after { + @include _margin(0px, 5px, 0px, 10px); + background: url('../img/icon_pdf.png') no-repeat center; + background-size: contain; + content: ''; + display: inline-block; + height: 20px; + vertical-align: sub; + width: 20px; + } + } +} + +input.input-invalid { + border-color: $color-error; +} + @media (max-width: 1200px) { .col-sm-offset-2 { margin-left: 8.333%; diff --git a/portal/templates/portal/aimmo_home.html b/portal/templates/portal/aimmo_home.html new file mode 100644 index 000000000..2e7e736bf --- /dev/null +++ b/portal/templates/portal/aimmo_home.html @@ -0,0 +1,125 @@ +{% extends 'portal/base.html' %} +{% load static %} +{% load app_tags %} + +{% block aimmo %} +AI:MMO +{% endblock aimmo %} + +{% block myGames %} +My Games +{% endblock myGames %} + +{% block css %} +{{block.super}} +{% endblock css %} + +{% block scripts %} +{{block.super}} + +{% endblock scripts %} + +{% block subNav %} +{{ block.super }} +{% if user|is_logged_in_as_teacher %} +