<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/tutelagesystems/pen/dMgMBp?depth=everything&order=popularity&page=9&q=shortener&show_forks=false" />
<link rel='stylesheet prefetch' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css'>
<style class="cp-pen-styles">.btn-custom {
background-color: #F47270;
color: #FFF;
}
.btn-custom:hover {
background-color: #f04341;
color: #FFF;
}
.panel-heading h3 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: normal;
width: 50%;
padding-top: 8px;
}
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: table;
transition: opacity .3s ease;
}
.modal-wrapper {
display: table-cell;
vertical-align: middle;
}
.modal-container {
width: 300px;
margin: 0px auto;
padding: 20px 30px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
transition: all .3s ease;
font-family: Helvetica, Arial, sans-serif;
}
.modal-header h3 {
margin-top: 0;
color: #42b983;
}
.modal-body {
margin: 20px 0;
}
.modal-default-button {
float: right;
}
/*
* the following styles are auto-applied to elements with
* v-transition="modal" when their visiblity is toggled
* by Vue.js.
*
* You can easily play with the modal transition by editing
* these styles.
*/
.modal-enter, .modal-leave {
opacity: 0;
}
.modal-enter .modal-container,
.modal-leave .modal-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
</style></head><body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">AppNAME</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Links <span class="sr-only">(current)</span></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><p class="navbar-text">Welcome back admin@laracademy.co</p></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">My Account <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-fw fa-wrench"></i> Change Password</a></li>
<li role="separator" class="divider"></li>
<li><a href="#"><i class="fa fa-fw fa-unlock"></i> Sign Out</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<h3>
Url Shortener - [Administration!]
</h3>
</div> <!-- /col -->
</div> <!-- /row -->
<!-- Widget Area -->
<!-- Widget Area -->
<!-- Content -->
<div id="vueApp" class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title pull-left">
Shortened Urls
</h3>
<a href="#" class="btn btn-custom pull-right"><i class="fa fa-plus"></i> Add New Url</a>
<div class="clearfix"></div>
</div>
<div class="panel-body">
<p>
This table includes all of the urls that are currently in the system
</p>
</div>
<table class="table table-hover table-bordered table-striped">
<thead>
<tr>
<th>
<a href="#" @click.prevent.stop="filterTable('name')">Name</a>
</th>
<th>
Short Url
</th>
<th>
<a href="#" @click.prevent.stop="filterTable('visits')">Visits</a>
</th>
<th class="col-md-3">
Actions
</th>
</tr>
</thead>
<tbody>
<tr v-for="url in urls | orderBy tableScope tableOrder">
<td>
{{ url.name }}
</td>
<td>
<a href="{{ url.url_full }}">{{ url.url_short }}</a>
</td>
<td class="text-right">
{{ url.visits }}
</td>
<td>
<div class="btn-group btn-group-justified hidden-xs">
<a href="#" class="btn btn-danger"><i class="fa fa-trash-o"></i></a>
<a href="#" class="btn btn-info"><i class="fa fa-pie-chart"></i> Stats</a>
<a href="#" class="btn btn-primary">Edit</a>
</div>
<div class="btn-group btn-group-justified visible-xs">
<a href="#" class="btn btn-danger"><i class="fa fa-trash-o"></i></a>
<a href="#" class="btn btn-info"><i class="fa fa-pie-chart"></i></a>
<a href="#" class="btn btn-primary"><i class="fa fa-pencil"></i></a>
</div>
</td>
</tr>
</tbody>
</table>
<div class="panel-footer text-right">
<a href="#" class="btn btn-custom"><i class="fa fa-plus"></i> Add New Url</a>
</div>
</div>
</div>
</div>
<!-- Content -->
</div> <!-- /container -->
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/vue/1.0.21/vue.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/vue-resource/0.7.0/vue-resource.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script><script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<script >// register modal component
Vue.component('modal', {
template: '#modal-template',
props: {
show: {
type: Boolean,
required: true,
twoWay: true
}
}
});
new Vue({
el: '#vueApp',
data: {
tableScope: '',
tableOrder: 1,
showModal: false,
urls: [
{id: 1, name: 'Laravel 5 - Intermediate - Localization', url_short: ' https://g.laracademy.co/A8a7sZ6', url_full: 'https://laracademy.co/videos/laravel-5-intermediate-series/localization', visits: 1246},
{id: 2, name: 'Laravel 5 - Beginner Series', url_short: ' https://g.laracademy.co/s4q7a8z9', url_full: 'https://laracademy.co/series/laravel-5-beginner-series', visits: 1157}
]
},
methods: {
filterTable: function(attribute) {
if(this.tableScope == attribute && this.tableOrder == 1) {
this.tableScope = attribute;
this.tableOrder = -1;
}
else
{
this.tableScope = attribute;
this.tableOrder = 1;
}
}
}
});
//# sourceURL=pen.js
</script>
</body></html>
