From 93a3588dcde26391e20f9d0e9bcaa16742b32f2d Mon Sep 17 00:00:00 2001 From: SamuelmdLow Date: Thu, 10 Oct 2024 08:58:25 +0000 Subject: [PATCH 1/3] Started restyling of main nav to algin with mahim's mockup --- .../templates/navigation/headers/main.html | 72 +++++----- .../src/styles/modules/_header.scss | 132 ++++++++++-------- 2 files changed, 109 insertions(+), 95 deletions(-) diff --git a/navigation/templates/navigation/headers/main.html b/navigation/templates/navigation/headers/main.html index c60284049..184d9f462 100644 --- a/navigation/templates/navigation/headers/main.html +++ b/navigation/templates/navigation/headers/main.html @@ -4,55 +4,55 @@
-
- {% if tagline_url %} - {% if tagline %}{{tagline}}{% else %}!{% endif %} - {% else %} - {% if tagline %}{{tagline}}{% endif %} - {% endif %} -
- - {% comment %}
{% endcomment %} - - - - - - - {% include 'article/objects/darkmode_button.html' with id="main"%} +

+ {% if tagline_url %} + {% if tagline %}{{tagline}}{% else %}!{% endif %} + {% else %} + {% if tagline %}{{tagline}}{% endif %} + {% endif %} +

+ +

+ {% now "F d, Y" as date %} + {% now "l" as dayOfWeek %} + {{date}} {{dayOfWeek}} +

+ +
+ + {% comment %} + + + + + {% endcomment %} + {% include 'article/objects/darkmode_button.html' with id="main"%} +
{% comment %} {% endcomment %}
diff --git a/ubyssey/static_src/src/styles/modules/_header.scss b/ubyssey/static_src/src/styles/modules/_header.scss index 4a41de1a3..99f5ad66e 100644 --- a/ubyssey/static_src/src/styles/modules/_header.scss +++ b/ubyssey/static_src/src/styles/modules/_header.scss @@ -52,23 +52,30 @@ header.main{ .branding { font-size: 13px; + .middle { + margin-left: 2em; + max-width: 600px; + width: 100%; + } .left, .right { - padding-top: 2em; + padding-top: 0.5em; } - .left { - max-width: 200px; + .right { + margin-left: auto; } } .since-line { + margin-left: auto; + max-width: 300px; font-weight: 600; font-style: italic; } .row { margin-top: 20px; - display: grid; - grid-template-columns: 1fr auto 1fr; + display: flex; + justify-content: space-between; //overflow: hidden; .left, .middle, .right { @@ -84,9 +91,9 @@ header.main{ .right { text-align: right; - .rss-icon { - margin-right: 1.5em; - } + //.rss-icon { + // margin-right: 1.5em; + //} a { position: relative; @@ -106,20 +113,22 @@ header.main{ line-height: 60px; } img.top-logo { - width: 400px; + width: 100%; vertical-align: middle; } } nav.main { - padding: 0 10px; - border-bottom: 1px double; + padding-inline: 1em; + border-top: 2px solid; + border-bottom: 1px solid; .left, .middle, .right { padding: 0; } .meta { - font-style: italic; + font-size: 0.8em; + text-transform: uppercase; } .left { .meta { @@ -127,12 +136,64 @@ header.main{ } } + li, div { + line-height: 3em; + } + .right { .meta { margin-left: 15px; } } + .sections { + padding-inline: 1em; + display: flex; + li, div { + padding-inline: 1em; + margin: 0; + + font-family: $font-default; + font-size: 0.75em; + font-weight: $font-weight-semi-bold; + color: var(--header_color); + text-transform: uppercase; + + &.elections a { + color: $color-red; + } + } + } + + .dropdown:focus-within, .dropdown:hover { + text-decoration: underline; + } + .more-dropdown { + display: inline-block; + white-space: nowrap; + } + .more-list { + background-color: var(--background); + padding: 2px; + border: 2px solid; + border-top: none; + left: -2px; + text-decoration: underline; + z-index: 100; + font-size: 15px; + + ul { + display: block; + li { + margin: 1em 0; + display: block; + border: none; + text-align: left; + line-height: 1em; + } + } + } + ul { list-style-type: none; padding: 0; @@ -145,53 +206,6 @@ header.main{ display: inline-block; } - &.sections { - li { - font-family: $font-default; - font-size: 0.75em; - font-weight: $font-weight-semi-bold; - color: var(--header_color); - text-transform: uppercase; - margin: 0; - padding-left: 10px; - padding-right: 10px; - line-height: 2em; - - - &.elections a { - color: $color-red; - } - } - .dropdown:focus-within, .dropdown:hover { - text-decoration: underline; - } - .more-dropdown { - display: inline-block; - white-space: nowrap; - } - .more-list { - background-color: var(--background); - padding: 2px; - border: 2px solid; - border-top: none; - left: -2px; - text-decoration: underline; - z-index: 100; - font-size: 15px; - - ul { - display: block; - li { - margin: 1em 0; - display: block; - border: none; - text-align: left; - line-height: 1em; - } - } - } - } - &.sections-more { @include sectionsMore; } From 15463f7ccda81103a4a00c88b9c9f9f57c8fad3d Mon Sep 17 00:00:00 2001 From: SamuelmdLow Date: Thu, 17 Oct 2024 12:09:00 +0000 Subject: [PATCH 2/3] Did new footer design! Looks more professional but still cool! --- navigation/templates/navigation/footer.html | 71 ++++--- .../src/images/ubyssey_logo_dark_classic.svg | 25 +++ .../src/styles/modules/_footer.scss | 174 +++++++++--------- .../src/styles/modules/_variables.scss | 1 + 4 files changed, 153 insertions(+), 118 deletions(-) create mode 100644 ubyssey/static_src/src/images/ubyssey_logo_dark_classic.svg diff --git a/navigation/templates/navigation/footer.html b/navigation/templates/navigation/footer.html index 80468f99e..fc1b5b5d4 100644 --- a/navigation/templates/navigation/footer.html +++ b/navigation/templates/navigation/footer.html @@ -6,38 +6,53 @@
- - Funded by the Government of Canada -
- -
-

The Ubyssey has been UBC’s student newspaper since 1918, independent since 1995.

-

Published bi-weekly in print and daily online, we cover what matters most to UBC students. + + + Funded by the Government of Canada +

+ The Ubyssey has been the definitive source of news on campus since 1918. Published by an independent non-profit society, written and + edited by students and funded by a combination + of student fees and advertising, we cover what + matters most to the UBC community.

-

Stay in the loop

- -

Keep up with us on social media

- + Funded by the Government of Canada

Have feedback? Email feedback@ubyssey.ca.

-
- + +
+

Land Acknowledgement

+

+ The Ubyssey would like to acknowledge that our office resides and our production takes place on the ancestral, unceded territories of the xʷməθkʷəy̓əm (Musqueam), sḵwx̱wú7mesh (Squamish) and sel̓íl̓witulh (Tsleil-Waututh) nations. We make this acknowledgement to pay respect to the keepers of the land, and to help fulfill our responsibility to view our own colonial history and their present-day implications through a critical lens. +

+
© {% now "Y" %} The Ubyssey
diff --git a/ubyssey/static_src/src/images/ubyssey_logo_dark_classic.svg b/ubyssey/static_src/src/images/ubyssey_logo_dark_classic.svg new file mode 100644 index 000000000..49155f6cc --- /dev/null +++ b/ubyssey/static_src/src/images/ubyssey_logo_dark_classic.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ubyssey/static_src/src/styles/modules/_footer.scss b/ubyssey/static_src/src/styles/modules/_footer.scss index fb4a70c8c..2b658baa9 100644 --- a/ubyssey/static_src/src/styles/modules/_footer.scss +++ b/ubyssey/static_src/src/styles/modules/_footer.scss @@ -7,18 +7,31 @@ footer { padding: 15px 0; border-top: 0.5em solid $color-ubyssey-blue; background-color: $color-ubyssey-blue-dark; - color: white; + color: $color-ubyssey-blue-light; position: relative; bottom: 0; left: 0; right: 0; + + h3 { + color: $color-ubyssey-blue-classic; + text-transform: uppercase; + font-size: 1em; + } + h2, p, li { + color: $color-ubyssey-blue-light; + } + .about { - line-height: 2em; - max-width: 1000px; - margin: auto; - margin-top: 2em; + padding-inline: 1em; + margin-inline: auto; + margin-top: 4em; margin-bottom: 2em; + + max-width: 1050px; display: flex; + + line-height: 1.75em; h2 { font-size: 2em; font-weight: 200; @@ -27,57 +40,40 @@ footer { font-style: italic; } } - h2, p, li { - color: $color-ubyssey-blue-light; - } - a { - text-decoration: underline; - } } div.footer-branding { - margin-right: 2em; + margin-right: 5em; display: flex; flex-direction: column; - width: 250px; + width: 350px; .logo { height: auto; width: 100%; } .funding { - margin-top: 30px; - align-self: end; - width: 55%; - margin-right: 1em; - @media($bp-smaller-than-tablet){ - align-self: center; - margin-right: 0; - } + margin: 1em 0; + width: 250px; } } - nav { - text-align: center; - line-height: 40px; - ul { - list-style-type: none; - margin: 0; - padding: 0; + div.footer-links { + padding-top: 1em; + display: flex; + flex-grow: 1; + flex-wrap: wrap; + } - li { - margin: 0 8px; - display: inline-block; - } - } + .land-acknowledgement { + margin: 2em auto; + padding: 1em; + max-width: 1150px; } .copyright { - margin: 0.5em; + margin: 3em 0.5em; text-align: center; } - .navbar-nav { - display: block; - } ul { list-style-type: none; @@ -86,93 +82,91 @@ footer { flex-direction: row; } - div.about-text { - h3 { - margin-top: 1em; - color: $color-ubyssey-blue-light; - font-weight: 500; - font-size: 1em; - } - ul { - display: flex; - flex-wrap: wrap; - li { - margin-right: 0.5em; - } + @media (min-width: 1200px) { + div.footer-branding .logo { + margin-left: -4em; + width: calc(100% + 7em); } } + @media($bp-larger-than-tablet){ + .mobile { + display: none; + } + .desktop { + display: block; + } + .about { h2 { margin-top: 0; margin-bottom: 0; } - p { - margin: 0.5em 0 1.5em 0; - } } - div.about-text { + + div.footer-links-section { flex-grow: 1; - width: 0; - ul { - padding-left: 2em; - } - p:last-child { - margin-top: 1.5em; + h3 { + margin-bottom: 2em; } - } - nav .top-row { - font-size: 21px; - font-weight: 600; li { - margin: 0 10px; + line-height: 2em; } } + } @media($bp-smaller-than-tablet){ + text-align: center; + + .mobile { + display: block; + } + .desktop { + display: none; + } + .about { flex-direction: column; max-width: 600px; padding: 1em; - h2 { - text-align: center; - } - } - div.about-text { - width: auto; - text-align: center; - ul { - justify-content: center; - } - h3 { - font-weight: 600; - } - p:last-child { - margin-top: 2em; - } - } - nav{ - display: flex; } + div.footer-branding { margin: auto; + margin-bottom: 2em; width: 100%; - max-width: 200px; .logo { width: 50%; margin: auto; } .funding { - width: 100%; + margin-inline: auto; + width: 50%; } } - .top-row, .bottom-row{ - width: 50%; - li{ - display: block; + + div.footer-links-section { + width: 100%; + h3 { + margin-top: 1em; + color: #BBE3F1; } + ul { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + } + li { + margin: 0 0.5em; + text-decoration: underline; + } + } + + .land-acknowledgement { + display: none; } } diff --git a/ubyssey/static_src/src/styles/modules/_variables.scss b/ubyssey/static_src/src/styles/modules/_variables.scss index 7fbab95f3..a86156010 100644 --- a/ubyssey/static_src/src/styles/modules/_variables.scss +++ b/ubyssey/static_src/src/styles/modules/_variables.scss @@ -30,6 +30,7 @@ $color-ubyssey-blue:#0071c9; $color-ubyssey-blue-dark:#041620; $color-ubyssey-blue-dark-2: #031621; $color-ubyssey-blue-light:#BBE3F1; +$color-ubyssey-blue-classic: #0073A9; $color-accent-blue: #0071c9; $color-social-facebook: #4267b2; From a5fae2ad0b6f406a79f1bf113a5e754580105e80 Mon Sep 17 00:00:00 2001 From: SamuelmdLow Date: Fri, 18 Oct 2024 08:32:52 +0000 Subject: [PATCH 3/3] Implement redesign style adjustments. Add new time display filter. --- article/templatetags/articletags.py | 28 +++++++++++++++++++ home/templates/home/home_page.html | 5 ++-- .../sidebar/sidebar_latest_block.html | 2 +- navigation/templates/navigation/footer.html | 2 +- .../templates/navigation/headers/main.html | 4 +-- .../src/styles/modules/_footer.scss | 10 +++---- .../src/styles/modules/_header.scss | 14 ++++------ 7 files changed, 45 insertions(+), 20 deletions(-) diff --git a/article/templatetags/articletags.py b/article/templatetags/articletags.py index b083f9204..acb10b38e 100644 --- a/article/templatetags/articletags.py +++ b/article/templatetags/articletags.py @@ -70,6 +70,34 @@ def display_pubdate(value): return "1 second ago" return str(seconds) + " seconds ago" +@register.filter(name='time_ago') +def time_ago(value): + + if value == None: + return "Unknown" + + pubdate = value.astimezone(timezone.get_current_timezone()) + today = timezone.now().astimezone(timezone.get_current_timezone()) + delta = today - pubdate + + if delta.total_seconds() > datetime.timedelta(days=7).total_seconds(): + delta = round(delta.total_seconds()/(3600*24*7)) + unit = "w" + elif delta.total_seconds() > datetime.timedelta(days=1).total_seconds(): + delta = round(delta.total_seconds()/(3600*24)) + unit = "d" + elif delta.total_seconds() > datetime.timedelta(hours=1).total_seconds(): + delta = round(delta.total_seconds()/3600) + unit = "h" + elif delta.total_seconds() > datetime.timedelta(minutes=1).total_seconds(): + delta = round(delta.total_seconds()/60) + unit = "m" + else: + delta = round(delta.total_seconds()) + unit = "s" + + return str(delta) + unit + " ago" + @register.filter(name="get_id") def get_id(value): from wagtail.models import Page, PageManager, SiteRootPath diff --git a/home/templates/home/home_page.html b/home/templates/home/home_page.html index a313fa6b4..316174bf9 100644 --- a/home/templates/home/home_page.html +++ b/home/templates/home/home_page.html @@ -4,6 +4,7 @@ {% load wagtailimages_tags %} {% load ubyssey_ad_tags %} {% load ubyssey_ad_filters %} +{% load articletags %} {% block stylesheet %} @@ -52,9 +53,7 @@

BREAKING: {{ article.title|safe }}

{% include "article/objects/cover_story.html" with article=coverstory%} {% endif %}
- {% now "d N Y" as date %} - {% now "l" as dayOfWeek %} - {% include 'home/objects/home_heading-box.html' with styling='lightmode' title="Top Stories" text=date textBold=dayOfWeek %} + {% include 'home/objects/home_heading-box.html' with styling='lightmode' title="Top Stories" text="Updated" textBold=self.last_published_at|time_ago %} {% for article in self.top_articles_list %} {% include "article/objects/top_article.html" with article=article.article count=forloop.counter %} diff --git a/infinitefeed/templates/infinitefeed/sidebar/sidebar_latest_block.html b/infinitefeed/templates/infinitefeed/sidebar/sidebar_latest_block.html index 910f52ec8..4f8423e48 100644 --- a/infinitefeed/templates/infinitefeed/sidebar/sidebar_latest_block.html +++ b/infinitefeed/templates/infinitefeed/sidebar/sidebar_latest_block.html @@ -1,7 +1,7 @@ {% load articletags %}
- {% include 'home/objects/home_heading-box.html' with styling='boxLabel-highlight' title=title text='Last updated:' textBold=articles.0.first_published_at|display_pubdate %} + {% include 'home/objects/home_heading-box.html' with styling='boxLabel-highlight' title=title text='Updated' textBold=articles.0.first_published_at|time_ago %}
    {% for article in articles %}
  • diff --git a/navigation/templates/navigation/footer.html b/navigation/templates/navigation/footer.html index fc1b5b5d4..94d97575a 100644 --- a/navigation/templates/navigation/footer.html +++ b/navigation/templates/navigation/footer.html @@ -50,7 +50,7 @@

    Explore

    Land Acknowledgement

    - The Ubyssey would like to acknowledge that our office resides and our production takes place on the ancestral, unceded territories of the xʷməθkʷəy̓əm (Musqueam), sḵwx̱wú7mesh (Squamish) and sel̓íl̓witulh (Tsleil-Waututh) nations. We make this acknowledgement to pay respect to the keepers of the land, and to help fulfill our responsibility to view our own colonial history and their present-day implications through a critical lens. + The Ubyssey would like to acknowledge that our office resides and our production takes place on the ancestral, unceded territories of the xʷməθkʷəy̓əm (Musqueam), sḵwx̱wú7mesh (Squamish) and sel̓íl̓witulh (Tsleil-Waututh) nations. Read More.

    © {% now "Y" %} The Ubyssey
    diff --git a/navigation/templates/navigation/headers/main.html b/navigation/templates/navigation/headers/main.html index 184d9f462..7a0fb9a2e 100644 --- a/navigation/templates/navigation/headers/main.html +++ b/navigation/templates/navigation/headers/main.html @@ -25,12 +25,12 @@
    - {% comment %} + - {% endcomment %} + {% include 'article/objects/darkmode_button.html' with id="main"%}
    {% comment %} {% endcomment %} diff --git a/ubyssey/static_src/src/styles/modules/_footer.scss b/ubyssey/static_src/src/styles/modules/_footer.scss index 2b658baa9..60021671f 100644 --- a/ubyssey/static_src/src/styles/modules/_footer.scss +++ b/ubyssey/static_src/src/styles/modules/_footer.scss @@ -68,6 +68,9 @@ footer { margin: 2em auto; padding: 1em; max-width: 1150px; + a { + text-decoration: underline; + } } .copyright { @@ -139,7 +142,8 @@ footer { .logo { width: 50%; - margin: auto; + margin-inline: auto; + margin-bottom: 1em; } .funding { margin-inline: auto; @@ -164,10 +168,6 @@ footer { text-decoration: underline; } } - - .land-acknowledgement { - display: none; - } } } \ No newline at end of file diff --git a/ubyssey/static_src/src/styles/modules/_header.scss b/ubyssey/static_src/src/styles/modules/_header.scss index 99f5ad66e..a93e04e72 100644 --- a/ubyssey/static_src/src/styles/modules/_header.scss +++ b/ubyssey/static_src/src/styles/modules/_header.scss @@ -54,12 +54,9 @@ header.main{ .middle { margin-left: 2em; - max-width: 600px; + max-width: 520px; width: 100%; } - .left, .right { - padding-top: 0.5em; - } .right { margin-left: auto; } @@ -75,7 +72,7 @@ header.main{ .row { margin-top: 20px; display: flex; - justify-content: space-between; + justify-content: center; //overflow: hidden; .left, .middle, .right { @@ -91,9 +88,9 @@ header.main{ .right { text-align: right; - //.rss-icon { - // margin-right: 1.5em; - //} + .rss-icon { + margin-right: 1.5em; + } a { position: relative; @@ -202,6 +199,7 @@ header.main{ width: fit-content; margin: auto; height: 100%; + gap: 0.5em; li { display: inline-block; }