brianpooe/ps-assessment
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: responsive design

Browse source
This commit is contained in:
Brian Pooe 2023-10-10 21:19:02 +02:00
parent 1ea88fa6c3
commit b63b0eb735
4 changed files with 121 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.prettierrc
View file

@ -1,5 +1,8 @@
{
"singleQuote": false,
"tabWidth": 4,
"semi": true
"semi": true,
"plugins": [
"prettier-plugin-foo"
]
}

92
package-lock.json generated
View file

@ -33,7 +33,8 @@
"jest": "^29.4.1",
"jest-environment-jsdom": "^29.4.1",
"nx": "16.10.0",
"prettier": "^2.6.2",
"prettier": "^2.8.8",
"prettier-plugin-tailwindcss": "^0.5.5",
"swc-loader": "0.1.15",
"ts-jest": "^29.1.0",
"ts-node": "10.9.1",
@ -4954,23 +4955,6 @@
"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
}
},
"node_modules/babel-plugin-macros": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
"integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
"dev": true,
"optional": true,
"peer": true,
"dependencies": {
"@babel/runtime": "^7.12.5",
"cosmiconfig": "^7.0.0",
"resolve": "^1.19.0"
},
"engines": {
"node": ">=10",
"npm": ">=6"
}
},
"node_modules/babel-plugin-polyfill-corejs2": {
"version": "0.4.5",
"resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.5.tgz",
@ -11600,6 +11584,78 @@
"url": "https://github.com/prettier/prettier?sponsor=1"
}
},
"node_modules/prettier-plugin-tailwindcss": {
"version": "0.5.5",
"resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.5.tgz",
"integrity": "sha512-voy0CjWv/CM8yeaduv5ZwovovpTGMR5LbzlhGF+LtEvMJt9wBeVTVnW781hL38R/RcDXCJwN2rolsgr94B/n0Q==",
"dev": true,
"engines": {
"node": ">=14.21.3"
},
"peerDependencies": {
"@ianvs/prettier-plugin-sort-imports": "*",
"@prettier/plugin-pug": "*",
"@shopify/prettier-plugin-liquid": "*",
"@shufo/prettier-plugin-blade": "*",
"@trivago/prettier-plugin-sort-imports": "*",
"prettier": "^3.0",
"prettier-plugin-astro": "*",
"prettier-plugin-css-order": "*",
"prettier-plugin-import-sort": "*",
"prettier-plugin-jsdoc": "*",
"prettier-plugin-organize-attributes": "*",
"prettier-plugin-organize-imports": "*",
"prettier-plugin-style-order": "*",
"prettier-plugin-svelte": "*"
},
"peerDependenciesMeta": {
"@ianvs/prettier-plugin-sort-imports": {
"optional": true
},
"@prettier/plugin-pug": {
"optional": true
},
"@shopify/prettier-plugin-liquid": {
"optional": true
},
"@shufo/prettier-plugin-blade": {
"optional": true
},
"@trivago/prettier-plugin-sort-imports": {
"optional": true
},
"prettier-plugin-astro": {
"optional": true
},
"prettier-plugin-css-order": {
"optional": true
},
"prettier-plugin-import-sort": {
"optional": true
},
"prettier-plugin-jsdoc": {
"optional": true
},
"prettier-plugin-marko": {
"optional": true
},
"prettier-plugin-organize-attributes": {
"optional": true
},
"prettier-plugin-organize-imports": {
"optional": true
},
"prettier-plugin-style-order": {
"optional": true
},
"prettier-plugin-svelte": {
"optional": true
},
"prettier-plugin-twig-melody": {
"optional": true
}
}
},
"node_modules/pretty-format": {
"version": "29.7.0",
"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz",

3
package.json
View file

@ -27,7 +27,8 @@
"jest": "^29.4.1",
"jest-environment-jsdom": "^29.4.1",
"nx": "16.10.0",
"prettier": "^2.6.2",
"prettier": "^2.8.8",
"prettier-plugin-tailwindcss": "^0.5.5",
"swc-loader": "0.1.15",
"ts-jest": "^29.1.0",
"ts-node": "10.9.1",

113
part-1-html-css/src/app/app.element.ts
View file

@ -11,20 +11,13 @@ export class AppElement extends HTMLElement {
<div class="absolute left-0 flex-shrink-0 lg:static">
<a href="#">
<span class="sr-only">PaySpace</span>
<img class="h-8 w-auto" src="https://www.payspace.com/wp-content/uploads/2020/05/payspace-logo-new.png" alt="PaySpace">
<img class="hidden h-8 w-auto sm:block" src="https://www.payspace.com/wp-content/uploads/2020/05/payspace-logo-new.png" alt="PaySpace">
<img class="h-8 w-auto sm:hidden" src="https://www.payspace.com/wp-content/uploads/2018/03/PS-FAVICON-NEW-2017.png" alt="PaySpace">
</a>
</div>
<!-- Right section on desktop -->
<div class="hidden lg:ml-4 lg:flex lg:items-center lg:pr-0.5">
<button type="button" class="relative flex-shrink-0 rounded-full p-1 text-indigo-200 hover:bg-white hover:bg-opacity-10 hover:text-white focus:outline-none focus:ring-2 focus:ring-white">
<span class="absolute -inset-1.5"></span>
<span class="sr-only">View notifications</span>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
</svg>
</button>
<!-- Profile dropdown -->
<div class="relative ml-4 flex-shrink-0">
<div>
@ -35,20 +28,9 @@ export class AppElement extends HTMLElement {
</button>
</div>
<!--
Dropdown menu, show/hide based on menu state.
Entering: ""
From: ""
To: ""
Leaving: "transition ease-in duration-75"
From: "transform opacity-100 scale-100"
To: "transform opacity-0 scale-95"
-->
<!-- Dropdown menu -->
<div id="openUserMenu" style="display: none;" class="absolute -right-2 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
<!-- Active: "bg-gray-100", Not Active: "" -->
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
<!-- Active: "bg-gray-100", Not Active: "" -->
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
</div>
</div>
@ -72,30 +54,30 @@ export class AppElement extends HTMLElement {
<!-- Menu button -->
<div class="absolute right-0 flex-shrink-0 lg:hidden">
<!-- Mobile menu button -->
<button type="button" class="relative inline-flex items-center justify-center rounded-md bg-transparent p-2 text-indigo-200 hover:bg-white hover:bg-opacity-10 hover:text-white focus:outline-none focus:ring-2 focus:ring-white" aria-expanded="false">
<button id="open-main-menu" type="button" class="relative inline-flex items-center justify-center rounded-md bg-transparent p-2 text-indigo-200 hover:bg-white hover:bg-opacity-10 hover:text-white focus:outline-none focus:ring-2 focus:ring-white" aria-expanded="false">
<span class="absolute -inset-0.5"></span>
<span class="sr-only">Open main menu</span>
<!-- Menu open: "hidden", Menu closed: "block" -->
<svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<svg id="svg-open" class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<!-- Menu open: "block", Menu closed: "hidden" -->
<svg class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<svg id="svg-close" class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<!-- Navigation -->
<div class="hidden border-t border-white border-opacity-20 py-5 lg:block">
<div class="grid grid-cols-3 items-center gap-8">
<div class="col-span-2">
<nav class="flex space-x-4">
<!-- Current: "text-white", Default: "text-indigo-100" -->
<a href="#" class="text-white rounded-md bg-white bg-opacity-0 px-3 py-2 text-sm font-medium hover:bg-opacity-10" aria-current="page">Home</a>
<a href="#" class="text-indigo-100 rounded-md bg-white bg-opacity-0 px-3 py-2 text-sm font-medium hover:bg-opacity-10">Profile</a>
<a href="#" class="text-indigo-100 rounded-md bg-white bg-opacity-0 px-3 py-2 text-sm font-medium hover:bg-opacity-10">Resources</a>
<a href="#" class="text-indigo-100 rounded-md bg-white bg-opacity-0 px-3 py-2 text-sm font-medium hover:bg-opacity-10">Company Directory</a>
<a href="#" class="text-indigo-100 rounded-md bg-white bg-opacity-0 px-3 py-2 text-sm font-medium hover:bg-opacity-10">Openings</a>
<a href="#" class="text-indigo-100 rounded-md bg-white bg-opacity-0 px-3 py-2 text-sm font-medium hover:bg-opacity-10">Payspace</a>
<a href="#" class="text-indigo-100 rounded-md bg-white bg-opacity-0 px-3 py-2 text-sm font-medium hover:bg-opacity-10">Hire</a>
<a href="#" class="text-indigo-100 rounded-md bg-white bg-opacity-0 px-3 py-2 text-sm font-medium hover:bg-opacity-10">About Us</a>
<a href="#" class="text-indigo-100 rounded-md bg-white bg-opacity-0 px-3 py-2 text-sm font-medium hover:bg-opacity-10">Contact Us</a>
</nav>
</div>
<div>
@ -115,41 +97,20 @@ export class AppElement extends HTMLElement {
</div>
</div>
<!-- Mobile menu, show/hide based on mobile menu state. -->
<div class="lg:hidden">
<!--
Mobile menu overlay, show/hide based on mobile menu state.
Entering: "duration-150 ease-out"
From: "opacity-0"
To: "opacity-100"
Leaving: "duration-150 ease-in"
From: "opacity-100"
To: "opacity-0"
-->
<!-- Mobile menu -->
<div id="openMobileUserMenu" style="display: none;" class="lg:hidden">
<div class="fixed inset-0 z-20 bg-black bg-opacity-25" aria-hidden="true"></div>
<!--
Mobile menu, show/hide based on mobile menu state.
Entering: "duration-150 ease-out"
From: "opacity-0 scale-95"
To: "opacity-100 scale-100"
Leaving: "duration-150 ease-in"
From: "opacity-100 scale-100"
To: "opacity-0 scale-95"
-->
<div class="absolute inset-x-0 top-0 z-30 mx-auto w-full max-w-3xl origin-top transform p-2 transition">
<div class="divide-y divide-gray-200 rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
<div class="pb-2 pt-3">
<div class="flex items-center justify-between px-4">
<div>
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" alt="Your Company">
<img class="h-8 w-auto" src="https://www.payspace.com/wp-content/uploads/2020/05/payspace-logo-new.png" alt="PaySpace">
</div>
<div class="-mr-2">
<button type="button" class="relative inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
<button id="close-main-menu" type="button" class="relative inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
<span class="absolute -inset-0.5"></span>
<span class="sr-only">Close menu</span>
<span class="sr-only">Close main menu</span>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
@ -158,31 +119,23 @@ export class AppElement extends HTMLElement {
</div>
<div class="mt-3 space-y-1 px-2">
<a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-900 hover:bg-gray-100 hover:text-gray-800">Home</a>
<a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-900 hover:bg-gray-100 hover:text-gray-800">Profile</a>
<a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-900 hover:bg-gray-100 hover:text-gray-800">Resources</a>
<a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-900 hover:bg-gray-100 hover:text-gray-800">Company Directory</a>
<a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-900 hover:bg-gray-100 hover:text-gray-800">Openings</a>
<a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-900 hover:bg-gray-100 hover:text-gray-800">PaySpace</a>
<a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-900 hover:bg-gray-100 hover:text-gray-800">Hire</a>
<a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-900 hover:bg-gray-100 hover:text-gray-800">About Us</a>
<a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-900 hover:bg-gray-100 hover:text-gray-800">Contact Us</a>
</div>
</div>
<div class="pb-2 pt-4">
<div class="flex items-center px-5">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
<img class="h-10 w-10 rounded-full" src="https://cdn.pixabay.com/photo/2013/07/13/10/07/man-156584_1280.png" alt="avatar">
</div>
<div class="ml-3 min-w-0 flex-1">
<div class="truncate text-base font-medium text-gray-800">Tom Cook</div>
<div class="truncate text-sm font-medium text-gray-500">tom@example.com</div>
<div class="truncate text-base font-medium text-gray-800">Brian Pooe</div>
<div class="truncate text-sm font-medium text-gray-500">brianpooe@example.com</div>
</div>
<button type="button" class="relative ml-auto flex-shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
<span class="absolute -inset-1.5"></span>
<span class="sr-only">View notifications</span>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
</svg>
</button>
</div>
<div class="mt-3 space-y-1 px-2">
<a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-900 hover:bg-gray-100 hover:text-gray-800">Your Profile</a>
<a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-900 hover:bg-gray-100 hover:text-gray-800">Settings</a>
<a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-900 hover:bg-gray-100 hover:text-gray-800">Sign out</a>
</div>
@ -202,7 +155,7 @@ export class AppElement extends HTMLElement {
<h2 class="sr-only" id="section-1-title">Section title</h2>
<div class="overflow-hidden rounded-lg bg-white shadow">
<div class="p-6">
<!-- Your content -->
<p class="text-gray-700">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore enim fugit itaque molestiae nobis odio quis reiciendis? Ad cum dignissimos eligendi et ipsam minima nulla omnis, possimus sunt, tempore ut!</span><span>A ad alias aliquid amet commodi cum eaque explicabo ipsum libero, numquam officiis quam reprehenderit sit ullam velit? Consequatur consequuntur fugit impedit ipsam itaque mollitia nemo quidem rem sapiente vero?</span><span>Ab animi aspernatur cum eveniet facere laborum libero maxime minus modi nemo, non pariatur quaerat rem repellat rerum sequi soluta, veniam! Asperiores debitis doloribus earum, magni natus quod recusandae saepe.</span><span>Amet aperiam aspernatur assumenda atque aut, beatae debitis distinctio dolorum ducimus est exercitationem fugiat hic illo iure mollitia obcaecati pariatur provident quae, quisquam recusandae repudiandae tempora tenetur velit vitae, voluptates!</span><span>A ab deserunt dicta doloribus dolorum ducimus eaque earum et maiores minima natus nostrum, numquam odit optio perferendis porro quae quas qui quis, quo recusandae repudiandae, temporibus ut voluptas voluptates.</span><span>Amet, at debitis doloribus ea eos esse fugiat inventore iste labore similique tempore ullam vitae voluptatem? Adipisci animi dolor eius iste omnis pariatur, perspiciatis quasi quia quidem repellendus, vel voluptatum?</p>
</div>
</div>
</section>
@ -214,7 +167,7 @@ export class AppElement extends HTMLElement {
<h2 class="sr-only" id="section-2-title">Section title</h2>
<div class="overflow-hidden rounded-lg bg-white shadow">
<div class="p-6">
<!-- Your content -->
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias doloremque ea impedit quae quaerat velit voluptate! Architecto incidunt nobis sunt vitae! Accusamus dolorem nam quasi qui repudiandae soluta suscipit, tempore!</span><span>Aut dolor, dolore error esse eum ex, expedita facere facilis molestias mollitia necessitatibus officia quaerat quibusdam suscipit tempora tenetur, ut. Ea officia temporibus totam. Assumenda error ipsa optio tenetur voluptatibus!. Assumenda error ipsa optio tenetur voluptatibus!. Assumenda error ipsa optio tenetur voluptatibus!</span></p>
</div>
</div>
</section>
@ -231,7 +184,12 @@ export class AppElement extends HTMLElement {
`;
const userMenuBtn: HTMLButtonElement = this.querySelector("#user-menu-button");
const openMainMenuBtn: HTMLButtonElement = this.querySelector("#open-main-menu");
const closeMainMenuBtn: HTMLButtonElement = this.querySelector("#close-main-menu");
const openUserMenu: HTMLDivElement = this.querySelector("#openUserMenu");
const openMobileUserMenu: HTMLDivElement = this.querySelector("#openMobileUserMenu");
const toggleOpenUserMenu = () => {
if (openUserMenu.style.display == "none") {
@ -241,7 +199,18 @@ export class AppElement extends HTMLElement {
openUserMenu.style.display = "none";
};
const openMainMenu = () => {
openMobileUserMenu.style.display = "block";
};
const closeMainMenu = () => {
openMobileUserMenu.style.display = "none";
};
userMenuBtn?.addEventListener("click", toggleOpenUserMenu);
openMainMenuBtn?.addEventListener("click", openMainMenu);
closeMainMenuBtn?.addEventListener("click", closeMainMenu);
}
}