From f58eed4ff744969bc10af8ef1c4bed42c1e31eb0 Mon Sep 17 00:00:00 2001 From: Dennis Kao <ulysseskao@gmail.com> Date: Tue, 26 Apr 2016 01:57:12 +0800 Subject: [PATCH] ui-router templates --- grails-app/assets/templates/xdashangular/UI/timeline.html | 197 +++++++++++++++++++++++++++++++++++++++++++++++-- 1 files changed, 188 insertions(+), 9 deletions(-) diff --git a/grails-app/assets/templates/xdashangular/UI/timeline.html b/grails-app/assets/templates/xdashangular/UI/timeline.html index de155ea..9a57ab4 100644 --- a/grails-app/assets/templates/xdashangular/UI/timeline.html +++ b/grails-app/assets/templates/xdashangular/UI/timeline.html @@ -1,10 +1,189 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8"> - <title>Title</title> -</head> -<body> +<!-- Content Header (Page header) --> +<section class="content-header"> + <h1> + Timeline + <small>example</small> + </h1> + <ol class="breadcrumb"> + <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li> + <li><a href="#">UI</a></li> + <li class="active">Timeline</li> + </ol> +</section> -</body> -</html> \ No newline at end of file +<!-- Main content --> +<section class="content"> + + <!-- row --> + <div class="row"> + <div class="col-md-12"> + <!-- The time line --> + <ul class="timeline"> + <!-- timeline time label --> + <li class="time-label"> + <span class="bg-red"> + 10 Feb. 2014 + </span> + </li> + <!-- /.timeline-label --> + <!-- timeline item --> + <li> + <i class="fa fa-envelope bg-blue"></i> + + <div class="timeline-item"> + <span class="time"><i class="fa fa-clock-o"></i> 12:05</span> + + <h3 class="timeline-header"><a href="#">Support Team</a> sent you an email</h3> + + <div class="timeline-body"> + Etsy doostang zoodles disqus groupon greplin oooj voxy zoodles, + weebly ning heekya handango imeem plugg dopplr jibjab, movity + jajah plickers sifteo edmodo ifttt zimbra. Babblely odeo kaboodle + quora plaxo ideeli hulu weebly balihoo... + </div> + <div class="timeline-footer"> + <a class="btn btn-primary btn-xs">Read more</a> + <a class="btn btn-danger btn-xs">Delete</a> + </div> + </div> + </li> + <!-- END timeline item --> + <!-- timeline item --> + <li> + <i class="fa fa-user bg-aqua"></i> + + <div class="timeline-item"> + <span class="time"><i class="fa fa-clock-o"></i> 5 mins ago</span> + + <h3 class="timeline-header no-border"><a href="#">Sarah Young</a> accepted your friend request</h3> + </div> + </li> + <!-- END timeline item --> + <!-- timeline item --> + <li> + <i class="fa fa-comments bg-yellow"></i> + + <div class="timeline-item"> + <span class="time"><i class="fa fa-clock-o"></i> 27 mins ago</span> + + <h3 class="timeline-header"><a href="#">Jay White</a> commented on your post</h3> + + <div class="timeline-body"> + Take me to your leader! + Switzerland is small and neutral! + We are more like Germany, ambitious and misunderstood! + </div> + <div class="timeline-footer"> + <a class="btn btn-warning btn-flat btn-xs">View comment</a> + </div> + </div> + </li> + <!-- END timeline item --> + <!-- timeline time label --> + <li class="time-label"> + <span class="bg-green"> + 3 Jan. 2014 + </span> + </li> + <!-- /.timeline-label --> + <!-- timeline item --> + <li> + <i class="fa fa-camera bg-purple"></i> + + <div class="timeline-item"> + <span class="time"><i class="fa fa-clock-o"></i> 2 days ago</span> + + <h3 class="timeline-header"><a href="#">Mina Lee</a> uploaded new photos</h3> + + <div class="timeline-body"> + <img src="http://placehold.it/150x100" alt="..." class="margin"> + <img src="http://placehold.it/150x100" alt="..." class="margin"> + <img src="http://placehold.it/150x100" alt="..." class="margin"> + <img src="http://placehold.it/150x100" alt="..." class="margin"> + </div> + </div> + </li> + <!-- END timeline item --> + <!-- timeline item --> + <li> + <i class="fa fa-video-camera bg-maroon"></i> + + <div class="timeline-item"> + <span class="time"><i class="fa fa-clock-o"></i> 5 days ago</span> + + <h3 class="timeline-header"><a href="#">Mr. Doe</a> shared a video</h3> + + <div class="timeline-body"> + <div class="embed-responsive embed-responsive-16by9"> + <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tMWkeBIohBs" frameborder="0" allowfullscreen></iframe> + </div> + </div> + <div class="timeline-footer"> + <a href="#" class="btn btn-xs bg-maroon">See comments</a> + </div> + </div> + </li> + <!-- END timeline item --> + <li> + <i class="fa fa-clock-o bg-gray"></i> + </li> + </ul> + </div> + <!-- /.col --> + </div> + <!-- /.row --> + + <div class="row" style="margin-top: 10px;"> + <div class="col-md-12"> + <div class="box box-primary"> + <div class="box-header"> + <h3 class="box-title"><i class="fa fa-code"></i> Timeline Markup</h3> + </div> + <div class="box-body"> + <pre style="font-weight: 600;"> +<ul class="timeline"> + + <!-- timeline time label --> + <li class="time-label"> + <span class="bg-red"> + 10 Feb. 2014 + </span> + </li> + <!-- /.timeline-label --> + + <!-- timeline item --> + <li> + <!-- timeline icon --> + <i class="fa fa-envelope bg-blue"></i> + <div class="timeline-item"> + <span class="time"><i class="fa fa-clock-o"></i> 12:05</span> + + <h3 class="timeline-header"><a href="#">Support Team</a> ...</h3> + + <div class="timeline-body"> + ... + Content goes here + </div> + + <div class="timeline-footer"> + <a class="btn btn-primary btn-xs">...</a> + </div> + </div> + </li> + <!-- END timeline item --> + + ... + +</ul> + </pre> + </div> + <!-- /.box-body --> + </div> + <!-- /.box --> + </div> + <!-- /.col --> + </div> + <!-- /.row --> + +</section> +<!-- /.content --> -- Gitblit v0.0.0-SNAPSHOT