DIT-423: LoginDirectLink.

- Fixed rendering of correct login box on mobile. - Styled it to fit with the other login/logout boxes utilized by the page
matematikk-mooc · Dec 12, 2024 · 4d8d207 · 4d8d207
1 parent 8e70499
commit 4d8d207
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 23 deletions.
diff --git a/src/js/account-theme.js b/src/js/account-theme.js
@@ -40,7 +40,7 @@ jQuery.extend({
 });
 
 jQuery(document).ready(function ($) {
-  console.log("START.");
+
 
   var redirected = false;
 
@@ -58,17 +58,23 @@ jQuery(document).ready(function ($) {
       redirected = utilRoot.redirectFeideAuthIfEnrollReferrer();
       if (!redirected) {
         if (!document.location.search.includes("normalLogin=1")) {
-          if (document.getElementById('wrapper')) {
+          if (document.getElementById('application')) {
             document.getElementById('wrapper').remove();
+            console.log("application");
+            var parent = document.getElementById('application');
           }
-          let parent = document.getElementById('application');
-          let login = document.createElement('div');
-          login.id = 'login-component';
-          let customLogin = createApp(LoginDirectLink);
-          if (parent) {
-            parent.appendChild(login);
+          else if (document.getElementById('f1_container')) {
+            console.log('f1_container'); 
+            var parent = document.getElementById('f1_container');
           }
-          customLogin.mount("#login-component");
+            let login = document.createElement('div');
+            login.id = 'login-component';
+            let customLogin = createApp(LoginDirectLink);
+            if (parent) {
+              console.log(parent, "parent")
+              parent.appendChild(login);
+            }
+            customLogin.mount("#login-component");
         } else {
           $(".ic-Login").show();
           $("#f1_container").show(); // Small screens

diff --git a/src/js/modules/menu.js b/src/js/modules/menu.js
@@ -41,11 +41,19 @@ export default (function() {
     renderUnauthenticatedMenu: function () {
        const mainContentId = getMainContentId() ?? '';
       if (!util.isAuthenticated()) {
-
         $('#header').hide();
-        var headerwrapper = document.getElementById("application").children[0];
-        headerwrapper.append(document.createElement("div"));
-        headerwrapper.setAttribute("id", "notLoggedInHeader");
+        if(document.getElementById("application")){
+          // non-mobile
+          var headerwrapper = document.getElementById("application").children[0];
+          headerwrapper.append(document.createElement("div"));
+          headerwrapper.setAttribute("id", "notLoggedInHeader");
+        }
+        else if(document.getElementById("f1_container")){
+          // mobile
+          var mobileHeaderWrapper = document.getElementById("f1_container").children[0];
+          mobileHeaderWrapper.append(document.createElement("div"));
+          mobileHeaderWrapper.setAttribute("id", "notLoggedInHeader");
+        }
         const headerProps = {
           logged_in: false,
           admin: false,

diff --git a/src/vue/components/login-choice/LoginDirectLink.vue b/src/vue/components/login-choice/LoginDirectLink.vue
@@ -3,7 +3,7 @@
 <div class="login-direct-link">
     <div class="login-direct-box">
         <div class="login-logos">
-            <img class="login-logo" :src="`${this.server}logo-black.svg`" @click="goToUdir">
+            <img class="login-logo" :src="`${this.server}logo-white.png`" @click="goToUdir">
         </div>
         <div class="login-header">
             <h1 class="login-header-title">Canvas innlogging for åpne nettkurs og kompetansepakker</h1>
@@ -55,22 +55,22 @@ export default {
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
     height: 100vh;
-    background-color: map-get($color-palette-green, background, 300);
 }
 .login-direct-box {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     height: 30rem;
-    max-width: 60rem;
+    max-width: 40rem;
     width: 100%;
-    background-color: white;
-    border: 1px solid #e0e0e0;
+    margin-top: 16px;
+    border: 1px solid #2e3c51;
     border-radius: 0.5rem;
-    box-shadow: 0 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.25);
+    color:white;
+    background-color: #2e3c51;
+    box-shadow: rgba(50, 50, 93, 0.85) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
 }
 .login-header {
     display: flex;
@@ -107,15 +107,15 @@ export default {
 }
 
 .login-header-title {
-    font-size: 2,25rem;
+    font-size: 1.4rem;
     line-height: unset;
     @media screen and (max-width: 768px) {
         font-size: 4vw;
     }
 }
 
 .login-header-description {
-    font-size: 1.5rem;
+    font-size: 1.0rem;
     @media screen and (max-width: 768px) {
         font-size: 3vw;
     }

diff --git a/src/vue/design/override-login-logout-Canvas-elements.scss b/src/vue/design/override-login-logout-Canvas-elements.scss
@@ -1,6 +1,12 @@
 
 @import "colors.scss";
 
+
+#f1_container {
+    flex-direction: column;
+    padding: unset;
+}
+
 .ic-Login {
     color: $color-black !important;
     background-color: map-get($color-palette-steel, background, 700);
@@ -32,7 +38,7 @@
         background: $color-grey-900;
         color: $color-white;
         border: none;
-        border-radius: 0.1875rem;
+        border-radius: 0.5rem;
         font-weight: 700;
         line-height: 1;
         display: flex;