Merge pull request #34 from KNowledgeOnWebScale/EDC_active

ecrum19 · web-flow · commit 0ef83acdf132 · 2024-10-29T15:21:47.000+01:00
Updates to the styling (more to come soon) and changes to TRIPLE-guide so that directions are accurate
diff --git a/TRIPLE-guide.md b/TRIPLE-guide.md
@@ -19,9 +19,8 @@ To **set up** your Solid Pod using the TRIPLE platform, follow these steps:
 
 1. **🔗 Navigate to our Solid Pod Hosting website**
    - Go to [https://triple.ilabt.imec.be/](https://triple.ilabt.imec.be/)
-   - ~~Use the following credentials to enter the site:~~
-     - ~~**Username**: `triple`~~
-     - ~~**Password**: `solid`~~
+   - Use the following credentials to enter the site:
+     - **Password**: `triple`
    
 2. **🔐 Sign Up to make a Pod**
    - Click **Sign Up** (assuming this is your first time)
@@ -35,9 +34,8 @@ To **set up** your Solid Pod using the TRIPLE platform, follow these steps:
 1. **Navigate to our Solid Pod Hosting website**
 
    - Go to [https://triple.ilabt.imec.be/](https://triple.ilabt.imec.be/)
-   - ~~Use the following credentials to enter the site:~~
-     - ~~**Username**: `triple`~~
-     - ~~**Password**: `solid`~~
+   - Use the following credentials to enter the site:
+     - **Password**: `triple`
 
 2. **Login using your credentials**
 
diff --git a/public/index.html b/public/index.html
@@ -16,4 +16,5 @@
   <link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&family=Oxanium:wght@200..800&display=swap" rel="stylesheet">
   
+  
 </html>
diff --git a/src/assets/styles.md b/src/assets/styles.md
@@ -10,5 +10,5 @@
 ## Fonts
 
 * **Logo**:  <span style="font-family: Orbitron">Orbitron</span>
-* **Web page**:  <span style="font-family: B612">B612</span>
+* **Web page**:  <span style="font-family: Oxanium">Oxanium</span>
 
diff --git a/src/components/EditPrivacy.vue b/src/components/EditPrivacy.vue
@@ -1,20 +1,13 @@
 <template>
   <!-- Materialize CSS -->
-  <link
-    rel="stylesheet"
-    href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
-  />
-  <link
-    href="https://fonts.googleapis.com/icon?family=Material+Icons"
-    rel="stylesheet"
-  />
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
 
   <!-- Title bar -->
   <body class="content-body">
     <div class="title-container">
       <nav class="title-nav">
         <!-- Title bar and icons -->
-        <div class="nav-wrapper indigo lighten-3">
+        <div class="nav-wrapper #445560">
           <ul>
             <span>Privacy Editing</span>
             <div class="right">
@@ -45,10 +38,8 @@
             <li>
               <div class="select-dir">
                 <v-select
-                  bg-color="indigo-lighten-3"
                   clearable
-                  rounded
-                  variant="solo"
+                  variant="outlined"
                   v-model="currentUrl"
                   :items="childContainers(currentLocation, containerUrls)"
                 ></v-select>
@@ -68,7 +59,7 @@
                     <v-btn
                       icon="mdi-filter"
                       variant="solo"
-                      color="indigo"
+                      color="#EDE7F6"
                       rounded
                       v-bind="props"
                     >
@@ -99,7 +90,7 @@
     <!-- the side nav -->
     <div class="body-container">
       <div class="sideNav">
-        <ul class="side-nav fixed floating indigo lighten-3 z-depth-0">
+        <ul class="side-nav fixed floating #28353e z-depth-0">
           <li class="active">
             <a href="#"
               ><i class="material-icons purple-text text-darken-1">dashboard</i
@@ -688,32 +679,35 @@ export default {
 </script>
 
 <style scoped>
+/* @import url('https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css'); */
+@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
+
 body {
-  background-color: #a1b1d3;
+  background-color: #445560;
   font-size: 13px;
 }
 .content-body {
   display: flex;
   flex-direction: column;
 }
 .title-nav {
-  background-color: #a1b1d3;
+  background-color: #445560;
 }
 .title-container {
   flex: 1;
 }
 .title-container span {
   font-size: 30pt;
-  font-family: "Courier New", Courier, monospace;
+  font-family: "Oxanium", monospace;
   font-weight: 500;
-  color: #30328e;
+  color: #EDE7F6;
 }
 .directory-nav {
-  background-color: #a1b1d3;
+  background-color: #445560;
 }
 .directory-nav span {
   font-size: 14pt;
-  font-family: "Courier New", Courier, monospace;
+  font-family: "Oxanium", monospace;
   font-weight: 800;
   margin-left: 25px;
 }
@@ -730,7 +724,7 @@ body {
   flex: 1 1 auto;
 }
 .dir-nav {
-  background-color: #97a5c4;
+  background-color: #445560;
 }
 /* title bar */
 nav {
@@ -752,7 +746,7 @@ nav {
 .select-dir .v-select {
   min-width: 150px;
   margin-top: 5px;
-  font-family: "Courier New", Courier, monospace;
+  font-family: "Oxanium", monospace;
 }
 
 /* sidenav */
@@ -781,18 +775,20 @@ nav {
 .side-nav li a {
   padding: 10px 20px;
   font-size: 15px;
-  color: #30328e;
+  color: #EDE7F6;
 }
 .side-nav li a:hover {
   border-radius: 2px;
 }
 
 /* folders */
+
 .folder {
   margin: 3px 0px 0px 0;
   font-weight: 800;
   font-size: large;
-  font-family: "Courier New", Courier, monospace;
+  font-family: "Oxanium", monospace;
+  background-color: #28353e;
 }
 .folder i {
   color: rgba(0, 0, 0, 0.54);
@@ -847,7 +843,7 @@ nav {
 }
 .the-user i {
   font-size: medium;
-  color: #30328e;
+  color: #EDE7F6;
 }
 .permissions-tag {
   font-size: large;
@@ -895,19 +891,19 @@ form input[type="text"] {
 form button {
   padding: 15px;
   margin-top: 5px;
-  background-color: #333;
-  color: #fff;
+  background-color: #EDE7F6;
+  color: #445560;
   border: none;
   cursor: pointer;
-  font-family: "Courier New", Courier, monospace;
+  font-family: "Oxanium" monospace;
   font-size: large;
 }
 form button:hover {
-  background-color: #444;
+  background-color: #a9a7ad;
 }
 label span {
   font-size: 16px;
-  color: #000000;
+  color: #EDE7F6;
 }
 #errorIndicator {
   margin-top: 10px;
@@ -927,20 +923,20 @@ label span {
 .new-acl {
   padding: 15px;
   margin-top: 5px;
-  background-color: #333;
-  color: #fff;
+  background-color: #EDE7F6;
+  color: #445560;
   border: none;
   cursor: pointer;
-  font-family: "Courier New", Courier, monospace;
+  font-family: "Oxanium", monospace;
   font-size: large;
 }
 .new-acl:hover {
-  background-color: #444;
+  background-color: #a9a7ad;
 }
 .req {
-  font-family: "Courier New", monospace;
+  font-family: "Oxanium", monospace;
   padding: 20px;
-  background: #d0e0fc;
+  background: #445560;
   border-radius: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
diff --git a/src/components/PodUpload.vue b/src/components/PodUpload.vue
@@ -3,17 +3,17 @@
   <v-container>
     <!-- Card that contains the data upload field -->
     <v-card
-      title="Add Data to Pod"
+      class="mx-auto upload-section"
+      title="Add Files to Pod"
       variant="tonal"
       justify="center"
-      class="mx-auto"
-      color="indigo-darken-3"
+      color="#445560"
     >
-      <!-- The file input section << Styling needs a little work >> -->
+      <!-- The file input section -->
       <form id="writeForm">
         <v-file-input
           clearable
-          label="Click to select file(s) OR drag and drop a file(s) here"
+          label="Click to select file(s) OR drag and drop file(s) here"
           placeholder="Select your files"
           show-size
           type="file"
@@ -85,7 +85,7 @@
       <li>Click the <b>"File Input"</b> bar above or drag and drop a file</li>
       <li>Select the local file(s) you wish to upload</li>
       <li>Click the <b>"Upload"</b> button</li>
-      <li>Voila! Your files should then be in your pod.</li>
+      <li>Once the success label appears, your files should then be in your pod.</li>
     </ol>
   </body>
 </template>
@@ -113,7 +113,7 @@ export default {
     async getPodURL() {
       this.webId = currentWebId(); // fetches user webID from login.ts
       this.podURLs = await getPodURLs(); // calls async function to get Pod URLs
-      this.pod = this.podURLs[0]; // can fix this to handle multiple pods (<< FUTURE >>)
+      this.pod = this.podURLs[0]; // TODO: fix this to handle multiple pods (<< FUTURE >>)
     },
 
     /*
@@ -151,25 +151,30 @@ export default {
 body {
   line-height: 1.6;
   margin: 15px;
-  font-family: "Courier New", monospace;
-  max-width: 900px;
+  font-family: "Oxanium", monospace;
+  max-width: 80%;
   margin: auto;
+  margin-top: 20px;
   padding: 20px;
-  background: #d0e0fc;
+  background: #445560;
   border-radius: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 
 .container {
-  font-family: "Courier New", monospace;
-  max-width: 900px;
+  font-family: "Oxanium", monospace;
+  max-width: 90%;
   margin: auto;
   padding: 20px;
-  background: #d0e0fc;
+  background: #445560;
   border-radius: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 
+.upload-section {
+  font-family: "Oxanium", monospace;
+}
+
 .v-btn {
   margin-left: 15px;
   margin-bottom: 15px;
diff --git a/src/components/Styling/TheHeader.vue b/src/components/Styling/TheHeader.vue
diff --git a/src/components/getData.ts b/src/components/getData.ts

-Original file line number
+Diff line change
   <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=Orbitron:[email protected]&family=Oxanium:[email protected]&display=swap" rel="stylesheet">
++
 </html>