Skip to content

Commit

Permalink
Add noscript modal
Browse files Browse the repository at this point in the history
  • Loading branch information
Jackson Chadfield committed Jul 31, 2019
1 parent d93d021 commit a5d28e5
Show file tree
Hide file tree
Showing 4 changed files with 150 additions and 3 deletions.
47 changes: 47 additions & 0 deletions OpenLearn/static/css/noscript.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
.noscript-modal {
position: fixed;
z-index: 999;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0); /*Fallback*/
background-color: rgba(0, 0, 0, 0.4);
display: none;
}

#noscript-close:checked + .noscript-modal{
display: block !important;
}

.noscript-modal .modal-content {
position: relative;
top: 50%;
transform: translateY(-50%);
}

.noscript-modal .modal-content .siimple-box {
margin: 0;
position: relative;
top: 0;
left: 0;
}

.noscript-modal .modal-content .siimple-box-detail {
opacity: 0.9;
}

.noscript-modal .close {
position: absolute;
right: 20px;
top: 20px;
}

.noscript-modal .modal-content .siimple-link {
color: white !important;
}

.noscript-modal .modal-content .siimple-link:hover {
color: rgba(255, 255, 255, 0.4) !important;
}
31 changes: 28 additions & 3 deletions OpenLearn/templates/layout.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
navbar_color - sets the colour of the navbar
footer_color - sets the colour of the footer
navbar_brand_hides - sets whether the brand in the navbar will hide on small screens
noscript_can_close - default false - whether the user can close the noscript modal
#}

<!doctype html>
Expand All @@ -22,8 +23,31 @@
</head>
<body>
{% block body %}
<noscript>
<link rel="stylesheet" href="{{ url_for("static", filename="css/noscript.css") }}">
<input type="checkbox" id="noscript-close" name="noscript-modal" checked autocomplete="off" hidden>
<div class="noscript-modal">
<div class="siimple-content--small modal-content">
<div class="siimple-box siimple-box--primary">
{% if noscript_can_close|default(false) %}
<label for="noscript-close"><i class="far fa-times-circle close"></i></label>
{% endif %}
<div class="siimple-box-title">Your Javascript is disabled</div>
<div class="siimple-box-detail">
<p class="siimple-paragraph">Unfortunately this application requires javascript for much of its
functionality.</p>
<p class="siimple-paragraph">If your javascript is unintentionally disabled, you can <a
href="https://www.enable-javascript.com/" class="siimple-link">find instructions here</a>.</p>

<p class="siimple-paragraph">If your javascript is disabled due to privacy purposes, you can find the full source code of this website
<a href="https://github.com/j-chad/OpenLearn" class="siimple-link">on GitHub</a></p>
</div>
</div>
</div>
</div>
</noscript>
{% block nav %}
<nav class="siimple-navbar siimple-navbar--{{navbar_color|default("primary")}} siimple-navbar--extra-large">
<nav class="siimple-navbar siimple-navbar--{{ navbar_color|default("primary") }} siimple-navbar--extra-large">
<div class="{% if navbar_brand_hides %}siimple--display-xs-none {% endif %}siimple--display-inline-block">
<a class="siimple-navbar-title" href="{{ url_for("public.index") }}"><span class="siimple-brand">OpenLearn</span></a>
<div class="siimple-navbar-subtitle">v{{ config["VERSION"] }}</div>
Expand All @@ -39,14 +63,15 @@
{% endblock %}
</main>
{% block footer %}
<footer class="siimple-footer siimple-footer--{{footer_color|default("light")}} siimple--text-center">
<footer class="siimple-footer siimple-footer--{{ footer_color|default("light") }} siimple--text-center">
Designed & Built by <strong><a class="siimple-footer-link siimple-footer-link--inline"
href="https://github.com/j-chad">Jackson Chadfield</a></strong>
</footer>
{% endblock %}
{% endblock %}
{% block scripts %}
<script src="https://instant.page/1.2.2" type="module" integrity="sha384-2xV8M5griQmzyiY3CDqh1dn4z3llDVqZDqzjzcY+jCBCk/a5fXJmuZ/40JJAPeoU"></script>
<script src="https://instant.page/1.2.2" type="module"
integrity="sha384-2xV8M5griQmzyiY3CDqh1dn4z3llDVqZDqzjzcY+jCBCk/a5fXJmuZ/40JJAPeoU"></script>
{% endblock %}
</body>
</html>
1 change: 1 addition & 0 deletions OpenLearn/templates/public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

{% set navbar_color = "light" %}
{% set navbar_brand_hides = true %}
{% set noscript_can_close = true %}

{% block nav_items %}
<a class="siimple-navbar-item" href="{{ url_for("public.sign_in") }}"><i class="fas fa-sign-in-alt"></i> Sign In</a>
Expand Down
74 changes: 74 additions & 0 deletions OpenLearn/templates/public/register.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
{% extends "./layout.html" %}

{% set footer_color = "blue" %}

{% block styles %}
{{ super() }}
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}

body {
{# I know. *sigh* #} /**/
display: flex;
flex-direction: column;
}

main {
flex-grow: 2;
display: flex;
flex-direction: column;
}

#form-section {
flex-grow: 2;
display: flex;
justify-content: center;
align-items: center;
}

#room-code-input, #form-container {
max-width: 450px;
width: 100%;
margin: 0;
}

.siimple-footer-link {
color: white;
}

.siimple-footer-link:hover {
color: rgba(255, 255, 255, 0.4) !important;
}
</style>
{% endblock %}

{% block main %}
<div class="siimple-content--fluid siimple--bg-primary siimple--py-5" id="form-section">
<div id="form-container" class="siimple--display-inline-flex">
<div class="siimple-form siimple--bg-light siimple--py-5 siimple--px-5 siimple--rounded" id="room-code-form">
<div class="siimple-form-title">Sign In</div>
<div class="siimple-form-detail">Don't have an account? <a href="" class="siimple-link">Register Here</a></div>
<div class="siimple-form-field">
<label for="username" class="siimple-form-field-label">Username</label>
<input type="text" id="username" name="username" class="siimple-input siimple-input--fluid siimple--bg-primary siimple--color-white">
</div>
<div class="siimple-form-field">
<label for="password" class="siimple-form-field-label">Password</label>
<input type="password" id="password" name="password" class="siimple-input siimple-input--fluid siimple--bg-primary siimple--color-white">
</div>
<div class="siimple-form-field">
<button id="submit-btn"
class="siimple-btn siimple-btn--success siimple-btn--big siimple-btn--disabled siimple-btn--fluid"
disabled>Sign In
</button>
</div>
<div id="room-code-status" class="siimple-alert siimple-alert--error siimple--display-none"></div>
</div>
</div>
</div>
{% endblock %}

0 comments on commit a5d28e5

Please sign in to comment.