From 7e2f49cc9d9c5761d6b7d82b690f6ab83c8691c9 Mon Sep 17 00:00:00 2001 From: Philipp Wolfer Date: Tue, 19 Sep 2023 18:44:49 +0200 Subject: [PATCH 1/3] CB-448: Implemented new footer design --- critiquebrainz/expand.py | 47 ++++++ critiquebrainz/frontend/__init__.py | 8 +- .../frontend/static/images/logo_text.svg | 1 + .../static/images/metabrainz-icon-detail.svg | 1 + .../frontend/static/styles/main.less | 34 +++-- critiquebrainz/frontend/templates/footer.html | 143 ++++++++++++++---- 6 files changed, 186 insertions(+), 48 deletions(-) create mode 100644 critiquebrainz/expand.py create mode 100644 critiquebrainz/frontend/static/images/logo_text.svg create mode 100644 critiquebrainz/frontend/static/images/metabrainz-icon-detail.svg diff --git a/critiquebrainz/expand.py b/critiquebrainz/expand.py new file mode 100644 index 000000000..a93c54705 --- /dev/null +++ b/critiquebrainz/expand.py @@ -0,0 +1,47 @@ +# -*- coding: utf-8 -*- +import html +import re + + +def encode_entities(string, quote=True): + return html.escape(string, quote).encode('ascii', 'xmlcharrefreplace').decode('utf8') + + +def expand(string, args, tag='a', default_attribute='href'): + + def make_link(match): + var = match.group(1) + text = match.group(2) + if text in args.keys(): + final_text = args[text] + else: + final_text = text + + if isinstance(args[var], dict): + d = args[var] + else: + if default_attribute: + d = {default_attribute: args[var]} + else: + d = {} + attribs = ' '.join(["%s=\"%s\"" % (k, encode_entities(d[k])) for k + in sorted(d.keys())]) + if attribs: + attribs = ' ' + attribs + return '<%s%s>%s' % (tag, attribs, final_text, tag) + + def simple_expr(match): + var = match.group(1) + if var in args.keys(): + return args[var] + return '{' + var + '}' + + r = '|'.join([re.escape(k) for k in args.keys()]) + + r1 = re.compile('\{(' + r + ')\|(.*?)\}', re.UNICODE) + r2 = re.compile('\{(' + r + ')\}', re.UNICODE) + + string = r1.sub(make_link, string) + string = r2.sub(simple_expr, string) + + return string diff --git a/critiquebrainz/frontend/__init__.py b/critiquebrainz/frontend/__init__.py index 0d8038253..b96029cf6 100644 --- a/critiquebrainz/frontend/__init__.py +++ b/critiquebrainz/frontend/__init__.py @@ -18,6 +18,10 @@ def create_app(debug=None, config_path=None): use_flask_uuid=True, ) + # Template utilities + from critiquebrainz.expand import expand + app.jinja_env.filters['expand'] = expand + # Configuration files app.config.from_pyfile(os.path.join( os.path.dirname(os.path.realpath(__file__)), @@ -76,9 +80,9 @@ def create_app(debug=None, config_path=None): add_robots(app) # BookBrainz Database - import critiquebrainz.frontend.external.bookbrainz_db as bookbrainz_db + import critiquebrainz.frontend.external.bookbrainz_db as bookbrainz_db bookbrainz_db.init_db_engine(app.config.get("BB_DATABASE_URI")) - + # MusicBrainz Database from brainzutils import musicbrainz_db musicbrainz_db.init_db_engine(app.config.get("MB_DATABASE_URI")) diff --git a/critiquebrainz/frontend/static/images/logo_text.svg b/critiquebrainz/frontend/static/images/logo_text.svg new file mode 100644 index 000000000..d15167ef2 --- /dev/null +++ b/critiquebrainz/frontend/static/images/logo_text.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/critiquebrainz/frontend/static/images/metabrainz-icon-detail.svg b/critiquebrainz/frontend/static/images/metabrainz-icon-detail.svg new file mode 100644 index 000000000..9795e24e6 --- /dev/null +++ b/critiquebrainz/frontend/static/images/metabrainz-icon-detail.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/critiquebrainz/frontend/static/styles/main.less b/critiquebrainz/frontend/static/styles/main.less index 70eb9e048..f2dd134d1 100644 --- a/critiquebrainz/frontend/static/styles/main.less +++ b/critiquebrainz/frontend/static/styles/main.less @@ -56,23 +56,31 @@ body { } } -// Footer .footer { - font-size: 13px; - line-height: 20px; - border-top: 2px solid #36b5b2; - padding-top: 20px; - .title { - font-weight: bold; - margin-bottom: 6px; + hr { + border: none; + height: 8px; + background: linear-gradient(to right, #37b5b3, #ffa501); } + + h3 { + font-size: 2rem; + font-weight: 600; + } + ul { - padding: 0; - li { list-style: none; } + line-height: 2; } - .meb-credit { - margin-top: 10px; - font-weight: bold; + + li>.glyphicon { + font-size: 10px; + padding-right: 4px; + } + + .section-line { + padding-top: 30px; + border-top: 1px solid #ddd; + text-align: center; } } diff --git a/critiquebrainz/frontend/templates/footer.html b/critiquebrainz/frontend/templates/footer.html index ea7ba27ef..a93817b17 100644 --- a/critiquebrainz/frontend/templates/footer.html +++ b/critiquebrainz/frontend/templates/footer.html @@ -9,46 +9,123 @@ {% endif %} -
+
+
-
-
{{ _('Reviews') }}
-
\ No newline at end of file From bb226c18d5200adf0a34e3cf384670670446741f Mon Sep 17 00:00:00 2001 From: Philipp Wolfer Date: Fri, 6 Oct 2023 17:54:05 +0200 Subject: [PATCH 2/3] CB-448: Removed CAA from footer --- critiquebrainz/frontend/templates/footer.html | 5 ----- 1 file changed, 5 deletions(-) diff --git a/critiquebrainz/frontend/templates/footer.html b/critiquebrainz/frontend/templates/footer.html index a93817b17..072b35d34 100644 --- a/critiquebrainz/frontend/templates/footer.html +++ b/critiquebrainz/frontend/templates/footer.html @@ -71,11 +71,6 @@

{{ _("Fellow Projects") }}

ListenBrainz -
  • - - Cover Art Archive -
  • Date: Sat, 4 Nov 2023 17:49:46 +0100 Subject: [PATCH 3/3] CB-448: Layout footer bottom links with flexbox --- .../frontend/static/styles/main.less | 50 +++++++++++++++++++ critiquebrainz/frontend/templates/footer.html | 10 ++-- 2 files changed, 55 insertions(+), 5 deletions(-) diff --git a/critiquebrainz/frontend/static/styles/main.less b/critiquebrainz/frontend/static/styles/main.less index f2dd134d1..a91d187eb 100644 --- a/critiquebrainz/frontend/static/styles/main.less +++ b/critiquebrainz/frontend/static/styles/main.less @@ -82,6 +82,56 @@ body { border-top: 1px solid #ddd; text-align: center; } + + .footer-links { + margin-bottom: 20px; + } + + .footer-credits { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-evenly; + + .footer-source-link { + flex-basis: 30%; + text-align: start; + align-self: center; + padding-left: 15px; + } + + .footer-foundation { + flex-basis: content; + align-self: center; + flex-grow: 100; + } + + .footer-ticket-link { + flex-basis: 30%; + text-align: end; + align-self: center; + padding-right: 15px; + } + + @media (max-width: @screen-sm-max) { + flex-wrap: wrap; + + .footer-foundation { + order: 1; + flex-basis: 100%; + } + + .footer-source-link { + order: 2; + flex-basis: 50%; + } + + .footer-ticket-link { + order: 3; + flex-basis: 50%; + } + } + } } img.cover-art { diff --git a/critiquebrainz/frontend/templates/footer.html b/critiquebrainz/frontend/templates/footer.html index 072b35d34..2ae13550a 100644 --- a/critiquebrainz/frontend/templates/footer.html +++ b/critiquebrainz/frontend/templates/footer.html @@ -11,7 +11,7 @@
    -
    +

    CritiqueBrainz @@ -100,13 +100,13 @@

    {{ _("Developers") }}

    -
    -