Skip to content

Commit 02ad3a2

Browse files
rxturrxtur
committed
Added material theme, work in progress
1 parent de98f70 commit 02ad3a2

File tree

15 files changed

+26602
-0
lines changed

15 files changed

+26602
-0
lines changed

‎src/App/Views/Themes/material/List.cshtml‎

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
@model ListModel
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
5+
<head>
6+
<meta charset="utf-8" />
7+
<link rel="icon" type="image/png" href="../assets/img/favicon.png">
8+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
9+
<title>@Html.Raw(Model.Blog.Title)</title>
10+
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
11+
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
12+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
13+
<link href="~/themes/material/css/material-kit.min.css" rel="stylesheet" />
14+
<style>
15+
.entry-meta a { color: #333; padding: 0 5px; font-size: 0.9em }
16+
</style>
17+
</head>
18+
19+
<body class="landing-page sidebar-collapse">
20+
21+
<div id="app">
22+
<nav class="navbar navbar-transparent navbar-color-on-scroll fixed-top navbar-expand-lg" color-on-scroll="100" id="sectionsNav">
23+
<div class="container">
24+
<div class="navbar-translate">
25+
<a class="navbar-brand" href="~/">
26+
<img src="~/@Model.Blog.Logo" width="36" />
27+
</a>
28+
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
29+
<span class="sr-only">Toggle navigation</span>
30+
<span class="navbar-toggler-icon"></span>
31+
<span class="navbar-toggler-icon"></span>
32+
<span class="navbar-toggler-icon"></span>
33+
</button>
34+
</div>
35+
<div class="collapse navbar-collapse">
36+
<ul class="navbar-nav ml-auto">
37+
<li class="nav-item">
38+
<a class="nav-link" href="~/">
39+
<i class="material-icons">home</i> Home
40+
</a>
41+
</li>
42+
<li class="nav-item">
43+
@if (User.Identity.IsAuthenticated)
44+
{
45+
<a class="nav-link" href="~/admin">
46+
<i class="material-icons">apps</i> Admin
47+
</a>
48+
}
49+
else
50+
{
51+
<a class="nav-link" href="~/account/login?ReturnUrl=/admin">
52+
<i class="material-icons">person</i> Login
53+
</a>
54+
}
55+
</li>
56+
<li class="nav-item">
57+
<a class="nav-link" rel="tooltip" title="" data-placement="bottom" href="https://twitter.com/blogifierdotnet" target="_blank" data-original-title="Follow us on Twitter">
58+
<i class="fa fa-twitter"></i>
59+
</a>
60+
</li>
61+
<li class="nav-item">
62+
<a class="nav-link" rel="tooltip" title="" data-placement="bottom" href="https://www.facebook.com/blogifierdotnet" target="_blank" data-original-title="Like us on Facebook">
63+
<i class="fa fa-facebook-square"></i>
64+
</a>
65+
</li>
66+
<li class="nav-item">
67+
<a class="nav-link" rel="tooltip" title="" data-placement="bottom" href="~/feed/rss" target="_blank" data-original-title="Subscribe to RSS feed">
68+
<i class="fa fa-rss"></i>
69+
</a>
70+
</li>
71+
</ul>
72+
</div>
73+
</div>
74+
</nav>
75+
<div class="page-header header-filter" data-parallax="true" style="background-image: url('@Model.Blog.Cover')">
76+
<div class="container">
77+
<div class="row">
78+
<div class="col-md-6">
79+
<h1 class="title">@Model.Blog.Title</h1>
80+
<h4>@Model.Blog.Description</h4>
81+
</div>
82+
<div class="col-md-6">
83+
<div class="row" style="padding-top: 40px">
84+
<div class="col-md-5">
85+
&nbsp;
86+
</div>
87+
<div class="col-md-5">
88+
<input type="search" name="txtSearch" id="txtSearch" class="form-control" placeholder="Search...">
89+
</div>
90+
<div class="col-md-2">
91+
<a href="#" class="btn btn-round btn-raised">
92+
<i class="fa fa-search"></i>
93+
</a>
94+
</div>
95+
</div>
96+
</div>
97+
</div>
98+
</div>
99+
</div>
100+
<div class="main main-raised">
101+
102+
<div class="container">
103+
<div class="section text-center">
104+
<div v-for="(post, index) in vm.posts" class="row">
105+
<div class="col-md-8 ml-auto mr-auto">
106+
<h2 class="title">{{post.title}}</h2>
107+
<div class="entry-meta">
108+
<span class="posted-on">
109+
<i class="fa fa-calendar"></i>
110+
<a href="#" rel="bookmark">
111+
<time class="entry-date published" datetime="2019-03-24T17:52:26+00:00">{{getDate(post.published)}}</time>
112+
</a>
113+
</span>
114+
<span class="byline">
115+
<i class="fa fa-user"></i>
116+
<span class="author vcard">
117+
<a class="url fn n" href="#">{{post.author.displayName}}</a>
118+
</span>
119+
</span>
120+
<span v-if="post.categories" class="cat-links">
121+
<i class="fa fa-folder-open-o"></i>
122+
<template v-for="(cat, index) in post.categories.split(',')">
123+
<a href="#" rel="category tag">{{cat}}</a>
124+
</template>
125+
</span>
126+
</div>
127+
<h5 class="description">{{post.description}}</h5>
128+
<img v-bind:src="webRoot + post.cover" class="thumbnail col-sm-12 wp-post-image" alt="">
129+
<a href="#" class="btn btn-round btn-lg" style="margin-top: 25px">
130+
Read More
131+
</a>
132+
</div>
133+
</div>
134+
</div>
135+
</div>
136+
137+
</div>
138+
</div>
139+
140+
141+
<footer class="footer footer-default">
142+
<div class="container">
143+
<nav class="copyright float-left">
144+
@Model.Blog.Title © @DateTime.Now.Year. Powered by <a href="https://github.com/blogifierdotnet/Blogifier" data-toggle="tooltip" target="_blank" title="Version - @AppSettings.Version">Blogifier</a>.
145+
</nav>
146+
<div class="copyright float-right">
147+
Designed with <i class="material-icons">favorite</i> by
148+
<a href="https://www.creative-tim.com" target="_blank">Creative Tim</a>.
149+
</div>
150+
</div>
151+
</footer>
152+
<!-- Core JS Files -->
153+
<script src="~/themes/material/js/core/jquery.min.js" type="text/javascript"></script>
154+
<script src="~/themes/material/js/core/popper.min.js" type="text/javascript"></script>
155+
<script src="~/themes/material/js/core/bootstrap-material-design.min.js" type="text/javascript"></script>
156+
<script src="~/themes/material/js/plugins/moment.min.js"></script>
157+
<!-- Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
158+
<script src="~/themes/material/js/plugins/nouislider.min.js" type="text/javascript"></script>
159+
<!-- Control Center for Material Kit: parallax effects, scripts for the example pages etc -->
160+
<script src="~/themes/material/js/material-kit.js?v=2.0.5" type="text/javascript"></script>
161+
162+
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
163+
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
164+
<script>
165+
var webRoot = '@Url.Content("~/")';
166+
function getDate(date) {
167+
var d = new Date(Date.parse(date));
168+
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
169+
return monthNames[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear();
170+
}
171+
new Vue({
172+
el: "#app",
173+
data: {
174+
vm: {}
175+
},
176+
methods: {
177+
load: function () {
178+
axios.get(webRoot + 'api/posts')
179+
.then(response => {
180+
this.vm = response.data;
181+
})
182+
.catch(function (error) { toastr.error(error); });
183+
}
184+
},
185+
beforeMount() {
186+
this.load()
187+
}
188+
})
189+
</script>
190+
</body>
191+
</html>

0 commit comments

Comments
 (0)