Merge branch 'master' into 108-json-validation

Author: Akshayaraj99

meta_creator/templates/meta_creator/index.html

@@ -23,12 +23,14 @@ <h3 class="mainHeader">
     <div class="col-12">
       <form id="form1" method="post" action="{% url 'meta_creator:getdata' %}">
         {% csrf_token %}
-        <h6 class="custom-tooltip">
+        <h6>
           Project URL
-          <span class="tooltip-text">
+          <span class="custom-tooltip">
+            <i class="fa fa-info-circle" aria-hidden="true"></i>
+            <span class="tooltip-text">
             The GitHub or GitLab repository URL
+            </span>
           </span>
-          <i class="fa fa-info-circle" aria-hidden="true"></i>
         </h6>
         <input
           type="url"
@@ -42,8 +44,10 @@ <h6 class="custom-tooltip">
         >
         {% endif %}
         <div class="tooltip-container">
-          <h6 class="custom-tooltip">
+          <h6>
             Token Key
+            <span class="custom-tooltip">
+              <i class="fa fa-info-circle" aria-hidden="true"></i>
             <span class="tooltip-text">
               To extract metadata from GitHub repositories token is not needed,
               however, using one resolves rate limitations and allows for
@@ -65,28 +69,30 @@ <h6 class="custom-tooltip">
                 >Create a personal access token</a
               >
             </span>
-            <i class="fa fa-info-circle" aria-hidden="true"></i>
+            </span>
           </h6>
         </div>
         <input
           type="text"
           id="token_input"
           name="personal_token_key"
-          placeholder="(Optional) Enter your personal token key from GitHub or GitLab"
+          placeholder="Enter your personal token key from GitHub or GitLab"
           value="" />
         {% if error_message_token %}
         <span id="token_error" class="error_message"
           >{{ error_message_token }}</span
         >
         {% endif %}
         <div class="captcha-box">
-          <h6 for="id_captcha_1" class="custom-tooltip">
+          <h6 for="id_captcha_1" >
             Captcha Check
-            <span class="tooltip-text">
+            <span class="custom-tooltip">
+              <i class="fa fa-info-circle" aria-hidden="true"></i>
+              <span class="tooltip-text">
               CAPTCHA is a security system used to prevent spam and abuse by
               distinguishing human users from automated bots.
             </span>
-            <i class="fa fa-info-circle" aria-hidden="true"></i>
+            </span>
             {% for message in messages %}<span
               id="captcha-error"
               class="captcha-error"

meta_creator/templates/meta_creator/information.html

@@ -3,7 +3,7 @@
 <div class="info-page container overflow-auto">
   <div class="row">
     <div class="col-12">
-      <div class="info-header text-center"><h3>What is SMECS ?</h3></div>
+      <div class="info-header text-center"><h3>What is SMECS?</h3></div>
     </div>
     <div class="col-12">
       <div class="info-content">

meta_creator/templates/meta_creator/legals.html

@@ -5,7 +5,7 @@
 {% block content %}
 
 
-<div class="info-page container" role="main">
+<div class="info-page container legals-page" role="main">
     <div class="row text-center ">
         <div class="col-12">
              <div class="info-header"> <h3>Legals/Impressum</h3></div>

static/foundation/css/foundation.css

@@ -89,6 +89,9 @@ textarea {
 .navbar .navbar-toggler {
   border-color: rgba(255, 255, 255, 0.5);
 }
+.hints-icon {
+  color: white;
+}
 
 /******************** Initial Form of the software metadata Extractor (index.html) ********************/
 .InitialFormContainer {
@@ -244,8 +247,7 @@ label[for="id_captcha_1"] {
 }
 /************ Tool Tip Styles ************/
 .tooltip-container {
-  display: flex;
-  align-items: center;
+  display: block;
 }
 
 .tool-tip {
@@ -1012,12 +1014,18 @@ div.input-container input::placeholder {
   color: #333;
 }
 
+/********************* Legals page **************************************/
+
+.legals-page {
+  overflow-y: auto;
+  max-height: calc(100vh - 9rem);
+}
+
 /********************* SMECS First page tool-tips  **********************/
 
 .custom-tooltip {
   position: relative;
-  float: left;
-  display: inline;
+  display: inline-block;
   cursor: pointer;
 }
 
@@ -1071,8 +1079,10 @@ label > .fa-info-circle {
   padding: 5px;
   z-index: 1000;
   position: absolute;
-  left: -20px;
-  top: 25px;
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: 6px;
   transition: opacity 0.3s;
   pointer-events: none;
   opacity: 0;
@@ -1101,8 +1111,10 @@ label > .fa-info-circle {
   padding: 5px;
   position: absolute;
   z-index: 1;
-  left: 15%;
-  transform: translateX(10%);
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: 6px;
   transition: opacity 0.3s;
   pointer-events: none;
 }
@@ -1561,7 +1573,7 @@ input:checked + .slider:before {
 @media (min-width: 1024px) and (max-width: 1700px) {
   .custom-tooltip .tooltip-text {
     width: 25rem;
-    left: 8%;
+    left: 100%;
   }
 
   #form1 h6 {

templates/base.html

@@ -69,7 +69,7 @@
           data-bs-target="#offcanvasRight"
           aria-controls="offcanvasRight">
           Extra Hints<span
-            ><i class="fa-solid fa-circle-question" style="color: white"></i
+            ><i class="fa-solid fa-circle-question hints-icon"></i
           ></span>
         </button>
         {% endif %}
@@ -93,13 +93,15 @@
               <a
                 class="nav-link {% if request.resolver_match.url_name == 'index' %}active{% endif %}"
                 href="{% url 'meta_creator:index' %}"
+                title="Extract metadata from a GitHub or GitLab repository"
                 >Home</a
               >
             </li>
             <li class="nav-item">
               <a
                 class="nav-link {% if request.resolver_match.url_name == 'information' %}active{% endif %}"
                 href="{% url 'meta_creator:information' %}"
+                title="Learn more about SMECS"
                 >About SMECS</a
               >
             </li>
@@ -124,9 +126,10 @@
               type="button"
               data-bs-toggle="offcanvas"
               data-bs-target="#offcanvasRight"
-              aria-controls="offcanvasRight">
+              aria-controls="offcanvasRight"
+              title="Learn more about SMECS user interface">
               Hints<span
-                ><i class="fa-solid fa-circle-question" style="color: white"></i
+                ><i class="fa-solid fa-circle-question hints-icon"></i
               ></span>
             </button>