diff --git a/scripts/app.js b/scripts/app.js
index fce28bc..6cbab94 100644
--- a/scripts/app.js
+++ b/scripts/app.js
@@ -30,6 +30,8 @@ app.controller("create", ["$scope", "$http",
$scope.content = "";
$scope.tags = [];
+ $scope.previewing = false;
+
$scope.onSubmit = function()
{
// Create the post object
@@ -50,15 +52,28 @@ app.controller("create", ["$scope", "$http",
$scope.content = "";
$scope.tags = [];
- // Tell the user that the deed is done *diabolical laughter*
- // alert("Post has been submitted. Thank you!");
+ alert("Post has been submitted.");
}
$scope.onTagAdding = ($tag) =>
{
if (!$tag.text.startsWith("#"))
$tag.text = "#" + $tag.text;
- return true;
+
+ return $scope.tags.indexOf($tag.text) === -1;
+ }
+
+ $scope.onPreview = () =>
+ {
+ $scope.previewing = !$scope.previewing;
+
+ // Update HTML on preview to avoid parsing for each character change
+ $scope.previewHtml = () =>
+ {
+ return $scope.content && $scope.previewing
+ ? marked($scope.content)
+ : "";
+ }
}
}
]);
diff --git a/styles/default.css b/styles/default.css
index ea4323f..01e8356 100644
--- a/styles/default.css
+++ b/styles/default.css
@@ -39,6 +39,23 @@ textarea
font-family: Arial, Helvetica, sans-serif;
}
+button
+{
+ font-weight: bold;
+
+ cursor: pointer;
+
+ color: #fff;
+ background-color: #000;
+}
+
+button:disabled
+{
+ cursor: default;
+
+ background-color: #888;
+}
+
.centreColumn
{
position: relative;
@@ -243,13 +260,23 @@ textarea
border: 0;
}
+.createForm .title,
+.createForm .author
+{
+ border-bottom: 5px solid #0009;
+}
+
+.createForm .title:focus,
+.createForm .author:focus
+{
+ border-bottom: 5px solid #000f;
+}
+
.createForm .title
{
float: left;
width: calc(70% - 50px);
-
- border-bottom: 5px solid #000;
}
.createForm .author
@@ -259,7 +286,6 @@ textarea
width: 30%;
color: #000;
- border-bottom: 5px solid #000;
}
.createForm .titleAuthorSeparator
@@ -279,9 +305,13 @@ textarea
background-color: #eee;
}
-.createForm .content
+.createForm .content,
+.createForm .preview
{
- font-size: 12pt;
+ position: relative;
+
+ display: inline-block;
+ overflow-y: visible;
width: calc(100% - 20px);
height: calc(100vh - 387px - 100px);
@@ -292,10 +322,16 @@ textarea
resize: vertical;
- color: #000;
border: 0;
}
+.createForm .content
+{
+ font-size: 12pt;
+
+ color: #000;
+}
+
.createForm .buttonContainer
{
width: 100%;
@@ -305,7 +341,6 @@ textarea
.createForm button
{
font-size: 16pt;
- font-weight: bold;
display: inline-block;
float: right;
@@ -317,9 +352,11 @@ textarea
padding-right: 15px;
padding-left: 15px;
- cursor: pointer;
-
- color: #fff;
border: 0;
- background-color: #000;
+}
+
+.createForm button.current
+{
+ /* color: #000;
+ background-color: #fff; */
}
diff --git a/styles/ng-tags-input.css b/styles/ng-tags-input.css
index 65e650a..5b6eb06 100644
--- a/styles/ng-tags-input.css
+++ b/styles/ng-tags-input.css
@@ -20,7 +20,12 @@ tags-input .host
margin-top: 5px;
margin-bottom: 5px;
- border-bottom: 5px solid #000;
+ border-bottom: 5px solid #0009;
+}
+
+tags-input .host:focus-within
+{
+ border-bottom: 5px solid #000f;
}
tags-input .host:active
@@ -37,23 +42,13 @@ tags-input .tags
cursor: text;
word-wrap: break-word;
- /* border: 1px solid darkgray; */
background-color: #fff;
- /* box-shadow: 1px 1px 1px 0 lightgray inset; */
-moz-appearance: textfield;
-webkit-appearance: textfield;
}
-/* tags-input .tags.focused
-{
- outline: none;
- -webkit-box-shadow: 0 0 3px 1px rgba(5, 139, 242, .6);
- -moz-box-shadow: 0 0 3px 1px rgba(5, 139, 242, .6);
- box-shadow: 0 0 3px 1px rgba(5, 139, 242, .6);
-} */
-
tags-input .tags .tag-list
{
margin: 0;
@@ -75,17 +70,13 @@ tags-input .tags .tag-item
padding: 0 5px;
color: #fff;
- /* border: 1px solid #acacac; */
- /* border-radius: 3px; */
- /* background: -webkit-linear-gradient(top, #f0f9ff 0%, #cbebff 47%, #a1dbff 100%);
- background: linear-gradient(to bottom, #f0f9ff 0%, #cbebff 47%, #a1dbff 100%); */
background-color: #000;
}
tags-input .tags .tag-item.selected
{
- /* background: -webkit-linear-gradient(top, #febbbb 0%, #fe9090 45%, #ff5c5c 100%);
- background: linear-gradient(to bottom, #febbbb 0%, #fe9090 45%, #ff5c5c 100%); */
+ color: #000;
+ background-color: #fff;
}
tags-input .tags .tag-item .remove-button
@@ -103,9 +94,19 @@ tags-input .tags .tag-item .remove-button
background: none;
}
+tags-input .tags .tag-item.selected .remove-button
+{
+ color: #0008;
+}
+
tags-input .tags .tag-item .remove-button:active
{
- color: #f00;
+ color: #fff;
+}
+
+tags-input .tags .tag-item.selected .remove-button:active
+{
+ color: #000;
}
tags-input .tags .input
@@ -121,7 +122,6 @@ tags-input .tags .input
padding-left: 5px;
border: 0;
- /* border-bottom: 5px solid #000; */
outline: none;
}
diff --git a/views/create.html b/views/create.html
index b3eacc5..6ca1888 100644
--- a/views/create.html
+++ b/views/create.html
@@ -18,10 +18,11 @@
placeholder="Add tags">
-
+
+