Jump to content

monollonom

Members
  • Posts

    275
  • Joined

  • Last visited

  • Days Won

    7

Posts posted by monollonom

  1. 9 hours ago, diogo said:

    Thanks again for catching the font issue @monollonom! Actually it was not Haas Grotesque causing the problem with the vertical metric. The problem was that the font was not loading at all, probably due to the file being corrupted and you were probably seeing the Helvetica present on your computer. This also must have happened when transferring the site to the server. Thanks again!

    It does look more refined now, I was especially triggered by the animation of the “>” not being centered vertically while rotating 😄

  2. I have no idea how Tailwind works but when I need something like this I usually set a CSS variable and add them with the style attribute where needed.

    Something like:

    <?php namespace ProcessWire; ?>
    
    <div style="--color: <?= $page->color ?>"><!-- My content --></div>

    When I need something more complex, say a CSS animation depending on some of the page parameters (e.g. children count) then I output in a <style> element within my template.

    • Like 5
  3. Sure!

    In your js:

    window.addEventListener("load", () => {
    	const headers = new Headers({"X-Requested-With": "XMLHttpRequest"}); // needed for $config->ajax to work
    	const links   = document.querySelectorAll("a.ajax");
    	const main    = document.querySelector("main");
      
    	for(let i = 0; i < links.length; i++) {
    		links[i].addEventListener("click", async (e) => {
    			e.preventDefault();
    			loadPage(e.currentTarget.href);
    		});
    	}
    
        async function loadPage(url, options) {
    		const page = await fetch(url, { headers });
    		main.innerHTML = await page.text();
    	}
    });

    And in your php:

    <?php namespace ProcessWire; ?>
    
    <?php if(!$config->ajax): ?>
    <main pw-id="main" pw-append>
    <?php endif; ?>
      
    <article><!-- Your content --></article>
      
    <?php if(!$config->ajax): ?>
    </main>
    <?php endif; ?>
    
    <?php
    if($config->ajax) exit;

    When opening the page directly it will go the usual route, outputting your content within <main> but if requested with ajax then it will only send the content and exit() so no other file is appended (_main.php in my case).

    • Like 2
    • Thanks 1
  4. @ngrmm both ! I make a fetch call from js and then check in the back-end using $config->ajax to only echo parts of my templates and exiting early to avoid my _main.php to be appended (because of the markup regions output strategy).

    • Like 1
  5. I guess best would be to either have a help popup, which I’m not fond of, or display the help text differently. I’ll stick with this for now as I think I’ve made enough changes but maybe I’ll come back to this later on.

    Thank you again for all the feedbacks.

    1 hour ago, bernhard said:

    Also it seems you are loading youtube without consent?

    My bad on this one, thanks for pointing it out.

    • Like 2
  6. I should give you guys an early access to our websites in the Beer Garden lol

    Thank you though for the valuable feedbacks, it’s the kind of things you can have a hard time to see once you’re deep into projects with unconventional design: you get used to it and think it’s “understandable” enough. I went ahead and made the grey text darker and I’ve displayed the title in the center when you hover the outer strands. I also increased the contrast when hovering these. I hope this will do.

    4 hours ago, bernhard said:

    Hats off for mastering D3.js 😅

    Please don’t look at my code 🫥

    • Like 3
  7. 10 hours ago, Robin S said:

    One good thing about using a hook to AdminTheme::getExtraMarkup to add custom CSS is that the file gets loaded after any CSS files that are loaded by modules or the PW core, so you can override any CSS rules without needing to add extra specificity.

    This is pretty neat, thanks for sharing!

    Until now I was adding these admin css tweaks through $config->styles in admin.php and thus I had a plethora of “!important” in my CSS...

    • Like 2
  8. 2 hours ago, teppo said:

    Or add a help text or something.

    There is actually a help text: the one on the rotating circle inside (desktop) / outside (mobile) but it’s dismissed after the first click wherever. I’m going to change it so it remains as long as you didn’t click on a “post” strand.

    Also, were you on mobile when seeing the website? It’s a tougher UI there for sure without hover... If not, did you notice the title of the post appearing in the bottom bar when hovering a strand? Maybe I could add at least a title="Open ”Title of the post”" so you have another hint when hovering.

    In any case, thank you for you comment @teppo!

    Edit: changes applied 🙂

    • Like 2
  9. Hi all,

    I'm happy to share with you this website we launched two weeks ago for a Swiss movie in pre-production phase.

    The client wanted to have a blog to document the project and allow users to contribute posts through a form but also with a login to the admin which — once approved — gives them access to more options for their contribution’s content. Right at the beginning they came to us with scientific visualizations as references and thus I finally got to try D3.js. I’ve known about it for a very long time but never got a chance to try it out. It wasn’t easy but in the end I managed to get (what I think is) a pretty satisfying result.

    And here is a sample of the modules we used:
    - Fluency
    - TracyDebugger
    - FormBuilder
    - RepeaterMatrix
    - AdminRestrictBranch
    - FieldtypeOembed
    - PageRenameOptions
    - MarkupComponents
    - Login Magic Link: this is a new one allowing to login with a link sent to the user’s email (inspired by this thread). It’s almost ready to share but I want to create a Process to have an overview of the generated links first

    1661518333_Screenshot2024-02-20at16_48_38.thumb.png.b7032f400fc3eea3865acce40728fff1.png

    1894344814_Screenshot2024-02-20at16_48_50.thumb.png.bf2e82132720317bdf78573d31a96c99.png

    812134331_Screenshot2024-02-20at16_48_59.thumb.png.a96cebe83c2c5b1001d8a09b23c652e3.png


    Enjoy!

    • Like 12
  10. I’ve never tried myself, but I assume you could achieve this using the “PagefileSecure” option in your template holding the files:

    1589513953_Screenshot2024-02-03at10_30_57.thumb.png.d064888f8893d01b00af430ebb5659d3.png

    Which would then allow you to hook into ProcessPageView::sendFile:

    $wire->addHookAfter("ProcessPageView::sendFile", function(HookEvent $event) {
    	/** @var Page $page */
    	$page = $event->arguments("page");
    	if($page->template == 'admin') return;
    	/** @var Pagefile $file */
    	$file = $page->filesManager()->getFile($event->arguments("basename"));
    	$page->of(false);
    	$count = (int) $file->filedata("downloadsCount");
        $file->filedata("downloadsCount", ++$count);
    	$page->save();
    });

    And then later on retrieve and display the downloads count.

    • Like 3
  11. If this content is not editable you could use FieldtypeCache (a core module) and FieldtypeRuntimeOnly. Create a FieldtypeCache field “sms” and select the fields you would like to combine under the “Details” tab. Create a FieldtypeRuntimeOnly field “preview_sms_content” (instead of your textarea) and edit the associated php file to have something like:

    if(empty($page->sms)) {
    	return "No content yet";
    } else {
    	$sms = implode(" ", $page->sms);
    	return "$sms (" . strlen($sms) . " characters)";
    }

    Add both fields to your repeater, save and you should see the SMS preview.

    Edit: actually you could skip the FieldtypeCache and just concatenate your strings in the FieldtypeRuntimeOnly php file...

    • Like 1
  12. But then you lose the ability to contextually edit the field or set the column width, though I agree InputfieldTextTags has a great UX and I try to use it whenever I can. There could be an equivalent to InputfieldPageAutocomplete for fields but I always feel it’s way slower than text tags...

  13. If your layout remains like this (3 per row) with maybe one breakpoint for mobile you could do something like this:

    <div class="team">
    	<div class="team_member">
    		<img class="team_image" src="/path/to/image" onclick="this.nextElementSibling.classList.toggle('team_about--opened')" />
        	<div class="team_about">
            	<!-- content -->
        	</div>
    	</div>
      	<div class="team_member">
    		<!-- repeat -->
    	</div>
      	<div class="team_member">
    		<!-- repeat -->
    	</div>
    </div>

    CSS (non-tested, overly simplified and missing things, like accounting for the gap in the grid...):

    .team {
    	display: grid;
    	grid-template-columns: repeat(3, 1fr);
    }
    
    .team_about {
    	width: 300%;
    	height: 0;
    	position: relative;
    	background-color: blue;
    }
    
    .team_about:nth-child(3n + 2) { /* every 2nd element per row */
    	left: -33.333%;
    }
    
    .team_about:nth-child(3n + 3) { /* every 3rd element per row */
    	left: -66.666%;
    }
    
    .team_about--opened {
    	height: auto;
    }
    
    .team_about::before { /* arrow */
    	content: "";
    	display: block;
    	margin-left: -10px;
    	position: absolute;
    	bottom: 100%;
    	left: 25%;
    	border: 10px solid transparent;
    	border-bottom-color: blue;
    }
    
    .team_about:nth-child(3n + 2)::before {
    	left: 50%;
    }
    
    .team_about:nth-child(3n + 3)::before {
    	left: 75%;
    }

    Basically the idea is to have the dropdown within the team member’s div so that when you open it it adds to the parent’s height (thus pushing the next line) and then you account for the offset by using position: relative. This is ok for such case where the layout is well defined but it doesn’t “scale” well if you decide to have 4/5/... members per row. However this is me not using any preprocessor but since I know you’re using Less (or Sass?) maybe you could easily write a function generating the necessary CSS based on the number per row.

    (in my example, JS is necessary to add the "team_about--opened" class, but you could do something with pure HTML/CSS using the amazing details tag)

    • Like 1
  14. Ah, good point. I’d say it actually makes sense to show tagged system fields in their respective “folders” (looking back I might have picked the wrong name...) as well since it’s something you’re willingly doing, right?

    I’m going to add this and the option mentioned before, post the update here first so you can have a look and if it’s good this way then I’ll push the update.

×
×
  • Create New...