Improvements to the project page.

www/css/project.css

@@ -7,6 +7,11 @@ span.version_type{
 
 
 /* Projects main page */
+div#right_column div#advanced_search{
+    transition: all .3s ease-in-out;
+    overflow: hidden;
+    height: 0;
+}
 
 
 /* Project view page */
@@ -65,8 +70,32 @@ div#right_column div.url img{
     vertical-align: middle;
 }
 
-div#right_column div#advanced_search{
-    transition: all .3s ease-in-out;
-    overflow: hidden;
-    height: 0;
+div#right_column img#img_license{
+    max-height: 1.3em;
 }
+
+div#license{
+    display: none;
+    opacity: 0;
+    position: fixed;
+    transition: opacity .4s ease-in-out;
+    top: 3em;
+    left: 5em;
+    right: 5em;
+    bottom: 2em;
+}
+
+div#license div.entry{
+    height: 30%;
+}
+
+div#license div.entry h4{
+    margin: 0;
+}
+
+div#license div.entry p.license_text{
+    margin: 0;
+    overflow-y: scroll;
+}
+
+

www/css/ui.css

@@ -47,6 +47,18 @@ img.slider{
     transition: all .3s ease-in-out;
 }
 
+div#cover{
+    display: none;
+    background-color: #000000bb;
+    opacity: 0;
+    transition: opacity .3s ease-in-out;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
 
 /**********************************
  * Toolbar style                  *

www/project/project.php

@@ -159,11 +159,9 @@
                             $q_license = mysqli_query($con, "SELECT * FROM license WHERE id = '$r_project[license]';");
                             $r_license = mysqli_fetch_array($q_license);
 ?>
-                            <span class='hidden' id='license_id'><?=$r_license["id"]?></span>
-                            <span class='hidden' id='license_text'><?=$r_license["summary"]?></span>
-                            <span class='fakelink pointer' onClick='showLicense();'>
-                                <img title='<?=$r_license["id"]?>' src='<?=$lserver?>/img/license/icon/<?=$r_license["logo"]?>' />
-                            <span>
+                            <span class='fakelink pointer' onClick='showLicense(true);'>
+                                <img id='img_license' title='<?=$r_license["id"]?>' src='<?=$lserver?>/img/license/icon/<?=$r_license["logo"]?>' />
+                            </span>
                             <br/>
                             <br/>
 <?php
@@ -178,6 +176,20 @@
                     </div> <!-- #right_column -->
                 </div> <!-- #content_cell_right -->
             </div> <!-- #content_row -->
+            <div id='cover'>
+            </div> <!-- #cover -->
+            <div id='license' class='section'>
+                <h3 class='section_title'><?=$r_license["id"]?></h3>
+                <div class='entry'>
+                    <h4>TR#En resumen:</h4>
+                    <p class='license_text'><?=text($con, $r_license["summary"], $lang)?></p>
+                </div>
+                <div class='entry'>
+                    <h4>TR#Texto completo:</h4>
+                    <p id='license_legal' class='license_text'><?=text($con, $r_license["legal"], $lang)?></p>
+                </div>
+            
+            </div> <!-- #license -->
         </div> <!-- #content -->
 <?php
 

www/script/project.js

@@ -27,3 +27,17 @@ function showAdvancedSearch() {
         cont.style.height = 'auto';
     }
 }
+
+function showLicense(visible){
+    showCover(visible);
+    var license = document.getElementById('license');
+    if (visible){
+        license.style.display = 'block';
+        license.style.opacity = 1;
+    }
+    else{
+        license.style.display = 'none';
+        license.style.opacity = 0;
+    }
+    
+}

www/script/ui.js

@@ -0,0 +1,11 @@
+function showCover(visible){
+    var cover = document.getElementById('cover');
+    if (visible){
+        cover.style.display = 'block';
+        cover.style.opacity = 1;
+    }
+    else{
+        cover.style.display = 'none';
+        cover.style.opacity = 0;
+    }
+}