diff options
| author | Alex Auvolat <alex@adnab.me> | 2018-10-11 18:58:46 +0200 |
|---|---|---|
| committer | Alex Auvolat <alex@adnab.me> | 2018-10-11 18:58:46 +0200 |
| commit | 123fbcf6abcfe61ef65cc82f1d22843dde722b23 (patch) | |
| tree | e68c9b5d4db19e0ea8dd6b922bc91fb19f56c0f5 /shardweb/lib/shard_web | |
| parent | d164046678b5e10e23439a77fde75101a9e498d6 (diff) | |
| download | shard-123fbcf6abcfe61ef65cc82f1d22843dde722b23.tar.gz shard-123fbcf6abcfe61ef65cc82f1d22843dde722b23.zip | |
Integrate a very very pretty template in shardweb
Diffstat (limited to 'shardweb/lib/shard_web')
| -rw-r--r-- | shardweb/lib/shard_web/endpoint.ex | 2 | ||||
| -rw-r--r-- | shardweb/lib/shard_web/templates/layout/app.html.eex | 272 |
2 files changed, 252 insertions, 22 deletions
diff --git a/shardweb/lib/shard_web/endpoint.ex b/shardweb/lib/shard_web/endpoint.ex index 6883493..fb8a48f 100644 --- a/shardweb/lib/shard_web/endpoint.ex +++ b/shardweb/lib/shard_web/endpoint.ex @@ -9,7 +9,7 @@ defmodule ShardWeb.Endpoint do # when deploying your static files in production. plug Plug.Static, at: "/", from: :shardweb, gzip: false, - only: ~w(css fonts images js favicon.ico robots.txt) + only: ~w(css fonts font-awesome images js favicon.ico robots.txt) # Code reloading can be explicitly enabled under the # :code_reloader configuration of your endpoint. diff --git a/shardweb/lib/shard_web/templates/layout/app.html.eex b/shardweb/lib/shard_web/templates/layout/app.html.eex index d4b2075..bd405e7 100644 --- a/shardweb/lib/shard_web/templates/layout/app.html.eex +++ b/shardweb/lib/shard_web/templates/layout/app.html.eex @@ -1,6 +1,8 @@ <!DOCTYPE html> <html lang="en"> - <head> + +<head> + <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> @@ -8,32 +10,260 @@ <meta name="author" content=""> <title>Shard.</title> + + <!-- Bootstrap Core CSS --> + <link href="<%= static_path(@conn, "/css/bootstrap.min.css") %>" rel="stylesheet"> + + <!-- Custom CSS --> + <link href="<%= static_path(@conn, "/css/sb-admin.css") %>" rel="stylesheet"> + + <!-- Morris Charts CSS --> + <link href="<%= static_path(@conn, "/css/plugins/morris.css") %>" rel="stylesheet"> + + <!-- Custom Fonts --> + <link href="<%= static_path(@conn, "/font-awesome/css/font-awesome.min.css") %>" rel="stylesheet" type="text/css"> + + <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> + <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> + <!--[if lt IE 9]> + <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> + <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> + <![endif]--> + <link rel="stylesheet" href="<%= static_path(@conn, "/css/app.css") %>"> - </head> - - <body> - <div class="container"> - <header class="header"> - <nav role="navigation"> - <ul class="nav nav-pills pull-right"> - <li><a href="<%= page_path(@conn, :index) %>">Home</a></li> - <li><a href="<%= room_path(@conn, :show, "lobby") %>">Chat</a></li> - <li><a href="<%= identity_path(@conn, :view) %>">[<%= @nick %>]</a></li> - </ul> +</head> + +<body> + + <div id="wrapper"> + + <!-- Navigation --> + <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> + <!-- Brand and toggle get grouped for better mobile display --> + <div class="navbar-header"> + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> + <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="<%= page_path(@conn, :index) %>">Shard</a> + </div> + <!-- Top Menu Items --> + <ul class="nav navbar-right top-nav"> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-envelope"></i> <b class="caret"></b></a> + <ul class="dropdown-menu message-dropdown"> + <li class="message-preview"> + <a href="#"> + <div class="media"> + <span class="pull-left"> + <img class="media-object" src="http://placehold.it/50x50" alt=""> + </span> + <div class="media-body"> + <h5 class="media-heading"><strong>John Smith</strong> + </h5> + <p class="small text-muted"><i class="fa fa-clock-o"></i> Yesterday at 4:32 PM</p> + <p>Lorem ipsum dolor sit amet, consectetur...</p> + </div> + </div> + </a> + </li> + <li class="message-preview"> + <a href="#"> + <div class="media"> + <span class="pull-left"> + <img class="media-object" src="http://placehold.it/50x50" alt=""> + </span> + <div class="media-body"> + <h5 class="media-heading"><strong>John Smith</strong> + </h5> + <p class="small text-muted"><i class="fa fa-clock-o"></i> Yesterday at 4:32 PM</p> + <p>Lorem ipsum dolor sit amet, consectetur...</p> + </div> + </div> + </a> + </li> + <li class="message-preview"> + <a href="#"> + <div class="media"> + <span class="pull-left"> + <img class="media-object" src="http://placehold.it/50x50" alt=""> + </span> + <div class="media-body"> + <h5 class="media-heading"><strong>John Smith</strong> + </h5> + <p class="small text-muted"><i class="fa fa-clock-o"></i> Yesterday at 4:32 PM</p> + <p>Lorem ipsum dolor sit amet, consectetur...</p> + </div> + </div> + </a> + </li> + <li class="message-footer"> + <a href="#">Read All New Messages</a> + </li> + </ul> + </li> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bell"></i> <b class="caret"></b></a> + <ul class="dropdown-menu alert-dropdown"> + <li> + <a href="#">Alert Name <span class="label label-default">Alert Badge</span></a> + </li> + <li> + <a href="#">Alert Name <span class="label label-primary">Alert Badge</span></a> + </li> + <li> + <a href="#">Alert Name <span class="label label-success">Alert Badge</span></a> + </li> + <li> + <a href="#">Alert Name <span class="label label-info">Alert Badge</span></a> + </li> + <li> + <a href="#">Alert Name <span class="label label-warning">Alert Badge</span></a> + </li> + <li> + <a href="#">Alert Name <span class="label label-danger">Alert Badge</span></a> + </li> + <li class="divider"></li> + <li> + <a href="#">View All</a> + </li> + </ul> + </li> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> John Smith <b class="caret"></b></a> + <ul class="dropdown-menu"> + <li> + <a href="#"><i class="fa fa-fw fa-user"></i> Profile</a> + </li> + <li> + <a href="#"><i class="fa fa-fw fa-envelope"></i> Inbox</a> + </li> + <li> + <a href="#"><i class="fa fa-fw fa-gear"></i> Settings</a> + </li> + <li class="divider"></li> + <li> + <a href="#"><i class="fa fa-fw fa-power-off"></i> Log Out</a> + </li> + </ul> + </li> + </ul> + <!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens --> + <div class="collapse navbar-collapse navbar-ex1-collapse"> + <ul class="nav navbar-nav side-nav"> + <li class="active"> + <a href="<%= page_path(@conn, :index) %>"><i class="fa fa-fw fa-dashboard"></i> Peer list</a> + </li> + <li> + <a href="<%= room_path(@conn, :show, "lobby") %>"><i class="fa fa-fw fa-bar-chart-o"></i> Chat</a> + </li> + <li> + <a href="<%= identity_path(@conn, :view) %>"><i class="fa fa-fw fa-table"></i> [<%= @nick %>]</a> + </li> + <li> + <a href="forms.html"><i class="fa fa-fw fa-edit"></i> Forms</a> + </li> + <li> + <a href="bootstrap-elements.html"><i class="fa fa-fw fa-desktop"></i> Bootstrap Elements</a> + </li> + <li> + <a href="bootstrap-grid.html"><i class="fa fa-fw fa-wrench"></i> Bootstrap Grid</a> + </li> + <li> + <a href="javascript:;" data-toggle="collapse" data-target="#demo"><i class="fa fa-fw fa-arrows-v"></i> Dropdown <i class="fa fa-fw fa-caret-down"></i></a> + <ul id="demo" class="collapse"> + <li> + <a href="#">Dropdown Item</a> + </li> + <li> + <a href="#">Dropdown Item</a> + </li> + </ul> + </li> + <li> + <a href="blank-page.html"><i class="fa fa-fw fa-file"></i> Blank Page</a> + </li> + <li> + <a href="index-rtl.html"><i class="fa fa-fw fa-dashboard"></i> RTL Dashboard</a> + </li> + </ul> + </div> + <!-- /.navbar-collapse --> </nav> - <span class="logo"></span> - </header> - <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p> - <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p> + <div id="page-wrapper"> + + <div class="container-fluid"> + <!-- Page Heading --> + <div class="row"> + <div class="col-lg-12"> + <h1 class="page-header"> + Dashboard <small>Statistics Overview</small> + </h1> + <ol class="breadcrumb"> + <li class="active"> + <i class="fa fa-dashboard"></i> Dashboard + </li> + </ol> + </div> + </div> + <!-- /.row --> - <main role="main"> - <%= render @view_module, @view_template, assigns %> - </main> + <%= if get_flash(@conn, :info) do %> + <div class="row"> + <div class="col-lg-12"> + <div class="alert alert-info alert-dismissable"> + <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> + <i class="fa fa-info-circle"></i> <%= get_flash(@conn, :info) %> + </div> + </div> + </div> + <% end %> + <!-- /.row --> + + <%= if get_flash(@conn, :error) do %> + <div class="row"> + <div class="col-lg-12"> + <div class="alert alert-warning alert-dismissable"> + <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> + <i class="fa fa-info-circle"></i> <%= get_flash(@conn, :error) %> + </div> + </div> + </div> + <% end %> + <!-- /.row --> + + <main role="main"> + <%= render @view_module, @view_template, assigns %> + </main> + + </div> + <!-- /.container-fluid --> + + </div> + <!-- /#page-wrapper --> + + </div> + <!-- /#wrapper --> + + <!-- jQuery --> + <script src="<%= static_path(@conn, "/js/jquery.js") %>"></script> + + <!-- Bootstrap Core JavaScript --> + <script src="<%= static_path(@conn, "/js/bootstrap.min.js") %>"></script> + + <!-- Morris Charts JavaScript --> + <script src="<%= static_path(@conn, "/js/plugins/morris/raphael.min.js") %>"></script> + <script src="<%= static_path(@conn, "/js/plugins/morris/morris.min.js") %>"></script> + <script src="<%= static_path(@conn, "/js/plugins/morris/morris-data.js") %>"></script> - </div> <!-- /container --> <%= render_gon_script(@conn) %> <script src="<%= static_path(@conn, "/js/app.js") %>"></script> - </body> + +</body> + </html> + |