☎️ Feature: mobile view (#2)

FelipeFTN · Dec 3, 2024 · 93ffa9f · 93ffa9f
2 parents f1f555f + 9d456a3
commit 93ffa9f
Show file tree

Hide file tree

Showing 10 changed files with 81 additions and 17 deletions.
diff --git a/web/Dioxus.toml b/web/Dioxus.toml
@@ -31,7 +31,7 @@ watch_path = ["src", "assets"]
 
 # CSS style file
 
-style = ["main.css"]
+style = ["styles/main.css"]
 
 # Javascript code file
 script = []

diff --git a/web/assets/blog.css → web/assets/styles/blog.css b/web/assets/blog.css → web/assets/styles/blog.css
@@ -1,11 +1,14 @@
 .blog {
   .title {
     color: #cdd6f4;
+    margin-left: 10px;
   }
   .subtitle {
     color: #bac2de;
+    margin-left: 10px;
   }
   .not-found {
     color: #babbf1;
+    text-align: center;
   }
 }
diff --git a/web/assets/books.css → web/assets/styles/books.css b/web/assets/books.css → web/assets/styles/books.css
@@ -1,11 +1,14 @@
 .books {
   .title {
     color: #cdd6f4;
+    margin-left: 10px;
   }
   .subtitle {
     color: #bac2de;
+    margin-left: 10px;
   }
   .not-found {
     color: #babbf1;
+    text-align: center;
   }
 }
diff --git a/web/assets/games.css → web/assets/styles/games.css b/web/assets/games.css → web/assets/styles/games.css
@@ -1,9 +1,11 @@
 .games {
   .title {
     color: #cdd6f4;
+    margin-left: 10px;
   }
   .subtitle {
     color: #bac2de;
+    margin-left: 10px;
   }
 
   .games-list {
@@ -85,4 +87,10 @@
       }
     }
   }
+
+  @media screen and (max-width: 768px) {
+    .games-list {
+      width: 100vw;
+    }
+  }
 }
diff --git a/web/assets/interests.css → web/assets/styles/interests.css b/web/assets/interests.css → web/assets/styles/interests.css
diff --git a/web/assets/main.css → web/assets/styles/main.css b/web/assets/main.css → web/assets/styles/main.css
@@ -46,3 +46,9 @@ main {
   margin-left: auto !important;
   margin-right: auto !important;
 }
+
+@media screen and (max-width: 768px) {
+  .div-to-align-the-layout {
+    display: none;
+  }
+}
diff --git a/web/assets/projects.css → web/assets/styles/projects.css b/web/assets/projects.css → web/assets/styles/projects.css
@@ -1,9 +1,11 @@
 .projects {
   .title {
     color: #cdd6f4;
+    margin-left: 10px;
   }
   .subtitle {
     color: #bac2de;
+    margin-left: 10px;
   }
   .project-tags {
     color: #bac2de;
@@ -143,4 +145,10 @@
       }
     }
   }
+
+  @media screen and (max-width: 768px) {
+    .projects-grid {
+      width: 90vw;
+    }
+  }
 }
diff --git a/web/assets/sidebar.css → web/assets/styles/sidebar.css b/web/assets/sidebar.css → web/assets/styles/sidebar.css
@@ -25,21 +25,6 @@
     text-align: center;
     color: #cdd6f4;
 
-    .profile-frame {
-      margin-left: auto;
-      margin-right: auto;
-      align-items: center;
-      width: 150px;
-      height: 150px;
-      border-radius: 50%;
-      border: 2px dashed #cdd6f4;
-      animation: spin 20s linear infinite;
-      img {
-        width: 150px;
-        border-radius: 50%;
-        animation: counterspin 20s linear infinite;
-      }
-    }
     .social-links {
       display: flex;
       flex-direction: column;
@@ -91,6 +76,26 @@
     }
   }
 }
+.profile-icon {
+  display: none;
+  position: sticky;
+}
+.profile-frame {
+  margin-left: auto;
+  margin-right: auto;
+  align-items: center;
+  width: 150px;
+  height: 150px;
+  border-radius: 50%;
+  border: 2px dashed #cdd6f4;
+  animation: spin 20s linear infinite;
+  img {
+    width: 150px;
+    border-radius: 50%;
+    animation: counterspin 20s linear infinite;
+  }
+}
+
 @keyframes spin {
   100% {
     transform: rotateZ(360deg);
@@ -101,3 +106,29 @@
     transform: rotateZ(-360deg);
   }
 }
+@media screen and (max-width: 768px) {
+  .sidebar {
+    display: none;
+  }
+  .profile-icon {
+    display: initial;
+    position: fixed;
+    right: 20px;
+    top: 20px;
+    z-index: 2;
+
+    .profile-frame {
+      width: 75px;
+      height: 75px;
+      border: 2px dashed #cdd6f4;
+      img {
+        width: 75px;
+      }
+    }
+  }
+}
+@media screen and (max-width: 300px) {
+  .profile-icon {
+    display: none;
+  }
+}
diff --git a/web/src/components/sidebar.rs b/web/src/components/sidebar.rs
@@ -5,6 +5,11 @@ use dioxus::prelude::*;
 #[component]
 pub fn SideBar() -> Element {
     rsx! {
+        div { class: "profile-icon",
+            div { class: "profile-frame", 
+                img { src: "https://avatars.githubusercontent.com/u/80127749?v=4", alt: "Profile Picture"},
+            }
+        }
         div { class: "sidebar",
             div { class: "profile",
                 div { class: "profile-frame", 

diff --git a/web/src/main.rs b/web/src/main.rs
@@ -46,9 +46,9 @@ pub fn Main() -> Element {
             components::sidebar::SideBar {}
             div { class: "main-content",
                 components::projects::Projects {},
+                components::games::Games {},
                 components::blog::Blog {},
                 components::books::Books {},
-                components::games::Games {},
             }
             div {  class: "div-to-align-the-layout" }
         }