From 8d779c954339de0f77a1ea7d0d5a50c594c859ae Mon Sep 17 00:00:00 2001 From: Edgar Zea Date: Thu, 17 Feb 2022 16:47:16 -0600 Subject: [PATCH 1/6] Responsive aligned utility created --- package.json | 2 +- site/index.html | 8 ++++---- src/styles/base/utils.css | 4 ++++ 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 13cc69e..6d49028 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,7 @@ "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/index.html b/site/index.html index 950fd27..806eb6c 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

-
@@ -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
+
+
+ + 

diff --git a/src/js/app.js b/src/js/app.js
index 9c4d7e2..2a2b3c9 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();
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/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..edc5b18 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -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: {

From 1a091b4e1cf83ac581844d057e8005d2cc2b1008 Mon Sep 17 00:00:00 2001
From: Edmundo Perez 
Date: Tue, 22 Feb 2022 16:26:01 -0600
Subject: [PATCH 5/6] Fix mobile navbar menu to hide by default

---
 src/js/controllers/header_controller.js | 1 +
 src/styles/components/header.css        | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/js/controllers/header_controller.js b/src/js/controllers/header_controller.js
index 98784ba..320eaa5 100644
--- a/src/js/controllers/header_controller.js
+++ b/src/js/controllers/header_controller.js
@@ -4,6 +4,7 @@ export default class extends Controller {
 
   connect () {
     if(window.innerWidth <= 768) {
+      this.menuTarget.classList.toggle("hidden");
       this.submenuTarget.classList.toggle("hidden");
     }
   }
diff --git a/src/styles/components/header.css b/src/styles/components/header.css
index 397d009..073aedf 100644
--- a/src/styles/components/header.css
+++ b/src/styles/components/header.css
@@ -23,7 +23,7 @@
   }
 
   .nav-links {
-    @apply basis-full md:basis-auto bg-dark absolute md:static w-full md:w-auto top-[72px] hidden md:block;
+    @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;

From 5829ae01bd686f6cf04bb8df148798a6ef62bc64 Mon Sep 17 00:00:00 2001
From: Edmundo Perez 
Date: Fri, 25 Feb 2022 11:11:41 -0600
Subject: [PATCH 6/6] navbar adjustments, increase package version

---
 package.json                     |   2 +-
 site/index.html                  | 109 ++++++++++++++++++-------------
 src/styles/components/header.css |  21 ++++--
 tailwind.config.js               |   4 +-
 4 files changed, 82 insertions(+), 54 deletions(-)

diff --git a/package.json b/package.json
index 6d49028..13aa1f1 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.1.3",
+  "version": "1.1.4",
   "author": "michelada.io",
   "name": "@micheladaio/sips-and-bits.css",
   "scripts": {
diff --git a/site/index.html b/site/index.html
index 4dfae2b..5127bf8 100644
--- a/site/index.html
+++ b/site/index.html
@@ -1504,7 +1504,7 @@ 
NavBar 

                 
-                
+                E
               
             
             

@@ -1527,7 +1527,7 @@ 
NavBar 

                 
                 
  • 
                   
-                    
+                    E
                     My Profile
                   
                   
    • 
     
diff --git a/src/styles/components/header.css b/src/styles/components/header.css
index 073aedf..7d34a82 100644
--- a/src/styles/components/header.css
+++ b/src/styles/components/header.css
@@ -10,6 +10,11 @@
     }
   }
 
+  .avatar {
+    @apply rounded-full;
+    @apply bg-blue font-bold text-white text-center leading-9;
+  }
+
   .close-toggle {
     @apply text-white cursor-pointer md:hidden;
 
@@ -17,7 +22,7 @@
       @apply m-4 min-h-[40px] min-w-[40px] grid place-items-center;
 
       .avatar {
-        @apply rounded-full w-10 h-10;
+        @apply w-10 h-10;
       }
     }
   }
@@ -32,7 +37,7 @@
         @apply md:inline-block;
 
         .nav-link {
-          @apply flex space-x-6 text-white/80 p-6 hover:bg-blue-dark hover:text-white;
+          @apply flex space-x-6 md:space-x-0 text-white/80 p-6 hover:bg-blue-dark hover:text-white;
         }
       }
 
@@ -40,11 +45,19 @@
         @apply bg-blue-dark relative;
 
         a {
-          @apply p-4;
+          @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;
+          @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; 
diff --git a/tailwind.config.js b/tailwind.config.js
index edc5b18..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'],