I don't even know anymore
Okay so there's a few things going on here: 1. The main page has been split into pieces stored within views/ 2. The nav buttons are working and have a swanky animation to them 3. Some other changes throughout that I've simply lost track of from not committing frequently enough
This commit is contained in:
Thomas Wade
parent
478866631f
commit
0b077ec440
5
data/about.json
Normal file
5
data/about.json
Normal file
@ -0,0 +1,5 @@
|
||||
[
|
||||
"para 1",
|
||||
"para 2",
|
||||
"etc."
|
||||
]
|
||||
6
data/faq.json
Normal file
6
data/faq.json
Normal file
@ -0,0 +1,6 @@
|
||||
[
|
||||
{
|
||||
"question":"What's a 'yeet'?",
|
||||
"answer":"Well you see, Billy..."
|
||||
}
|
||||
]
|
||||
13
data/posts.json
Normal file
13
data/posts.json
Normal file
@ -0,0 +1,13 @@
|
||||
[
|
||||
{
|
||||
"title": "yeet",
|
||||
"author": "tem",
|
||||
"date": 1538830250255,
|
||||
"tags": [
|
||||
"yeet",
|
||||
"yeetbix",
|
||||
"the yeet movement"
|
||||
],
|
||||
"content": "#Title\nText\n- List item 1\n- List item 2"
|
||||
}
|
||||
]
|
||||
31
index.html
31
index.html
@ -1,45 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html ng-app="app">
|
||||
<head>
|
||||
<head ng-controller="head">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="keywords" content="yeet">
|
||||
<meta name="author" content="Thomas Wade">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="styles/default.css">
|
||||
<title ng-controller="header">{{heading}}</title>
|
||||
<title>{{title}}</title>
|
||||
<script src="scripts/angular.min.js" type="application/javascript"></script>
|
||||
<script src="scripts/angular-route.min.js" type="application/javascript"></script>
|
||||
<script src="scripts/app.js" type="application/javascript"></script>
|
||||
<base href="/">
|
||||
</head>
|
||||
<body>
|
||||
<div class="rootContainer">
|
||||
<div class="headerContainer">
|
||||
<div class="centreHeaderContainer">
|
||||
<a href="/" class="titleAndTagline">
|
||||
<span class="title">
|
||||
Lemonblog
|
||||
</span>
|
||||
<span class="tagline">
|
||||
adds zest to your day
|
||||
</span>
|
||||
</a>
|
||||
<div class="navButtons">
|
||||
<a href="/" class="current">Blog</a>
|
||||
<a href="/about">About</a>
|
||||
<a href="/faq">FAQ</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ng-include src="'views/header.html'"></ng-include>
|
||||
<div class="centreColumn">
|
||||
<div class="contentContainer">
|
||||
<ng-view></ng-view>
|
||||
<div class="sidebar">
|
||||
<p>Navigation goes here</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footerContainer">
|
||||
Footer
|
||||
</div>
|
||||
<ng-include src="'views/sidebar.html'"></ng-include>
|
||||
<ng-include src="'views/footer.html'"></ng-include>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@ -1,15 +1,14 @@
|
||||
var app = angular.module("app", ["ngRoute"]);
|
||||
|
||||
app.config(
|
||||
function ($routeProvider, $locationProvider)
|
||||
function ($routeProvider)
|
||||
{
|
||||
$routeProvider
|
||||
.when("/", {templateUrl: "views/blog.html", controller: "blog"})
|
||||
.when("/create", {templateUrl: "views/create.html", controller: "create"})
|
||||
.when("/about", {templateUrl: "views/about.html", controller: "about"})
|
||||
.when("/faq", {templateUrl: "views/faq.html", controller: "faq"})
|
||||
.otherwise("<h1>yeey</h1>");
|
||||
// $locationProvider.html5mode({enabled: true, requireBase: false});
|
||||
.otherwise({templateUrl: "404.html"});
|
||||
}
|
||||
);
|
||||
|
||||
@ -100,54 +99,35 @@ app.controller("faq",
|
||||
]
|
||||
);
|
||||
|
||||
app.controller("navbar",
|
||||
[
|
||||
"$scope",
|
||||
"$location",
|
||||
app.controller("navButtons", ["$scope", "$location",
|
||||
function($scope, $location)
|
||||
{
|
||||
$scope.setNews = function()
|
||||
{
|
||||
$location.path('/');
|
||||
$scope.newsButton = "current";
|
||||
$scope.createButton = "";
|
||||
$scope.aboutButton = "";
|
||||
$scope.loginButton = "";
|
||||
}
|
||||
$scope.setContentCreation = function()
|
||||
{
|
||||
$location.path('/content');
|
||||
$scope.newsButton = "";
|
||||
$scope.createButton = "current";
|
||||
$scope.aboutButton = "";
|
||||
$scope.loginButton = "";
|
||||
}
|
||||
$scope.setAbout = function()
|
||||
{
|
||||
$location.path('/about');
|
||||
$scope.newsButton = "";
|
||||
$scope.createButton = "";
|
||||
$scope.aboutButton = "current";
|
||||
$scope.loginButton = "";
|
||||
}
|
||||
$scope.setLogin = function()
|
||||
{
|
||||
$location.path('/login');
|
||||
$scope.newsButton = "";
|
||||
$scope.createButton = "";
|
||||
$scope.aboutButton = "";
|
||||
$scope.loginButton = "current";
|
||||
}
|
||||
}
|
||||
]
|
||||
);
|
||||
// Set the current relative path
|
||||
// Helpful to set the navButtons appropriately when refreshing
|
||||
$scope.current = $location.path();
|
||||
|
||||
app.controller("header",
|
||||
// Changes location to the given target and sets the current path
|
||||
$scope.navClick = (target) =>
|
||||
{
|
||||
$location.path(target);
|
||||
$scope.current = target;
|
||||
}
|
||||
|
||||
// Applies the 'current' class if the target matches the current path
|
||||
$scope.isCurrent = (target) =>
|
||||
{
|
||||
return $scope.current == target ? "current" : "";
|
||||
}
|
||||
}
|
||||
]);
|
||||
|
||||
// <head>-specific functionality
|
||||
app.controller("head",
|
||||
[
|
||||
"$scope",
|
||||
function($scope)
|
||||
{
|
||||
$scope.heading = "Lemonblog";
|
||||
$scope.title = "Lemonblog";
|
||||
}
|
||||
]
|
||||
);
|
||||
|
||||
@ -6,10 +6,10 @@ var app = express();
|
||||
|
||||
app.use(express.static("./")); // Serve static files from root
|
||||
app.use(express.json()); // Parse JSON in requests
|
||||
app.use("/", (req, res, next) => // Finally send a 404 page
|
||||
{
|
||||
res.status(404).sendFile("404.html", {"root": "./"});
|
||||
});
|
||||
// app.use("/", (req, res, next) => // Finally send a 404 page
|
||||
// {
|
||||
// res.status(404).sendFile("404.html", {"root": "./"});
|
||||
// });
|
||||
|
||||
// Root route, respond with with index.html
|
||||
app.get("/", function(req, res) {
|
||||
|
||||
@ -11,6 +11,7 @@ body,
|
||||
|
||||
position: relative;
|
||||
|
||||
height: 100%; /* y tho */
|
||||
margin: 0; /* Override the default page border */
|
||||
padding: 0;
|
||||
|
||||
@ -104,6 +105,7 @@ a
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
|
||||
transition: box-shadow .2s ease;
|
||||
text-align: center;
|
||||
|
||||
color: #fff;
|
||||
@ -112,8 +114,11 @@ a
|
||||
.navButtons a.current
|
||||
{
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
box-shadow: inset 0 -10px 0 0 #000; /* Box shadow hack to get an inset border */
|
||||
box-shadow: inset 0 60px 0 0 #fff; /* Box shadow hack to get an inset border */
|
||||
}
|
||||
.navButtons a:hover:not(.current)
|
||||
{
|
||||
box-shadow: inset 0 10px 0 0 #fff;
|
||||
}
|
||||
|
||||
.footerContainer
|
||||
|
||||
2
views/about.html
Normal file
2
views/about.html
Normal file
@ -0,0 +1,2 @@
|
||||
<h1>This is some about text</h1>
|
||||
<p>This will be replaced in the near future with something a touch more meaningful. In the meantime, though, enjoy some Lorem Ipsum courtesy of <a href="https://lipsum.com">https://lipsum.com</a>.</p>
|
||||
3
views/footer.html
Normal file
3
views/footer.html
Normal file
@ -0,0 +1,3 @@
|
||||
<div class="footerContainer">
|
||||
Footer
|
||||
</div>
|
||||
13
views/header.html
Normal file
13
views/header.html
Normal file
@ -0,0 +1,13 @@
|
||||
<div class="headerContainer">
|
||||
<div class="centreHeaderContainer">
|
||||
<a href="/" class="titleAndTagline">
|
||||
<span class="title">
|
||||
Lemonblog
|
||||
</span>
|
||||
<span class="tagline">
|
||||
adds zest to your day
|
||||
</span>
|
||||
</a>
|
||||
<ng-include src="'views/navbuttons.html'"></ng-include>
|
||||
</div>
|
||||
</div>
|
||||
5
views/navbuttons.html
Normal file
5
views/navbuttons.html
Normal file
@ -0,0 +1,5 @@
|
||||
<div class="navButtons" ng-controller="navButtons">
|
||||
<a ng-click="navClick('/')" ng-class="isCurrent('/')">Blog</a>
|
||||
<a ng-click="navClick('/about')" ng-class="isCurrent('/about')">About</a>
|
||||
<a ng-click="navClick('/faq')" ng-class="isCurrent('/faq')">FAQ</a>
|
||||
</div>
|
||||
3
views/sidebar.html
Normal file
3
views/sidebar.html
Normal file
@ -0,0 +1,3 @@
|
||||
<div class="sidebar">
|
||||
<p>Navigation goes here</p>
|
||||
</div>
|
||||
Loading…
x
Reference in New Issue
Block a user