Authenticated Avatar in row

self-xdsd · Feb 15, 2021 · 661f4b6 · 661f4b6
1 parent 05c2449
commit 661f4b6
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 17 deletions.
diff --git a/src/main/resources/public/css/main.css b/src/main/resources/public/css/main.css
@@ -176,19 +176,3 @@ body {
     margin-bottom: 15px;
 }
 
-@media (max-width:474px){
-    nav{
-        flex-direction:column;
-    }
-}
-@media (max-width:320px){
-    #logins{
-        text-align: center;
-    }
-    .unauthenticated a:nth-child(1){
-        margin-bottom:5px;
-    }
-    .unauthenticated a:nth-child(2){
-        width:52%;
-    }
-}
diff --git a/src/main/resources/templates/head.html b/src/main/resources/templates/head.html
@@ -72,10 +72,12 @@
         $(document).ready(
             function () {
                 $("#loginLoading").show();
-                $(".unauthenticated .btn").hide();
+                $(".unauthenticated .btn").hide ();
                 $.ajax("/api/users/self", {
                     type: "GET",
                     complete: function(response){
+                        const mediaQuery1 = window.matchMedia('(max-width:474px)');
+                        const mediaQuery2 = window.matchMedia('(max-width:320px)');
                         switch(response.status){
                             case 200:
                                 var data = response.responseJSON;
@@ -96,6 +98,16 @@
                                 $("#loginLoading").hide();
                                 $(".unauthenticated").show();
                                 $(".unauthenticated .btn").show();
+                                if(mediaQuery1.matches){
+                                    $('nav').css('flex-direction','column');
+                                }
+                                if(mediaQuery2.matches){
+                                    $('#logins').css('text-align','center');
+                                    $('.unauthenticated > a:nth-child(1)')
+                                            .css('margin-bottom','5px');
+                                    $('.unauthenticated > a:nth-child(2)')
+                                            .css('width','56%');
+                                }
                         }
                     }
                 });