From 0def8d01e69f56f14712967240f9d70e3c52bdaf Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Wed, 17 Apr 2024 16:00:39 +0200
Subject: [PATCH] Remove the Hypha styleguide. (#3874)
Fixes #2685
---
hypha/settings/base.py | 1 -
hypha/settings/dev.py | 4 -
hypha/settings/local.py.example | 3 -
hypha/static_src/sass/styleguide.scss | 274 -------------------------
hypha/templates/styleguide.html | 279 --------------------------
hypha/urls.py | 7 -
6 files changed, 568 deletions(-)
delete mode 100644 hypha/static_src/sass/styleguide.scss
delete mode 100644 hypha/templates/styleguide.html
diff --git a/hypha/settings/base.py b/hypha/settings/base.py
index 30a456282..a74a745d7 100644
--- a/hypha/settings/base.py
+++ b/hypha/settings/base.py
@@ -579,7 +579,6 @@ INVOICE_EXTENDED_WORKFLOW = env.bool("INVOICE_EXTENDED_WORKFLOW", True)
LOCALE_PATHS = (PROJECT_DIR + "/locale",)
DEBUG = False
-ENABLE_STYLEGUIDE = False
DEBUGTOOLBAR = False
if not SEND_MESSAGES:
diff --git a/hypha/settings/dev.py b/hypha/settings/dev.py
index 7a7fec2bd..a01b8842d 100644
--- a/hypha/settings/dev.py
+++ b/hypha/settings/dev.py
@@ -24,10 +24,6 @@ EMAIL_BACKEND = "django.core.mail.backends.console.EmailBackend"
AUTH_PASSWORD_VALIDATORS = []
-INSTALLED_APPS = INSTALLED_APPS + [
- "wagtail.contrib.styleguide",
-]
-
SECURE_SSL_REDIRECT = False
# Change these in local.py.
diff --git a/hypha/settings/local.py.example b/hypha/settings/local.py.example
index f8c2cbc9d..5a3c4c8b3 100644
--- a/hypha/settings/local.py.example
+++ b/hypha/settings/local.py.example
@@ -25,9 +25,6 @@ CACHES = {
# Write e-mails to local files.
# LOCAL_FILE_EMAIL = True
-# Enable the styleguide.
-# ENABLE_STYLEGUIDE = True
-
# SECRET_KEY = 'CHANGEME!!!'
# Enable Wagtail Cache.
diff --git a/hypha/static_src/sass/styleguide.scss b/hypha/static_src/sass/styleguide.scss
deleted file mode 100644
index 5499fb5d1..000000000
--- a/hypha/static_src/sass/styleguide.scss
+++ /dev/null
@@ -1,274 +0,0 @@
-// Abstracts
-@import "abstracts/functions";
-@import "abstracts/mixins";
-@import "abstracts/variables";
-
-// Base
-@import "base/base";
-@import "base/typography";
-
-// Components
-@import "components/alert";
-@import "components/all-submissions-table";
-@import "components/all-reviews-table";
-@import "components/admin-bar";
-@import "components/actions-bar";
-@import "components/card";
-@import "components/cookieconsent";
-@import "components/comment";
-@import "components/button";
-@import "components/editor";
-@import "components/error-bar";
-@import "components/feed";
-@import "components/filters";
-@import "components/grid";
-@import "components/heading";
-@import "components/icon";
-@import "components/link";
-@import "components/list";
-@import "components/list-reveal";
-@import "components/modal";
-@import "components/rich-text";
-@import "components/section";
-@import "components/sidebar";
-@import "components/tabs";
-@import "components/status-bar";
-@import "components/form";
-@import "components/nav";
-@import "components/pagination";
-@import "components/profile";
-@import "components/projects-table";
-@import "components/related-sidebar";
-@import "components/responsive-table";
-@import "components/reviewer-dash-box";
-@import "components/reviews-list";
-@import "components/reviews-summary";
-@import "components/reviews-sidebar";
-@import "components/round-block";
-@import "components/select2";
-@import "components/simplified";
-@import "components/status-block";
-@import "components/submission-meta";
-@import "components/revision";
-@import "components/table";
-@import "components/tooltip";
-@import "components/traffic-light";
-@import "components/wrapper";
-@import "components/revisions";
-@import "components/messages";
-@import "components/stat-block";
-@import "components/docs-block";
-@import "components/funding-block";
-@import "components/data-block";
-@import "components/invoice-block";
-@import "components/reminder-sidebar";
-@import "components/two-factor";
-@import "components/determination";
-@import "components/dropdown";
-@import "components/dashboard-table";
-
-// Layout
-@import "layout/header";
-
-// Styleguide
-
-section {
- margin: 4rem 0;
-}
-
-.styleguide {
- color: $color--primary;
- margin: 2rem 0;
-}
-
-.color--white {
- color: $color--white;
-}
-
-.color--black {
- color: $color--black;
-}
-
-.color--light-grey {
- color: $color--light-grey;
-}
-
-.color--light-mid-grey {
- color: $color--light-mid-grey;
-}
-
-.color--mid-grey {
- color: $color--mid-grey;
-}
-
-.color--mid-dark-grey {
- color: $color--mid-dark-grey;
-}
-
-.color--dark-grey {
- color: $color--dark-grey;
-}
-
-.color--lightest-blue {
- color: $color--lightest-blue;
-}
-
-.color--light-blue {
- color: $color--light-blue;
-}
-
-.color--light-blue-90 {
- color: $color--light-blue-90;
-}
-
-.color--lighter-blue {
- color: $color--lighter-blue;
-}
-
-.color--dark-blue {
- color: $color--dark-blue;
-}
-
-.color--darkest-blue {
- color: $color--darkest-blue;
-}
-
-.color--mustard {
- color: $color--mustard;
-}
-
-.color--purple {
- color: $color--purple;
-}
-
-.color--pink {
- color: $color--pink;
-}
-
-.color--light-pink {
- color: $color--light-pink;
-}
-
-.color--light-green {
- color: $color--light-green;
-}
-
-.color--tomato {
- color: $color--tomato;
-}
-
-.color--mint {
- color: $color--mint;
-}
-
-.color--grass {
- color: $color--grass;
-}
-
-.color--ocean {
- color: $color--ocean;
-}
-
-.color--sky-blue {
- color: $color--sky-blue;
-}
-
-.color--marine {
- color: $color--marine;
-}
-
-.color--mist {
- color: $color--mist;
-}
-
-.color--green {
- color: $color--green;
-}
-
-.color--pastel-red {
- color: $color--pastel-red;
-}
-
-.color--pastel-green {
- color: $color--pastel-green;
-}
-
-.color--fog {
- color: $color--fog;
-}
-
-.color--twitter {
- color: $color--twitter;
-}
-
-.color--linkedin {
- color: $color--linkedin;
-}
-
-.color--facebook {
- color: $color--facebook;
-}
-
-.color--black-60 {
- color: $color--black-60;
-}
-
-.color--black-50 {
- color: $color--black-50;
-}
-
-.color--black-40 {
- color: $color--black-40;
-}
-
-.color--black-25 {
- color: $color--black-25;
-}
-
-.color--black-20 {
- color: $color--black-20;
-}
-
-.color--black-10 {
- color: $color--black-10;
-}
-
-.color--white-50 {
- color: $color--white-50;
-}
-
-.color--white-40 {
- color: $color--white-40;
-}
-
-.color--white-25 {
- color: $color--white-25;
-}
-
-.color--white-20 {
- color: $color--white-20;
-}
-
-.color--white-10 {
- color: $color--white-10;
-}
-
-.color--default {
- color: $color--default;
-}
-
-.color--primary {
- color: $color--primary;
-}
-
-.color--error {
- color: $color--error;
-}
-
-.color--correct {
- color: $color--correct;
-}
-
-.color--button-disabled {
- color: $color--button-disabled;
-}
diff --git a/hypha/templates/styleguide.html b/hypha/templates/styleguide.html
deleted file mode 100644
index 5cb8677df..000000000
--- a/hypha/templates/styleguide.html
+++ /dev/null
@@ -1,279 +0,0 @@
-{% load static wagtailcore_tags wagtailimages_tags util_tags %}<!doctype html>
-{% wagtail_site as current_site %}
-<html class="no-js" lang="en">
- <head>
- {# TODO fallbacks if page is not defined e.g. for 404 page #}
- <meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <title>{% block title_prefix %}{% if current_site.site_name %}{{ current_site.site_name }} | {% endif %}{% endblock %}{% block title %}{% if page.seo_title %}{{ page.seo_title }}{% else %}{{ page.title }}{% endif %}{% endblock %}{% block title_suffix %}{{ TITLE_SUFFIX }}{% endblock %}</title>
- <meta name="description" content="{% if page.search_description %}{{ page.search_description }}{% else %}{{ page.listing_summary }}{% endif %}" />
-
- <!-- favicons -->
- {% comment %}
- Generate favicons by https://realfavicongenerator.net using the following path: settings.STATIC_URL + images/favicons. Override favicons by adding them to public/images/favicons.
- {% endcomment %}
- <meta name="msapplication-TileColor" content="#da532c">
- <meta name="msapplication-TileImage" content="{% static 'images/favicons/mstile-150x150.png' %}">
- <meta name="theme-color" content="#ffffff">
- <link rel="apple-touch-icon" href="{% static 'images/favicons/apple-touch-icon.png' %}">
- <link rel="icon" type="image/png" sizes="32x32" href="{% static 'images/favicons/favicon-32x32.png' %}">
- <link rel="icon" type="image/png" sizes="16x16" href="{% static 'images/favicons/favicon-16x16.png' %}">
- <link rel="manifest" href="{% static 'images/favicons/site.webmanifest' %}">
- <link rel="mask-icon" href="{% static 'images/favicons/safari-pinned-tab.svg' %}" color="#5bbad5">
- <link rel="shortcut icon" href="{% static 'images/favicons/favicon.ico' %}">
-
- <link rel="stylesheet" href="{% static 'css/styleguide.css' %}">
- {% block extra_css %}{% endblock %}
- <link rel="stylesheet" href="{% static 'css/print.css' %}" media="print">
-
- <script src="{% static 'js/jquery.min.js' %}"></script>
- <script src="{% static 'js/main-top.js' %}"></script>
- </head>
-
- <body>
-
- {% include "includes/sprites.html" %}
-
- <header class="header">
-
- <div class="header__inner wrapper wrapper--large">
- <a href="{% site_logo_link current_site %}" aria-label="Home link">
- {% if settings.core.SystemSettings.site_logo_default %}
- {% image settings.core.SystemSettings.site_logo_default width-215 as logo_default %}
- <img class="header__logo header__logo--desktop" src="{{ logo_default.url }}">
- {% if settings.core.SystemSettings.site_logo_mobile %}
- {% image settings.core.SystemSettings.site_logo_mobile width-60 as logo_mobile %}
- <img class="header__logo header__logo--mobile" src="{{ logo_mobile.url }}">
- {% else %}
- <img class="header__logo header__logo--mobile" src="{{ logo_default.url }}">
- {% endif %}
- {% else %}
- <img class="header__logo header__logo--desktop"
- width="215"
- height="40"
- src="{% static 'images/logo.png' %}"
- alt="Hypha logo"
- >
- <img class="header__logo header__logo--mobile"
- width="60" height="60"
- src="{% static 'images/logo-small.png' %}"
- alt="Hypha logo"
- >
- {% endif %}
- </a>
-
- </div>
- </header>
-
- <main class="wrapper wrapper--large wrapper--main">
- {% block content_wrapper %}
-
- {% block content %}
- <h1 class="styleguide">Style Guide</h1>
-
- <section id="palette">
- <h2 class="styleguide">Colour palette default</h2>
- <ul>
- <li class="color--white">color--white</li>
- <li class="color--black">color--black</li>
- <li class="color--light-grey">color--light-grey</li>
- <li class="color--light-mid-grey">color--light-mid-grey</li>
- <li class="color--mid-grey">color--mid-grey</li>
- <li class="color--mid-dark-grey">color--mid-dark-grey</li>
- <li class="color--dark-grey">color--dark-grey</li>
- </ul>
-
- <h2 class="styleguide">Colour palette brand</h2>
- <ul>
- <li class="color--lightest-blue">color--lightest-blue</li>
- <li class="color--light-blue">color--light-blue</li>
- <li class="color--light-blue-90">color--light-blue-90</li>
- <li class="color--lighter-blue">color--lighter-blue</li>
- <li class="color--dark-blue">color--dark-blue</li>
- <li class="color--darkest-blue">color--darkest-blue</li>
- <li class="color--mustard">color--mustard</li>
- <li class="color--purple">color--purple</li>
- <li class="color--pink">color--pink</li>
- <li class="color--light-pink">color--light-pink</li>
- <li class="color--light-green">color--light-green</li>
- <li class="color--tomato">color--tomato</li>
- <li class="color--mint">color--mint</li>
- <li class="color--grass">color--grass</li>
- <li class="color--ocean">color--ocean</li>
- <li class="color--sky-blue">color--sky-blue</li>
- <li class="color--marine">color--marine</li>
- <li class="color--mist">color--mist</li>
- <li class="color--green">color--green</li>
- <li class="color--pastel-red">color--pastel-red</li>
- <li class="color--pastel-green">color--pastel-green</li>
- <li class="color--fog">color--fog</li>
- </ul>
-
- <h2 class="styleguide">Colour palette social</h2>
- <ul>
- <li class="color--twitter">color--twitter</li>
- <li class="color--linkedin">color--linkedin</li>
- <li class="color--facebook">color--facebook</li>
- </ul>
-
- <h2 class="styleguide">Colour palette transparent</h2>
- <ul>
- <li class="color--black-60">color--black-60</li>
- <li class="color--black-50">color--black-50</li>
- <li class="color--black-40">color--black-40</li>
- <li class="color--black-25">color--black-25</li>
- <li class="color--black-20">color--black-20</li>
- <li class="color--black-10">color--black-10</li>
- <li class="color--white-50">color--white-50</li>
- <li class="color--white-40">color--white-40</li>
- <li class="color--white-25">color--white-25</li>
- <li class="color--white-20">color--white-20</li>
- <li class="color--white-10">color--white-10</li>
- </ul>
-
- <h2 class="styleguide">Colour palette assignment</h2>
- <ul>
- <li class="color--default">color--default (color--dark-grey)</li>
- <li class="color--primary">color--primary (color--light-blue)</li>
- <li class="color--error">color--error (color--tomato)</li>
- <li class="color--correct">color--correct (color--mint)</li>
- <li class="color--button-disabled">color--button-disabled (color--lighter-blue)</li>
- </ul>
-
- </section>
-
- <section id="typography">
- <h2 class="styleguide">Typography</h2>
-
- <h1>This is an h1</h1>
- <h2>This is an h2</h2>
- <h3>This is an h3</h3>
- <h4>This is an h4</h4>
- <h5>This is an h5</h5>
-
- <p>This is a paragraph of text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-
- <code>This is an example of code</code>
-
- <h3 class="styleguide">Lists</h3>
-
-
- <ul>
- <li>These are</li>
- <li>items in an</li>
- <li>unordered list</li>
- </ul>
-
- <br>
-
- <ol>
- <li>These are</li>
- <li>items in an</li>
- <li>ordered list</li>
- </ol>
-
- <h2 class="styleguide">Typography in submissions</h2>
-
- <article>
- <div class="rich-text rich-text--answers">
- <h1>This is an h1</h1>
- <h2>This is an h2</h2>
- <h3>This is an h3</h3>
- <h4>This is an h4</h4>
- <h5>This is an h5</h5>
-
- <p>This is a paragraph of text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-
- <code>This is an example of code</code>
-
- <h3 class="styleguide">Lists</h3>
-
-
- <ul>
- <li>These are</li>
- <li>items in an</li>
- <li>unordered list</li>
- </ul>
-
- <br>
-
- <ol>
- <li>These are</li>
- <li>items in an</li>
- <li>ordered list</li>
- </ol>
- </div>
- </article>
- </section>
-
- <section id="button">
- <h2 class="styleguide">Links and button</h2>
-
- <button class="button button--primary">button--primary</button><br>
-
- <button class="button button--primary button--half-width">button--half-width</button><br>
-
- <button class="button button--primary button--full-width">button--full-width</button><br>
-
- <button class="button button--primary button--arrow-pixels-white">
- button--arrow-pixels-white
- <svg><use xlink:href="#arrow-head-pixels--solid"></use></svg>
- </button><br>
-
-
- <button class="button button--white">button--white</button><br>
-
- <button class="button button--white button--half-width">button--half-width</button><br>
-
- <button class="button button--white button--full-width">button--full-width</button><br><br>
-
-
- <button class="link link--button">link--button</button><br>
-
- <button class="link link--button link--button--narrow">link--button--narrow</button><br><br>
-
- </section>
-
- <section id="form">
- <h2 class="styleguide">Form</h2>
-
- <form class="form">
- <div class="form__group">
- <label for="text_input" class="form__question form__question--char_field text_input"><span>Text input</span></label>
- <div class="form__item"><input id="text_input" type="text"></div>
- </div>
-
- <div class="form__group">
- <label for="text_input" class="form__question form__question--char_field text_input" required=""><span>Text input required</span><span class="form__required">*</span></label>
- <div class="form__item"><input id="text_input" type="text"></div>
- </div>
-
-
- <button class="button button--submit button--top-space button--primary" type="submit">Button submit</button>
-
- <button class="button button--submit button--top-space button--white" type="submit">Button white submit</button>
- </form>
- </section>
-
- <section id="sidebar">
- <h2 class="styleguide">Sidebar</h2>
-
- <div class="sidebar">
- <div class="sidebar__inner">
- <h5>Header</h5>
- <p>Some text here.</p>
- <button class="button button--primary button--full-width ">Button</a>
- </div>
- </div>
- </section>
-
-{# Insert more style guide elements here #}
-
- {% endblock %}
- {% endblock %}
- </main>
-
- <script src="{% static 'js/main.js' %}"></script>
- {% block extra_js %}{% endblock %}
- </body>
-</html>
diff --git a/hypha/urls.py b/hypha/urls.py
index b1e18c027..665f1f84b 100644
--- a/hypha/urls.py
+++ b/hypha/urls.py
@@ -1,7 +1,6 @@
from django.conf import settings
from django.contrib import admin
from django.urls import include, path, re_path
-from django.views.generic import TemplateView
from django_file_form import urls as django_file_form_urls
from two_factor.urls import urlpatterns as tf_urls
from two_factor.views import LoginView
@@ -78,12 +77,6 @@ if settings.DEBUG:
path("test500/", dj_default_views.server_error),
]
-if settings.DEBUG or settings.ENABLE_STYLEGUIDE:
- urlpatterns += [
- # Add styleguide
- path("styleguide/", TemplateView.as_view(template_name="styleguide.html")),
- ]
-
urlpatterns += [
re_path(
r"^images/([^/]*)/(\d*)/([^/]*)/[^/]*$",
--
GitLab