Wellbeing of Architects

peterj · 2022-04-25 04:17:53

Having once been an architect (buildings variety), I do know their wellbeing is often not brilliant. It’s a stressful job with little return and a fair copping of abuse. Anyhow, Monash University and a local registration board commissioned a report and I got to build the website. It was launched late last year.

Theme: Built on 4.8 theme with a little help from bootstrap
Visual Design: With Catherine Griffiths, NZ

Plugins include: adi_file_tab, bot_image_upload, bot_wtc, glz_custom_fields, jcr_file_custom, jcr_link_custom, smd_thumbnail
Menus: My clients’ needs always end up requiring something custom. This time I have given them a set of shortcodes they can edit like this.

<txp::menu section="about" dropdown="yes" subids="12,5,6" />
<txp::menu section="updates" />
<txp::menu article_id="8" />

bici · 2022-04-25 05:26:20

lovely and subtle. great choice of sombre colours.
I love the drop down Menu.

colak · 2022-04-25 09:06:58

It’s a stressful job with little return and a fair copping of abuse.

Being a practising architect, I echo your statement. This is a site close to my heart.

jakob · 2022-04-25 16:35:09

Lovely design Peter! Worthy topic too (also a past architect here).

Shortcodes provide an excellent way of giving clients a simpler set of options without them having to delve into the innards of forms. Recognize a few of the plugins in there too. Nice to know they’ve been useful :-)

peterj · 2022-04-25 23:44:42

jakob wrote #333151:

Recognize a few of the plugins in there too.

Yes thanks for those. They were vital for associated images and other file meta. They are used to run the sidebar partner logos (a link list) and other bits and bobs.

So many architects in the house!

Bloke · 2022-04-26 06:40:44

That is a very cleanlook. Nice work.

I’d love to see your menu shortcode if you can share it. Intrigued…

phiw13 · 2022-04-26 08:36:28

Interesting layout you build

May I venture a couple of mild complains / suggestions?

The first is that your body text is not easy to read. The color contrast is more than OK (11), but the combination of that grey background colour and the rather “tinny” fonts in terms of character serifed strokes makes it harder on the old eyes. Perhaps a slightly lighter background (in the range of #f5f5f5) and a bigger font size?

The second one is a classic – lack of :focus styles (keyboard users like to see how that moves). Some modern :focus code:

a { --outline: 2px solid lime } /* adjust to taste */

a:focus {
  outline: var(--outline);
}

a:focus:not(:focus-visible) { outline: none; }

a:focus-visible {
  outline: var(--outline);
}

Also, on a small-screen device, there is quite a bit of reflow when you tap to open the menu.

As others, I am curious about your menu shortcode…

bici · 2022-04-26 16:10:20

yesterday the top nav menu of the website on my desktop was the same as what is on my mobile today…. Expandable. But not today. it is now a single string of links

peterj · 2022-05-21 04:01:34

Belatedly, thanks for the tips all.
I went down a wormhole with :focus and :focus-visible (and tab-index) and wanted to solve it all before posting here, but alas still figuring it out, not working on the staging site but will get there.

Colours were out of my control, though I did get them to AA.

I can see the mobile menu needs some work, will try to get it working in an overlay or at least full width, as feels a bit bunched.

Am cleaning up the menu shortcode on a new site before sharing in Shortcodes… but here’s the basic form, as-is from this site, with a lot of bootstrap gumph to get the hover to work. This version presumes a wrapping ul.

<txp:if_yield name="section">
	<txp:if_yield name="dropdown">

        <li class="nav-item dropdown dropdown-hover">
          <a class="nav-link dropdown-toggle" href='/<txp:yield name="section" />/' id='navbarDropdown<txp:yield name="section" />' role="button" data-bs-toggle="dropdown" aria-expanded="false"  class="nav-link<txp:if_section name='<txp:yield name="section" />'> active</txp:if_section>">
            <txp:section link="0" name='<txp:yield name="section"/>' title="1" />
          </a>
          <ul class="dropdown-menu" aria-labelledby='navbarDropdown<txp:yield name="section" />'>
          	<txp:article_custom section='<txp:yield name="section" />' status="sticky" limit="1">
				<li class="parent-repeat"><a class="dropdown-item" href='/<txp:yield name="section" />/'>About the project</a></li>
				<li class="parent-repeat"><hr class="dropdown-divider"></li>
            </txp:article_custom>
            <txp:if_yield name="subids">
				<txp:article_custom id='<txp:yield name="subids" />'>
				  <li><a class="dropdown-item" href="<txp:permlink />"><txp:title /></a></li>
				</txp:article_custom>
            <txp:else />
				<txp:article_custom section='<txp:yield name="section" />'>
				  <li><a class="dropdown-item" href="<txp:permlink />"><txp:title /></a></li>
				</txp:article_custom>
            </txp:if_yield>
          </ul>
        </li>

	<txp:else />

		<li class="nav-item">
			<a itemprop="url" href="/<txp:section link="0" name='<txp:yield name="section" />/' />" class="nav-link<txp:if_section name='<txp:yield name="section" />'> active</txp:if_section>">
				<txp:section link="0" name='<txp:yield name="section"/>' title="1" />
			</a>
		</li>	

	</txp:if_yield>

</txp:if_yield>
<txp:if_yield name="article_id">
    <li class="nav-item">
        <a itemprop="url" href="<txp:permlink id='<txp:yield name="article_id" />' />
" class="nav-link<txp:if_individual_article><txp:if_article_id id='<txp:yield name="article_id" />'> active</txp:if_article_id></txp:if_individual_article>">
            <txp:article_custom id='<txp:yield name="article_id"/>'>
                <txp:title />
            </txp:article_custom>
        </a>
    </li>
</txp:if_yield>

bici · 2022-05-22 06:35:30

peterj wrote #333152:

Yes thanks for those. They were vital for associated images and other file meta. They are used to run the sidebar partner logos (a link list) and other bits and bobs.

So many architects in the house!

studied for two years. but never did graduate.

phiw13 · 2022-05-23 23:59:25

peterj wrote #333412:

I went down a wormhole with :focus and :focus-visible (and tab-index) and wanted to solve it all before posting here, but alas still figuring it out, not working on the staging site but will get there.

What is/are you problems here ? For one, don’t mess with tabindex unless you absolutely need to (e.g interactive panels/dialogs) – and I don’t see anything in that site that would justify it.

For styling and showing an indication of focussed state for keyboard users and the like, the code I gave is fully functional. For older browsers, you style the a:focus state (a 2px thick outline in my example), for newer browsers, first a “reset” – a:focus:not(:focus-visible) {} that suppresses that outline when the user clicks on a link. But when the user accesses the link by means of keyboard tabbing or other accessibility help, you do show it: :focus-visible {}.

Textpattern CMS

Textpattern CMS support forum

#1 2022-04-25 04:17:53