Add things

Grapycal · Dec 20, 2023 · 26a93a9 · 26a93a9
1 parent ec7a7c0
commit 26a93a9
Show file tree

Hide file tree

Showing 8 changed files with 241 additions and 25 deletions.
diff --git a/components.d.ts b/components.d.ts
@@ -7,6 +7,14 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    DialogClose: typeof import('radix-vue')['DialogClose']
+    DialogContent: typeof import('radix-vue')['DialogContent']
+    DialogDescription: typeof import('radix-vue')['DialogDescription']
+    DialogOverlay: typeof import('radix-vue')['DialogOverlay']
+    DialogPortal: typeof import('radix-vue')['DialogPortal']
+    DialogRoot: typeof import('radix-vue')['DialogRoot']
+    DialogTitle: typeof import('radix-vue')['DialogTitle']
+    DialogTrigger: typeof import('radix-vue')['DialogTrigger']
     FeatureCard: typeof import('./src/components/FeatureSection/FeatureCard.vue')['default']
     FeatureSection: typeof import('./src/components/FeatureSection/FeatureSection.vue')['default']
     FooterSection: typeof import('./src/components/FooterSection.vue')['default']

diff --git a/index.html b/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Grapycal</title>
   </head>
-  <body>
+  <body style="padding: 1;">
     <div style="display:flex; width: 100%;">
       <div id="app"></div>
     </div>

diff --git a/src/assets/main.css b/src/assets/main.css
@@ -3,6 +3,7 @@
 @import "@radix-ui/colors/black-alpha.css";
 @import "@radix-ui/colors/mauve.css";
 @import "@radix-ui/colors/violet.css";
+@import "@radix-ui/colors/grass.css";
 /* 
 #app {
   max-width: 1280px;
@@ -13,6 +14,7 @@
 
 #app{
   width: 100%;
+  overflow: hidden;
 }
 
 html{
@@ -21,7 +23,9 @@ html{
 
 body{
   max-width: 100%;
-  overflow: hidden;
+
+  /* radix messes with the padding of the body when open a modal, so we need to reset it */
+  padding-right: 0px ! important; 
 }
 
 /* dark scrollbar */

diff --git a/src/components/FooterSection.vue b/src/components/FooterSection.vue
@@ -16,7 +16,7 @@
 <style scoped>
 footer {
     background-color: #303030;
-    padding: 20px 150px;
+    padding: 20px 20px;
     color: white;
 }
 .center {

diff --git a/src/components/MainSections/PeopleSection/PeopleSection.vue b/src/components/MainSections/PeopleSection/PeopleSection.vue
@@ -1,12 +1,10 @@
 <template>
     <SubSection title=People>
-        <h2>Core Team</h2>
-            <ul>
-                <PersonIntro name="eri24816"></PersonIntro>
-
-                (add your PersonIntro here)
+
+        <PersonIntro name="eri24816" role="backend dev"></PersonIntro>
+
+        (add your PersonIntro here)
 
-            </ul>
         <h2>All Contributors</h2>
         <a href="https://github.com/grapycal/grapycal/graphs/contributors">
             <img class="contributors" src="https://contrib.rocks/image?repo=grapycal/grapycal" />

diff --git a/src/components/MainSections/PeopleSection/PersonIntro.vue b/src/components/MainSections/PeopleSection/PersonIntro.vue
@@ -1,9 +1,8 @@
 <template>
-    <li>
-        <div class="person-intro">
-            <h3>{{ props.name }}</h3>
-        </div>
-    </li>
+    <div class="person-intro">
+        <h3>{{ props.name }}</h3>
+        <p>{{ props.role }}</p>
+    </div>
 </template>
 
 <script setup lang="ts">

diff --git a/src/components/MainSections/UseCaseSection/UseCaseCard.vue b/src/components/MainSections/UseCaseSection/UseCaseCard.vue
@@ -1,24 +1,82 @@
 <template>
-    <div class="card">
+    <div class="card" v-on:click="openDialog">
 
         <!-- use the img prop -->
         <img class="img" :src="props.img" alt="feature image">
         <div class="text">
+
             <p class="content">
-                <slot></slot>
+                {{ title }}
             </p>
+
         </div>
     </div>
+    <DialogRoot v-model:open="data.opened">
+
+        <DialogPortal>
+              <DialogOverlay class="DialogOverlay" />
+              <DialogContent
+                class="DialogContent"
+              >
+                <DialogTitle class="DialogTitle">
+                  {{ props.title  }}
+                </DialogTitle>
+                <DialogDescription class="DialogDescription">
+                  Make changes to your profile here. Click save when you're done.
+                </DialogDescription>
+                <img class="img" :src="props.img" alt="feature image">
+                <slot></slot>
+                <div :style="{ display: 'flex', marginTop: 25, justifyContent: 'flex-end' }">
+                  <DialogClose as-child>
+                    <button
+                      class="Button green"
+                    >
+                      OK
+                    </button>
+                  </DialogClose>
+                </div>
+                <DialogClose
+                  class="IconButton"
+                  aria-label="Close"
+                >
+                  <Icon icon="lucide:x" />
+                </DialogClose>
+              </DialogContent>
+            </DialogPortal>
+    </DialogRoot>
 </template>
 
 <script setup lang="ts">
-import { defineProps } from 'vue'
+import { reactive } from 'vue'
+import {
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogOverlay,
+  DialogPortal,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from 'radix-vue'
+
 const props = defineProps({
     img: {
         type: String,
         default: "https://i.imgur.com/npw0hVR.png"
+    },
+    title: {
+        type: String,
+        default: "Title"
     }
 })
+
+const data = reactive({
+    opened: false
+})
+
+const openDialog = () => {
+    data.opened = true
+}
 </script>
 
 <style scoped>
@@ -37,7 +95,6 @@ const props = defineProps({
 }
 
 
-
 .text {
     flex: 0 1;
     align-self: center;
@@ -63,4 +120,152 @@ h1{
     align-items: center;
     justify-content: center;
 }
+
+
+
+button,
+fieldset,
+input {
+  all: unset;
+}
+
+.DialogOverlay {
+  background-color: var(--black-a9);
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.DialogContent {
+  border-radius: 6px;
+  background-color: var(--mauve-12);
+  box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90vw;
+  max-width: 450px;
+  max-height: 85vh;
+  padding: 25px;
+  animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+.DialogContent:focus {
+  outline: none;
+}
+
+.DialogTitle {
+  margin: 0;
+  font-weight: 500;
+  font-size: 17px;
+}
+
+.DialogDescription {
+  margin: 10px 0 20px;
+  font-size: 15px;
+  line-height: 1.5;
+}
+
+.Button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 15px;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 500;
+  height: 35px;
+}
+.Button.grass {
+  box-shadow: 0 2px 10px var(--black-a7);
+}
+.Button.grass:hover {
+  background-color: var(--mauve-3);
+}
+.Button.grass:focus {
+  box-shadow: 0 0 0 2px black;
+}
+.Button.green {
+  background-color: var(--green-4);
+  color: var(--green-11);
+}
+.Button.green:hover {
+  background-color: var(--green-5);
+}
+.Button.green:focus {
+  box-shadow: 0 0 0 2px var(--green-7);
+}
+
+.IconButton {
+  font-family: inherit;
+  border-radius: 100%;
+  height: 25px;
+  width: 25px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--grass-11);
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+.IconButton:hover {
+  background-color: var(--grass-4);
+}
+.IconButton:focus {
+  box-shadow: 0 0 0 2px var(--grass-7);
+}
+
+.Fieldset {
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.Label {
+  font-size: 15px;
+  color: var(--grass-11);
+  width: 90px;
+  text-align: right;
+}
+
+.Input {
+  width: 100%;
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  padding: 0 10px;
+  font-size: 15px;
+  line-height: 1;
+  color: var(--grass-11);
+  box-shadow: 0 0 0 1px var(--grass-7);
+  height: 35px;
+}
+.Input:focus {
+  box-shadow: 0 0 0 2px var(--grass-8);
+}
+
+@keyframes overlayShow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes contentShow {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
 </style>
diff --git a/src/components/MainSections/UseCaseSection/UseCaseSection.vue b/src/components/MainSections/UseCaseSection/UseCaseSection.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="card-container">
         <!-- use v for to generate cards -->
-        <UseCaseCard v-for="usecase in usecases" :key="usecase.id" :img="usecase.img">
+        <UseCaseCard v-for="usecase in usecases" :key="usecase.id" :img="usecase.img" :title="usecase.title">
             {{ usecase.content }}
         </UseCaseCard>
     </div>
@@ -21,13 +21,15 @@ const props = defineProps({
                 id: number,
                 img: string,
                 content: string,
+                title: string
             }
         >,
         default: () => [
             {
                 id: 1,
                 img: "https://i.imgur.com/npw0hVR.png",
-                content: "Content",
+                content: "Deep Learning very good ouo",
+                title: "Deep Learning"
             },
             {
                 id: 2,
@@ -39,11 +41,11 @@ const props = defineProps({
                 img: "https://i.imgur.com/npw0hVR.png",
                 content: "Content",
             },
-                        {
-                            id: 3,
-                            img: "https://i.imgur.com/ZG9VEOD.png",
-                            content: "Content",
-                        }
+            {
+                id: 3,
+                img: "https://i.imgur.com/ZG9VEOD.png",
+                content: "Content",
+            }
         ]
     }