YunoHost/yunohost-admin
1
0
Fork 0
mirror of https://github.com/YunoHost/yunohost-admin.git synced 2024-09-03 20:06:15 +02:00
Code Issues Projects Releases Packages Wiki Activity

First rendering of the categories, still drafty

Browse source
This commit is contained in:
Alexandre Aubin 2019-11-26 00:38:02 +01:00
parent 749aba93fe
commit 8ec78160de
3 changed files with 39 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/css/style.less
View file

@ -631,8 +631,12 @@ input[type='radio'].nice-radio {
background-color: darkorchid; background-color: darkorchid;
} }
.app-category-card {
text-align: center;
}
// only one card for small screens // only one card for small screens
.app-card { .app-card, .app-category-card {
width: 100%; width: 100%;
.btn-group { .btn-group {
width: 100%; width: 100%;
@ -654,12 +658,12 @@ input[type='radio'].nice-radio {
} }
.app-title { .app-title, .app-category-title {
margin-top: 5px; margin-top: 5px;
font-weight: 600; font-weight: 600;
} }
.app-card-desc { .app-card-desc, .app-category-card-desc {
height: 6rem; height: 6rem;
overflow: hidden; overflow: hidden;
} }
@ -697,6 +701,14 @@ input[type='radio'].nice-radio {
} }
} }
.app-category-card .panel-body {
padding: 2em;
height: 10em;
}
.app-category-title {
line-height: 0.5em;
}
/** Groups View **/ /** Groups View **/
#view-groups { #view-groups {
@ -806,7 +818,7 @@ input[type='radio'].nice-radio {
} }
// display 2 cards between 640 and 992px // display 2 cards between 640 and 992px
.app-card { .app-card, .app-category-card {
width: 47.9%; width: 47.9%;
margin: 1%; margin: 1%;
} }
@ -908,7 +920,7 @@ input[type='radio'].nice-radio {
// bootstrap breakpoint for large screen is 992px // bootstrap breakpoint for large screen is 992px
@media screen and (min-width: 992px) { @media screen and (min-width: 992px) {
.app-card { .app-card, .app-category-card {
// display 3 cards by row // display 3 cards by row
width: 31.3%; width: 31.3%;
margin: 1%; margin: 1%;

10
src/js/yunohost/controllers/apps.js
View file

@ -158,12 +158,18 @@
// setup filtering of apps once the view is loaded // setup filtering of apps once the view is loaded
function setupFilterEvents () { function setupFilterEvents () {
// Uses plugin isotope to filter apps (we could had ordering to) // Uses plugin isotope to filter apps (we could had ordering to)
var cardGrid = jQuery('.grid').isotope({ var cardGrid = jQuery('#apps').isotope({
itemSelector: '.app-card', itemSelector: '.app-card',
layoutMode: 'fitRows', layoutMode: 'fitRows',
transitionDuration: 200 transitionDuration: 200
}); });
var categoryGrid = jQuery('#app-categories').isotope({
itemSelector: '.app-category-card',
layoutMode: 'fitRows',
transitionDuration: 200
});
filterByClassAndName = function () { filterByClassAndName = function () {
var input = jQuery("#filter-app-cards").val().toLowerCase(); var input = jQuery("#filter-app-cards").val().toLowerCase();
var inputMatch = (jQuery(this).find('.app-title').text().toLowerCase().indexOf(input) > -1); var inputMatch = (jQuery(this).find('.app-title').text().toLowerCase().indexOf(input) > -1);
@ -191,7 +197,7 @@
}; };
// render // render
c.view('app/app_catalog', {apps: apps}, setupFilterEvents); c.view('app/app_catalog', {apps: apps, categories: data["categories"]}, setupFilterEvents);
}); });
}); });

15
src/views/app/app_catalog.ms
View file

@ -24,7 +24,20 @@
<div class="separator"></div> <div class="separator"></div>
<div class="list-group grid"> <div id="app-categories" class="list-group grid">
{{#categories}}
<div class="app-category-card panel panel-default">
<div class="panel-body">
<h2 class="app-category-title"><span class="fa-fw fa-{{icon}}"></span> {{title}}</h2>
<h3 class="app-category-card-desc">{{description}}</h3>
</div>
</div>
{{/categories}}
</div>
<div class="separator"></div>
<div id="apps" class="list-group grid">
{{#apps}} {{#apps}}
<div class="app-card panel panel-default {{status}} {{state}} {{isWorking}} {{isHighQuality}} {{decentQuality}} {{level}}-level"> <div class="app-card panel panel-default {{status}} {{state}} {{isWorking}} {{isHighQuality}} {{decentQuality}} {{level}}-level">
<div class="panel-body"> <div class="panel-body">