@awesomeness-js/server 1.1.11 → 1.1.13

package/tests/fixtures/site-and-components/components/app/pwa/_.css

@@ -0,0 +1,305 @@
+/* =========================================================
+   AWESOMENESS PWA – base layout + nav + menus
+   ========================================================= */
+
+/* (optional) if you want predictable sizing everywhere */
+.awesomeness-app-pwa,
+.awesomeness-app-pwa * {
+	box-sizing: border-box;
+}
+
+/* -------------------------
+   MAIN CONTENT AREA
+   ------------------------- */
+.awesomeness-app-pwa-main {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+
+	width: 100%;
+	min-height: 100%;
+
+	overflow-x: hidden;
+	overflow: auto;
+
+	padding-top: 65px; /* account for fixed top nav bar */
+	padding-bottom: 65px; /* account for fixed bottom nav bar */
+
+	z-index: 0;
+}
+
+
+/* -------------------------
+   NAV BARS (fixed)
+   ------------------------- */
+.awesomeness-app-pwa-top-navBar,
+.awesomeness-app-pwa-bottom-navBar {
+	position: fixed;
+	left: 0;
+	right: 0;
+
+	height: 65px;
+	z-index: 2;
+}
+
+.awesomeness-app-pwa-top-navBar {
+	top: 0;
+
+	/* layout */
+	display: flex;
+	align-items: center;
+
+	/* keep true 65px height; avoid vertical padding */
+	padding: 0 12px;
+	min-width: 0;
+}
+
+.awesomeness-app-pwa-bottom-navBar {
+	bottom: 0;
+}
+
+
+/* -------------------------
+   LEFT / RIGHT MENUS
+   ------------------------- */
+.awesomeness-app-pwa-left-menu,
+.awesomeness-app-pwa-right-menu {
+	position: fixed;
+	top: 0;
+	bottom: 0;
+
+	width: 300px; /* use width instead of min-width for predictable translate */
+	max-width: 90vw;
+
+	transition: transform 200ms ease;
+	will-change: transform;
+}
+
+/* LEFT MENU */
+.awesomeness-app-pwa-left-menu {
+	left: 0;
+	z-index: 1;
+	transform: translate3d(-100%, 0, 0);
+}
+
+.awesomeness-app-pwa-left-menu.open {
+	transform: translate3d(0, 0, 0);
+}
+
+/* RIGHT MENU */
+.awesomeness-app-pwa-right-menu {
+	right: 0;
+	z-index: 3;
+	transform: translate3d(100%, 0, 0);
+}
+
+.awesomeness-app-pwa-right-menu.open {
+	transform: translate3d(0, 0, 0);
+}
+
+.awesomeness-app-pwa-left-menu.awesomeness-app-pwa-under-navBar,
+.awesomeness-app-pwa-right-menu.awesomeness-app-pwa-under-navBar {
+	top: 65px;
+}
+
+.awesomeness-app-pwa-left-menu.open {
+	left: 0;
+}
+
+.awesomeness-app-pwa-right-menu.open {
+	right: 0;
+}
+
+/* -------------------------
+   SUB NAV ITEMS (bottom + top right clones)
+   ------------------------- */
+.awesomeness-app-pwa-sub-nav-item {
+	cursor: pointer;
+	text-align: center;
+	padding: 5px 5px 5px 0px;
+    border-bottom: solid 2px transparent;
+}
+
+.awesomeness-app-pwa-top-navBar .awesomeness-app-pwa-sub-nav-item{
+	height: 65px;
+}
+
+.awesomeness-app-pwa-sub-nav-item-ico {
+	font-size: 1.2em;
+	padding-bottom: 5px;
+}
+
+.awesomeness-app-pwa-sub-nav-item-name {
+	font-size: 0.9em;
+}
+
+.app-size-p .awesomeness-app-pwa-sub-nav-item-name {
+	font-size: 0.8em;
+}
+
+.app-size-p .awesomeness-app-pwa-sub-nav-item {
+	padding: 0px;
+}
+
+/* -------------------------
+   TOP NAV CONTENT
+   Order: profile | logo | search (flex) | right group | menu
+   ------------------------- */
+
+/* profile pic (left) */
+.awesomeness-app-pwa-profile-pic {
+	flex: 0 0 auto;
+
+	width: 45px;
+	height: 45px;
+	border-radius: 9999px;
+
+	text-align: center;
+	line-height: 45px;
+
+	margin-left: 10px; /* keep your offset */
+
+	background-position: center;
+	background-size: cover;
+
+	cursor: pointer;
+
+}
+
+/* logo next to profile */
+.awesomeness-app-pwa-logo {
+	flex: 0 0 auto;
+	display: flex;
+	align-items: center;
+
+	cursor: pointer;
+
+	min-width: 0;
+}
+
+.awesomeness-app-pwa-logo:hover{
+    color: var(--hover-color);
+}
+
+
+/* search takes ALL remaining space */
+.awesomeness-app-pwa-search-area {
+	flex: 1 1 auto;
+	min-width: 0;
+
+	display: flex;
+	align-items: center;
+
+	/* your requirement: items inside search stay to the right */
+	justify-content: flex-end;
+
+	overflow: hidden;
+	white-space: nowrap;
+
+	padding: 0 20px;
+}
+
+.app-size-p .awesomeness-app-pwa-search-area{
+	padding: 0px;
+}
+
+/* right group should only be as wide as its content (no hover slab) */
+.awesomeness-app-pwa-top-navBar-right {
+	flex: 0 0 auto;
+	width: auto;
+	min-width: 0;
+
+	display: flex;
+	justify-content: flex-end;
+	gap: 20px;
+}
+
+.app-size-t .awesomeness-app-pwa-top-navBar-right{
+	gap: 10px;
+}
+
+/* menu button pinned to far right naturally (since search is flex:1) */
+.awesomeness-app-pwa-menu-button {
+	flex: 0 0 auto;
+
+	width: 40px;
+	height: 40px;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	cursor: pointer;
+
+	/* keep the icon centered vertically in the fixed-height bar */
+	padding: 0;
+	font-size: 1.2em;
+}
+
+.awesomeness-app-pwa-search-icon{
+	cursor: pointer;
+	font-size: 1.2em;
+}
+
+.awesomeness-app-pwa-click-to-close {
+	cursor: pointer;
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 2;
+}
+
+.app-size-xl .awesomeness-app-pwa-top-navBar-right .awesomeness-app-pwa-sub-nav-item,
+.app-size-d .awesomeness-app-pwa-top-navBar-right .awesomeness-app-pwa-sub-nav-item {
+  display: flex;
+  align-items: center;
+  text-align: left;
+}
+
+.app-size-xl .awesomeness-app-pwa-top-navBar-right .awesomeness-app-pwa-sub-nav-item-ico,
+.app-size-d .awesomeness-app-pwa-top-navBar-right .awesomeness-app-pwa-sub-nav-item-ico {
+  padding-bottom: 0;
+  padding-right: 5px;
+}
+
+.awesomeness-app-pwa-search-input-container {
+	position: relative;
+
+	width: 100%;
+	max-width: 500px;
+	
+	margin: 0 auto;
+
+	padding: 7px 50px 7px 40px;
+	border-radius: 50px;
+}
+
+/* shared icon centering */
+.awesomeness-app-pwa-search-icon{
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	display: flex;
+	align-items: center;
+}
+
+/* left icon */
+.awesomeness-app-pwa-search-icon{
+	left: 10px;
+}
+
+
+.awesomeness-app-pwa-bottomNavUse-names .awesomeness-app-pwa-sub-nav-item-ico,
+.awesomeness-app-pwa-topNavUse-names .awesomeness-app-pwa-sub-nav-item-ico {
+	display: none;
+}
+
+.awesomeness-app-pwa-bottomNavUse-icons .awesomeness-app-pwa-sub-nav-item-name,
+.awesomeness-app-pwa-topNavUse-icons .awesomeness-app-pwa-sub-nav-item-name {
+	display: none;
+}

package/tests/fixtures/site-and-components/components/app/pwa/index.js

@@ -0,0 +1,235 @@
+import ui from '#ui';
+
+export default ({
+	replaceApp = true,
+	navItems = [],
+	topNavUse = 'icons', // or 'names' or 'both'
+	bottomNavUse = 'icons', // or 'names' or 'both'
+	logo = 'Awesomeness PWA',
+	profileImageURL = null,
+	logoURL = '/',
+	searchURL = '/search',
+	profileURL = '/profile',
+	beforeSearch = null,
+} = {}) => {
+
+	let $app = ui.app.vanilla({ replaceApp });
+	
+	const THEME = ui.theme();
+
+	const $topNavBar = $(`<div class="
+		awesomeness-app-pwa-top-navBar 
+		${THEME.menu.base}
+		${THEME.text.secondary} 
+	"></div>`)
+		.appendTo($app);
+
+	
+	const $leftMenu = $(`<div class="awesomeness-app-pwa-left-menu ${THEME.menu.base}"></div>`).appendTo($app);
+	const $rightMenu = $(`<div class="awesomeness-app-pwa-right-menu ${THEME.menu.base}"></div>`).appendTo($app);
+	
+	const $bottomNavBar = $(`<div class="
+		hidden-xl hidden-d 
+		awesomeness-app-pwa-bottom-navBar 
+		${THEME.menu.base} 
+		${THEME.text.secondary}
+	"></div>`)
+		.appendTo($app);
+	
+	if(THEME.menuBorderColor){
+
+		$topNavBar.addClass(THEME.border.color).css({ 'border-bottom': `1px solid` });
+		$bottomNavBar.addClass(THEME.border.color).css({ 'border-top': `1px solid` });
+		$leftMenu.addClass(THEME.border.color).css({ 'border-right': `1px solid` });
+		$rightMenu.addClass(THEME.border.color).css({ 'border-left': `1px solid` });
+	
+	}
+		
+	const $link = ui.link({
+		link: logoURL,
+		beforeOpen: async () => {
+
+			closeNav($leftMenu);
+			closeNav($rightMenu);
+		
+			if(beforeSearch){
+
+				return await beforeSearch();
+			
+			}
+
+			return null;
+
+		}
+	}).addClass(`
+		awesomeness-app-pwa-logo
+		${THEME.text.secondary} 
+		${THEME.text.accent}--hover
+	`);
+
+	const $logo = $(`<div class="">${logo}</div>`).appendTo($link);
+		
+	$link.appendTo($topNavBar);
+
+	const $searchArea = $(`<div class="awesomeness-app-pwa-search-area"></div>`).appendTo($topNavBar);
+	const $topNavBarRight = $(`<div class="hidden-p hidden-t awesomeness-app-pwa-top-navBar-right"></div>`).appendTo($topNavBar);
+
+
+
+	if(searchURL){
+
+
+		const $link = ui.link({
+			link: searchURL,
+			beforeOpen: async () => {
+
+				if(beforeSearch){
+
+					return await beforeSearch();
+				
+				}
+
+				closeNav($leftMenu);
+				closeNav($rightMenu);
+			
+			}
+		});
+
+		const $searchIcon = $(`
+		<div class="
+		awesomeness-app-pwa-menu-button 
+		awesomeness-app-pwa-sub-nav-item
+		${THEME.text.accent}--hover
+		color-${THEME.accent.color}--hover
+		border-${THEME.accent.color}--hover
+		mlr20
+		mr10-p
+		ml0-p
+		">
+			<i class="ico-search2"></i>
+		</div>`).appendTo($link);
+
+		$link.appendTo($topNavBar);
+
+
+	}
+
+	if(profileURL){
+
+		const $link = ui.link({
+			link: profileURL
+		});
+
+		$link.appendTo($topNavBar);
+
+		const $profilePic = $(`<div class="awesomeness-app-pwa-profile-pic ${THEME.surface.elevated}"></div>`)
+			.appendTo($link);
+
+		if(profileImageURL){
+
+			$profilePic
+				.css({
+					'background-image': `url(${profileImageURL})`
+				});
+
+		} else {
+
+			$profilePic
+				.css({
+					'background-image': `url(https://api.dicebear.com/5.x/miniavs/svg?backgroundColor=4a46e0&seed=${Math.random()})`,
+				});
+
+		}
+
+	}
+
+	
+
+	const $clickToClose = $(`<div class="awesomeness-app-pwa-click-to-close"></div>`)
+		.hide()
+		.css({
+			opacity: 0.7,
+		})
+		.appendTo($app);
+
+	$clickToClose.click(()=>{
+
+		closeNav($leftMenu);
+		closeNav($rightMenu);
+	
+	});
+
+	const $main = $(`<div id="main" class="awesomeness-app-pwa-main ${THEME.app.fg} ${THEME.app.bg}"></div>`).appendTo($app);
+	
+	if(navItems.length > 0){
+		
+		const $grid = $(`<div class="grid-${navItems.length} height-65"></div>`)
+			.appendTo($bottomNavBar);
+
+		navItems.forEach((item) => {
+
+			const $link = ui.link({
+				link: item.url,
+			}).appendTo($grid)
+				.addClass(`flex justify-center align-center`);
+
+			const $item = $(`<div class="
+				awesomeness-app-pwa-sub-nav-item
+				${THEME.text.accent}--hover
+				color-${THEME.accent.color}--hover
+				border-${THEME.accent.color}--hover
+				"></div>`)
+				.appendTo($link);
+		
+			if(item.ico){
+
+				$(`<div class="awesomeness-app-pwa-sub-nav-item-ico"><i class="ico-${item.ico}"></i></div>`)
+					.appendTo($item);
+
+			}
+
+			if(item.emoji){
+
+				$(`<div class="awesomeness-app-pwa-sub-nav-item-ico">${item.emoji}</div>`)
+					.appendTo($item);
+
+			}
+
+			if(item.name){
+
+				$(`<div class="awesomeness-app-pwa-sub-nav-item-name">${item.name}</div>`)
+					.appendTo($item);
+			
+			}
+
+			$link.clone(true).addClass(`awesomeness-app-pwa-topNavUse-${topNavUse}`).appendTo($topNavBarRight);
+
+			$link.addClass(`awesomeness-app-pwa-bottomNavUse-${bottomNavUse}`);
+
+		});
+
+	}
+	
+	let navOpen = false;
+
+	function openNav($nav){
+
+		$clickToClose.show();
+
+		$nav.addClass('open');
+		navOpen = true;
+	
+	}
+
+	function closeNav($nav){
+
+		$nav.removeClass('open');
+		navOpen = false;
+
+		$clickToClose.hide();
+
+	}
+
+	return $app;
+
+};

package/tests/fixtures/site-and-components/components/app/pwa/updateProfileImage.js

@@ -0,0 +1,7 @@
+export default function updateProfileImage(image){
+
+	$(`.awesomeness-app-pwa-profile-pic`).css({
+		'background-image': `url(${image})`
+	});
+
+}

package/tests/fixtures/site-and-components/components/app/shapes.css

@@ -0,0 +1,3 @@
+.square { aspect-ratio: 1 / 1; }
+.rectangle { aspect-ratio: 3 / 2; }
+.rectangle-tall { aspect-ratio: 3 / 4; }

package/tests/fixtures/site-and-components/components/app/simple/_.css

@@ -0,0 +1,151 @@
+/* ================================
+   Awesomeness App Simple - NAV ONLY
+   ================================ */
+
+.awesomeness-app-simple-main {
+    opacity: 1;
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    min-height: 100%;
+  	margin: 0 auto;
+	padding-top: 65px; /* account for fixed nav bar */
+}
+
+.awesomeness-app-simple-main.withFullScreenHero {
+	padding-top: 0px; /* account for fixed nav bar */
+}
+
+.awesomeness-app-simple-navBar {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	width: 100%;
+	height: 65px;
+	z-index: 5;
+}
+
+/* NEW: interior wrapper */
+.awesomeness-app-simple-navBar-interior{
+	margin: 0 auto;
+	height: 65px;
+	padding: 0 16px;
+
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.awesomeness-app-simple-logo{
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	white-space: nowrap;
+	user-select: none;
+}
+
+.awesomeness-app-simple-top-navItems{
+	margin-left: auto;
+	display: flex;
+	align-items: center;
+	height: 100%;
+}
+
+.awesomeness-app-simple-nav-item{
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	height: 65px;
+	padding: 0 14px;
+	white-space: nowrap;
+	cursor: pointer;
+}
+
+/* Menu button */
+.awesomeness-app-simple-menu-button{
+	margin-left: auto;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	height: 65px;
+	padding: 0 12px;
+	cursor: pointer;
+	-webkit-tap-highlight-color: transparent;
+	font-size: 1.2em;
+	cursor: pointer;
+}
+
+/* Backdrop (z-index 2) */
+.awesomeness-app-simple-menu-backdrop{
+	position: fixed;
+	inset: 0;
+	z-index: 2;
+	}
+
+/* Phone slide-down menu (z-index 3) */
+.awesomeness-app-simple-phone-menu{
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	z-index: 4;
+
+	transform: translate3d(0, -100%, 0);
+	transition: transform 220ms ease;
+
+	padding-top: 65px;
+	padding-bottom: 30px;
+}
+
+/* open state */
+.awesomeness-app-simple-phone-menu.is-open{
+	transform: translate3d(0, 0, 0);
+}
+
+/* Menu rows */
+.awesomeness-app-simple-phone-menu a,
+.awesomeness-app-simple-phone-menu .awesomeness-app-simple-nav-item{
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+	width: 100%;
+	height: 56px;
+	padding: 0 16px;
+}
+
+
+.awesomeness-app-simple-nav-item span {
+	position: relative;
+	display: inline-block;
+	padding-bottom: 4px;
+}
+
+.awesomeness-app-simple-nav-item span::after {
+	content: "";
+	position: absolute;
+	left: 0;
+	bottom: 0;
+
+	height: 2px;
+	width: 100%;
+
+	background: currentColor;
+
+	transform: scaleX(0);
+	transform-origin: right center;
+
+	transition: transform 420ms ease !important;
+}
+
+.awesomeness-app-simple-nav-item:hover span::after {
+	transform: scaleX(1);
+	transform-origin: left center;
+}
+
+.awesomeness-app-simple-nav-item span::after {
+	transition: transform 420ms cubic-bezier(.2,.8,.2,1);
+}