feat: update "About Project" popup

feat: create "Code Author" tag
AVO-cado-team · Feb 4, 2024 · 63123ff · 63123ff
1 parent 304dc7e
commit 63123ff
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 16 deletions.
diff --git a/.github/workflows/pr_check.yml b/.github/workflows/pr_check.yml
@@ -30,4 +30,4 @@ jobs:
     - name: Build
       run: trunk build
     - name: Run tests
-      run: cargo test --verbose
+      run: cargo test --verbose --target x86_64-unknown-linux-gnu
diff --git a/src/about_popup.rs b/src/about_popup.rs
@@ -14,7 +14,11 @@ pub fn about_popup(props: &Props) -> Html {
           <div class="about-us-block">
               <div class="about-info-block">
                 <h1>{ "About project" }</h1>
-                <p>{ "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet dui iaculis velit consectetur sagittis vitae at sem. Aliquam id lacus at nibh accumsan tincidunt et ac eros. Nullam sed malesuada lectus. Nulla sed magna a odio mattis sodales nec in augue. Praesent imperdiet." }</p>
+                <p>
+                    { "If something irks you about our project, we're all ears and open arms for " }
+                    <a href="https://github.com/AVO-cado-team/ram-webgui?tab=readme-ov-file#contributing">{ "contributions" }</a>
+                    { ". Dive in; your input might be the magic touch we need!" }
+                </p>
                 <div class="authors">
                     <h3>{ "Authors:" }</h3>
                     <br />

diff --git a/src/header.rs b/src/header.rs
@@ -53,15 +53,34 @@ pub fn header(props: &Props) -> Html {
     let on_step = props.on_step.clone();
     let on_stop = props.on_stop.clone();
 
+    let author = gloo::utils::window()
+        .location()
+        .search()
+        .expect("No search in URL!")
+        .split('&')
+        .find(|x| x.starts_with("?author="))
+        .map(|x| x.replace("?author=", ""))
+        .map(|x| x.replace("%20", " "));
+
     html! {
       <header>
           if *show_popup {
             <AboutPopup popup_ref={popup_ref.clone()}/>
           }
-          <div class="logo">
-            <a href="https://www.fiit.stuba.sk/" alt="FIIT">
-              <img src="assets/logo_fiit.png" alt="FIIT logo" />
-            </a>
+          <div class="header-left">
+            <div class="logo">
+              <a href="https://www.fiit.stuba.sk/" alt="FIIT">
+                <img src="assets/logo_fiit.png" alt="FIIT logo" />
+              </a>
+            </div>
+            <div class="code-author-container">
+              if let Some(author) = author {
+                  <div class="code-author">
+                    {"Code Author: "}
+                    <span class="code-author-name">{author}</span>
+                  </div>
+              }
+            </div>
           </div>
           <div class="controls">
             <button onclick={move |_| on_start.emit(())} class="control-btn"><div class="start-btn"/></button>
@@ -74,7 +93,7 @@ pub fn header(props: &Props) -> Html {
               class="about-us"
               ref={popup_button_ref}
             >
-              {"About Us"}
+              {"About Project"}
             </button>
           </div>
       </header>

diff --git a/styles/about.css b/styles/about.css
@@ -3,10 +3,10 @@
   position: fixed;
   top: 7%;
   right: 0;
-  // transform: translate(-100%, -100%);
   background: rgba(0, 0, 0, 0.8);
   z-index: 999;
   margin: .5em calc(13px + .5em);
+  border-radius: 20px;
 }
 
 .about-us-block {
@@ -33,6 +33,7 @@
   background: #282c34;
   border: 1px solid #72767f5c;
   padding: 15px;
+  border-radius: 20px;
 }
 
 .about-us-block .authors {
@@ -64,4 +65,4 @@
 
 .author a {
   margin-right: 1em;
-}
+}
diff --git a/styles/style.css b/styles/style.css
@@ -54,20 +54,57 @@ a:hover {
   border-bottom: 2px solid #5E81AC;
 }
 
+.header-left {
+  display: flex;
+  /* flex-direction: column; */
+  /* justify-content: center; */
+}
+
 .logo {
-  width: 8%;
+  max-width: 7em;
   height: auto;
   display: inline-block;
+  padding: 0.6em;
+  margin: 0.2em;
+  border-radius: 10px;
 }
 
 .logo img {
-  width: 100%;
-  height: auto;
   max-width: 100%;
-  max-height: 100%;
-  margin: 1em 1em 0.9em 1em;
 }
 
+.logo:hover {
+  cursor: pointer;
+  opacity: 0.8;
+  transition: 0.5s;
+  background-color: #2c3038;
+}
+
+.code-author-container {
+  display: flex;
+  align-items: flex-start;
+  width: 0.1em;
+  font-size: 0.6rem;
+  font-weight: 400;
+  user-select: none;
+  margin-top: 1.5em;
+}
+
+.code-author {
+  color: #2E3440;
+  background-color: #EBCB8B;
+  border-radius: 100px;
+  white-space: nowrap;
+  padding: 0.5em;
+}
+
+.code-author-name {
+  font-weight: 600;
+  color: #2E3440;
+}
+
+
+
 .controls {
   display: flex;
   justify-content: space-around;
@@ -99,9 +136,22 @@ a:hover {
   color: inherit;
   margin-right: 1em;
   color: white;
-  font-size: 1rem;
   padding: 10px 15px;
   font-family: Droid Sans Mono, monospace;
+  font-size: 1.3rem;
+  border-radius: 5px;
+  background-color: #2c3038;
+  transition: 0.5s;
+}
+
+button.about-us:hover {
+  cursor: pointer;
+  background-color: #434C5E;
+  border-radius: 10px;
+}
+
+button.about-us:active {
+  background-color: #2c3038;
 }
 
 .control-btn div {
@@ -112,7 +162,7 @@ a:hover {
 }
 
 .control-btn:hover {
-  animation-duration: 1s;
+  transform: scale(1.1);
   cursor: pointer;
   background-color: #434C5E;
   border-radius: 10px;