Modified some styles (#520)

* change styles * change styles * modify big panel
hackupc · Apr 6, 2024 · 8cbd870 · 8cbd870
1 parent 7bb4cd6
commit 8cbd870
Show file tree

Hide file tree

Showing 15 changed files with 593 additions and 641 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "@fontsource/montserrat": "^4.5.5",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-brands-svg-icons": "^6.1.1",
+    "ant-design-vue": "^4.0.0-rc.6",
     "dayjs": "^1.10.8",
     "pinia": "^2.0.11",
     "vue": "^3.2.31",
@@ -26,9 +27,9 @@
   "devDependencies": {
     "@cypress/vite-dev-server": "^2.2.2",
     "@cypress/vue": "^3.1.1",
-    "@fortawesome/vue-fontawesome": "^3.0.0-5",
     "@fortawesome/free-regular-svg-icons": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@fortawesome/vue-fontawesome": "^3.0.0-5",
     "@heroicons/vue": "^1.0.6",
     "@rushstack/eslint-patch": "^1.1.1",
     "@types/node": "^16.11.26",

diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
@@ -3,6 +3,7 @@ import Countdown from '@/components/Countdown.vue'
 import { ref } from 'vue'
 import { RouterLink, useRoute, useRouter } from 'vue-router'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { Tooltip } from 'ant-design-vue'
 
 interface Props {
   isFullscreen: boolean
@@ -136,7 +137,7 @@ const isActive = (page: string): boolean => {
               size="sm"
               style="margin-right: 5px"
             />
-            Talks</RouterLink
+            Talks & Workshops</RouterLink
           >
         </li>
         <li :class="{ selected: isActive('/challenges') }">
@@ -192,117 +193,157 @@ const isActive = (page: string): boolean => {
   <header v-if="!isFullscreen" class="header-nav-bar hide-when-small">
     <nav>
       <ul class="header-nav-bar__list">
-        <RouterLink
-          to="/"
-          class="header-nav-bar__item"
-          :class="{ selected: isActive('/') }"
-        >
-          <li>
-            <FontAwesomeIcon icon="home" size="lg" />
-          </li>
-        </RouterLink>
-        <RouterLink
-          to="/schedule"
-          class="header-nav-bar__item"
-          :class="{ selected: isActive('/schedule') }"
-        >
-          <li>
-            <FontAwesomeIcon icon="calendar-days" size="lg" />
-          </li>
-        </RouterLink>
-        <RouterLink
-          to="/map"
-          class="header-nav-bar__item"
-          :class="{ selected: isActive('/map') }"
-        >
-          <li>
-            <FontAwesomeIcon icon="map-location-dot" size="lg" />
-          </li>
-        </RouterLink>
-        <RouterLink
-          to="/mission"
-          class="header-nav-bar__item"
-          :class="{ selected: isActive('/mission') }"
-        >
-          <li>
-            <FontAwesomeIcon icon="user-secret" size="lg" />
-          </li>
-        </RouterLink>
-        <RouterLink
-          to="/mentors"
-          class="header-nav-bar__item"
-          :class="{ selected: isActive('/mentors') }"
-        >
-          <li>
-            <FontAwesomeIcon icon="chalkboard-teacher" size="lg" />
-          </li>
-        </RouterLink>
-        <RouterLink
-          to="/meals"
-          class="header-nav-bar__item"
-          :class="{ selected: isActive('/meals') }"
-        >
-          <li>
-            <FontAwesomeIcon icon="utensils" size="lg" />
-          </li>
-        </RouterLink>
-        <li class="header-nav-bar__item header-nav-bar__item--countdown">
-          <Countdown class="hide-when-small" @click="goToFullscreen" />
-        </li>
-        <RouterLink
-          to="/talks"
-          class="header-nav-bar__item"
-          :class="{ selected: isActive('/talks') }"
-        >
-          <li>
-            <FontAwesomeIcon icon="message" size="lg" />
-          </li>
-        </RouterLink>
-        <RouterLink
-          to="/challenges"
-          class="header-nav-bar__item"
-          :class="{ selected: isActive('/challenges') }"
-        >
-          <li>
-            <FontAwesomeIcon icon="code" size="lg" />
-          </li>
-        </RouterLink>
-        <RouterLink
-          to="/hardware"
-          class="header-nav-bar__item"
-          :class="{ selected: isActive('/hardware') }"
-        >
-          <li>
-            <FontAwesomeIcon icon="microchip" size="lg" />
-          </li>
-        </RouterLink>
-        <RouterLink
-          to="/rules"
-          class="header-nav-bar__item"
-          :class="{ selected: isActive('/rules') }"
-        >
-          <li>
-            <FontAwesomeIcon icon="gavel" size="lg" />
-          </li>
-        </RouterLink>
-        <RouterLink
-          to="/travel"
-          class="header-nav-bar__item"
-          :class="{ selected: isActive('/travel') }"
-        >
-          <li>
-            <FontAwesomeIcon icon="plane" size="lg" />
+        <Tooltip title="Home" class="cursor-is-rocket">
+          <RouterLink
+            to="/"
+            class="header-nav-bar__item"
+            :class="{ selected: isActive('/') }"
+          >
+            <li>
+              <FontAwesomeIcon icon="home" size="lg" />
+            </li>
+          </RouterLink>
+        </Tooltip>
+
+        <Tooltip title="Schedule & Live" class="cursor-is-rocket">
+          <RouterLink
+            to="/schedule"
+            class="header-nav-bar__item"
+            :class="{ selected: isActive('/schedule') }"
+          >
+            <li>
+              <FontAwesomeIcon icon="calendar-days" size="lg" />
+            </li>
+          </RouterLink>
+        </Tooltip>
+
+        <Tooltip title="Map" class="cursor-is-rocket">
+          <RouterLink
+            to="/map"
+            class="header-nav-bar__item"
+            :class="{ selected: isActive('/map') }"
+          >
+            <li>
+              <FontAwesomeIcon icon="map-location-dot" size="lg" />
+            </li>
+          </RouterLink>
+        </Tooltip>
+
+        <Tooltip title="Mission" class="cursor-is-rocket">
+          <RouterLink
+            to="/mission"
+            class="header-nav-bar__item"
+            :class="{ selected: isActive('/mission') }"
+          >
+            <li>
+              <FontAwesomeIcon icon="user-secret" size="lg" />
+            </li>
+          </RouterLink>
+        </Tooltip>
+
+        <Tooltip title="Mentors" class="cursor-is-rocket">
+          <RouterLink
+            to="/mentors"
+            class="header-nav-bar__item"
+            :class="{ selected: isActive('/mentors') }"
+          >
+            <li>
+              <FontAwesomeIcon icon="chalkboard-teacher" size="lg" />
+            </li>
+          </RouterLink>
+        </Tooltip>
+
+        <Tooltip title="Meals" class="cursor-is-rocket">
+          <RouterLink
+            to="/meals"
+            class="header-nav-bar__item"
+            :class="{ selected: isActive('/meals') }"
+          >
+            <li>
+              <FontAwesomeIcon icon="utensils" size="lg" />
+            </li>
+          </RouterLink>
+        </Tooltip>
+
+        <Tooltip title="Live full screen" class="cursor-is-rocket">
+          <li
+            class="header-nav-bar__item header-nav-bar__item--countdown cursor-is-rocket"
+          >
+            <Countdown class="hide-when-small" @click="goToFullscreen" />
           </li>
-        </RouterLink>
-        <RouterLink
-          to="/faq"
-          class="header-nav-bar__item"
-          :class="{ selected: isActive('/faq') }"
+        </Tooltip>
+
+        <Tooltip title="Talks & Workshops" class="cursor-is-rocket">
+          <RouterLink
+            to="/talks"
+            class="header-nav-bar__item"
+            :class="{ selected: isActive('/talks') }"
+          >
+            <li>
+              <FontAwesomeIcon icon="message" size="lg" />
+            </li>
+          </RouterLink>
+        </Tooltip>
+
+        <Tooltip title="Challenges" class="cursor-is-rocket">
+          <RouterLink
+            to="/challenges"
+            class="header-nav-bar__item"
+            :class="{ selected: isActive('/challenges') }"
+          >
+            <li>
+              <FontAwesomeIcon icon="code" size="lg" />
+            </li>
+          </RouterLink>
+        </Tooltip>
+
+        <Tooltip title="Hardware" class="cursor-is-rocket">
+          <RouterLink
+            to="/hardware"
+            class="header-nav-bar__item"
+            :class="{ selected: isActive('/hardware') }"
+          >
+            <li>
+              <FontAwesomeIcon icon="microchip" size="lg" />
+            </li>
+          </RouterLink>
+        </Tooltip>
+        <Tooltip title="Rules" class="cursor-is-rocket">
+          <RouterLink
+            to="/rules"
+            class="header-nav-bar__item"
+            :class="{ selected: isActive('/rules') }"
+          >
+            <li>
+              <FontAwesomeIcon icon="gavel" size="lg" />
+            </li>
+          </RouterLink>
+        </Tooltip>
+        <Tooltip
+          title="Discover BCN & Travel policies"
+          class="cursor-is-rocket"
         >
-          <li>
-            <FontAwesomeIcon icon="circle-question" size="lg" />
-          </li>
-        </RouterLink>
+          <RouterLink
+            to="/travel"
+            class="header-nav-bar__item"
+            :class="{ selected: isActive('/travel') }"
+          >
+            <li>
+              <FontAwesomeIcon icon="plane" size="lg" />
+            </li>
+          </RouterLink>
+        </Tooltip>
+        <Tooltip title="Help" class="cursor-is-rocket">
+          <RouterLink
+            to="/faq"
+            class="header-nav-bar__item"
+            :class="{ selected: isActive('/faq') }"
+          >
+            <li>
+              <FontAwesomeIcon icon="circle-question" size="lg" />
+            </li>
+          </RouterLink>
+        </Tooltip>
       </ul>
     </nav>
   </header>
@@ -314,6 +355,10 @@ const isActive = (page: string): boolean => {
 
 $fade-time: 300ms;
 
+.cursor-is-rocket {
+  cursor: url('../assets/img/rocket-fire.png'), auto !important;
+}
+
 .external-link-icon {
   width: 16px;
   vertical-align: text-top;
@@ -370,7 +415,7 @@ $fade-time: 300ms;
   height: 100%;
   align-items: center;
   color: #fff;
-  cursor: pointer;
+  cursor: url('../assets/img/rocket-fire.png'), auto;
   font-size: 20px;
   text-align: center;
 
@@ -400,7 +445,7 @@ $fade-time: 300ms;
     height: 50px;
     align-items: center;
     color: #fff;
-    cursor: pointer;
+    cursor: url('../assets/img/rocket-fire.png'), auto;
     text-align: center;
 
     div {

diff --git a/src/components/Cookies.vue b/src/components/Cookies.vue
@@ -124,7 +124,7 @@ $ease-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
     background-color: transparent;
     border-radius: 0.5rem;
     color: #fff;
-    cursor: pointer;
+    cursor: url('../assets/img/rocket-fire.png'), auto;
 
     &:hover,
     &:focus {

diff --git a/src/components/Countdown.vue b/src/components/Countdown.vue
@@ -89,7 +89,7 @@ const handleClick = (): void => {
   margin-top: -90px;
   border-radius: 100%;
   box-shadow: 0 -5px 42px rgb(0 0 0 / 40%);
-  cursor: pointer;
+  cursor: url('../assets/img/rocket-fire.png'), auto;
   transition: transform 200ms $ease-bounce;
 
   &:hover {
@@ -143,7 +143,7 @@ const handleClick = (): void => {
     height: 33.333vw;
     border-radius: 50%;
     box-shadow: 0 4px 42px 0 rgb(0 0 0 / 30%);
-    cursor: pointer;
+    cursor: url('../assets/img/rocket-fire.png'), auto;
     text-shadow: 0 0 12px rgb(0 0 0 / 50%);
   }
 

diff --git a/src/components/Notification.vue b/src/components/Notification.vue
@@ -133,7 +133,7 @@ const getEvent = function (id: string): ScheduleEvent | undefined {
     background-color: $primary-color;
     border-radius: 5px;
     color: $contrast-color;
-    cursor: pointer;
+    cursor: url('../assets/img/rocket-fire.png'), auto;
     font-weight: bold;
     letter-spacing: 1px;
 

diff --git a/src/components/Panel.vue b/src/components/Panel.vue
@@ -39,7 +39,7 @@ defineProps<Props>()
   text-align: left;
 
   &--big {
-    flex: 1 1 782px;
+    flex: 1 1 1300px;
   }
 
   &__title {

diff --git a/src/components/PanelContainer.vue b/src/components/PanelContainer.vue
@@ -14,12 +14,10 @@ defineProps<Props>()
 <style lang="scss" scoped>
 .container {
   display: flex;
-  max-width: 1024px;
+  max-width: 1300px;
   flex-wrap: wrap;
   justify-content: center;
-  padding: 16px;
-  padding-top: 150px;
-  padding-bottom: 50px;
+  padding: 150px 16px 50px;
   margin: 0 auto;
 
   @media (max-width: 720px) {