Merge pull request #16 from tatiananantes/UserExperience

User experience
tatiananantes · Dec 16, 2021 · e574b77 · e574b77
2 parents 5057c94 + 51ece3d
commit e574b77
Show file tree

Hide file tree

Showing 12 changed files with 58 additions and 14 deletions.
diff --git a/app/assets/images/logo.png b/app/assets/images/logo.png
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -20,12 +20,13 @@ body {
   font-family: "Source Sans Pro", sans-serif;
 }
 
-.navbar.bg-light {
+.navbar {
   position: fixed;
   top: 0;
   width: 100%;
   background: white;
   color: white;
+  box-shadow: 5px 0 5px -3px black;
 }
 
 .site-main-wrap {
@@ -77,3 +78,44 @@ body {
     font-weight: 500;
   }
 }
+
+#flash {
+  .flash.alert {
+    position: fixed;
+    bottom: 5%;
+    background: rgba(67,118,212, 0.8);
+    margin: 0 auto;
+    width: 40vw;
+    left: 30vw;
+    color: white;
+    text-align: center;
+    display: block;
+    padding: 20px;
+    animation-name: disappear;
+    opacity: 0;
+    animation-duration: 5s;
+    animation-iteration-count: 1;
+  }
+}
+
+.navbar-flex {
+  @media (min-width: 768px) {
+    display: flex;
+    width: 100%;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    .inline-items {
+      .nav-link {
+        display: inline-block;
+      }
+    }
+  }
+}
+
+
+@keyframes disappear {
+  0% {opacity: 1;}
+  50% {opacity: 1;}
+  100% {opacity: 0;}
+}
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -12,21 +12,22 @@
 
     <nav class="navbar navbar-expand-md navbar-light">
       <div class="container-fluid">
-        <a class="navbar-brand" href="">ACEBOOK</a>
+        <a class="navbar-brand" href="/"><%= image_tag("logo.png", width: 100, :class=>"img-fluid") %></a>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
         </button>
 
         <% if logged_in? %>
           <div class="collapse navbar-collapse" id="navbarSupportedContent">
-            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+            <ul class="navbar-nav navbar-flex">
+
               <li class="nav-item">
-                <a class="nav-link active" aria-current="page" href="<%=logout_path%>">Logout</a>
+                <a class="nav-link" aria-current="page" href="<%=posts_path%>">PostFeed</a>
               </li>
-              <li class="nav-item">
-                <a class="nav-link active" aria-current="page" href="<%=posts_path%>">PostFeed</a>
+              <li class="nav-item inline-items">
+                <span class="nav-link">Signed in as: <a href="/users/<%= current_user.id %>"><%= current_user.username %></a></span>
+                <a class="nav-link" aria-current="page" href="<%=logout_path%>">Logout</a>
               </li>
-
             </ul>
 
           </div>
@@ -45,12 +46,13 @@
       </div>
     </nav>
     <div class="site-main-wrap">
+      <div id="flash">
+          <% flash.each do |key, value| %>
+            <div class="flash <%= key %>"><%= value %></div>
+          <% end %>
+      </div>
       <div class="container">
-        <div id="flash">
-            <% flash.each do |key, value| %>
-              <div class="flash <%= key %>"><%= value %></div>
-            <% end %>
-        </div>
+
         <%= yield %>
       </div>
     </div>

diff --git a/app/views/sessions/login.html.erb b/app/views/sessions/login.html.erb
@@ -16,7 +16,7 @@
       </div>
     <% end %>
   </div>
-  <p class="text-center soft-top" >Not yet a member? <a href="/">create an account</a> </p>
+  <p class="text-center soft-top" >Not yet a member? <a href="/">Create an account</a> </p>
 </div>
 
 
diff --git a/app/views/users/new.html.erb b/app/views/users/new.html.erb
@@ -46,7 +46,7 @@
     </div>
   <% end %>
   </div>
-
+    <p class="text-center soft-top" >Already a member? <a href="/login">Login here</a> </p>
   </div>
  </div>
 
diff --git a/storage/30/8e/308eev0uz96m0fc73xyll4p8yag4 b/storage/30/8e/308eev0uz96m0fc73xyll4p8yag4
diff --git a/storage/6p/gw/6pgw9e4g0dmkjwt2kcf8rygj322y b/storage/6p/gw/6pgw9e4g0dmkjwt2kcf8rygj322y
diff --git a/storage/b0/mk/b0mktgcempy5o46ryn68q7w9tjqg b/storage/b0/mk/b0mktgcempy5o46ryn68q7w9tjqg
diff --git a/...ev0uz96m0fc73xyll4p8yag4/b97a5f71f3832ee51bbdd51e810569d8eda44df9c5cb97bdbdbcf6107147872c b/...ev0uz96m0fc73xyll4p8yag4/b97a5f71f3832ee51bbdd51e810569d8eda44df9c5cb97bdbdbcf6107147872c
diff --git a/...9e4g0dmkjwt2kcf8rygj322y/56d9d0c7d9e49774f5a2454a68509528362f200c97164b674550e4f2830e3151 b/...9e4g0dmkjwt2kcf8rygj322y/56d9d0c7d9e49774f5a2454a68509528362f200c97164b674550e4f2830e3151
diff --git a/...9e4g0dmkjwt2kcf8rygj322y/d22d29d38393e844509e519a81db9789797c225b8eb8c334d9120bab21401b01 b/...9e4g0dmkjwt2kcf8rygj322y/d22d29d38393e844509e519a81db9789797c225b8eb8c334d9120bab21401b01
diff --git a/...tgcempy5o46ryn68q7w9tjqg/d0218ec05836c411b098b2b94b1366191002c13f4803ffefe20f67b76631137a b/...tgcempy5o46ryn68q7w9tjqg/d0218ec05836c411b098b2b94b1366191002c13f4803ffefe20f67b76631137a
-Original file line number
+Diff line change
@@ Expand Up / @@ -46,7 +46,7 @@ @@
         </div>
       <% end %>
       </div>
+        <p class="text-center soft-top" >Already a member? <a href="/login">Login here</a> </p>
       </div>
      </div>