Skip to content

Commit

Permalink
cleaned up dynamic categories
Browse files Browse the repository at this point in the history
  • Loading branch information
angfl97 committed Jul 12, 2019
1 parent 8213f22 commit 8a7270e
Show file tree
Hide file tree
Showing 9 changed files with 99 additions and 103 deletions.
1 change: 0 additions & 1 deletion _includes/header.html
View file
Expand Up @@ -14,7 +14,6 @@

<div id="siteNavbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right navbar-collapse">
<li id="catalog" {% if page.url == "/catalog/" %} class="active" {% endif %}><a href="/catalog/">Catalog</a></li>
<li id="radiuss" {% if page.url == "/radiuss/" %} class="active" {% endif %}><a href="/radiuss/">RADIUSS</a></li>
<li id="news"
{% if page.url == "/news/" %} class="active dropdown"
Expand Down
22 changes: 17 additions & 5 deletions _layouts/category.html
View file
Expand Up @@ -24,8 +24,9 @@
<div class="wrapper">
<div class="nav-container">
<nav class="stickynav">
<div ng-repeat="category in catData">
<a ng-class="{'selected-tab': $index == selectedIndex }" ng-click="categoryHref(category.title)" class="tab">{{category.displayTitle}}</a>
<div ng-repeat="category in catData" ng-click="categoryHref(category.title)">
<img ng-src="{{category.icon.path}}" style="width: 40px; height: 40px; margin-right: 10px;">
<a ng-class="{'selected-tab': $index == selectedIndex }" class="tab">{{category.displayTitle}}</a>
</div>
</nav>
</div>
Expand All @@ -36,16 +37,27 @@
<div class="page">

<div class="flex-category-focused" ng-if="category.title === currentLocation">
<div class="title-container">
<img src="{{category.icon.path}}" alt="{{category.icon.alt}}">
<div class="title-container page-header">
<img ng-src="{{category.icon.path}}" alt="{{category.icon.alt}}">
<div class="title-description">
<h3>{{category.title}}</h3>
<p>{{category.description}} </p>
</div>
</div>
<div style="display: flex; display: -webkit-flex; justify-content: center;">
<input ng-model="searchText" type="text" style="width: 23%; margin-bottom: 10px; margin-right: 10px;" autofocus placeholder="Filter Repositories">
<p> Sort By:
<select ng-model="orderProp">
<option value="-stars"> Stars </option>
<option value="-forks"> Forks </option>
<option value="name"> Name </option>
<option value="owner">Org </option>
</select>
</p>
</div>

<section class="flex-container-category" id="repositories">
<div class="flex-item {{repo.name}} {{repo.owner.login}} {{repo.primaryLanguage.name}}" ng-repeat="repo in topicRepos[catData.indexOf(category)]" ng-click="repoHref(repo.nameWithOwner)">
<div class="flex-item {{repo.name}} {{repo.owner.login}} {{repo.primaryLanguage.name}}" ng-repeat="repo in topicRepos[catData.indexOf(category)] | filter: searchText | orderBy: orderProp" ng-click="repoHref(repo.nameWithOwner)">
<h4 class="text-center">
<span alt="Name" title="Name"> {{ repo.name }} </span>
<small><span alt="Owner" title="Owner"> {{ repo.owner }} </span></small>
Expand Down
66 changes: 2 additions & 64 deletions catalog/index.html
View file
@@ -1,66 +1,4 @@
---
title: LLNL Software Catalog
layout: portal
title: Category
layout: category
---

{% raw %}

<p class="page-title"> Welcome to the LLNL software portal&mdash;a hub for our open source projects. This catalog is updated automatically as repositories are added or modified. </p>



<h2 class="page-header text-center" style="margin-top:0">
<span ng-show="repoData"> {{ repoData.length }} </span>
Software Repositories
</h2>


<div class="text-center" style="width: 100%; display: -webkit-flex; display: flex; justify-content: center;">
<input ng-model="searchText" type="text" style="width: 40%;margin-right: 20px; margin-bottom: 10px;" autofocus placeholder="Filter Repositories">

<span>
Sort By:
<select ng-model="orderProp">
<option value="-stargazers.totalCount"> Stars </option>
<option value="-forks.totalCount"> Forks </option>
<option value="name"> Name </option>
<option value="owner.login">Org </option>
</select>
</span>
</div>


<section ng-show="repoData" id="searchTextResults" class="flex-container">
<div ng-repeat="repo in repoData | filter:searchText | orderBy: orderProp" class="flex-item {{repo.name}} {{repo.owner.login}} {{repo.primaryLanguage.name}}" ng-click="repoHref(repo.nameWithOwner)" id="repositories">
<h4 class="text-center">
<span alt="Name" title="Name"> {{ repo.name }} </span>
<small><span alt="Owner" title="Owner"> {{ repo.owner.login }} </span></small>
<small><span alt="Primary Language" title="Primary Language"> {{ repo.primaryLanguage.name }} </span></small>
</h4>

<p class="text-justify"> {{ repo.description }} </p>

<p class="stats text-center">
<a href="{{ repo.url }}" alt="GitHub Page" title="GitHub Page">
<span class="fa fa-github"></span>
</a>

<a href="{{ repo.url }}/stargazers" alt="Stargazers" title="Stargazers">
<span class="fa fa-star"></span> {{ repo.stargazers.totalCount }}
</a>

<a href="{{ repo.url }}/network" alt="Forks" title="Forks">
<span class="fa fa-code-fork"></span> {{ repo.forks.totalCount }}
</a>

<a ng-if="repo.homepageUrl" href="{{ repo.homepageUrl }}" alt="Project Website" title="Project Website">
<span class="fa fa-globe"></span>
</a>
</p>
</div>
</section>

{% endraw %}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="/js/catalog/github-dynamic.js"></script>
19 changes: 9 additions & 10 deletions category/category_info.json
View file
Expand Up @@ -30,29 +30,29 @@
"APPLICATIONS":{
"title": "APPLICATIONS",
"icon":{
"path": "",
"path": "/assets/images/app-infrastructure.svg",
"alt": "Applications Icon"
},
"description": "Modeling and simulation codes for scientists and engineers",
"description": "Advance computing with scientific simulations and HPC system management codes",
"topics":["application"]
},
"PROXY APPLICATIONS":{
"title": "PROXY APPLICATIONS",
"icon":{
"path": "",
"path": "/assets/images/app-infrastructure.svg",
"alt": "Proxy Applications Icon"
},
"description": "Simplified versions of applications for testing, porting, co-design, etc.",
"description": "Prepare for testing and porting applications",
"topics":["proxy-application"]
},
"SYSTEMS SOFTWARE":{
"title": "SYSTEMS SOFTWARE",
"SYSTEM SOFTWARE":{
"title": "SYSTEM SOFTWARE",
"icon":{
"path": "",
"path": "/assets/images/data-manage.svg",
"alt": "Systems Software Icon"
},
"description": "Description coming soon",
"topics":["systems-software"]
"description": "Manage clusters and parallel environments",
"topics":["system-software"]
},
"PORTABLE EXECUTION & MEMORY MGMT":{
"title": "PORTABLE EXECUTION & MEMORY MGMT",
Expand All @@ -70,7 +70,6 @@
"alt": "Performance & Workflow Icon"
},
"description": "Manage and scale complex workflows, tracking, and data collection",

"topics": ["performance", "workflows"]
}
}
Expand Down
24 changes: 17 additions & 7 deletions css/main.css
View file
Expand Up @@ -277,6 +277,7 @@

.wrapper {
display: flex;
display: -webkit-flex;
justify-content: space-between;
}

Expand All @@ -299,6 +300,7 @@
@media(min-width:1200px){
.nav-container {
min-width: 300px;
width:400px;
height: 100%;
position: -webkit-sticky;
position: sticky;
Expand Down Expand Up @@ -326,26 +328,34 @@
}
}


.stickynav a {
padding-left: 15px;
.stickynav div {
padding-left: 5px;
padding-right:15px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height:50px;
text-decoration:none;
font-size: 1.8rem;
display: block;
transition: 0.3s;
border: solid 1px lightgrey;
border-top: none;
}

.stickynav a:hover {
.stickynav a {
text-decoration: none;
transition: 0.3s;
}


.stickynav div:hover {
background-color: steelblue;
color: white;
padding-left: 18px;
padding-left: 10px;
}

.stickynav div:hover > a{
color: white;
}

.hamburger-nav a{
Expand Down Expand Up @@ -406,7 +416,7 @@
max-width: 1400px;
margin-right: auto;
margin-left: auto;
margin-bottom: 10px;
margin-bottom: 20px;
//background-color: green;
}

Expand Down
6 changes: 4 additions & 2 deletions index.html
View file
Expand Up @@ -11,7 +11,7 @@

<div ng-repeat="category in catData" class="flex-category dynamic" ng-click="categoryHref(category.title)">

<img src="{{category.icon.path}}" alt="{{category.icon.alt}}">
<img ng-src="{{category.icon.path}}" alt="{{category.icon.alt}}">
<h4 class="text-center">{{category.title}}</h4>
<p class="text-center">{{category.description}}</p>

Expand All @@ -21,7 +21,7 @@ <h4 class="text-center">{{category.title}}</h4>

<span>
<a href="https://github.com/{{ repo.ownerLogin}}" alt="View Owner on GitHub" title="Owner: {{repo.ownerLogin}}">
<img class ="orgAvatar" src="{{repo.ownerAvatar}}">
<img class ="orgAvatar" ng-src="{{repo.ownerAvatar}}">
</a>
</span>

Expand Down Expand Up @@ -49,6 +49,8 @@ <h4 class="text-center">{{category.title}}</h4>
</div>
</section>

<h4>Browse our <a ng-click="categoryHref('ALL SOFTWARE')" style="cursor: pointer">full catalog</a> of open source projects!</h4>

{% endraw %}


Expand Down
5 changes: 4 additions & 1 deletion js/category-info.js
View file
Expand Up @@ -31,6 +31,9 @@ angular.module('app', [])

//check if repo is tagged as one of the categories
function containsTopics(catTopics, repoTopics){
if (catTopics.length == 0){
return true;
}
for (var i = 0; i < catTopics.length; i++){
if($.inArray(catTopics[i], repoTopics) != -1){
return true;
Expand All @@ -48,7 +51,7 @@ angular.module('app', [])
$scope.catData.push(data);
});
$scope.catdata = sortAlphabetically($scope.catData, "title");

getReposTopics.then(function(response){
var reposObj = response.data.data;
var allRepos = Object.keys(reposObj);
Expand Down
55 changes: 44 additions & 11 deletions js/focused-category-info.js
View file
Expand Up @@ -31,6 +31,9 @@ angular.module('app', [])

//check if repo is tagged as one of the categories
function containsTopics(catTopics, repoTopics){
if (catTopics.length == 0){
return true;
}
for (var i = 0; i < catTopics.length; i++){
if($.inArray(catTopics[i], repoTopics) != -1){
return true;
Expand All @@ -45,6 +48,11 @@ angular.module('app', [])
}).join(' ');
}

$scope.orderProp = "-stars";


$scope.showHamburger = false;

getCategoryInfo.then( function(response) {
var catsObj = response.data.data;
$scope.cats = Object.keys(catsObj);
Expand All @@ -55,6 +63,35 @@ angular.module('app', [])
$scope.catData.push(data);
});
$scope.catData = sortAlphabetically($scope.catData, "title");
var complete={"title": "ALL SOFTWARE",
"icon": {
"path":"/assets/images/math.svg",
"alt": "Math & Physics Libraries Icon"
},
"description": "Browse all LLNL open source projects",
"displayTitle": "All Software",
"topics": []
};
$scope.catData.unshift(complete);

var catTitle = $location.path().slice(1);

//set selected index to whatever category is currently being displayed
for ( var c in $scope.catData){
var modified = $scope.catData[c].title.replace(/ /g, "");
console.log( "modified: " + modified + " catTitle: " + catTitle);
if (modified == catTitle){
$scope.currentLocation = $scope.catData[c].title;
$scope.selectedIndex = $scope.catData.indexOf($scope.catData[c]);
console.log("selectedIndex: " + $scope.selectedIndex);
}
if(catTitle == ""){
var index = ($scope.catData.length -1);
$scope.selectedIndex = index;
var result = $scope.catData[index].title.replace(/ /g, "");
$window.location.href = '../category#'+result;
}
}

getReposTopics.then(function(response){
var reposObj = response.data.data;
Expand Down Expand Up @@ -99,7 +136,12 @@ angular.module('app', [])
category[count]['stars'] = reposInfoObj[repo].stargazers.totalCount;
category[count]["gitUrl"]= reposInfoObj[repo].url;
category[count]["homepageUrl"]= reposInfoObj[repo].homepageUrl;
category[count]["language"]= reposInfoObj[repo].primaryLanguage.name;
if (reposInfoObj[repo].primaryLanguage){
category[count]["language"]= reposInfoObj[repo].primaryLanguage.name;
}
else{
category[count]["language"]= "";
}
category[count]["forks"]= reposInfoObj[repo].forks.totalCount;
category[count]["description"]= reposInfoObj[repo].description;
}
Expand All @@ -124,17 +166,8 @@ angular.module('app', [])
$window.location.href = '../category#'+result;
};

var catTitle = $location.path().slice(1);

//set selected index to whatever category is currently being displayed
for ( var c in $scope.catData){
var modified = $scope.catData[c].title.replace(/ /g, "");
if (modified == catTitle){
$scope.currentLocation = $scope.catData[c].title;
$scope.selectedIndex = $scope.catData.indexOf($scope.catData[c]);
}
}
$scope.showHamburger = false;

});
});
}]);
4 changes: 2 additions & 2 deletions radiuss/index.html
View file
Expand Up @@ -9,7 +9,7 @@

<section class="flex-container" id="categories">
<div ng-repeat="category in catData" class="flex-category">
<img src="{{category.icon.path}}" alt="{{category.icon.alt}}">
<img ng-src="{{category.icon.path}}" alt="{{category.icon.alt}}">
<h4 class="text-center">{{category.title}}</h4>
<p class="text-center">{{category.description}}</p>

Expand All @@ -19,7 +19,7 @@ <h4 class="text-center">{{category.title}}</h4>

<span>
<a href="https://github.com/{{ repo.ownerLogin}}" alt="View Owner on GitHub" title="Owner: {{repo.ownerLogin}}">
<img class ="orgAvatar" src="{{repo.ownerAvatar}}">
<img class ="orgAvatar" ng-src="{{repo.ownerAvatar}}">
</a>
</span>

Expand Down

0 comments on commit 8a7270e

Please sign in to comment.