Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

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

peterj
Member
From: Melbourne, Australia
Registered: 2005-06-02
Posts: 99

Wellbeing of Architects

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.

Wellbeing of Architects

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" />

Offline

#2 2022-04-25 05:26:20

bici
Member
From: vancouver
Registered: 2004-02-24
Posts: 2,072
Website Mastodon

Re: Wellbeing of Architects

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


…. texted postive

Offline

#3 2022-04-25 09:06:58

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,007
Website GitHub Mastodon Twitter

Re: Wellbeing of Architects

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.


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#4 2022-04-25 16:35:09

jakob
Admin
From: Germany
Registered: 2005-01-20
Posts: 4,578
Website

Re: Wellbeing of Architects

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 :-)


TXP Builders – finely-crafted code, design and txp

Offline

#5 2022-04-25 23:44:42

peterj
Member
From: Melbourne, Australia
Registered: 2005-06-02
Posts: 99

Re: Wellbeing of Architects

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!

Offline

#6 2022-04-26 06:40:44

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 11,250
Website GitHub

Re: Wellbeing of Architects

That is a very cleanlook. Nice work.

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


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Online

#7 2022-04-26 08:36:28

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,058
Website

Re: Wellbeing of Architects

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…


Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

#8 2022-04-26 16:10:20

bici
Member
From: vancouver
Registered: 2004-02-24
Posts: 2,072
Website Mastodon

Re: Wellbeing of Architects

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


…. texted postive

Offline

#9 2022-05-21 04:01:34

peterj
Member
From: Melbourne, Australia
Registered: 2005-06-02
Posts: 99

Re: Wellbeing of Architects

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>

Offline

#10 2022-05-22 06:35:30

bici
Member
From: vancouver
Registered: 2004-02-24
Posts: 2,072
Website Mastodon

Re: Wellbeing of Architects

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.


…. texted postive

Offline

#11 2022-05-23 23:59:25

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,058
Website

Re: Wellbeing of Architects

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 {}.


Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

Board footer

Powered by FluxBB