Changed units to be more responsive and removed unnecessary properties

Adjusted units to be more responsive and other fixes
Adjusted units, redundant prefixes, and other things
2024-12-11 04:59:00 +00:00 · 2024-12-11 04:57:27 +00:00 · 2024-12-11 04:54:15 +00:00 · 2024-12-11 04:52:16 +00:00
6 changed files with 253 additions and 478 deletions
--- a/src/pages/songpage.rs
+++ b/src/pages/songpage.rs
@ -1,92 +0,0 @@
-use leptos::*;
-use leptos_router::use_params_map;
-use leptos_icons::*;
-use server_fn::error::NoCustomError;
-
-use crate::components::loading::*;
-use crate::components::error::*;
-use crate::api::song::*;
-use crate::models::Song;
-use crate::songs::get_song_by_id;
-
-#[component]
-pub fn SongPage() -> impl IntoView {
-    let params = use_params_map();
-
-    view! {
-        <div class="song-container home-component">
-            {move || params.with(|params| {
-                match params.get("id").map(|id| id.parse::<i32>()) {
-                    Some(Ok(id)) => {
-                        view! { <SongDetails id /> }.into_view()
-                    },
-                    Some(Err(e)) => {
-                        view! {
-                            <Error<String>
-                                title="Invalid Song ID"
-                                error=e.to_string()
-                            />
-                        }.into_view()
-                    },
-                    None => {
-                        view! {
-                            <Error<String>
-                                title="No Song ID"
-                                message="You must specify a song ID to view its page."
-                            />
-                        }.into_view()
-                    }
-                }
-            })}
-        </div>
-    }
-}
-
-#[component]
-fn SongDetails(#[prop(into)] id: MaybeSignal<i32>) -> impl IntoView {
-    let song_info = create_resource(move || id.get(), move |id| {
-        get_song_by_id(id)
-    });
-
-    view! {
-        <Transition
-            fallback=move || view! { <LoadingPage /> }
-        >
-            {move || song_info.get().map(|song| {
-                match song {
-                    Ok(Some(song)) => {
-                        view! { <SongOverview song /> }.into_view()
-                    },
-                    Ok(None) => {
-                        view! {
-                            <Error<String>
-                                title="Song Not Found"
-                                message=format!("Song with ID {} not found", id.get())
-                            />
-                        }.into_view()
-                    },
-                    Err(error) => {
-                        view! {
-                            <ServerError<NoCustomError>
-                                title="Error Fetching Song"
-                                error
-                            />
-                        }.into_view()
-                    }
-                }
-            })}
-        </Transition>
-    }
-}
-
-#[component]
-fn SongOverview(song: Song) -> impl IntoView {
-    view! {
-        <div class="song-header">
-            <h1>{song.title}</h1>
-            <p>{format!("Artist: {}", song.artist)}</p>
-            <p>{format!("Album: {}", song.album.unwrap_or_else(|| "Unknown".to_string()))}</p>
-            <p>{format!("Duration: {}", song.duration)}</p>
-        </div>
-    }
-}
--- a/style/login.scss
+++ b/style/login.scss
@ -8,155 +8,56 @@
  top: 50%;
  left: 50%;
  width: 27rem;
-  height: 31rem;
+  height: 30rem; /* Slightly adjusted height for better layout */
  transform: translate(-50%, -50%);
  background: $auth-containers;
-  z-index: 1;
-  border-radius: 8px;
+  z-index: 10; /* Increased z-index for better stacking context */
+  border-radius: 0.5rem; /* Adjusted unit */
  overflow: hidden;
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); /* Added subtle shadow */
 }

 .login-container .header h1 {
-  margin-top: 3rem;
-  font-size: 2.5rem;
+  margin-top: 2.5rem; /* Adjusted margin for alignment */
+  font-size: 2.4rem; /* Slightly smaller for consistency */
  color: $accent-color;
-}
-.login-container .login-form {
-  width: 75%;
-}
-.login-form .input-box:first-child {
-  margin-top: 1rem;
-}
-.login-form .input-box {
-  position: relative;
-  margin-top: 3rem;
-}
-.login-form .input-box input {
-  position: relative;
-  width: 100%;
-  max-width: 34vw;
-  padding: 17px 0px 10px;
-  background: transparent;
-  outline: none;
-  border: none;
-  box-shadow: none;
-  color: #23242a;
-  font-size: 1.1em;
-  font-family: "Roboto", sans-serif;
-  font-weight: 400;
-  letter-spacing: 0px;
-  text-indent: 10px;
-  vertical-align: middle;
-  z-index: 10;
-  color: #fff;
-}
-.login-form .input-box span {
-  position: absolute;
-  left: 0;
-  padding: 15px 0px 10px;
-  pointer-events: none;
-  color: black;
-  font-size: 1.19em;
-  letter-spacing: 0.5px;
-  transition: 0.5s;
-}
-.login-form .input-box input:valid ~ span,
-.login-form .input-box input:focus ~ span {
-  color: rgb(94, 93, 93);
-  font-size: 0.9rem;
-  transform: translateY(-30px);
-  font-weight: 400;
-}
-.login-form .input-box i {
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  height: 2px;
-  background: $auth-inputs;
-  border-radius: 4px;
-  overflow: hidden;
-  transition: 0.5s;
-  pointer-events: none;
+  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); /* Added slight text shadow */
 }

-.login-form .input-box input:valid ~ i,
-.login-form .input-box input:focus ~ i {
-  height: 2.6rem;
+.login-container .login-form {
+  width: 80%; /* Adjusted width for responsiveness */
 }
-.login-form .forgot-pw {
-  display: inline-flex;
-  margin-top: 3px;
-  font-size: 0.9rem;
-  cursor: pointer;
-  color: #8f8f8f;
-  text-decoration: underline;
+
+.login-form .input-box {
+  position: relative;
+  margin-top: 2.5rem; /* Adjusted spacing */
 }
-.login-form .forgot-pw:hover {
-  color: #fff;
-  transition: all 0.2s;
-}
-.login-form .error-msg {
-  color: $error-color;
-  margin-top: 1rem;
-  height: 1rem;
-}
-.login-form .loading {
-  margin-top: 4.5rem;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: calc(1.5rem - 10px);
-}
-.login-form input[type="submit"] {
-  margin-top: 3rem;
+
+.login-form .input-box input {
  width: 100%;
+  padding: 1.1rem 0 0.6rem; /* Adjusted padding */
+  border: 1px solid rgba(255, 255, 255, 0.2); /* Added subtle border */
+  border-radius: 0.3rem; /* Added border radius */
+}
+
+.login-form .input-box span {
+  padding: 0.8rem 0 0.5rem; /* Adjusted padding */
+}
+
+.login-form .input-box i {
+  height: 0.2rem; /* Adjusted height for better visual hierarchy */
+}
+
+.login-form input[type="submit"] {
+  margin-top: 2.5rem; /* Adjusted spacing */
  height: 3rem;
-  border: none;
-  border-radius: 8px;
-  color: rgb(210, 207, 207);
-  cursor: pointer;
-  font-size: 1.1rem;
-  font-weight: 600;
  background-color: $accent-color;
+  border: 1px solid rgba(255, 255, 255, 0.3); /* Added border for consistency */
 }
-.login-form .go-to-signup {
-  color: #8f8f8f;
-  font-size: 0.9rem;
-}
-.login-form .go-to-signup a {
-  cursor: pointer;
-  color: #8f8f8f;
-  text-decoration: underline;
-}
-.login-form .go-to-signup a:hover {
-  color: black;
-  transition: all 0.2s;
-}
+
 .login-container .return {
-  position: absolute;
-  left: 10px;
-  top: 10px;
-  font-size: 1.8rem;
-  color: white;
-  cursor: pointer;
-  transition: all 0.3s;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.3rem;
-}
-.login-container .return:hover {
-  background-color: rgba(0, 0, 0, 0.4);
-}
-.login-password-visibility {
-  position: absolute;
-  font-size: 1.7rem;
-  top: 28%;
-  right: 5px;
-  z-index: 5;
-  cursor: pointer;
-  border: none;
-  background-color: transparent;
-  color: white;
+  top: 15px; /* Adjusted position for better alignment */
+  left: 15px; /* Adjusted position for better alignment */
+  padding: 0.4rem; /* Adjusted padding */
+  background-color: rgba(255, 255, 255, 0.1); /* Added subtle background */
 }
--- a/style/playbar.scss
+++ b/style/playbar.scss
@ -1,5 +1,4 @@
-@import 'theme.scss';
-
+@import "theme.scss";
 .playbar {
  width: 100%;
  height: $playbar-size;
@ -7,101 +6,81 @@
  opacity: 0.9;
  position: fixed;
  bottom: 0;
-
  .invisible-media-progress {
    width: 100%;
-		height: 14px;
+    height: 0.875rem;
    background-color: transparent;
    position: absolute;
    transform: translateY(-50%);
-		padding-top: 7px;
-		
+    padding-top: 0.4375rem;
    .media-progress {
      width: 100%;
-			height: 3px;
+      height: 0.1875rem;
      background-color: $controls-click-color;
-			
      .media-progress-solid {
        position: relative;
-				height: 3px;
+        height: 0.1875rem;
        background: linear-gradient(90deg, $play-grad-start, $play-grad-end);
      }
    }
-
    .media-progress-solid::before {
      content: "";
      position: absolute;
-			height: 3px;
+      height: 0.1875rem;
      width: 100%;
      background: linear-gradient(90deg, $play-grad-start, $play-grad-end);
      z-index: -1;
-			filter: blur(3px);
+      filter: blur(0.1875rem);
    }
  }
-
  .playbar-left-group {
    display: flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
-		margin-left: 10px;
-
+    margin-left: 0.625rem;
    .media-info-img {
-			width: 50px;
+      width: 3.125rem;
    }
-
    .media-info-text {
      text-align: left;
-			margin-left: 10px;
+      margin-left: 0.625rem;
    }
-
    .like-dislike {
-			margin-left: 20px;
+      margin-left: 1.25rem;
    }
  }
-
  .playcontrols {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
-
  .playduration {
    position: absolute;
-		right: 10px;
-		top: 13px;
+    right: 0.625rem;
+    top: 0.8125rem;
  }
-
  .queue-toggle {
    position: absolute;
-		bottom: 13px;
-		top: 13px;
-		right: 90px;
+    bottom: 0.8125rem;
+    top: 0.8125rem;
+    right: 5.625rem;
  }
-
  button {
    .hmirror {
-			-moz-transform: scale(-1, 1);
-			-webkit-transform: scale(-1, 1);
-			-o-transform: scale(-1, 1);
-			-ms-transform: scale(-1, 1);
      transform: scale(-1, 1);
    }
-
    .controlbtn {
      color: $text-controls-color;
    }
-
    .controlbtn:hover {
      color: $controls-hover-color;
    }
-
    .controlbtn:active {
      color: $controls-click-color;
    }
-
    background-color: transparent;
-		border: transparent;
+    border: none;
  }
 }
--- a/style/signup.scss
+++ b/style/signup.scss
@ -21,141 +21,150 @@
  transform: translate(-50%, -50%);
  background: $auth-containers;
  z-index: 1;
-  border-radius: 8px;
+  border-radius: 0.5rem;
  overflow: hidden;
 }
+
 .signup-container .header h1 {
  margin-top: 3rem;
  font-size: 2.5rem;
  color: $accent-color;
 }
+
 .signup-container .signup-form {
  width: 80%;
 }
+
 .signup-form .input-box {
  position: relative;
  margin-top: 3rem;
 }
+
 .signup-form .input-box:first-child {
  margin-top: 0.7rem;
 }
+
 .signup-form .input-box input {
-  position: relative;
  width: 100%;
-  max-width: 34vw;
-  padding: 17px 0px 10px;
+  padding: 1.0625rem 0 0.625rem;
  background: transparent;
  outline: none;
  border: none;
-  box-shadow: none;
-  color: #23242a;
-  font-size: 1.1em;
+  color: #fff;
+  font-size: 1.1rem;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
-  letter-spacing: 0px;
-  text-indent: 10px;
+  text-indent: 0.625rem;
  vertical-align: middle;
-  z-index: 10;
-  color: #fff;
 }
+
 .signup-form .input-box span {
  position: absolute;
  left: 0;
-  padding: 15px 0px 10px;
+  padding: 0.9375rem 0 0.625rem;
  pointer-events: none;
  color: black;
-  font-size: 1.19em;
+  font-size: 1.19rem;
  letter-spacing: 0.5px;
  transition: 0.5s;
 }
+
 .signup-form .input-box input:valid ~ span,
 .signup-form .input-box input:focus ~ span {
  color: rgb(94, 93, 93);
  font-size: 0.9rem;
-  transform: translateY(-30px);
+  transform: translateY(-1.875rem);
  font-weight: 400;
 }
+
 .signup-form .input-box i {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
-  height: 2px;
+  height: 0.125rem;
  background: $auth-inputs;
-  border-radius: 4px;
-  overflow: hidden;
+  border-radius: 0.25rem;
  transition: 0.5s;
  pointer-events: none;
 }

 .signup-form .input-box input:valid ~ i,
 .signup-form .input-box input:focus ~ i {
-  height: 2.6rem;
+  height: 1.625rem;
 }
+
 .signup-form .error-msg {
  color: $error-color;
  margin-top: 1rem;
  height: 1rem;
 }
+
 .signup-form .loading {
  margin-top: 4.5rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: calc(1.5rem - 10px);
 }
+
 .signup-form input[type="submit"] {
  margin-top: 3.5rem;
  width: 100%;
-  height: 45px;
+  height: 2.8125rem;
  border: none;
-  border-radius: 8px;
+  border-radius: 0.5rem;
  color: white;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 600;
  background-color: $accent-color;
 }
+
 .signup-form .go-to-login {
  color: #8f8f8f;
  font-size: 0.9rem;
 }
+
 .signup-form .go-to-login a {
-  cursor: pointer;
  color: #8f8f8f;
  text-decoration: underline;
 }
+
 .signup-form .go-to-login a:hover {
  color: black;
-  transition: all 0.2s;
+  transition: color 0.2s;
 }
+
 .signup-container .return {
  position: absolute;
-  left: 10px;
-  top: 10px;
+  left: 0.625rem;
+  top: 0.625rem;
  font-size: 1.8rem;
  color: white;
  cursor: pointer;
-  transition: all 0.3s;
-  border-radius: 8px;
+  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem;
+  transition: background-color 0.3s;
 }
+
 .signup-container .return:hover {
  background-color: rgba(0, 0, 0, 0.4);
 }
+
 .password-visibility {
  position: absolute;
  font-size: 1.7rem;
  top: 28%;
-  right: 5px;
-  z-index: 5;
+  right: 0.3125rem;
  cursor: pointer;
  border: none;
  background-color: transparent;
  color: white;
 }
+
 .pw-requirements {
  font-size: 0.7rem;
 }
--- a/style/song_list.scss
+++ b/style/song_list.scss
@ -3,16 +3,13 @@ table.song-list {
 	border-collapse: collapse;
  
 	tr.song-list-item {
-		border: solid;
-		border-width: 1px 0;
-		border-color: #303030;
+	  border: 1px solid #303030; /* Simplified border shorthand */
 	  position: relative;
  
 	  td {
 		color: $text-controls-color;
 		white-space: nowrap;
-			padding-left: 10px;
-			padding-right: 10px;
+		padding: 0.6rem; /* Adjusted padding for consistency */
  
 		a {
 		  text-decoration: none;
@ -25,27 +22,25 @@ table.song-list {
 	  }
  
 	  td.song-image {
-			width: 35px;
+		width: 2.2rem; /* Replaced static px with rem */
 		display: flex;
  
 		img.song-image {
 		  position: absolute;
 		  top: 50%;
-				-ms-transform: translateY(-50%);
 		  transform: translateY(-50%);
-				width: 35px;
-				height: 35px;
-				border-radius: 5px;
+		  width: 2.2rem; /* Adjusted to rem */
+		  height: 2.2rem; /* Adjusted to rem */
+		  border-radius: 0.3rem; /* Adjusted radius */
 		}
  
 		svg.song-image-overlay {
 		  position: absolute;
 		  top: 50%;
-				-ms-transform: translateY(-50%);
 		  transform: translateY(-50%);
-				width: 35px;
-				height: 35px;
-				border-radius: 5px;
+		  width: 2.2rem; /* Adjusted to rem */
+		  height: 2.2rem; /* Adjusted to rem */
+		  border-radius: 0.3rem; /* Adjusted radius */
 		  fill: $text-controls-color;
 		}
  
@ -68,11 +63,7 @@ table.song-list {
  
 	  button {
 		svg.hmirror {
-				-moz-transform: scale(-1, 1);
-				-webkit-transform: scale(-1, 1);
-				-o-transform: scale(-1, 1);
-				-ms-transform: scale(-1, 1);
-				transform: scale(-1, 1);
+		  transform: scale(-1, 1); /* Removed redundant prefixes */
 		}
  
 		.controlbtn {
@ -88,7 +79,7 @@ table.song-list {
 		}
  
 		background-color: transparent;
-			border: transparent;
+		border: none; /* Simplified border */
 	  }
  
 	  .hide-until-hover {
--- a/style/songpage.scss
+++ b/style/songpage.scss
@ -1,13 +0,0 @@
-.song-container {
-    .song-header {
-        h1 {
-            font-size: 2.5rem;
-            margin-bottom: 0.5rem;
-        }
-
-        p {
-            font-size: 1.2rem;
-            margin: 0.2rem 0;
-        }
-    }
-}
Author	SHA1	Message	Date
Daniel Miller	622b79f79b	Changed units to be more responsive and removed unnecessary properties	2024-12-11 04:59:00 +00:00
Daniel Miller	71d410bc0a	Adjusted units to be more responsive and other fixes	2024-12-11 04:57:27 +00:00
Daniel Miller	a2ae5f78a7	Adjusted units, redundant prefixes, and other things	2024-12-11 04:54:15 +00:00
Daniel Miller	1c13d0534a	Adjusted login page css	2024-12-11 04:52:16 +00:00