Feature/minor UI improvements

osd2f/definitions/content_settings.py

@@ -101,6 +101,7 @@ class UploadPage(BaseModel):
 
 class ContentSettings(BaseModel):
     project_title: str
+    contact_us_text: str
     contact_us: EmailStr
     static_pages: Dict[PageTypeEnum, ContentPage]
     upload_page: UploadPage

osd2f/server.py

@@ -100,6 +100,7 @@ async def upload():
             content_settings=content_settings,
             upload_settings=upload_settings,
             sid=request.args.get("sid", "test"),
+            current_page="upload",
         )
     # for data submissions posted by the interface
     elif request.method == "POST":
@@ -141,6 +142,7 @@ async def researcher():
         "formats/researcher_template.html.jinja",
         content_settings=content_settings,
         password_protected=bool(app.config["DATA_PASSWORD"]),
+        current_page="researcher",
     )
 
 

osd2f/settings/default_content_settings.yaml

@@ -1,110 +1,109 @@
-project_title : OSD2F
-contact_us : email@domain.tld
-static_pages: 
-  home: 
-    active : True
-    name : The OSD2F project
+project_title: Data Donation Framework
+contact_us_text: "Email to"
+contact_us: email@domain.tld
+static_pages:
+  home:
+    active: True
+    name: The Data Donation Framework project
     blocks:
-      - type : jumbotron
-        title : Data donation made easy
-        id : top
-        image : "/static/skull_phone_cc.jpg"
-        lines : 
-            - A general way of donating data
-            - For JSON based GDPR exports
-            - To use with external survey and analysis tools
-        buttons : 
-            - name : About the project
-              label : "btn-primary"
-              link : "#project"
-            - name: How it works
-              label : "btn-success" 
-              link : "/donate" 
+      - type: jumbotron
+        title: Data donation made easy
+        id: top
+        image: "/static/skull_phone_cc.jpg"
+        lines:
+          - A general way of donating data
+          - For JSON based GDPR exports
+          - To use with external survey and analysis tools
+        buttons:
+          - name: About the project
+            label: "btn-primary"
+            link: "#project"
+          - name: How it works
+            label: "btn-success"
+            link: "/donate"
 
-      - type : two_block_row
-        id : project
+      - type: two_block_row
+        id: project
         image: "/static/study_cc.jpg"
         image_pos: left
-        title : OSD2F provides a whitelist based collection website
-        lines : 
+        title: Data Donation Framework provides a whitelist based collection website
+        lines:
           - Under GDPR, everyone should be able to export <br> their data in machine-readable format
           - Many platform provide standardized ways to get this data by <br> exporting it as a set of JSON files
           - This app allows researchers to easily and safely collect exported data donated by participants in their studies
-        buttons : 
+        buttons:
           - name: About the developers
-            label : "btn-primary"
-            link : "#team"
+            label: "btn-primary"
+            link: "#team"
           - name: Donate now
             label: "btn-success"
             link: "/donate"
 
-      - type : two_block_row
-        id : team
-        title : Open Source Data Donation Framework
-        lines : 
-          - The digital traces that people leave through their use of various online platforms provide tremendous opportunities for studying human behavior. 
-          - However, the collection of these data is hampered by legal, ethical and technical challenges. 
+      - type: two_block_row
+        id: team
+        title: Open Source Data Donation Framework
+        lines:
+          - The digital traces that people leave through their use of various online platforms provide tremendous opportunities for studying human behavior.
+          - However, the collection of these data is hampered by legal, ethical and technical challenges.
           - We present a framework and tool for collecting these data through a data donation platform where consenting participants can securely submit their digital traces.
-        circles_row: 
-            - title : Prof. Dr. Hypothetical collaborator
-              subtitle: this person does not exist
-              image : "https://thispersondoesnotexist.com/image"
-            - title : Sponsored by
-              subtitle: A random image
-              image : "https://picsum.photos/200/300.jpg"
-        buttons : 
+        circles_row:
+          - title: Prof. Dr. Hypothetical collaborator
+            subtitle: this person does not exist
+            image: "https://thispersondoesnotexist.com/image"
+          - title: Sponsored by
+            subtitle: A random image
+            image: "https://picsum.photos/200/300.jpg"
+        buttons:
           - name: About the project
-            label : "btn-primary"
-            link : "#team"
+            label: "btn-primary"
+            link: "#team"
           - name: Donate now
             label: "btn-success"
             link: "/donate"
 
-
   privacy:
-    active : True
-    name : Privacy protection
-    blocks : 
-      - type : jumbotron
-        title : Data donation made easy
-        id : top
-        lines : 
-            - A simple application for donation collection
+    active: True
+    name: Privacy protection
+    blocks:
+      - type: jumbotron
+        title: Data donation made easy
+        id: top
+        lines:
+          - A simple application for donation collection
         buttons: []
 
-
   donate:
-    active : False
-    name : Donation Page
-    blocks : []
+    active: False
+    name: Donation Page
+    blocks: []
 
 upload_page:
-  blocks : []
-  upload_box :
-    header : "Select file(s):"
-    explanation : 
+  blocks: []
+  upload_box:
+    header: "Select file(s):"
+    explanation:
       - "You can use the file selector to select the zipfile from your platform"
       - "You can also drag the folder into this box"
-  thanks_text: "Thanks for trying osd2f"
-  processing_text : "processing your donation for preview"
+  thanks_text: "Thanks for trying Data Donation Framework"
+  processing_text: "processing your donation for preview"
   file_indicator_text: "Entries in your donation: "
-  donate_button : "Donate"
-  inspect_button : "Inspect & edit"
+  donate_button: "Donate"
+  inspect_button: "Inspect & edit"
   preview_component:
     entries_in_file_text: "Entries in this file: "
-    title : "Inspect & Edit your donation"
-    explanation :
+    title: "Inspect & Edit your donation"
+    explanation:
       - The top shows the files in your donation
       - In each file, you can search for content
       - You can remove content by clicking on the rows and pressing "remove selection"
-    remove_rows_button : "remove selected rows"
+    remove_rows_button: "remove selected rows"
     search_prompt: "Search in file"
     search_box_placeholder: "type to search this file"
-    previous_file_button : Previous file
+    previous_file_button: Previous file
     next_file_button: Next file
-  consent_popup :
-    title : "I want to donate my data..."
-    lead : "This box explains the conditions of your donation"
+  consent_popup:
+    title: "I want to donate my data..."
+    lead: "This box explains the conditions of your donation"
     points:
       - how data is secured
       - what the data will be used for

osd2f/templates/blocks/footer.html.jinja

@@ -1,5 +1,5 @@
     <footer>
         <div class="container-fluid bg-dark m-0 pt-2 pb-2 text-center text-white text-bold">
-            <p style="font-size: x-small;" class="m-0">Contact us at: {{ content_settings.contact_us }}</p>
+            <p style="font-size: x-small;" class="m-0"> {{ content_settings.contact_us_text}}: <a href="mailto:{{ content_settings.contact_us }}">{{ content_settings.contact_us }}</a></p>
         </div>
     </footer>

osd2f/templates/blocks/head.html.jinja

@@ -1,4 +1,5 @@
 <head>
+    <title>{{ content_settings.project_title }} - {{ current_page }} </title>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">

osd2f/templates/formats/upload_template.html.jinja

@@ -49,25 +49,14 @@
 
             </div>      
         </div>
-        <!-- The status messages (generally hidden) -->
-        <div id="processing" class="invisible">
-            <div class="row p-2 justify-content-center">
-                <h2 class="text-center">{{content_settings.upload_page.processing_text}}</h2>
-            </div>
-            <div class="row p-2 justify-content-center">
-                <div class="spinner-border text-primary" role="status">
-                    <span class="sr-only">Loading...</span>
-                </div>
-            </div>
-        </div>
 
         <!-- The "thank you" message (initially hidden!) -->
         <div class="row justify-content-center invisible" id="thankyou">
             <h1>{{content_settings.upload_page.thanks_text}}</h1>
         </div>
 
         <!-- The Veux component to interact with the uploaded data -->
-        <div class="row justify-content-center p-4">
+        <div class="row justify-content-center p-2">
             <div id="visualization">
 
                 <donation-container
@@ -77,6 +66,18 @@
                 </donation-container>
             </div>
         </div>
+
+        <!-- The status messages (generally hidden) -->
+        <div id="processing" class="invisible">
+            <div class="row p-2 justify-content-center">
+                <h2 class="text-center">{{content_settings.upload_page.processing_text}}</h2>
+            </div>
+            <div class="row p-2 justify-content-center">
+                <div class="spinner-border text-primary" role="status">
+                    <span class="sr-only">Loading...</span>
+                </div>
+            </div>
+        </div>
 
     </div>
 

tests/content_configuration_test.py

@@ -23,6 +23,7 @@
 
 fake_settings = ContentSettings(
     project_title="test project_title",
+    contact_us_text="mail to",
     contact_us="test@case.nl",
     static_pages={
         "home": ContentPage(