Merge pull request #14 from visuale/nodejs

Documentation content with new spacing fix.
forge · Jun 15, 2015 · ec39550 · ec39550
2 parents 4b4ab6b + 5aeb2de
commit ec39550
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 14 deletions.
diff --git a/app/css/forge_documentation.css b/app/css/forge_documentation.css
@@ -108,11 +108,15 @@ input[type="checkbox"].search-checkbox:checked + label span {
     display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
     display: -ms-flexbox;      /* TWEENER - IE 10 */
     display: -webkit-flex;     /* NEW - Chrome */
-    display: flex;
+    display:flex;
+
+    justify-content:flex-start;
+    -webkit-justify-content:space-between;
     flex-flow: row wrap;
     -webkit-flex-flow:row wrap;
+    align-items: flex-start;
 
-
+    text-align: center;
 }
 
 .row.documentation-flex-boxes p {
@@ -126,12 +130,11 @@ input[type="checkbox"].search-checkbox:checked + label span {
 }
 
 .documentation-flex-boxes div.documentation-item {
-    flex: 1 1 28.3333%;
-    -webkit-box-flex: 1 1 28.3333%;
-    -moz-box-flex: 1 1 28.3333%;
-    -webkit-flex:1 1 28.3333%;
-    margin:10px 8px;
-    -ms-flex:1;
+    margin:10px 1%;
+    flex:0 0 31.333%;
+    -moz-box-flex: 0 0 31.333%;
+    -webkit-box-flex:0 0 31.333%;
+    -webkit-flex: 0 0 31.333%;
 
 }
 

diff --git a/app/index.html b/app/index.html
@@ -170,7 +170,8 @@ <h3>Contact</h3>
 <script type="text/javascript" src="js/lib/parallax.min.js"></script>
 <!-- Touchswipe -->
 <script type="text/javascript" src="js/lib/jquery.touchSwipe.min.js"></script>
-<script type="text/javascript" src="js/lib/forge.jquery.js"></script>
+
+    <script type="text/javascript" src="js/lib/forge.jquery.js"></script>
 <script type="text/javascript" src="js/lib/jbossorg-tabzilla.js"></script>
 <!-- AngularJS -->
 <script type="text/javascript" src="js/lib/angular.js"></script>
@@ -186,9 +187,14 @@ <h3>Contact</h3>
 <script type="text/javascript" src="js/controllers/addonCtrl.js"></script>
 <script type="text/javascript" src="js/controllers/communityCtrl.js"></script>
 <script type="text/javascript" src="js/controllers/docCtrl.js"></script>
+    <script type="text/javascript" src="js/lib/forge.documentation.jquery.js"></script>
+    <script type="text/javascript" src="js/controllers/docMainCtrl.js"></script>
 <script type="text/javascript" src="js/controllers/downloadCtrl.js"></script>
 <script type="text/javascript" src="js/controllers/eventsCtrl.js"></script>
 <script type="text/javascript" src="js/controllers/homeCtrl.js"></script>
 <script type="text/javascript" src="js/controllers/newsCtrl.js"></script>
+
+
+
 </body>
 </html>
diff --git a/app/js/controllers/docCtrl.js b/app/js/controllers/docCtrl.js
@@ -14,5 +14,5 @@ angular.module('jboss-forge').controller('docCtrl', function($rootScope, $scope,
 		backendAPI.fetchDocs(function(data) { 
 			$scope.docs = data;
 		});
-	}	
-});
+	}
+});
diff --git a/app/js/controllers/docMainCtrl.js b/app/js/controllers/docMainCtrl.js
@@ -0,0 +1,5 @@
+angular.module('jboss-forge').controller('docDivHeightCtrl',function($scope) {
+    $scope.$watch('$viewContentLoaded', function(){
+        setTimeout('initDocumentationJS()',500);
+    });
+});
diff --git a/app/js/lib/forge.documentation.jquery.js b/app/js/lib/forge.documentation.jquery.js
@@ -0,0 +1,21 @@
+// These scripts manage the height values of the individual documentation page divs.
+function initDocumentationJS() {
+    if($('.row.documentation-flex-boxes').length) {
+       heightMatchDocDivs();
+    }
+}
+
+
+//Match heights of .info-row div within each .documentation-item
+function heightMatchDocDivs() {
+    var iArr = new Array();
+
+    $('.info-row').each(function(i,e){
+        iArr.push($(this).outerHeight());
+    });
+
+    //Max value
+    var heightVal = Math.max.apply(Math,iArr);
+
+   $('.info-row').css({'height':heightVal + 'px'});
+}
diff --git a/app/views/documentation.html b/app/views/documentation.html
@@ -127,9 +127,9 @@ <h2 class="hidden-xs"><strong>Learn More</strong> about what you can do with Fo
 <div class="page-section documentation-section">
     <div class="container">
         <div class="row">
-            <div class="col-md-10 col-md-offset-1 col-sm-12 col-sm-offset-0 col-xs-10 col-xs-offset-1">
+            <div ng-controller="docDivHeightCtrl" class="col-md-10 col-md-offset-1 col-sm-12 col-sm-offset-0 col-xs-10 col-xs-offset-1">
                 <!-- FLEX GRID -->
-                <div class="row documentation-flex-boxes">
+                <div  class="row documentation-flex-boxes">
                     <!-- Item -->
                     <div class="documentation-item" ng-repeat="doc in docs|filter:searchBox">
                         <a ui-sref="documentation_detail({docId: doc.id})">                           
@@ -168,4 +168,5 @@ <h2>{{doc.title}}</h2>
         </div><!-- /.col-sm-8 col-sm-offset-1 col-xs-12 -->
     </div><!-- /.row -->
 </div><!-- /.container -->
-</div><!-- / .page-section -->
+</div><!-- / .page-section -->
+