Skip to content

v2.0.0 - Switched to CSP safe Alpine.js
Compare
Choose a tag to compare
@matteioo matteioo released this 22 Aug 15:27
· 14 commits to main since this release
v2.0.0
c3d5b87

Changes since last Release

Pages added

  • 404.html
  • suche.html
  • social-media.html Fully responsive and minimal - ideally linked via a QR-code.

Dependencies

  • Switched from Alpine.js to the csp safe version of Alpine.js

Other changes

  • Added dark mode support for all input elements such as <input>, <select>, <textarea>, etc.
  • Refined style variants of buttons and implemented button colors applied via css-classes: (green: btn-success, red: btn-error). Now labels and many other elements are not styled using css classes anymore. Such stylings are applied globally via the dev/tailwind.css file (and used from the compiled css file).
  • Added more complex overlay shadow for text above article-preview image with the help of Easing Gradients
  • Certain page names got updated to reflect the new paths on fet.at Further details: commit 1 and commit 2
  • Updated FontAwesome icons to the free ones #

Changed files since last Release

  • [build/fonts/*] Changed font files - replace files to reflect all changes
  • [build/form-test.html] Added form test page which displays the styling of all input field types (incl. buttons) as well as their disabled state.
  • [build/fotos.html] Added 'Ordner hinzufügen' button
  • [build/fotos-details.html] Added 'Album bearbeiten' button
  • [build/index.html]
    • Fixed spacing caused by alert box (see comment in the code for more info)
    • Increased font size of header-text (FACHSCHAFT ELEKTROTECHNIK) #
    • Removed tags from article previews and therefore preview container rewritten (also updated on other pages where article preview is used) # and #
  • [build/member.html] Added class sm:dark:bg-transparent to fix the issue with the wrong background color of the modal on screen-sizes where the modal is always shown as a sidebar #
  • [build/members.html] Added class sm:dark:bg-transparent to fix the issue with the wrong background color of the modal on screen-sizes where the modal is always shown as a sidebar #
  • [build/post.html]
    • Added hover effect on tags #
    • Added blurred background of location and date container #
  • [build/section.html] Added class sm:dark:bg-transparent to fix the issue with the wrong background color of the modal on screen-sizes where the modal is always shown as a sidebar #
  • [build/social-media.html] Added social media page
  • [build/suche.html]
    • Added text if there are no results from that search query #
    • switched <p> to <div> #
    • Switched z-index #
    • Fixed hidden avatar image on certain browsers (chrome) #
  • [build/404.html] Added new 404 page - including a svg displayed on that page

Changes due to CSP safe Alpine.js

<html>

The <html> is now switched to this tag on every page:

<html lang="de" x-data="bodyData" x-bind="documentRoot">

<body>

The <body> is now switched to this tag on every page:

<body x-bind="documentBody">

Search feature (Commit with changes: #)

Above the navBar (<!-- NAVBAR -->) is now the following search code snippet:

<!-- SEARCH-BAR -->
<div class="fixed w-screen h-screen z-30 backdrop-blur-sm backdrop-saturate-50"
	 x-show="showSearch"
	 x-cloak
	 x-transition:enter="transition ease-out duration-300"
	 x-transition:enter-start="transform backdrop-blur-none backdrop-saturate-100"
	 x-transition:enter-end="transform backdrop-blur-sm backdrop-saturate-50"
	 x-transition:leave="transition ease-in duration-150"
	 x-transition:leave-start="transform backdrop-blur-sm backdrop-saturate-50"
	 x-transition:leave-end="transform backdrop-blur-none backdrop-saturate-100"
>
	<form action="suche.html" @click.outside="closeSearch" class="flex items-center opacity-90 gap-x-4 mt-[33vh] sm:max-w-md lg:max-w-lg xl:max-w-xl mx-4 sm:mx-auto py-2 px-4 shadow-lg dark:shadow-none bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg dark:border-2 dark:border-gray-700"
		  x-show="showSearch"
		  x-transition:enter="transition transform ease-out duration-300"
		  x-transition:enter-start="scale-0 opacity-0"
		  x-transition:enter-end="scale-100 opacity-90"
		  x-transition:leave="transition transform ease-in duration-150"
		  x-transition:leave-start="scale-100 opacity-90"
		  x-transition:leave-end="scale-0 opacity-0"
	>
		<input class="flex-grow bg-inherit text-inherit h-10 p-0 border-0 focus:outline-none focus:border-transparent focus:ring-0" type="search" name="search" placeholder="Nach Person, Artikel oder Fotoalbum suchen...">
		<button type="submit" class="flex-none">
			<i class="fa-solid fa-magnifying-glass text-gray-500 dark:text-gray-600"></i>
		</button>
	</form>
</div>

Note

The search bar is currently placed on each page except the search results page, as there is already a search bar.

Theme switcher

Inside the navBar is now a theme switcher which needs two additional containers inside the navBar. This is the same for the navBar in admin pages.

NavBar

The navBar got updated #.

Modal

Changes in the modal can be viewed here. This is the same for the modal on other pages.

Full Changelog: v1.1.0...v2.0.0

Assets 2
Loading