fix: blur link on click, clickable login with TUG button

closes #184 #183

invenio_theme_tugraz/assets/semantic-ui/js/invenio_theme_tugraz/theme.js

@@ -1,7 +1,12 @@
 import $ from 'jquery';
 import 'semantic-ui-css';
 
+// called on document ready
 $(function() {
+  importZammadScript();
+});
+
+function importZammadScript() {
   let scriptNode = document.createElement("hidden"); //needed for zammad script
   scriptNode.id = "zammad_form_script";
   scriptNode.src = "https://ub-support.tugraz.at/assets/form/form.js";
@@ -16,7 +21,8 @@ $(function() {
       modal: true
     });
   });
-});
+}
+
 
 // used for sticky test instance notification
 $('.ui.sticky.test-instance')

invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/footer.less

@@ -25,14 +25,24 @@
       padding-top: 15px;
       padding-bottom: 15px;
       font-size: 16px;
- 
+
       a {
         text-decoration: none;
         color: @footerGrey;
- 
-        &:hover, &:focus {
+
+        // :focus-visible activates on keyboard only
+        &:hover, &:focus:focus-visible {
           color: @primaryLink;
           background-color: @primaryLinkHoverBackground;
+
+          i.icon.download {
+            color: @tugrazRed;
+          }
+        }
+        
+        // remove blue focus outline if clicked with mouse
+        &:focus:not(:focus-visible) {
+          outline-style: none;
         }
       }
     }

invenio_theme_tugraz/assets/semantic-ui/less/invenio_theme_tugraz/overrides.less

@@ -152,8 +152,3 @@ pre {
 
   }
 }
-
-a:hover i.icon.download,
-i.icon.download:hover {
-  color: @tugrazRed;
-}

invenio_theme_tugraz/templates/invenio_theme_tugraz/accounts/login_user.html

@@ -25,12 +25,10 @@
         <div class="ui divider"></div>
         <!--Log in with SSO-->
         {%- if config.INVENIO_CONFIG_TUGRAZ_SHIBBOLETH %}
-        <div class="login-page-button ui fluid large button">
-          <a href="{{ url_for('sso_saml.sso', idp='idp') }}" class="inverted tiny image label">
-            {% trans type='TUGRAZ' %} Log in with {{ type }}{% endtrans %}
-            <img src="{{ url_for('static', filename=config.INVENIO_THEME_TUGRAZ_ICON)}}" height="20px" />
-          </a>
-        </div>
+        <a href="{{ url_for('sso_saml.sso', idp='idp') }}" class="login-page-button ui fluid large button">
+          {% trans type='TUGRAZ' %} Log in with {{ type }}{% endtrans %}
+          <img src="{{ url_for('static', filename=config.INVENIO_THEME_TUGRAZ_ICON)}}" height="20px" />
+        </a>
         <div class="spacer-long"></div>
         <div class="ui inverted horizontal divider"><span class="text-color">{{_ ("Or")}}</span></div>
         {%- endif %}
@@ -74,4 +72,4 @@
     </div>
   </div>
 </div>
-{% endblock page_body %}
+{% endblock page_body %}

invenio_theme_tugraz/templates/invenio_theme_tugraz/accounts/register_user.html

@@ -46,11 +46,10 @@
         <!--Sigup with SSO-->
         {%- if config.INVENIO_CONFIG_TUGRAZ_SHIBBOLETH %}
         <div class="ui divider"></div>
-        <div class="login-page-button ui fluid large button">
-          <a href="{{ url_for('sso_saml.sso', idp='idp') }}" class="inverted tiny image label">
-            <span style="font-size: 18px;">{{ _('Sign up with TUGRAZ ') }}</span>
-            <img src="{{ url_for('static', filename=config.INVENIO_THEME_TUGRAZ_ICON)}}" height="20px" />
-          </a>
+        <a href="{{ url_for('sso_saml.sso', idp='idp') }}" class="login-page-button ui fluid large button">
+          <span style="font-size: 18px;">{{ _('Sign up with TUGRAZ ') }}</span>
+          <img src="{{ url_for('static', filename=config.INVENIO_THEME_TUGRAZ_ICON)}}" height="20px" />
+        </a>
         </div>
         <div class="ui inverted horizontal divider"><span class="text-color">{{_ ("Or")}}</span></div>
         {%- endif %}
@@ -91,4 +90,4 @@
 </div>
 
 
-{% endblock page_body %}
+{% endblock page_body %}