Feature/new footer

.github/config/.finnishwords.txt

@@ -96,18 +96,14 @@ kansio
 kansioille
 kansioina
 kansion
-kansion
 kansiossa
 kansiot
-kansiot
-kansiota
 kansiota
 kanssa
 kanssasi
 käynnissä
 käynnistyy
 käytä
-käytä
 käytettävissä
 käytetylle
 käytössä
@@ -165,6 +161,7 @@ koskevia
 kulutuksesta
 kulutus
 kunnes
+kuvaus
 kyseisen
 ladata
 ladattavat
@@ -174,7 +171,6 @@ lähetettäväksi
 lähetettävät
 lähetettiin
 lähetetyt
-lähetetyt
 lähettäessä
 lähettäjän
 lähettämistä
@@ -318,7 +314,6 @@ projekteja
 projekti
 projektia
 projektien
-projektien
 projektiin
 projektilla
 projektille
@@ -350,6 +345,7 @@ rajoitteiden
 resurssienkäyttö
 resurssit
 rivinvaihtoa
+saavutettavuus
 sähköpostitse
 säiliö
 säiliöitä
@@ -432,7 +428,6 @@ tarkoittaen
 tarvitset
 tässä
 tätä
-tätä
 taustalla
 tavallisesti
 täytyy
@@ -450,6 +445,7 @@ tieto
 tietoa
 tietosivulta
 tietotekniikan
+tietotekniikkakeskus
 tila
 tilan
 tilankäyttö
@@ -472,6 +468,7 @@ tunnuksen
 tunnus
 tunti
 tuo
+tuottaa
 tyhjä
 tyhjennä
 tyyppi

swift_browser_ui_frontend/public/index.html

@@ -7,6 +7,8 @@
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
   <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@mdi/font@6.5.95/css/materialdesignicons.min.css">
+  <link rel="stylesheet" href="https://use.typekit.net/csv4mjm.css" />
+
   <title>Swift browser UI</title>
 </head>
 

swift_browser_ui_frontend/src/common/lang.js

@@ -177,7 +177,7 @@ let default_translations = {
         instructions: "Share ID instructions",
         close_instructions: "Close instructions",
         share_cont: "Share the bucket",
-        share_title: "Share folder: ",
+        share_title: "Share folder",
         share_subtitle:
           "This folder is already accessible to all the members" +
           " of this project.",
@@ -196,7 +196,7 @@ let default_translations = {
         shared_successfully: "Folder was shared successfully!",
         project_id: "Project ID",
         field_label: "Project Identifiers to share with",
-        field_placeholder: "Add Project IDs",
+        field_placeholder: "Add Share IDs",
         cancel: "Cancel",
         confirm: "Share",
         to_me: "Shared to the project",
@@ -451,6 +451,12 @@ let default_translations = {
         sharing: "Sharing API tokens",
         about: "About Sensitive Data Services",
       },
+      footerMenu:{
+        groupandprogram:"Sensitive Data Services - SD Connect",
+        csc:"Powered by CSC - IT Center for Science Ltd.",
+        servicedescription:"Service Description",
+        accessibility:"Accessibility",
+      },
     },
   },
   fi: {
@@ -621,7 +627,7 @@ let default_translations = {
         instructions: "Jaa tunnus ohjeet",
         close_instructions: "Sulje ohjeet",
         share_cont: "Jaa säiliö",
-        share_title: "Jaa kansio: ",
+        share_title: "Jaa kansio ",
         share_subtitle:
           "Tämä kansio on jo kaikkien tämän projektin jäsenten käytettävissä.",
         share_other_projects: "Jaa toisen projektin kanssa",
@@ -634,7 +640,7 @@ let default_translations = {
         read_perm: "Salli säiliön luku",
         write_perm: "Salli säiliöön kirjoitus",
         shared_successfully: "Kansion jakaminen onnistui!",
-        project_id: "Projektin tunnus",
+        project_id: "Jaa tunnus",
         field_label: "Jaa projektitunnisteille",
         field_placeholder: "Lisää projektitunnukset",
         cancel: "Peru",
@@ -885,6 +891,12 @@ let default_translations = {
         sharing: "API avainten jakaminen",
         about: "Tietoa",
       },
+      footerMenu:{
+        groupandprogram:"Sensitive Data Service-SD Connect",
+        csc:"Palvelun tuottaa CSC -Tieteen Tietotekniikkakeskus Oy",
+        servicedescription: "Palvelun Kuvaus",
+        accessibility:"Saavutettavuus",
+      },
     },
   },
 };

swift_browser_ui_frontend/src/components/CFooter.vue

@@ -0,0 +1,113 @@
+<template>
+  <div id="c-footer">
+    <nav class="navbar">
+      <div class="navbar-menu is-active">
+        <div class="navbar-start">
+          <div class="col-3">
+            <div class="row navbar-item ">
+              <span class="largetext">
+                {{ $t("message.footerMenu.groupandprogram") }}
+              </span>
+            </div>
+            <div class="row navbar-item smalltext">
+              <a
+                class="linktext"
+                href="https://csc.fi"
+                :alt="$t('message.footerMenu.csc')"
+              >
+                {{ $t("message.footerMenu.csc") }}
+              </a>
+            </div>
+          </div>        
+        </div>
+
+        <div
+          id="rightmenu"
+          class="navbar-end"
+        > 
+          <div class="navbar-item smalltext">
+            <a
+              class="linktext"
+              href="https://research.csc.fi/-/sd-connect"
+              :alt="$t('message.footerMenu.servicedescription')"
+            >
+              {{ $t("message.footerMenu.servicedescription") }}
+            </a>
+          </div> 
+          <div class="navbar-item smalltext">
+            <p>{{ $t("message.footerMenu.accessibility") }}</p> 
+          </div>
+        </div>
+      </div>
+    </nav>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name:"CFooter",
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/css/prod.scss";
+
+#c-footer{
+  height:  fit-content;
+  width: 100%;
+  padding:40px 60px;
+  background-color:$csc-lightest-grey;
+  z-index: 2;
+}
+
+.navbar{
+  background-color:$csc-lightest-grey;
+  padding: auto;
+  width: 100%;  
+
+}
+.navbar-menu{
+  background-color:$csc-lightest-grey; 
+  width: 100%;
+  height: 100%;
+  box-shadow: none;
+}
+
+.navbar-start{
+  background-color:$csc-lightest-grey;
+}
+
+.navbar-end{
+  background-color:$csc-lightest-grey;
+}
+
+#leftmenu{
+  padding-left: 10px;
+}
+
+.largetext{
+  font-family: var(--csc-font-family);
+  font-style: normal;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 19px;
+  color: $csc-grey;
+}
+.smalltext{
+  font-family:  var(--csc-font-family);;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 18px;
+  color: $csc-grey;
+}
+.linktext {
+  color: $csc-grey; 
+  font-weight: 400;
+}
+a:hover {
+  background-color: #CCF4F0;
+  text-decoration: underline;     
+}
+</style>

swift_browser_ui_frontend/src/components/EditTagsModal.vue

@@ -27,7 +27,7 @@
         size="large"
         @click="toggleEditTagsModal"
       >
-         {{ $t("message.cancel") }}
+        {{ $t("message.cancel") }}
       </c-button>
       <c-button
         size="large"

swift_browser_ui_frontend/src/components/UploadNotification.vue

@@ -61,7 +61,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import "@/css/prod.scss";
 
 h3 {

swift_browser_ui_frontend/src/css/csc.scss

@@ -17,12 +17,16 @@ $csc-light-green: #c9e2ae;
 $csc-grey: #595959;
 $csc-light-grey: #757575;
 $csc-lighter-grey: #d2d3d5;
+$csc-lightest-grey:#dfe1e3;
 $csc-grey-blue: #8196b9;
 $csc-light-grey-blue: #f8f9fc;
 $csc-yellow: #ffd534;
 $csc-green: #51a808;
 $csc-orange: #ff5800;
 
+//Font Setting
+$csc-font-family: 'museo-sans';
+
 // Set bulma initial colors to be derived from
 // Not overriding black, black's fine as is
 $orange: $csc-orange;

swift_browser_ui_frontend/src/entries/main.js

@@ -46,6 +46,9 @@ import Resumable from "resumablejs";
 // Upload notification handler
 import UploadNotification from "@/components/UploadNotification";
 
+//Custom footer element
+import CFooter from "@/components/CFooter";
+
 // Import delay
 import delay from "lodash/delay";
 
@@ -123,6 +126,7 @@ new Vue({
   router,
   store,
   components: {
+    CFooter,
     BrowserMainNavbar,
     BrowserSecondaryNavbar,
     CreateFolderModal,