v0 ninegate

assets/app.js

@@ -1,8 +1,11 @@
-// JQuery
-window.$ = window.jQuery = require('jquery');
+// jquery
+import $ from 'jquery'
+window.jQuery = $;
+window.$ = $;
 
-// JQueryui
-require('jquery-ui');
+// jqueryui
+import 'jqueryui'
+import 'jqueryui/jquery-ui.min.css';
 
 // Bootstrap
 require('bootstrap');

assets/js/app.js

@@ -30,9 +30,35 @@ $(document).ready(function() {
         $("#"+$(this).data("modalid")).modal("show");
     });
 
+    // Item
+    $( ".item" ).hover(function() {
+        $(this).find(".item-action a").show();
+    });
+
+    $( ".item" ).mouseleave(function() {
+        $(this).find(".item-action a").hide();
+    });
+
+    $( ".item-info" ).click(function() {
+        parent=$(this).parent().parent().parent().parent().parent();           
+        if(parent.find(".item-description").hasClass("hide")) {
+            parent.find(".item-description").removeClass("hide");
+            parent.addClass("w-100");
+            parent.css("justify-content","flex-start");
+        }
+        else {
+            parent.find(".item-description").addClass("hide");
+            parent.removeClass("w-100");
+
+            if(parent.hasClass("item-large"))
+                parent.css("justify-content","flex-start");
+            else
+                parent.css("justify-content","center"); 
+        }
+    });  
+        
     // Resize
     resize();
-
     
     // Focus
     $("#page").focus();
@@ -43,6 +69,7 @@ $( window ).resize(function() {
 });
 
 
+
 function resize() {
     if($("#header").is(":visible")){
         $(".navbar-logo").hide();

assets/styles/app.css

@@ -219,4 +219,212 @@ border-width: 1px;
 #page {
     overflow-y: auto;
     width:100%;
-}
+}
+
+.ckeditor-content img {
+    max-width:100%;
+    height:auto !important;
+}
+
+.hide {
+    display: none !important;
+}
+
+
+/* ITEM */
+.items-list {
+    display:flex;
+    flex-wrap: wrap;
+}
+
+.item {
+    padding:10px;
+    display:flex;
+    text-align: center;
+    justify-content: center;
+    margin-right:5px;
+    margin-bottom:5px;
+    flex-wrap: wrap;
+    color: var(--colorftbodydark) !important;
+}
+
+.item-action {
+    width: 100%;
+    color: var(--colorftbodydark) !important;
+    padding-top:10px;
+    height:35px;
+}
+
+.item-action i {
+    font-size: 22px;
+}
+
+.item-container {
+    display:flex;
+    flex-wrap: nowrap;
+    justify-content: space-around;
+}
+
+.item-content {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    flex-direction: column;
+}
+
+.item img {
+    margin:0px auto 10px auto;
+
+}
+
+.item h3 {
+    margin:0px;
+    color: var(--colorftbodydark);
+}
+
+.item-subtitle {
+    font-size: 12px;
+    margin:0px;
+    color: var(--colorftbodydark);
+}
+
+.item-description {
+    color: var(--colorftbodydark);
+    text-align: left;
+    padding: 0px 10px;
+}
+
+
+.item-verysmall {
+    width: 80px;
+    padding:5px 2px 2px 2px;
+}
+.item-verysmall .item-link  {
+    width: 76px;
+}
+.item-verysmall img {
+    height:40px;
+}
+.item-verysmall h3{
+    font-size: 10px;
+    font-family: var(--fontbody);
+    text-transform: uppercase;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;    
+}
+.item-verysmall .item-subtitle{
+    display:none;
+}
+.item-verysmall .item-action {
+    padding-top:0px;
+    height:25px;
+}
+.item-verysmall .item-action i {
+    font-size: 14px;
+}
+
+.item-small {
+    width: 100px;
+    padding:10px 5px;
+}
+.item-small .item-link  {
+    width: 90px;
+}
+.item-small img {
+    height:60px;
+}
+.item-small h3{
+    font-size: 12px;
+    font-family: var(--fontbody);
+    text-transform: uppercase;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;    
+}
+.item-small .item-subtitle{
+    display:none;
+}
+.item-small .item-action i {
+    font-size: 16px;
+}
+
+
+.item-medium {
+    width: 150px;
+}
+.item-medium .item-link  {
+    width: 130px;
+}
+.item-medium img {
+    height:90px;
+}
+.item-medium h3{
+    font-size: 18px;
+}
+
+
+.item-large {
+    width:300px;
+    justify-content: left;
+}
+.item-large .item-link {
+    display: flex;
+}
+.item-large img {
+    height:120px;
+}
+.item-large .item-title {
+    text-align:left;
+    padding-left:10px;
+}
+.item-large h3{
+    font-size: 25px;
+    border-bottom: 1px solid var(--colorftbodydark);
+}
+.item-large .item-container {
+    flex-direction: column;
+}
+.item-large .item-action {
+    text-align: left;
+}
+.item-large .item-description {
+    margin-top:15px;
+}
+
+.item-list {
+    width:100%;
+    justify-content: left;
+
+}
+.item-list .item-container {
+    flex-direction: column;
+    width:100%;
+}
+.item-list .item-content {
+    flex-wrap: nowrap;
+    flex-direction: row;
+}
+.item-list .item-link {
+    display:flex;
+    align-items: center;
+}
+.item-list img {
+    height:40px;
+    margin:0px;
+}
+.item-list .item-title {
+    text-align:left;
+    padding-left:10px;
+}
+.item-list h3{
+    font-size: 18px;
+    font-family: var(--fontbody);
+    text-transform: uppercase;
+}
+.item-list .item-subtitle{
+    display:none;
+}
+.item-list .item-action {
+    width:auto;
+}