diff --git a/package.json b/package.json index 13cc69e..13aa1f1 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,11 @@ { - "version": "1.1.3", + "version": "1.1.4", "author": "michelada.io", "name": "@micheladaio/sips-and-bits.css", "scripts": { "start": "webpack serve --mode=development --open", "build": "export NODE_ENV=production && webpack", - "preppublish": "postcss ./src/styles/index.css --dir dist/", + "preppublish": "rm -rf ./dist/js && postcss ./src/styles/index.css --dir dist/", "postpreppublish": "mkdir ./dist/js && cp -R ./src/js/controllers ./dist/js/controllers", "upload": "npm publish --access public" }, diff --git a/site/assets/img/avatar.png b/site/assets/img/avatar.png new file mode 100644 index 0000000..9676278 Binary files /dev/null and b/site/assets/img/avatar.png differ diff --git a/site/index.html b/site/index.html index 950fd27..5127bf8 100644 --- a/site/index.html +++ b/site/index.html @@ -140,13 +140,13 @@

H4 ITC Avant Garde Gothic - Bold 20px

Lists

Simple list

-

with title / subtitle

-
+
+
+
#C1DBFC
+
blue-lavender
+
@@ -254,6 +259,11 @@

Color palette

#A5B1B8
gray-lighter
+
+
+
#D2D5DA
+
gray-silver
+
#E6EDF0
@@ -286,6 +296,35 @@

Color palette

+ + + fullcalendar + + +
+
+
+
#434884
+
fullcalendar-event-1
+
+
+
+
#5C62B2
+
fullcalendar-event-2
+
+
+
+
#6D73CB
+
fullcalendar-event-3
+
+
+
+
#848CF0
+
fullcalendar-event-4
+
+
+ + 

@@ -371,7 +410,7 @@ 
Tabs
@@ -1455,53 +1494,125 @@

Table Collapsable Mobile

NavBar

- - +
+ + 

-    
-    <nav class="w-full bg-dark">
-      <div class="navbar-container h-14 md:h-20">
-          <div class="navbar-logo-container">
-              <a class="block h-full" href="/">
-              <img class="navbar-logo" src="assets/img/logo.svg">
-              </a>
-          </div>
-        <div class="navbar-links-section" data-controller="navbar">
-          <div data-navbar-target="linksContainer" class="navbar-links-container bg-dark hidden flex md:flex">
-              <a class="navbar-link" href="/">
-                  La Barra
-              </a>
-              <a class="navbar-link" href="/">
-                  Team directory
-              </a>       
-              <a class="navbar-link" href="/">
-                  PTOs
-              </a>
-          </div>
-          <div class="user-picture flex items-center justify-center" data-action="click->navbar#dropdownToggle">
-            <img alt="Moises Benjamin Lezama" class="navbar-user-icon mx-3" src="https://lh3.googleusercontent.com/a/AATXAJzLOQMMjzDpc_twXpxAdPnzfZ46QBEipasMeHR5=s96-c">
-            <div data-navbar-target="dropdownTrigger" class="navbar-close-dropdown hidden flex">
-              <img class="scale-100" src="assets/icon-close-5cfafe7d2bd68790e97fbc21382e2f449c8d9a0a4014bb127a5d3d14b5ee08a5.svg">
-            </div>
-          </div>
-          <div data-navbar-target="dropdownElement" class="navbar-dropdown hidden flex">
-              <a class="navbar-dropdown-link" href="/">
-                  <img class="navbar-user-icon ml-0 md:hidden" src="/assets/icon-michelada-a09f466fab1358f68b7dac67f56a2fd8b8f5d2874468565517aa44b4e447bf40.svg">
-                  <img class="navbar-dropdown-icon hidden md:block" src="/assets/icon-user.svg">
-                  My Profile
-              </a>
-              <a class="navbar-dropdown-link" href="/">
-                <img class="navbar-dropdown-icon" src="/assets/icon-toggle-0775221ae959ca01f20ae100debec3c1a4269d8d6a606e6740d8b02f04fcdc2e.svg">
-                Admin
-              </a>
-              <a data-turbo="false" class="navbar-dropdown-link" rel="nofollow" data-method="delete" href="/">
-                  <img class="navbar-dropdown-icon" src="/assets/icon-power-off-4ef033d9aa94c8cf5405e3b3606f603ed49e51350d134166a4c5f5c224b32b26.svg">
-                  Sign Out
-              </a>
-          </div>
-        </div>
-      </div>
-    </nav>      
+        <header class="bg-dark">
+          <nav class="navbar" data-controller="header">
+            <a href="#" class="brand">
+              <img src="assets/img/logo.svg">
+            </a>
+            <section class="close-toggle" data-action="click->header#toggleMenu">
+              <div class="action-wrapper">
+                <svg data-header-target="close" xmlns="http://www.w3.org/2000/svg" width="32" class="h-8 w-8 hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+                <img data-header-target="avatar" src="assets/img/avatar.png" alt="E" class="avatar"/>
+              </div>
+            </section>
+            <section class="nav-links" data-header-target="menu">
+              <ul>
+                <li>
+                  <a href="#" class="nav-link">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="19" class="h-6 w-6 md:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
+                    </svg>
+                    <span>Configuration</span>
+                  </a>
+                </li>
+                <li >
+                  <a href="#" class="nav-link">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="19" class="h-6 w-6 md:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
+                    </svg>
+                    <span>Experimental</span>
+                  </a>
+                </li>
+                <li class="my-profile">
+                  <a href="#" class="nav-link" data-action="click->header#toggleSubmenu">
+                    <img src="assets/img/avatar.png" alt="E" class="avatar"/>
+                    <span class="md:hidden">My Profile</span>
+                  </a>
+                  <ul class="hidden submenu" data-header-target="submenu">
+                    <li>
+                      <a href="#" class="nav-link">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5" />
+                        </svg> 
+                        <span>Link Link Link</span>
+                      </a>
+                    </li>
+                    <li>
+                      <a href="#" class="nav-link">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                        </svg>
+                        <span>Link</span>
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </section>
+          </nav>
+        </header>
diff --git a/site/navbar.html b/site/navbar.html deleted file mode 100644 index 6bca8d8..0000000 --- a/site/navbar.html +++ /dev/null @@ -1,43 +0,0 @@ - \ No newline at end of file diff --git a/src/js/app.js b/src/js/app.js index 9c4d7e2..5c14f86 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -27,16 +27,16 @@ document.addEventListener('DOMContentLoaded', function () { var calendar = new Calendar(calendarEl, { plugins: [ dayGridPlugin, timeGridPlugin, listPlugin ], initialView: 'dayGridMonth', - dayHeaders: false, + dayHeaders: true, headerToolbar: { start: 'prev', center: 'title', end: 'next' }, events: [ - { id: 1, title: 'test event', start: '2021-11-09' }, - { id: 1, title: 'second event', start: '2021-11-09' }, - { id: 1, title: 'week event', start: '2021-11-15 11:00', end: '2021-11-19 23:00' }, + { id: 1, title: 'test event', start: '2022-02-18' }, + { id: 1, title: 'second event', start: '2022-02-19 11:00', end: '2022-02-24 23:00' }, + { id: 1, title: 'week event', start: '2022-02-21 11:00', end: '2022-02-27 23:00' }, ] }); calendar.render(); @@ -58,4 +58,4 @@ document.addEventListener('DOMContentLoaded', function () { svgOpen.classList.toggle('hidden'); svgClose.classList.toggle('hidden'); }); -}); \ No newline at end of file +}); diff --git a/src/js/controllers/header_controller.js b/src/js/controllers/header_controller.js new file mode 100644 index 0000000..320eaa5 --- /dev/null +++ b/src/js/controllers/header_controller.js @@ -0,0 +1,22 @@ +import { Controller } from "@hotwired/stimulus" +export default class extends Controller { + static targets = ["menu", "close", "avatar", "submenu"] + + connect () { + if(window.innerWidth <= 768) { + this.menuTarget.classList.toggle("hidden"); + this.submenuTarget.classList.toggle("hidden"); + } + } + + toggleSubmenu(e) { + e.preventDefault(); + this.submenuTarget.classList.toggle("hidden"); + } + + toggleMenu() { + this.menuTarget.classList.toggle("hidden"); + this.closeTarget.classList.toggle("hidden"); + this.avatarTarget.classList.toggle("hidden"); + } +} diff --git a/src/styles/base/base.css b/src/styles/base/base.css index e463be7..d099227 100644 --- a/src/styles/base/base.css +++ b/src/styles/base/base.css @@ -3,4 +3,11 @@ a { @apply border-transparent; } +} + +:root { + --fullcalendar-event-1: #434884; + --fullcalendar-event-2: #5C62B2; + --fullcalendar-event-3: #6D73CB; + --fullcalendar-event-4: #848CF0; } \ No newline at end of file diff --git a/src/styles/base/utils.css b/src/styles/base/utils.css index 97761ea..3f595dc 100644 --- a/src/styles/base/utils.css +++ b/src/styles/base/utils.css @@ -1,4 +1,8 @@ .stretched-link::after { content: ""; @apply z-10 absolute inset-0 bg-transparent pointer-events-auto; +} + +.responsive-aligned { + @apply text-center lg:text-left } \ No newline at end of file diff --git a/src/styles/components/header.css b/src/styles/components/header.css new file mode 100644 index 0000000..7d34a82 --- /dev/null +++ b/src/styles/components/header.css @@ -0,0 +1,69 @@ +.navbar { + @apply bg-dark; + @apply container mx-auto flex justify-between items-center flex-wrap relative; + + .brand { + @apply p-6; + + img { + @apply max-h-6 inline-block; + } + } + + .avatar { + @apply rounded-full; + @apply bg-blue font-bold text-white text-center leading-9; + } + + .close-toggle { + @apply text-white cursor-pointer md:hidden; + + .action-wrapper { + @apply m-4 min-h-[40px] min-w-[40px] grid place-items-center; + + .avatar { + @apply w-10 h-10; + } + } + } + + .nav-links { + @apply basis-full md:basis-auto bg-dark absolute md:static w-full md:w-auto top-[72px] md:block; + + > ul { + @apply md:flex items-center; + + li { + @apply md:inline-block; + + .nav-link { + @apply flex space-x-6 md:space-x-0 text-white/80 p-6 hover:bg-blue-dark hover:text-white; + } + } + + li.my-profile { + @apply bg-blue-dark relative; + + a { + @apply p-6 md:p-4; + } + + .avatar { + @apply w-6 h-6 md:w-10 md:h-10 leading-6; + } + + .submenu { + @apply bg-blue-dark md:absolute md:right-0 w-max; + + li { + @apply md:block; + } + + .nav-link { + @apply flex space-x-6 p-6 text-white/80 hover:bg-blue-dark hover:text-white; + } + } + } + } + } +} \ No newline at end of file diff --git a/src/styles/components/navbar.css b/src/styles/components/navbar.css deleted file mode 100644 index 7489339..0000000 --- a/src/styles/components/navbar.css +++ /dev/null @@ -1,52 +0,0 @@ -.navbar { - &-container { - @apply mx-auto w-full max-w-screen-xl flex flex-wrap items-center justify-between; - } - - &-logo-container { - @apply flex items-center pl-1 md:pl-2 lg:pl-28 xl:pl-0; - } - - &-links-section { - @apply flex flex-col md:flex-row md:justify-end static md:relative; - } - - &-links-container { - @apply absolute md:static flex-col md:flex-row py-1 left-0 top-14 w-full; - } - - &-link { - @apply text-gray-light mx-1 px-0 md:px-5 hover:text-white md:flex py-4 ; - } - - &-logo { - width: 68px; - } - - &-dropdown { - @apply flex-col items-start h-full md:h-auto md:items-center bg-blue-dark md:rounded-b-md md:bg-white md:text-gray top-56 py-2 md:py-0 md:top-16 w-full md:w-44 px-0 text-left md:mt-2 md:divide-y md:shadow-md z-10 absolute left-0 md:left-auto md:right-5 md:absolute; - } - - &-dropdown-icon { - @apply scale-100 ml-0 mr-4 md:mr-2; - } - - &-dropdown-link { - @apply flex justify-start ml-3 md:ml-0 md:px-7 py-4 md:py-4 text-gray-light md:text-gray md:w-full hover:text-blue-dark; - - &:hover { - img { - filter: invert(11%) sepia(36%) saturate(2271%) hue-rotate(213deg) brightness(18%) contrast(85%); - } - } - } - - &-close-dropdown { - @apply bg-dark md:bg-blue-dark/[0.9] absolute items-center justify-center w-10 h-10 rounded-full cursor-pointer; - } - - &-user-icon { - @apply rounded-full w-8 md:w-10 h-8 md:h-10 cursor-pointer; - } - } - \ No newline at end of file diff --git a/src/styles/components/navigation-bar.css b/src/styles/components/navigation-bar.css deleted file mode 100644 index d922107..0000000 --- a/src/styles/components/navigation-bar.css +++ /dev/null @@ -1,101 +0,0 @@ -@layer components { - .header-nav { - @apply w-full; - } - - .dark { - @apply bg-dark; - - & a, - span { - @apply text-white; - } - } - - .light { - @apply bg-dark md:bg-white; - - & a, - span { - @apply text-dark; - } - } - - nav { - @apply w-full flex flex-col md:flex-row items-center justify-end; - - & .logo { - @apply w-full md:hidden flex flex-row justify-between items-center m-4; - - .menu-mobile { - @apply flex md:hidden flex-row items-center; - } - } - - & a { - @apply flex flex-row items-center; - - & img { - @apply mx-2; - } - } - - .navbar { - @apply hidden md:block md:w-auto; - - & ul { - &.menu { - @apply w-full m-0 p-0 flex flex-col md:flex-row content-between justify-end items-center text-center; - } - - & li { - @apply p-4 w-full; - &:hover:not(.avatar) { - @apply bg-white-mystic; - } - &.is-selected { - @apply font-bold; - } - - &.submenu { - @apply md:relative; - &:hover { - & > ul { - @apply block; - } - } - &.avatar { - @apply hidden md:block cursor-pointer relative; - &:hover { - &::after { - @apply w-10 h-10 absolute top-4 rounded-full left-4 cursor-pointer; - } - } - } - & > a { - @apply inline-block; - } - - & ul { - @apply md:absolute top-full rounded-b-lg w-full md:w-max md:z-50; - - & li { - @apply py-4 w-auto; - & span { - @apply text-gray-ish font-bold; - } - - &:hover { - @apply bg-dark; - & span { - @apply text-white; - } - } - } - } - } - } - } - } - } -} diff --git a/src/styles/components/sidebar-mobile.css b/src/styles/components/sidebar-mobile.css index 38aca4b..5ede436 100644 --- a/src/styles/components/sidebar-mobile.css +++ b/src/styles/components/sidebar-mobile.css @@ -23,7 +23,7 @@ justify-content: normal; img { - height: 20x; + height: 20px; width: 20px; } } diff --git a/src/styles/index.css b/src/styles/index.css index bfaed75..3f5bb3e 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -10,7 +10,6 @@ @import 'components/buttons'; @import 'components/forms'; -@import 'components/navigation-bar'; @import 'components/alerts'; @import 'components/headers'; @import 'components/menus'; @@ -23,8 +22,7 @@ @import 'components/brand'; @import 'components/description_container.css'; @import 'components/footer.css'; -@import 'components/navbar.css'; -@import 'components/navigation-bar.css'; +@import 'components/header.css'; @import 'components/pto.css'; @import 'components/table.css'; diff --git a/src/styles/vendor/fullcalendar.css b/src/styles/vendor/fullcalendar.css index 5f8d389..3347a1d 100644 --- a/src/styles/vendor/fullcalendar.css +++ b/src/styles/vendor/fullcalendar.css @@ -16,14 +16,6 @@ } } -.fc-day-today { - @apply bg-gray-lightest !important; - - .fc-daygrid-day-number { - @apply font-bold !important; - } -} - .fc-daygrid-day { border-color: text-gray-lighter !important; } @@ -38,16 +30,74 @@ } } -.fc-h-event { - @apply bg-blue-dark border-dark-charcoal !important; +/* .fc-h-event.bg-fullcalendar-event-1 { + background-color: var(--fullcalendar-event-1); + border-color: var(--fullcalendar-event-1); +} + +.fc-h-event.bg-fullcalendar-event-2 { + background-color: var(--fullcalendar-event-2); + border-color: var(--fullcalendar-event-2); +} + +.fc-h-event.bg-fullcalendar-event-3 { + background-color: var(--fullcalendar-event-3); + border-color: var(--fullcalendar-event-3); +} + +.fc-h-event.bg-fullcalendar-event-4 { + background-color: var(--fullcalendar-event-4); + border-color: var(--fullcalendar-event-4); +} */ + +.fc-daygrid-day-events > :nth-child(4n+1) > .fc-daygrid-event > .fc-event-main > .fc-event-main-frame { + @apply bg-fullcalendar-event-1; +} + +.fc-daygrid-day-events > :nth-child(4n+2) > .fc-daygrid-event > .fc-event-main > .fc-event-main-frame { + @apply bg-fullcalendar-event-2; +} + +.fc-daygrid-day-events > :nth-child(4n+3) > .fc-daygrid-event > .fc-event-main > .fc-event-main-frame { + @apply bg-fullcalendar-event-3; +} + +.fc-daygrid-day-events > :nth-child(4n+4) > .fc-daygrid-event > .fc-event-main > .fc-event-main-frame { + @apply bg-fullcalendar-event-4; } .fc-day { + @apply bg-white-ish !important; + &:hover { - @apply bg-blue !important; + @apply bg-blue-lavender !important; .fc-daygrid-day-number { @apply text-white !important; } + + .fc-col-header-cell-cushion, .fc-scrollgrid-sync-inner { + @apply bg-blue text-white !important; + } } +} + +.fc-day-today { + @apply bg-blue-dark !important; + + .fc-daygrid-day-number { + @apply text-white !important; + } +} + +.fc-day-past { + @apply bg-gray-lighter !important; +} + +.fc-day-other { + @apply bg-gray-silver !important; +} + +.fc-col-header-cell > .fc-scrollgrid-sync-inner > * { + @apply text-gray-lighter font-normal; } \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index 17409d8..3a34d96 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,9 +1,9 @@ module.exports = { mode: 'jit', - purge: [ + content: [ './site/*.html', ], - darkMode: false, // or 'media' or 'class' + darkMode: 'media', theme: { fontFamily: { sans: ['Noto Sans'], @@ -17,8 +17,9 @@ module.exports = { DEFAULT: '#575F65', light: '#828F96', lighter: '#A5B1B8', + silver: '#D2D5DA', lightest: '#E6EDF0', - ish: '#808C93' + ish: '#808C93', }, blue: { dark: '#292C52', @@ -26,6 +27,7 @@ module.exports = { crayola: '#245AF9', picton: '#43B7E9', wind: '#9CAFC8', + lavender: '#C1DBFC' }, white: { DEFAULT: '#FFFFFF', @@ -43,6 +45,12 @@ module.exports = { }, red: '#EA3434', green: '#00B5AF', + fullcalendar: { + "event-1": 'var(--fullcalendar-event-1)', + "event-2": 'var(--fullcalendar-event-2)', + "event-3": 'var(--fullcalendar-event-3)', + "event-4": 'var(--fullcalendar-event-4)', + } }, extend: { boxShadow: {