tom/webdev-assignment-2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Properly style creation page

Browse Source
This commit is contained in:
Thomas Wade 2018-10-26 23:03:03 +10:30
parent 77b3111e01
commit f860fceeb6
3 changed files with 109 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
styles/default.css
View File

@ -28,12 +28,23 @@ a
color: #000;
}
input,
textarea
{
background-color: #eee;
}
textarea
{
font-family: Arial, Helvetica, sans-serif;
}
.centreColumn
{
position: relative;
width: 800px;
min-height: calc(100vh - 116px - 100px);
min-height: calc(100vh - 100px - 100px);
margin-right: auto;
margin-left: auto;
padding-top: 100px;
@ -126,7 +137,7 @@ a
.footerContainer
{
width: 100%;
height: 60px;
height: 80px;
}
.centreFooterContainer
@ -215,48 +226,100 @@ a
color: #fffa;
}
.createForm input,
.createForm textarea
{
width: 100%;
}
.createForm .title,
.createForm .author
.createForm .author,
.createForm .titleAuthorSeparator
{
font-size: 18pt;
line-height: 25px;
font-size: 16pt;
line-height: 30px;
display: block;
display: inline-block;
box-sizing: border-box;
width: 100%;
padding-right: 7px;
padding-left: 7px;
border: 0;
}
.createForm .title
{
float: left;
width: calc(70% - 50px);
border-bottom: 5px solid #000;
}
.createForm .author
{
width: 100%;
float: right;
width: 30%;
color: #000;
border-bottom: 5px solid #000;
}
.createForm .titleAuthorSeparator
{
width: 50px;
text-align: center;
}
.createForm .tags
{
font-size: 20pt;
line-height: 25px;
width: 100%;
color: #000;
background-color: #eee;
}
.createForm .content
{
font-size: 12pt;
width: calc(100% - 20px);
height: calc(100vh - 387px - 100px);
min-height: 400px;
margin: 0;
margin-bottom: 10px;
padding: 10px;
resize: vertical;
color: #000;
border: 0;
}
.createForm .submit
.createForm .buttonContainer
{
color: #000;
width: 100%;
height: 60px;
}
.createForm button
{
font-size: 16pt;
font-weight: bold;
display: inline-block;
float: right;
max-width: 100%;
height: calc(100% - 20px);
margin-bottom: 20px;
margin-left: 15px;
padding-right: 15px;
padding-left: 15px;
cursor: pointer;
color: #fff;
border: 0;
background-color: #000;
}

118
styles/ng-tags-input.css
View File

@ -2,6 +2,7 @@ tags-input
{
display: block;
}
tags-input *,
tags-input *:before,
tags-input *:after
@ -10,6 +11,7 @@ tags-input *:after
-moz-box-sizing: border-box;
box-sizing: border-box;
}
tags-input .host
{
position: relative;
@ -17,7 +19,10 @@ tags-input .host
height: 100%;
margin-top: 5px;
margin-bottom: 5px;
border-bottom: 5px solid #000;
}
tags-input .host:active
{
outline: none;
@ -32,14 +37,15 @@ tags-input .tags
cursor: text;
word-wrap: break-word;
/* border: 1px solid darkgray; */
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;
@ -47,6 +53,7 @@ tags-input .tags
-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;
@ -54,9 +61,10 @@ tags-input .tags .tag-list
list-style-type: none;
}
tags-input .tags .tag-item
{
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
font: 16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 25px;
display: inline-block;
@ -73,11 +81,13 @@ tags-input .tags .tag-item
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%); */
}
tags-input .tags .tag-item .remove-button
{
font: bold 16px Arial, sans-serif;
@ -92,127 +102,37 @@ tags-input .tags .tag-item .remove-button
border: none;
background: none;
}
tags-input .tags .tag-item .remove-button:active
{
color: #f00;
}
tags-input .tags .input
{
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
font: 16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
float: left;
height: 26px;
margin: 2px;
padding: 0;
padding-right: 5px;
padding-left: 5px;
border: 0;
/* border-bottom: 5px solid #000; */
outline: none;
}
tags-input .tags .input.invalid-tag
{
color: #f00;
}
tags-input .tags .input::-ms-clear
{
display: none;
}
tags-input.ng-invalid .tags
{
-webkit-box-shadow: 0 0 3px 1px rgba(255, 0, 0, .6);
-moz-box-shadow: 0 0 3px 1px rgba(255, 0, 0, .6);
box-shadow: 0 0 3px 1px rgba(255, 0, 0, .6);
}
tags-input[disabled] .host:focus
{
outline: none;
}
tags-input[disabled] .tags
{
cursor: default;
background-color: #eee;
}
tags-input[disabled] .tags .tag-item
{
opacity: .65;
background: -webkit-linear-gradient(top, #f0f9ff 0%, rgba(203, 235, 255, .75) 47%, rgba(161, 219, 255, .62) 100%);
background: linear-gradient(to bottom, #f0f9ff 0%, rgba(203, 235, 255, .75) 47%, rgba(161, 219, 255, .62) 100%);
}
tags-input[disabled] .tags .tag-item .remove-button
{
cursor: default;
}
tags-input[disabled] .tags .tag-item .remove-button:active
{
color: #585858;
}
tags-input[disabled] .tags .input
{
cursor: default;
background-color: #eee;
}
tags-input .autocomplete
{
position: absolute;
z-index: 999;
width: 100%;
margin-top: 5px;
padding: 5px 0;
border: 1px solid rgba(0, 0, 0, .2);
background-color: #fff;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}
tags-input .autocomplete .suggestion-list
{
position: relative;
overflow-y: auto;
max-height: 280px;
margin: 0;
padding: 0;
list-style-type: none;
}
tags-input .autocomplete .suggestion-item
{
font: 16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
overflow: hidden;
padding: 5px 10px;
cursor: pointer;
white-space: nowrap;
text-overflow: ellipsis;
color: #000;
background-color: #fff;
}
tags-input .autocomplete .suggestion-item.selected
{
color: #fff;
background-color: #0097cf;
}
tags-input .autocomplete .suggestion-item.selected em
{
color: #fff;
background-color: #0097cf;
}
tags-input .autocomplete .suggestion-item em
{
font: normal bold 16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #000;
background-color: #fff;
}
/*# sourceMappingURL=ng-tags-input.css.map */

17
views/create.html
View File

@ -1,8 +1,10 @@
<h1>Create a new post</h1>
<form class="createForm" ng-submit="onSubmit()">
<input type="text" class="title" ng-model="title" placeholder="Title">
<br>
<input type="text" class="author" ng-model="author" placeholder="Author">
<div>
<input type="text" class="title" ng-model="title" placeholder="Title" required>
<span class="titleAuthorSeparator">by</span>
<input type="text" class="author" ng-model="author" placeholder="Author" required>
</div>
<br>
<span><!-- Wrap <tags-input> to avoid weird behaviour with following elements -->
<tags-input
@ -13,10 +15,13 @@
add-on-blur="true"
class="tags"
ng-model="tags"
placeholder="Tags">
placeholder="Add tags">
</span>
<br>
<textarea class="content" ng-model="content" placeholder="Content..."></textarea>
<textarea class="content" ng-model="content" placeholder="Post content.&#13;&#10;Markdown supported!" required></textarea>
<br>
<input class="submit" type="submit">
<div class="buttonContainer">
<button type="submit">Submit</button>
<button type="preview">Preview</button>
</div>
</form>