JSFiddle - React, Tailwind, and code Playground

by KARTHIKEYAN K

HTML

<div class="container-fluid">
    <div class="row">
        <h1>{{title}}</h1>
    </div>
    <div class="row">
        <div class="col-lg-6">
            <div class="row">
                <p ng-bind-html="welcomeMessage"></p>
            </div>
            <div class="row">
                <p></p>
                <p ng-bind-html="description"></p>
            </div>
            <div class="row">
                <div style="margin-top:20px;">
                    <ul class="link_cls">
                        <li ng-repeat="link in links"><a href="#">{{link}}</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-sm-6 col-xs-6">
            <ul class="row" ng-repeat="viewRows in viewRows">
                <li class="thumbnail tile tile-medium tile-teal" ng-repeat="viewItems in viewRows">
                    <a ng-click="goSomewhere(viewItems.name)" class="fa-links">
                        <h2>{{viewItems.text}}</h2>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>

CSS

body {
    font-family: "Segoe UI", "Segoe WP", "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #333;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 100;
    font-family: "Segoe UI", "Segoe WP", "Helvetica Neue", sans-serif;
}

.flex-bridge {
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    min-height: 400px;
    -ms-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    height: 100%;
}





.btn {
    border-radius: 0px;
}

hr.underline {
    margin-top: 0px;
}

.link_cls {
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
    list-style: none;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 8px;
}

.tile-medium.tile {
    height: 130px;
    width: 130px;
}

.tile-teal.tile {
    background-color: #00aba9;
}

.tile {
    display: block;
    cursor: pointer;
    -webkit-perspective: 0;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: -webkit-transform .2s;
    float: left;
    min-width: 75px;
    min-height: 75px;
    text-align: center;
    opacity: 0.75;
    background-color: #2e8bcc;
    z-index: 1;
    border: 4px #fff solid;
    color: #fff;
}

.thumbnail {
    display: block;
    padding: 4px;
    margin-right: 20px;
    margin-bottom: 10px;
    line-height: 1.4285;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 0;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

a.fa-links {
    color: #fff;
}

    a.fa-links h2 {
        font-size: 18px;
        padding-top: 20px;
    }

JavaScript

angular.module('IMSapp').controller('homeCtrl', ['$scope', '$rootScope', '$state', function ($scope, $rootScope, $state) {

    $scope.links = [];
    $scope.views = [];
    $scope.title;
    $scope.welcomeMessage;
    $scope.description;

    $scope.goSomewhere = function (viewname) {
        $state.go(
          'root.inventory',
          { viewName: viewname }
        );
    };

    $scope.title = "Home";
    $scope.welcomeMessage = "Welcome to the <em>Euda Portal System</em>";
    $scope.description = "The system allows you to register and manage the life cycle of end user developed applications such as spreadsheets and databases.";
    $scope.links = ["Data Quality Report Zone", "IT Management Policy – Implementation Procedures for End User Managed Applications (IP)", "EUMA Governance myDB Site", "EUMA Drop Zone"];
    $scope.views = [{ name: "view_All Applications" }, { name: "view_My Applications" }, { name: "view_My Owner Tasks" }, { name: "view_My Approver Tasks" }]
    console.log($scope.views);
    $scope.viewRows = [];
    angular.forEach($scope.views, function (task, index) {
        console.log(task);
        if (index % 2 == 0) {
            $scope.viewRows.push([]);
        }
        var FriendlyName = getFriendlyName(task.name);
        $scope.viewRows[$scope.viewRows.length - 1].push({
            name: task.name,
            text: FriendlyName
        });
        console.log(FriendlyName);
    });

    console.log(JSON.stringify($scope.viewRows));
    function getFriendlyName(name) {
        var str = name;
        var strPos = str.indexOf("_") + 1;
        var txtVal = str.substring(strPos, str.length);
        return txtVal;
    }
}]);