tweaks mobile menu

SupaMic · Jun 18, 2022 · b94256d · b94256d
1 parent 8695ff8
commit b94256d
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 28 deletions.
diff --git a/README.md b/README.md
@@ -30,6 +30,7 @@ Now you can visit [`localhost:4000`](http://localhost:4000) from your browser.
 - [ ] Playlists
 - [ ] Likes
 - [ ] Followers / Followings
+- [ ] Range responses https://github.com/elixir-plug/plug/pull/526/files
 
 
 # Setup:

diff --git a/assets/js/controllers/audio_controller.js b/assets/js/controllers/audio_controller.js
@@ -23,6 +23,8 @@ export default class extends Controller {
         waveColor: 'violet',
         progressColor: 'purple',
         height: this.heightValue || 70,
+        //partialRender: true,
+        pixelRatio: 1,
         //fillParent: false,
         barWidth: 2,
         barHeight: 10, // the height of the wave

diff --git a/lib/rauversion_web/templates/layout/_user_menu.html.heex b/lib/rauversion_web/templates/layout/_user_menu.html.heex
@@ -1,4 +1,4 @@
-<nav class="bg-black" aria-label="Global">
+<nav class="bg-black" aria-label="Global" data-controller="dropdown">
     <div class="max-w-7xl mx-auto px-2 sm:px-4 lg:px-8">
       <div class="flex justify-between h-16">
         <div class="flex items-center px-2 lg:px-0">
@@ -19,12 +19,13 @@
               </a>
 
               <%= if function_exported?(Routes, :live_dashboard_path, 2) do %>
-                <li><%= link "LiveDashboard", to: Routes.live_dashboard_path(@conn, :home) %></li>
+                <li><%= link "LiveDashboard", to: Routes.live_dashboard_path(@conn, :home), class: "rounded-md py-2 px-3 text-sm font-medium text-white hover:bg-gray-800" %></li>
               <% end %>
 
-              <%= link "Register", to: Routes.user_registration_path(@conn, :new), class: "rounded-md py-2 px-3 text-sm font-medium text-white hover:bg-gray-800" %>
-              <%= link "Log in", to: Routes.user_session_path(@conn, :new), class: "rounded-md py-2 px-3 text-sm font-medium text-white hover:bg-gray-800" %>
-
+              <%= if !@current_user do %>
+                <%= link "Register", to: Routes.user_registration_path(@conn, :new), class: "rounded-md py-2 px-3 text-sm font-medium text-white hover:bg-gray-800" %>
+                <%= link "Log in", to: Routes.user_session_path(@conn, :new), class: "rounded-md py-2 px-3 text-sm font-medium text-white hover:bg-gray-800" %>
+              <% end  %>
           </div>
         </div>
 
@@ -51,7 +52,12 @@
 
         <div class="flex items-center lg:hidden">
           <!-- Mobile menu button -->
-          <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-200 hover:text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" @click="open = !open" aria-expanded="false" x-bind:aria-expanded="open.toString()">
+          <button type="button" 
+          data-action="dropdown#toggle click@window->dropdown#hide"
+          class="inline-flex items-center justify-center p-2 rounded-md text-gray-200 hover:text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" 
+          aria-controls="mobile-menu" 
+          @click="open = !open" 
+          aria-expanded="false" x-bind:aria-expanded="open.toString()">
             <span class="sr-only">Open menu</span>
             <svg x-description="Icon when menu is closed.
 
@@ -99,27 +105,41 @@
       </div>
     </div>
 
-    <!--
-    <div x-description="Mobile menu, show/hide based on menu state." class="lg:hidden" id="mobile-menu" x-show="open" style="display: none;">
+
+    <div 
+      data-dropdown-target="menu"
+      x-description="Mobile menu, show/hide based on menu state." 
+      class="lg:hidden" 
+      id="mobile-menu" 
+      x-show="open" 
+      >
       <div class="pt-2 pb-3 px-2 space-y-1">
+
+
+          <a href="/tracks" class="block rounded-md py-2 px-3 text-base font-medium text-white hover:text-white hover:bg-gray-800">
+            Tracks
+          </a>
 
-          <a href="#" class="block rounded-md py-2 px-3 text-base font-medium text-white hover:text-white hover:bg-gray-800">Dashboard</a>
-        
-          <a href="#" class="block rounded-md py-2 px-3 text-base font-medium text-white hover:text-white hover:bg-gray-800">Jobs</a>
-        
-          <a href="#" class="block rounded-md py-2 px-3 text-base font-medium text-white hover:text-white hover:bg-gray-800">Applicants</a>
-        
-          <a href="#" class="block rounded-md py-2 px-3 text-base font-medium text-white hover:text-white hover:bg-gray-800">Company</a>
+          <a href="/users/settings" class="block rounded-md py-2 px-3 text-base font-medium text-white hover:text-white hover:bg-gray-800">
+            Account
+          </a>
+
+          <%= if function_exported?(Routes, :live_dashboard_path, 2) do %>
+            <%= link "LiveDashboard", to: Routes.live_dashboard_path(@conn, :home), class: "block rounded-md py-2 px-3 text-base font-medium text-white hover:text-white hover:bg-gray-800" %>
+          <% end %>
+
+          <%= link "Register", to: Routes.user_registration_path(@conn, :new), class: "block rounded-md py-2 px-3 text-base font-medium text-white hover:text-white hover:bg-gray-800" %>
+          <%= link "Log in", to: Routes.user_session_path(@conn, :new), class: "block rounded-md py-2 px-3 text-base font-medium text-white hover:text-white hover:bg-gray-800" %>
 
       </div>
       <div class="pt-4 pb-3 border-t border-gray-500">
         <div class="flex items-center px-4">
           <div class="flex-shrink-0">
-            <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
+            <%= img_tag(Rauversion.Accounts.avatar_url(@current_user), class: "h-10 w-10 rounded-full") %>
           </div>
           <div class="ml-3">
-            <div class="text-base font-medium text-white">Floyd Miles</div>
-            <div class="text-sm font-medium text-gray-200">[email protected]</div>
+            <div class="text-base font-medium text-white"><%= @current_user.username %></div>
+            <div class="text-sm font-medium text-gray-200"><%= @current_user.email %></div>
           </div>
           <button type="button" class="ml-auto flex-shrink-0 bg-gray-500 rounded-full p-1 text-gray-200 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-500 focus:ring-white">
             <span class="sr-only">View notifications</span>
@@ -129,15 +149,17 @@
           </button>
         </div>
         <div class="mt-3 px-2">
-          
-            <a href="#" class="block rounded-md py-2 px-3 text-base font-medium text-gray-200 hover:text-white hover:bg-gray-800">Your Profile</a>
-          
-            <a href="#" class="block rounded-md py-2 px-3 text-base font-medium text-gray-200 hover:text-white hover:bg-gray-800">Settings</a>
-          
-            <a href="#" class="block rounded-md py-2 px-3 text-base font-medium text-gray-200 hover:text-white hover:bg-gray-800">Sign out</a>
-          
+
+          <%= if @current_user do %>
+            <%= link "Settings", to: Routes.user_settings_path(@conn, :edit), class: "block rounded-md py-2 px-3 text-base font-medium text-gray-200 hover:text-white hover:bg-gray-800" %>
+            <%= link "profile", to: Routes.profile_index_path(@conn, :index, @current_user.username), class: "block rounded-md py-2 px-3 text-base font-medium text-gray-200 hover:text-white hover:bg-gray-800" %>
+            <a href="#" class="block rounded-md py-2 px-3 text-base font-medium text-gray-200 hover:text-white hover:bg-gray-800">Support</a>
+            <a href="#" class="block rounded-md py-2 px-3 text-base font-medium text-gray-200 hover:text-white hover:bg-gray-800">License</a>
+            <%= link "Log out", to: Routes.user_session_path(@conn, :delete), method: :delete, class: "block rounded-md py-2 px-3 text-base font-medium text-gray-200 hover:text-white hover:bg-gray-800" %>
+          <% end %>
+
         </div>
       </div>
     </div>
-    -->
+
   </nav>
diff --git a/lib/rauversion_web/templates/page/index.html.heex b/lib/rauversion_web/templates/page/index.html.heex
@@ -46,14 +46,14 @@
       <div aria-hidden="true" class="hidden absolute w-1/2 h-full bg-gray-100 lg:block"></div>
       <div class="relative bg-black lg:bg-transparent- ">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 lg:grid lg:grid-cols-2">
-          <div class="max-w-2xl mx-auto py-24 lg:py-64 lg:max-w-none">
+          <div class="max-w-2xl mx-auto py-6 lg:py-64 lg:max-w-none">
             <div class="lg:pr-16">
 
               <a href="/" class="text-white text-xl font-extrabold">
                 RAUVERSION
               </a>
 
-              <h1 class="tracking-tight text-gray-900 sm:text-5xl xl:text-6xl
+              <h1 class="tracking-tight text-gray-900 text-3xl xl:text-6xl
               font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-orange-200 to-orange-600">
                 Be your own music industry
               </h1>