JSFiddle - React, Tailwind, and code Playground

by jimyu

HTML

//Menus.html
<div class="topLevel" ng-repeat="m in menus">
    {{m}}    
    <!--<div class="subLevel" ng-repeat="m2 in m.SubMenus">
        {{m2.title}}
    </div>-->
</div>
//

//adminPage.html
<div ng-controller="adminController">
    <span class="actionButton">Add</span>
    <table>
        <tr>
            <th>PageId</th>
            <th>Title</th>
            <th>Parent</th>
            <th>Order</th>
            <th>Action</th>
        </tr>
        <tr ng-repeat="p in pages" ng-class="{topLevelPage: p.parentPageId==null}">
            <td>{{p.pageId}}</td>
            <td>{{p.title}}</td>
            <td>
                <select ng-model="p.parentPageId"
                        ng-options="num.pageId as num.title for num in p.parentPageIds"></select>
            </td>
            <td ng-click="getPage(p.pageId)">Edit</td>
        </tr>
    </table>
    <span class="actionButton" ng-click="updatePages()">Save</span>
    <div ng-if="inUpdating">
        <input ng-model="pageId" type="hidden" /><br />
        <input ng-model="title" /><br />
        <input ng-model="pageContent" /><br/>
        <select ng-model="parentPageId" ng-options="num.pageId as num.title for num in parentPageIds">
            <option value=""></option>
        </select><br />
        <select ng-model="orderId" ng-options="num for num in pageOrdersList"></select><br />
        <span class="actionButton" ng-click="updatePage()">Save</span>
    </div>
</div>

//Index.cshtml
@model MvcApplicationTest.Models.LoginModel
@{
    ViewBag.Title = "";
}
@functions{
    public string GetAntiForgeryToken()
    {
        string cookieToken, formToken;
        AntiForgery.GetTokens(null, out cookieToken, out formToken);
        return cookieToken + ":" + formToken;                
    }
}

<header>
    <h1>@ViewBag.Title</h1>
</header>

<div id="main-content">
    <ul id="nav">
        <li ng-repeat="m in menus">
            <a href="" ng-click="gotoPage(m.pageId)">{{m.title}}</a>
            <ul...

CSS

//NewStyle.css
.animate-show {
    opacity:1;
}

/*.animate-show.ng-hide-add.ng-hide-add-active,
.animate-show.ng-hide-remove.ng-hide-remove-active {
  -webkit-transition:all linear 0.5s;
  transition:all linear 0.5s;
}*/

/*.animate-show.ng-hide {
  line-height:0;
  opacity:0.2;
  padding:0 10px;
}*/

.todoList.ng-leave 	{ z-index:9999; }
.todoList.ng-enter 	{ z-index:8888; }

/* page specific animations ------------------------ */

/* home -------------------------- 
.page-home.ng-leave         {
    -webkit-transform-origin: 0% 0%;
	-webkit-animation: rotateFall 1s both ease-in;
	-moz-transform-origin: 0% 0%;
	-moz-animation: rotateFall 1s both ease-in;
	transform-origin: 0% 0%;
	animation: rotateFall 1s both ease-in;
}
.page-home.ng-enter 		{  
    -webkit-animation:scaleUp 0.5s both ease-in;
	-moz-animation:scaleUp 0.5s both ease-in;
	animation:scaleUp 0.5s both ease-in;    
}
*/

.animate-show.ng-leave {
    -webkit-animation:slideOutLeft 0.5s both ease-in;
	-moz-animation:slideOutLeft 0.5s both ease-in;
	animation:slideOutLeft 0.5s both ease-in;   
}
.animate-show.ng-enter {  
    -webkit-animation:slideInRight 0.5s both ease-in;
	-moz-animation:slideInRight 0.5s both ease-in;
	animation:slideInRight 0.5s both ease-in;    
}

.topLevel{
    float: left;
    height: 35px;
    width: 90px;
    border: 1px solid grey;
    background-color: #f0f6a5;
    cursor: pointer;
}

.subLevel:hover, .topLevel:hover {
    background-color: red;
}

/*won't work with element with specific class
.topLevel:last-child{
    float: none;
    clear: both;
     border: 2px solid green;
}*/

.subLevel{
    height: 35px;
    width: 90px;
    border: 1px solid grey;
    background-color: #f0f6a5;
}

@keyframes slideOutLeft {
	to 		{ transform: translateX(-100%); }
}
@-moz-keyframes slideOutLeft {	
	to 		{ -moz-transform: translateX(-100%); }
}
@-webkit-keyframes slideOutLeft {
	to 		{ -webkit-transform: translateX(-100%); }
}

/* scale up */
@keyframes scaleUp {
	from 		{ opacity:...

JavaScript

//app.js
var app = angular.module("Insight", ['ngRoute']);

app.config(function ($routeProvider, $locationProvider) {
    //$httpProvider.responseInterceptors.push('httpInterceptor');
    //$locationProvider.html5Mode(true);
    $routeProvider
        .when('/login', { templateUrl: "/Template/Login.html" })
        .when('/admin', { templateUrl: "/Template/adminPage.html" })
        .when("/", { templateUrl: "/Template/pageContent.html" })
        .when("/about", { template: "<H3>This is a template</H3>" })
        .when("/:pageId", { templateUrl: "/Template/pageContent.html" })
        .otherwise({ redirectTo: '/' });
});
    //.run();

//app.run(function (api) {
//    api.init();
//});

app.service("adviserHubService", function ($http, $q) {
    return ({
        getPages: getPages,
        getPage: getPage,
        updatePage: updatePage,
        deletePage: deletePage,
        login:login
    });

    function getPages(isAdmin) {
        var request = $http({
            method: "GET",
            url: "/api/Page/?isAdmin=" + isAdmin,
        });
        return (request.then(handleSuccess, handleError));
    }

    function getPage(id) {
        var url = "/api/Page/";
        if (id) {
            url = url + id;
        } else {
            url = url + "0";
        }
        var options = makeRequest("GET", url ,null);
        var request = $http(options);
        return (request.then(handleSuccess, handleError));
    }

    function updatePage(id, page) {
        var options = makeRequest("PUT", "/api/Page/" + id, angular.toJson(page), "text")
        var request = $http(options);
        return (request.then(handleSuccess, handleError));
    }

    function deletePage(id) {
        
    }

    function login(loginModel, returnUrl) {
        var options = makeRequest(
            "POST",
            "/Account/JsonLogin",
            angular.toJson({ model: loginModel, returnUrl: returnUrl }),
            "text");
        var request = $http(options);
     ...