From d4109b937c4961500bd007089b4821c938008a30 Mon Sep 17 00:00:00 2001 From: Zain Ali Date: Thu, 13 Jul 2023 01:21:27 +0200 Subject: [PATCH] About Page Improvment About Section with new design --- src/javascript/components/About.jsx | 906 ++++++++++++++++++++++++++- src/javascript/components/Intro.jsx | 75 --- src/javascript/components/Upload.jsx | 2 +- src/stylesheets/custom.css | 171 +++++ src/stylesheets/upload.css | 2 +- 5 files changed, 1072 insertions(+), 84 deletions(-) diff --git a/src/javascript/components/About.jsx b/src/javascript/components/About.jsx index c737592..e6fbf60 100644 --- a/src/javascript/components/About.jsx +++ b/src/javascript/components/About.jsx @@ -1,9 +1,6 @@ import React, { useEffect } from "react"; -import ReactHtmlParser from "react-html-parser"; import tumLogo from "../../images/tum.png"; import mpiLogo from "../../images/mpi.png"; -import html from "./About.md"; -import version from "../../version.json"; const About = () => { useEffect(() => { @@ -12,7 +9,902 @@ const About = () => { return ( <> -
+
+
+
+
+
+
+
+
+ + Technical University of Munich logo + +
+
+
+
+ + Max Planck Institute for Biological Cybernetics logo + +
+
+
+
+
+
+
+
+
+
+

About luox

+

+ A user-friendly, open-access platform for calculating quantities + related to light and lighting +

+
+
+
+
+
+
+
+
+
    +
  • + + 1 About + +
    +
    +
    +
    +
      +
    • + + 1-1 Purpose + +
      +

      + The purpose of the luox platform is to + faciliate the calculation of quantities + related to light and lighting in a + user-friendly, open-access and free + fashion. Users can upload spectra (which + are only stored in the browser) and the + platform will calculate relevant quantites + (including (il)luminance, chromaticity, + and α-opic (ir)radiance and α-opic + daylight (il)luminances) from the spectra, + generate a visualisation of the spectrum, + and enable the export of calculations in + tabular form. All default quantities + reported here are supported by the{" "} + + International Commission on Illumination + (CIE) + + . +

      +

      + The platform is primarily geared towards + researchers and research users interested + in the effects of light exposure on human + physiology and behaviour, but it may be + interesting to students, academics and + professionals in other disciplines and + areas. +

      +

      + luox is deployed on{" "} + + Netlify + + . +

      +
      +
      • +
    • + + 1-2 Team + +
      +

      + This platform was developed by{" "} + + Prof. Dr. Manuel Spitschan + {" "} + (Technical University of Munich and Max + Planck Institute for Biological + Cybernetics) and{" "} + + Go Free Range + + . Code to calculate colour indices was + developed by{" "} + + Dr. Somang Nam + {" "} + and{" "} + + Dr. Jennifer A. Veitch + {" "} + at the National Research Council of Canada + – Construction Research Centre, in + collaboration with Dr. Spitschan. +

      +
      +
      • +
    • + + 1-3 Citing + +
      +

      + If you use luox for calculations, please + cite the following (APA format): +

      +

      Software:

      +

      + + Spitschan, M., Nam, S., & Veitch, J. A. + (2022). luox: Platform for calculating + quantities related to light and lighting + [Software]. Available from{" "} + + https://luox.app/ + + . + +

      +

      Companion paper:

      +

      + + Spitschan, M., Mead, J., Roos, C., + Lowis, C., Griffiths, B., Mucur, P., + Herf, M., Nam, S., & Veitch, J. A. + (2022). luox: novel validated + open-access and open-source web platform + for calculating and sharing + physiologically relevant quantities for + light and lighting. Wellcome Open Res, + 6, 69. + doi:10.12688/wellcomeopenres.16595.3 + +

      +

      For citing the source code:

      +

      + + Spitschan, M., Nam, S., & Veitch, J. A. + (2022). luox: Platform for calculating + quantities related to light and lighting + [Source code]. Available from{" "} + + + https://github.com/luox-app/luox + + + . + +

      +

      + When reporting quantities related to CIE S + 026, we also recommend citing the + standard: +

      +

      + + CIE (2018). CIE S 026/E:2018: CIE System + for Metrology of Optical Radiation for + ipRGC-Influenced Responses to Light. + Vienna: CIE Central Bureau. DOI:{" "} + + 10.25039/S026.2018 + + . + +

      +

      + When citing other outputs from this + software, we recommend citing the + appropriate documents, listed below. +

      +
      +
      • + {/*
    • + + 1-4 Announcements + +
      +

      + Eleifend mi in nulla posuere sollicitudin + aliquam ultrices sagittis orci. Faucibus + pulvinar elementum integer enim. Sem nulla + pharetra diam sit amet nisl suscipit. + Rutrum tellus pellentesque eu tincidunt. + Lectus urna duis convallis convallis + tellus. Urna molestie at elementum eu + facilisis sed odio morbi quis +

      +
      +
      • */} +
    • + + 1-5 Support + +
      +

      + For any support-related questions, please + email{" "} + + luox-support@tuebingen.mpg.de + + . Please be as specific as possible in + your request. +

      +
      +
      • +
    • + + 1-6 Bug reports and feature + requests + +
      +

      + To report bugs and suggest new features, + please raise an issue on the + project's{" "} + + GitHub page + + . When reporting a bug or any other issue, + you need to be as specific as possible: +

        +
      • + Include concrete and specific steps to + reproduce your problem, including any + files that pose an issue +
        • +
      • + If the problem only occurs + occasionally but is reproducible, + please include any additional + contextual information +
        • +
      • + If the problem is not reproducible, it + may not be useful to submit a bug + report +
        • +
      +

      +
      +
      • +
    • + + 1-7 Funding + +
      +

      + Funding to develop luox was provided by: +

      +

      +

      +

      +

      + The development of the module for loading + SPDX files was supported by the{" "} + + Illumating Engineering Society (IES) + + . +

      +

      + During development of the platform, Dr + Manuel Spitschan was supported by a Sir + Henry Wellcome Postdoctoral Fellowship ( + + Wellcome Trust + + , 204686/Z/16/Z) and{" "} + + Linacre College + + , University of Oxford (Biomedical + Sciences Junior Research Fellowship). +

      +

      + The module for calculating CIE colour + indices (Duv, Tcp, Ra, and Rf ), the power + user mode, and the optional IES TM-30-20 + indices and graphics was developed at the{" "} + + National Research Council of Canada, + Construction Research Centre + + , as a strategic research activity. +

      +

      + Deployment on{" "} + + Netlify + {" "} + is supported by the{" "} + + Netlify Open Source Plan + + . +

      +
      +
      • +
    • + + 1-8 Contributing code of + conduct + +
      +

      + We welcome contributions. To contribute + code, please{" "} + + create a fork and issue a pull request + on GitHub + + . +

      +
      +

      + Contributor Covenant Code of Conduct +

      +
      +
      +
      Our Pledge
      +
      +

      + We as members, contributors, and leaders + pledge to make participation in our + community a harassment-free experience for + everyone, regardless of age, body size, + visible or invisible disability, + ethnicity, sex characteristics, gender + identity and expression, level of + experience, education, socio-economic + status, nationality, personal appearance, + race, caste, color, religion, or sexual + identity and orientation. +

      +

      + We pledge to act and interact in ways that + contribute to an open, welcoming, diverse, + inclusive, and healthy community. +

      +
      +
      Our Standards
      +
      +

      + Examples of behavior that contributes to a + positive environment for our community + include: +

        +
      • + Demonstrating empathy and kindness + toward other people +
        • +
      • + Being respectful of differing + opinions, viewpoints, and experiences +
        • +
      • + Giving and gracefully accepting + constructive feedback +
        • +
      • + Accepting responsibility and + apologizing to those affected by our + mistakes, and learning from the + experience +
        • +
      • + Focusing on what is best not just for + us as individuals, but for the overall + community +
        • +
      +

      +

      + Examples of unacceptable behavior include: +

        +
      • + The use of sexualized language or + imagery, and sexual attention or + advances of any kind +
        • +
      • + Trolling, insulting or derogatory + comments, and personal or political + attacks +
        • +
      • Public or private harassment
        • +
      • + Publishing others' private + information, such as a physical or + email address, without their explicit + permission +
        • +
      • + Other conduct which could reasonably + be considered inappropriate in a + professional setting +
        • +
      +

      +
      +
      Enforcement Responsibilities
      +
      +

      + Community leaders are responsible for + clarifying and enforcing our standards of + acceptable behavior and will take + appropriate and fair corrective action in + response to any behavior that they deem + inappropriate, threatening, offensive, or + harmful. +

      +

      + Community leaders have the right and + responsibility to remove, edit, or reject + comments, commits, code, wiki edits, + issues, and other contributions that are + not aligned to this Code of Conduct, and + will communicate reasons for moderation + decisions when appropriate. +

      +
      +
      Scope
      +
      +

      + This Code of Conduct applies within all + community spaces, and also applies when an + individual is officially representing the + community in public spaces. Examples of + representing our community include using + an official e-mail address, posting via an + official social media account, or acting + as an appointed representative at an + online or offline event. +

      +
      +
      Enforcement
      +
      +

      + Instances of abusive, harassing, or + otherwise unacceptable behavior may be + reported to the community leaders + responsible for enforcement via email at{" "} + + manuel.spitschan@tum.de + + . All complaints will be reviewed and + investigated promptly and fairly. +

      +

      + All community leaders are obligated to + respect the privacy and security of the + reporter of any incident. +

      +
      +
      Enforcement Guidelines
      +
      +

      + Community leaders will follow these + Community Impact Guidelines in determining + the consequences for any action they deem + in violation of this Code of Conduct: +

      +
      1. Correction
      +

      + Community Impact: Use of + inappropriate language or other behavior + deemed unprofessional or unwelcome in the + community. +

      +

      + Consequence: A private, + written warning from community leaders, + providing clarity around the nature of the + violation and an explanation of why the + behavior was inappropriate. A public + apology may be requested. +

      +
      2. Warning
      +

      + Community Impact: A + violation through a single incident or + series of actions. +

      +

      + Consequence: A warning + with consequences for continued behavior. + No interaction with the people involved, + including unsolicited interaction with + those enforcing the Code of Conduct, for a + specified period of time. This includes + avoiding interactions in community spaces + as well as external channels like social + media. Violating these terms may lead to a + temporary or permanent ban. +

      +
      3. Temporary Ban
      +

      + Community Impact: A + serious violation of community standards, + including sustained inappropriate + behavior. +

      +

      + Consequence: A temporary + ban from any sort of interaction or public + communication with the community for a + specified period of time. No public or + private interaction with the people + involved, including unsolicited + interaction with those enforcing the Code + of Conduct, is allowed during this period. + Violating these terms may lead to a + permanent ban. +

      +
      4. Permanent Ban
      +

      + Community Impact:{" "} + Demonstrating a pattern of violation of + community standards, including sustained + inappropriate behavior, harassment of an + individual, or aggression toward or + disparagement of classes of individuals. +

      +

      + Consequence: A permanent + ban from any sort of public interaction + withi the community. +

      +
      +
      Attribution
      +
      +

      + This Code of Conduct is adapted from the{" "} + + Contributor Covenant version 2.0 + + . +

      +

      + Community Impact Guidelines were inspired + by{" "} + + Mozilla's code of conduct + enforcement ladder + + . +

      +

      + For answers to common questions about this + code of conduct, see{" "} + + {" "} + the FAQ + + .{" "} + + Translations are available + + . +

      +
      +
      • +
    +
    +
    +
    +
    +
    • + +
  • + + 02 Usage + +
    +
    +
    +
    +
      +
    • + + 01 About urna duis? + +
      +

      + Feugiat pretium nibh ipsum consequat. + Tempus iaculis urna id volutpat lacus + laoreet non curabitur gravida. Venenatis + lectus magna fringilla urna porttitor + rhoncus dolor purus non. +

      +
      +
      • +
    +
    +
    +
    +
    +
    • +
  • + + 03 Deposition + +
    +
    +
    +
    +
      +
    • + + 01 About urna duis? + +
      +

      + Feugiat pretium nibh ipsum consequat. + Tempus iaculis urna id volutpat lacus + laoreet non curabitur gravida. Venenatis + lectus magna fringilla urna porttitor + rhoncus dolor purus non. +

      +
      +
      • +
    +
    +
    +
    +
    +
    • +
  • + + 04 Under the hood + +
    +
    +
    +
    +
      +
    • + + 01 About urna duis? + +
      +

      + Feugiat pretium nibh ipsum consequat. + Tempus iaculis urna id volutpat lacus + laoreet non curabitur gravida. Venenatis + lectus magna fringilla urna porttitor + rhoncus dolor purus non. +

      +
      +
      • +
    +
    +
    +
    +
    +
    • +
  • + + 05 Acknowledgements + +
    +

    Test

    +
    +
    • +
  • + + 06 Terms and conditions of website use + +
    +

    Test

    +
    +
    • +
+
+
+
+
+
+
+ {/*
@@ -37,8 +929,8 @@ const About = () => {
-
-
+
*/} + {/*

About this application

{ReactHtmlParser(html)} @@ -48,7 +940,7 @@ const About = () => {
  • Latest commit SHA: {version.latestCommitSha}
    • -
    +
    */} ); }; diff --git a/src/javascript/components/Intro.jsx b/src/javascript/components/Intro.jsx index 868a0a1..c936af0 100644 --- a/src/javascript/components/Intro.jsx +++ b/src/javascript/components/Intro.jsx @@ -80,81 +80,6 @@ const Intro = () => { data-aos-easing="ease-in-out" data-aos-duration="200" > - {/*
    -
    - - Wellcome Trust logo -
    -

    Wellcome Trust (204686/Z/16/Z, 204686/Z/16/C)

    -
    -     -
    -
    -
    -
    - - Society of Light & Lighting logo -
    -

    - Society of Light & Lighting (2020 Jean Heap Bursary) -

    -
    -     -
    -
    -
    -
    - - University of Oxford logo -
    -

    University of Oxford van Houten Fund (VH-148)

    -
    -     -
    -
    -
    -
    - - Illuminating Engineering Society logo -
    -

    Illuminating Engineering Society

    -
    -     -
    -
    -
    -
    - - National Research Council of Canada logo -
    -

    National Research Council of Canada

    -
    -     -
    -
    */}
    diff --git a/src/javascript/components/Upload.jsx b/src/javascript/components/Upload.jsx index fcaadb0..23525e1 100644 --- a/src/javascript/components/Upload.jsx +++ b/src/javascript/components/Upload.jsx @@ -49,7 +49,7 @@ const Upload = () => { return ( <> -
    +
    diff --git a/src/stylesheets/custom.css b/src/stylesheets/custom.css index 26fe309..f086539 100644 --- a/src/stylesheets/custom.css +++ b/src/stylesheets/custom.css @@ -61,4 +61,175 @@ --bs-table-hover-color: #fff; color: var(--bs-table-color); border-color: var(--bs-table-border-color); +} + +.accordion-list { + padding: 0 100px 60px 100px; +} + +.accordion-list ul { + padding: 0; + list-style: none; +} + +.accordion-list li { + padding: 20px; + background: #fff; + border-radius: 4px; + margin-bottom: 10px !important; +} + +.accordion-list a.collapsed { + color: #343a40; +} + +.accordion-list a { + display: block; + position: relative; + font-family: "Poppins", sans-serif; + font-size: 18px !important; + line-height: 24px; + font-weight: bold; + padding-right: 30px; + outline: none; + cursor: pointer; +} + +.accordion-list a.collapsed:hover { + color: #47b2e4; +} + +.collapse:not(.show) { + display: none; +} + +.accordion-list span { + color: #47b2e4; + font-weight: bold; + font-size: 18px; + padding-right: 10px; +} + +.accordion-list i { + font-size: 24px; + position: absolute; + right: 0; + top: 0; +} + +.accordion-list p { + margin-bottom: 0; + padding: 10px 0 0 0; +} + +.about-imgs-section { + padding: 20px 0px !important; +} + +.about-imgs-section .img-item:hover img { + opacity: 0.6; + transform: scale(1.1); +} + +.about-imgs-section .img-item img { + transition: all 0.3s ease-in-out; +} + +.accordion-list-sub { + padding: 20px !important; +} + +.accordion-list li { + box-shadow: 0 5px 25px 0 rgba(214, 215, 216, 0.6); + background: #fff; +} + +.accordion-list-sub li { + box-shadow: 0 5px 25px 0 rgba(214, 215, 216, 0.6); + background: #fff; +} + +.accordion-list-sub a { + font-size: 16px !important; +} + +.accordion-list-sub span { + font-size: 16px !important; +} + +.about-us-section section { + padding: 30px 0px !important; +} + +.about-us-detail a { + color: #007bff; + text-decoration: none; + background-color: transparent; + font-weight: normal !important; + font-size: medium !important; + display: inline !important; + padding-right: 0px !important; +} + +.about-us-detail a:hover { + color: #0056b3; + text-decoration: underline; +} + +.accordion-list-sub p { + padding-left: 20px !important; + padding-right: 20px !important; +} + +.about-us-detail ul { + list-style-type: disc !important; + padding: 10px 40px !important; +} +.about-us-detail li { + box-shadow: none !important; + display: list-item !important; + padding: 0px !important; + margin-bottom: 0px !important; + +} + +.section-title h4 { + font-size: 1.5rem; + font-weight: 400; + padding-bottom: 20px; + position: relative; +} + +.section-title h5 { + font-size: 1.25rem; + font-weight: 400; + padding-bottom: 20px; + position: relative; +} + +.section-title h4::before, .section-title h5::before { + content: ""; + position: absolute; + display: block; + width: 120px; + height: 1px; + background: #ddd; + bottom: 1px; + left: calc(50% - 60px); +} + +.section-title h4::after, .section-title h5::after { + content: ""; + position: absolute; + display: block; + width: 40px; + height: 3px; + background: #68A4C4; + bottom: 0; + left: calc(50% - 20px); +} + +.accordion-list-sub h6 { + padding-left: 20px !important; + margin: 10px 0px 0px 0px !important; } \ No newline at end of file diff --git a/src/stylesheets/upload.css b/src/stylesheets/upload.css index 751d0e5..a5941b8 100644 --- a/src/stylesheets/upload.css +++ b/src/stylesheets/upload.css @@ -69,7 +69,7 @@ table.errors { vertical-align: middle !important; } -section { +.upload-main section { padding: 30px 0px !important; }